HP Production Reference
2026
REFERENCE LIBRARY · 2026
TERASU LAB
— 12 SITES
01
Web Layout Patterns
Webレイアウトパターン + Claude指示テンプレート集
34 patterns
プリローダー
構造
FV
ナビ
+11カテゴリ
02
Animation Patterns
アニメーションパターン + Claude指示テンプレート集
32 patterns
出現
注意喚起
連続
文字
+7カテゴリ
03
Web Font Library
HP制作のためのWebフォント図鑑
47 fonts
英字
日本語
組み合わせ
Claudeに指示ボタン
04
Color Library
全色集 + 配色集
335 items
カラースケール51
配色284
HEXコピー
05
Reference Sites
HP制作の参考サイト集（業種別・コメント付き）
49 sites
BtoB・コンサル
建築・不動産
美容・サロン
飲食
宿泊
+5業種
06
Portfolio
TERASU 制作実績
10 projects
TERASU
SCALE
建築デモ
07
Glossary
HP制作用語集（クライアント説明＋社内ナレッジ用）
138 terms
基本構造
デザインUI
アニメ
SEO解析
+4カテゴリ
08
CTA Patterns
CTAパターン集（ボタン・セクション・文言・エフェクト + 指示プロンプト + お気に入り）
45 patterns
Buttons
Sections
Copy
Effects
09
参考パーツ集
部位別に参考HPを整理（1サイトを複数カテゴリにタグ付け可）
7 categories
レイアウトデザイン
プリローダー
動き
FV
配色
ナビ・フッター
10
セクション
いいと思ったサイトのセクションをスクショで収集（リンク＋メモ付き）
スクショ集
セクション単位
リンク
メモ
11
動き
動きが良いサイトをサムネ付きで丸ごとブックマーク（リンク＋メモ付き）
サムネ集
サイト全体
自動サムネ
リンク
メモ
12
推しページ
「このページが特にいい！」という1ページをサムネ付きでブックマーク（リンク＋メモ付き）
サムネ集
ページ単位
自動サムネ
リンク
メモ