HP Production Reference 2026
REFERENCE LIBRARY · 2026

HP制作のための
リファレンス集

Webサイト制作で実際に使える、レイアウト / アニメ / フォント / 配色 / 参考HP / 制作実績 / 用語集 / CTA / 参考パーツ / 参考ページ のリファレンス10サイト。すべてClaudeへの指示プロンプトつきで、AIと一緒にサイトを作る時の「ことばの辞書」になります。

10
SITES
694
PATTERNS
100%
JAPANESE
∞
FAVORITES
— 10 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制作の参考サイト集（業種別・コメント付き）
22 sites BtoB・コンサル 建築・不動産 美容・サロン 飲食 宿泊 +5業種
06
Portfolio
TERASU 制作実績
5 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
参考ページ集
ページ全体・1枚通しての完成度で選んだ参考HP集（カテゴリなし・フラット）
1 pages ページ全体 カテゴリなし フラット

USAGE

各サイトに お気に入り機能 がついており、気に入ったパターンを保存できます。お気に入りはサイトごとに別管理(localStorage)で、ブラウザを閉じても残ります。

WORKFLOW

このリファレンスから「使いたいパターン」を見つけ、Copyボタンで指示プロンプトを取得 → Claudeに貼り付けてサイトを生成 → 完成。「あれ何だっけ」をなくすチートシート。