website

Web Design Skill

---

デザインの眼（このスキルが体現する美意識）

これはテクニックの話ではありません。このスキルが応えるすべてのプロンプトの根底にある基準についてです。コードに触れる前に、この基準を身につけてください。

核となる要求：リアルに感じられること

この美意識に最も一貫して表れているのは、物理法則です。ユーザーが何かを「しっくりこない」と言うとき、その原因はたいてい、要素が貼り付けられたように見えたり、浮いていたり、周囲の環境から切り離されていたりすることです。うまくいっているときは、物理的な言葉で表現されます。

「実際に物理法則が働いているように見える」 「背景とつながっているように自然に突き出している」 「影を使って背景に打ち込まれている」 「これらの画像をウェブサイトになじませる」 「背景から優雅に移行させる」

実際にはどういうことか：すべての要素が周囲のものと関係を持つ必要があります。画像カードは背景の上に置かれるのではなく、背景から 生まれてくる ものです。影は装飾ではなく、その要素が表面に なじんでいる ことを示します。見たときに「そこに置かれた」と感じるなら、それは間違いです。そこに 生えてきた ように見えるなら、それが正解です。

基準：圧倒的な存在感

映画監督がショットを考えるように、ウェブサイトを考えてください。見る人の心をつかむか、つかめないかです。この基準に沿ったフィードバックは、次のようなものです。

「ここでは人々に強い印象を与えなければなりません。敬意と権威、そして注目を集める必要があります」 「見る人の心をすぐにつかむ」 「もっと印象的に、ミッションに欠かせないものだと伝える」 「敬意を集められるよう、デザインを格上げする」

実際にはどういうことか：受け身で情報を伝えるだけのデザインは、常に間違いです。すべてのセクションは、見る人の感情を前に進めるか、削除するかのどちらかです。ただ「そこにある」だけなら、スペースの無駄です。基準は「見た目は大丈夫か」ではなく、「注目せずにはいられないか」です。

問題の表現方法

ユーザーは問題を正確に名付け、具体的な言葉を使います。「見た目が悪い」ではなく、フィードバックでは次のように表現されます。

「心が折れる」（構図を損なう視覚的なノイズやグラデーションの途切れ） 「少し雑なグラデーション」 「奇妙で、つながりがない」 「なんだか平凡」 「本当に無機質な感じ」 「ランダムなボックスが出てくる」 「色の境目がはっきりしすぎている」 「ピクセル化」

注目すべき点：ユーザーが「無機質」と言ったら、温かみや奥行き、生命感を加えてください。「つながりがない」と言ったら、要素を周囲になじませる必要があります。「心が折れる」と言ったら、修正すべき特定の継ぎ目やノイズ、途切れを探し出してください。「平凡」と言ったら、階層が平坦です。規模や色、動きによって、何かを劇的に引き立てる必要があります。

方向性の伝え方

方向性はほとんどの場合、視覚的かつ物理的に表現され、技術的な説明はあまりありません。

「構造に沿って動く、輪郭のくっきりした、シャープな発光アニメーション」 「中を光のグラデーションが流れる」 「輪郭に沿ってほのかに動くグラデーション」 「途切れのないつながり」 「シームレスに流れる」 「右上の角の雰囲気」

意味するところ：視覚的な説明を、できる限り正確な技術的実装に落とし込んでください。「シャープ」とは、輪郭がはっきりしてコントラストが高く、ぼやけていないことです。「流れる」とは、明確な方向と速度を持つアニメーションのことです。「シームレス」とは、つなぎ合わせる両方の面と色を共有するグラデーションのことです。確認を求めず、最善の解釈で実装して見せてください。

決して妥協しない基準

• 「まあまあ」は終わりの合図ではありません。 ユーザーが「いいね」や「良い」と言うとき、すでに次のことを考えています。勢いを保ってください。
• 「これで十分」は認められません。 Tydra のページでは、ほとんどのデザイナーならそのまま公開していたような点も、何度も修正されました。上部に残った90pxの無駄な余白も、わずかに色が合わないグラデーションも、一貫性のないモバイルナビゲーションも、見逃されませんでした。
• 要件は一度だけ伝えられます。 何かを見落としたら、修正の指示が入ると考えてください。ビジョン全体をもう一度説明されるのを待つのではなく、指示のたびに学んでください。

改善のパターン

このテイストプロファイルにおけるフィードバックは、ほぼ常に次の流れをたどります。

1. 問題を特定する（具体的で、名称があり、視覚的）：「あのグラデーションの処理が雑です」
2. 感情を示す（どれほど違和感があるか）：「胸が痛むようです」
3. 視覚的な方向性を示す（どんな印象にすべきか）：「シームレスにつながるようにすべきです」
4. 暗黙の期待：中途半端に直さず、完全に修正する

改善は段階的に進みます。1回目は構造を整えます。2回目は統合を整えます。3回目は動きを整えます。4回目はコピーを整えます。各回で品質の層が加わります。すべての層を一度に仕上げようとせず、その時点で注目されている部分に対応してください。

事前チェックリスト：次のプロンプトを先読みする

何かを見せる前に、自分に問いかけてください。

1. すべての要素が、その表面に自然になじんでいますか？（物理性）
2. このページに、注意を引きつける瞬間はありますか？（存在感）
3. 配置しただけ、貼り付けただけ、または他と切り離されて見えるものはありませんか？（統合）
4. 目的もなくループするアニメーションはありませんか？（動きの規律）
5. 存在意義のないデッドスペースはありませんか？（効率）
6. コピーは、ウェブサイトではなく実在の人が話しているように聞こえますか？（語り口）

答えが「いいえ」または「わかりません」なら、見せる前に修正してください。ユーザーは必ず気づきます。

テイストを一文で表すと

上質で、実体があり、細部まで作り込まれていること。すべての視覚的な選択に、複雑だからではなく、細部へのこだわりが揺るぎないからこそ、巧みに仕上げられたという印象が必要です。

アプリとインタラクションのデザイン原則（2025年4月のコースプラットフォーム構築より）

これらはランディングページだけでなく、プロダクト UI、コースプラットフォーム、インタラクティブな体験にも当てはまります。

1. 野心より実行力を。 滑らかなシンプルなアニメーションは、ぎこちない複雑なアニメーションに勝ります。60fpsで動作できないなら、規模を抑えてください。アニメーション化するのはtransformとopacityだけにしてください。

2. 創造的な緊張感こそがコンセプトです。 対照的な美学（アナログの本＋レトロデジタル）を融合させるときは、厳格なルールを設けます。「本の世界」にはセリフ体、「機械の世界」にはピクセルフォントを使い、同じ要素では決して混ぜません。この規律そのものがデザインです。

3. 重複する手順をなくす。 プレビューと遷移先に同じ情報が表示されるなら、統合してください。体験にたどり着くまでの経路は最短にします。不要な画面はすべて、離脱のきっかけになります。

4. 実際の行動を想定してデザインする。 技術に詳しくなく、戸惑いを感じるユーザーを対象とする場合は、段階的な情報開示（一度に1つのセクション）、時間に応じたコンテンツの表示（読書時間に合わせて段落を表示）、手動での開始（「読書を始める」ボタン）を取り入れ、体験のペースを整えます。テキストの壁は、ユーザーの関心を失わせます。

5. 装飾より機能的な配置を。 「読書を始める」ボタンは左揃えにします。読書はそこから始まるからです。配置は対称性ではなく、目的に従うべきです。

6. 遷移の継ぎ目はバグです。 すべての状態変化が自然につながる必要があります。ボタンがフェードアウトし、空間が縮まり、コンテンツがせり上がるまでを、連続したひとつの動きとして見せます。急なカット、ポップ、ジャンプは避けます。

7. フィードバックは明確でなければなりません。 ローディング中のドットは大きく、発光し、アニメーションするようにします。ユーザーがさりげない合図を読み取れないことを前提にしてください。巧妙さより明確さを。迷ったら、もっと大きくしてください。

8. ピクセル単位で空間を意識する。 配置のずれはすぐに見つかります。提示する前に、中央揃え、パディングの左右対称性、軸の整列を必ず確認してください。

環境デザインの原則（コミュニティチャットの再設計から、2026年4月）

これらの原則は、チャットセクションの再設計に関する3,000語のデザインブリーフから生まれました。最も深いレベルで機能し、まず場所を定義してから、そこからコンポーネントを導き出します。

9. 画面ではなく、場所をデザインします。 判断基準は、「新しいユーザーに、別のタブを開いたと感じさせるのではなく、新しい世界に足を踏み入れたと感じさせるか」です。セクションをデザインする前に、それが表す場所を定義します。時間帯、光源、素材、雰囲気を決め、その定義からすべての視覚的な判断を導き出します。

10. 背景をレイヤーで構築します。 背景は単色ではなく、合成レイヤーの積み重ねです。ブリーフでは、背景に5つの明示的なレイヤーを指定しました。ベースカラー → 粒子テクスチャ → ビネット → アンビエントグロー → スキャンラインのオーバーレイです。それぞれのレイヤーには名前の付いた目的と具体的な不透明度があります。深みは、気の利いたグラデーションひとつではなく、積み重ねによって生まれます。

11. フォントの使い分けは情報設計です。 セリフ体フォント＝人間の発話（名前、本文、説明）。ピクセルフォント＝システムの状態（件数、タイムスタンプ、ステータス、プレースホルダー）。この2つのフォントを同じテキスト要素に使うことはありません。両者のコントラストこそがブランドです。これは命名にも及びます。// SCHOLARS ONLINE のダブルスラッシュは、「システムが話している」ことを示します。

12. 物理的な比喩は仕様です。 「机の上に置かれたメモカード」という指示には、表面よりわずかに明るい色、控えめな影、温かみのある質感、限られたサイズ、触れられそうな縁が含意されます。「書類に押されたスタンプ」という指示には、押し込まれたような見た目、重厚感、鮮明な印影が含意されます。比喩に含まれる視覚的な特性をすべて洗い出し、それぞれを実装します。

13. 世界の内側から名前を付けます。 「オンラインのプレイヤー」→「SCHOLARS ONLINE」。プレースホルダーテキストは、ダブルスラッシュ付きの // TYPE YOUR MESSAGE... にします。タイムスタンプは APR 5 // 14:32 にします。UIラベルはすべて、世界観を強めるか、壊すかのどちらかです。細かな命名の選択が50個積み重なることで、「アプリ」と「場所」の違いが生まれます。

14. まずシーンを照らします。 背景が、その上にあるすべての要素を決定します。テキストのコントラスト、カードの色、グローの強度、アニメーションの明るさは背景によって制約されるため、背景は非常に細かく指定します。想定される光源を定義し、そこから前景色をすべて導き出します。それぞれを独立して選んではいけません。

15. 機能の状態より感情の状態を優先します。 空の状態は「メッセージがありません」ではありません。ピクセルアートの本と // NO MESSAGES YET. SAY HELLO. を表示します。読み込み中はスピナーではなく、ピクセルフォントで Loading messages... と表示しながら Byte が考えている様子を表します。すべてのUI状態に感情面の意図があります。まず感じさせたいことをデザインし、その後に機能を考えます。

16. 計算された非対称性で視線を導きます。 アクティブな状態は全面的なハイライトではなく、左側のボーダーで示します。装飾的な区切り線は、中央にダイヤモンドを置き、線を左右に向かって徐々に薄くします。左右対称のハイライトではなく、視覚的な重みの方向性を使って、読み進める経路と階層を作ります。

---

tydra.netlify.app とコースプラットフォームのデザインをゼロから進めたプロセスから生まれました。これらは汎用的なベストプラクティスではなく、実際に成果を上げた改善前後の事例から抽出した原則です。

---

基本プロセス

コードを1行でも書く前に、次の4つの質問に答えます。

1. このプロダクトは何ですか？（物理的または機能的に、どのようなものですか？）
2. どのような問題を解決しますか？（これが存在する前は、何がうまくいっていませんでしたか？）
3. 購入者は誰ですか？（創業者ですか？エンジニアですか？消費者ですか？）
4. セクション3に到達するまでに、訪問者にどのような気持ちになってほしいですか？（好奇心ですか？切迫感ですか？信頼感ですか？）

答えによって、カラーパレット、動きのスタイル、タイポグラフィ、コピーのトーンが決まります。省略しないでください。

---

ナラティブ構成

ランディングページは、各幕から成る物語です。各セクションは情報の羅列ではなく、物語のひと区切りです。

第1幕 — フック（ヒーロー）：何についてのページなのかを伝え、視覚的に印象づけます。文は最大1文です。 第2幕 — 問題（なぜ重要なのか）：これまで何が間違っていたのかを示します。箇条書きではなく、感情に訴えます。核心となるメッセージは、言葉になる前に伝わるようにします（シンボル、色、規模）。 第3幕 — 裏付け（統計／素材／科学）：主張の根拠となる現実のものを示します。抽象的な表現ではなく、廃棄物の山を見せます。 第4幕 — 解決策（製品）：それが何であるかではなく、何をするかを示します。実用的なコピーにします。マーケティング用語は使いません。 第5幕 — 信頼（人物／実績）：実在の人々と実際の受賞歴を示します。簡潔にします。 第6幕 — 行動（ニュースレター／CTA）：求める行動は1つだけにします。プレミアム感のある見せ方にします。

スクロールの順序は論旨の順序です。論旨が成り立たなければ、レイアウトは重要ではありません。

---

色を言語として使う

色は装飾ではなく、意味を持ちます。16進カラーコードを割り当てる前に、色の役割を定めます。

役割	色	使用場面
誤り／問題	赤／テラコッタ（rgba(210,90,65)）	取り消し線、問題の状態、「変更前」
解決策／ブランド	ティール（#25c9b0 または類似色）	CTA、成果、ブランドマーク
プレミアム／明るさ	温かみのあるアイボリー（#f5f0e8）	読み物のセクション、暗色からのコントラスト
奥行き／暗さ	ほぼ黒に近いインク色（#0d1117 または温かみのある色調）	ヒーロー、暗いセクション、フッター
自然／温かみ	アンバー（rgba(194,152,98)）	人物、温かみを感じる場面

すべてのファイルの先頭に CSS 変数システムを構築します：

:root {
  --ink: #0e1117;
  --cream: #f5f0e8;
  --cream-dark: #e8e0d0;
  --teal-glow: #25c9b0;
  --terracotta: rgba(210,90,65,1);
}

デザイン内のすべての色は、いずれかの変数に紐づけます。個別の16進カラーコードは使いません。

---

タイポグラフィの階層

4つの書体に4つの役割を割り当てます。これ以外の組み合わせは避けます。

• Playfair Display（または同等のディスプレイ用セリフ体）：ブランドの語り口、感情の高まり、ヒーローの見出し
• 等幅フォント（例：font-family: monospace）：ラベル、統計、技術的な精密さ、セクション番号
• セリフ体のイタリック：引用、温かみを感じる場面、創業者の語り口
• システムのサンセリフ体：本文、読みやすさ、UI

物語としてのスケール：サイズは単なる階層ではなく、強調を表します。成果を示す一文を印象づけたいときは、思い切って大きくします（暗い背景にティールの Playfair で92px）。小さな文字はささやき、大きな文字は強く語りかけます。その差を意図的に活用します。

ラベルの規則：セクションラベルには、小さな大文字の等幅フォントを使います：

<p class="s-label">05 — Why it works</p>
<h2 class="s-title">Six reasons chitin wins.</h2>

---

モーションの原則

ルール1：登場アニメーションは一度だけ実行します。 IntersectionObserver を使って、要素がビューポートに入ったときに .reveal クラスを適用します。発火後はオブザーバーを切断します。ループさせません。

ルール2：常時モーションはゆっくり、控えめにします。 ブロブ、きらめきのスイープ、浮遊するラベルなどはループさせますが、時間は3～8秒、振幅は小さくします。呼吸するように動かし、目立たせません。

ルール3：段階的な表示＝テンポ＝ストーリーテリングです。 複数の要素を順番に表示するときは、0.1～0.2秒ずつ間隔を空けます。これにより、リストが情報の羅列ではなく、対話のように読めます。

ルール4：モーションには意味を持たせます。

• 上方向へのロール（数字がカウントアップする）：成長、増加
• フェードイン＋Y方向への移動：到着、出現
• 完了時のスケールパルス：満足、確認
• 水平方向のきらめき：洗練、高級感

ルール5：迷ったら、取り除きます。 Tydra の見出しに使われた水面の波紋は、技術的には印象的でした。しかし、やりすぎでもありました。コンテンツと注意を奪い合うものはすべて取り除きます。

表示システム（基本 CSS＋JS）：

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity: 1; transform: none; }
.d1 { transition-delay: 0.1s; }
.d2 { transition-delay: 0.2s; }
.d3 { transition-delay: 0.3s; }
.d4 { transition-delay: 0.4s; }

const observer = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      e.target.classList.add('visible');
      observer.unobserve(e.target);
    }
  });
}, { threshold: 0.15 });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

---

セクション間の切り替え：視覚的ではなく、物理的に

グラデーションの問題点：デザインされた見た目になります。ユーザーには境目が感じられます。

解決策：影を付けたカードの縁を使います。

/* Section that casts shadow over the next */
.dark-section {
  border-radius: 0 0 52px 52px;
  box-shadow: 0 40px 80px rgba(0,0,0,0.4), 0 20px 40px rgba(0,0,0,0.3);
  position: relative;
  z-index: 2;
}

/* Section that slides underneath */
.light-section {
  border-radius: 52px 52px 0 0;
  margin-top: -52px;
  position: relative;
  z-index: 1;
}

2つのカーブが合わさり、影が奥行きを感じさせます。グラデーションは不要です。視覚的な論理は物理的です。1枚のカードがもう1枚の上に載っているように見せます。

ルール：暗いセクション同士は処理を加えず、平らにつなげます。明るいセクションは、それぞれ独立した浮き上がったカードにします。

グーイーなアンビエントブロブ（有機的なモーション背景）

プレミアムな製品やバイオテクノロジーの訴求に使用します。生物的・有機的なビジュアルを、直接的な表現に頼らずに作成できます。

<svg style="position:absolute;width:0;height:0">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="40" result="blur"/>
      <feColorMatrix in="blur" mode="matrix"
        values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo"/>
    </filter>
  </defs>
</svg>

.blobs-container {
  position: absolute; inset: 0;
  filter: url(#goo);
  overflow: hidden;
  pointer-events: none;
}
.blob {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: hard-light;
  opacity: 0.7;
}

moveInCircle、moveVertical、moveHorizontal のキーフレームを使い、15～25 秒の長さでブロブをアニメーションさせます。インタラクティブ性を加えるには、イージングを適用して遅れて追従する、マウスに連動するブロブを 1 つ追加します。

重要：ブロブの縁にピクセル化が見られる場合は、フィルターから feColorMatrix を削除し、ぼかしのみを使用してください（feGaussianBlur 単体）。合成効果は弱まりますが、縁はきれいに保たれます。

---

問題提起セクションのパターン

Tydra のページで最も効果的なセクションです。機能していないものを置き換える、あらゆる製品に使えます。

構成：

1. 大きな透かし文字（×、！、または視覚的なシンボル）を、レイヤー状のシャドウと不透明度 0.07 で配置します
2. 何が問題だったのかを示す行を並べます。テラコッタ色や赤色で、単語に取り消し線を引きます
3. 表示用セリフ体で大きく（80～100px）、ティール色の決めの一文を置き、解決策へと話題を転換します
4. 各行の表示を 1 秒ずつずらします（同時に表示しません）
5. 必要に応じてスクロールスナップを使い、一連の表示が終わるまでこのセクションにビューポートを固定します

.problem-watermark {
  font-size: clamp(220px, 35vw, 400px);
  opacity: 0.07;
  text-shadow:
    2px 2px 0 rgba(80,30,10,0.6),
    -2px -2px 0 rgba(80,30,10,0.4),
    0 0 180px rgba(20,80,80,0.3);
}
.strike { color: var(--terracotta); text-decoration: line-through; }
.payoff { font-family: 'Playfair Display', serif; font-size: clamp(48px,7vw,92px); color: var(--teal-glow); }

---

ニューモーフィックカード（統計、機能、データ向け）

カードの背景色をもとにシャドウの色を導きます。シャドウの色はすべてベースカラーから 15％ずらし、任意のグレーは使いません。

.neu-card {
  background: var(--cream);
  border-radius: 24px;
  box-shadow:
    8px 8px 20px #c0b9ae,   /* 15% darker than --cream */
    -8px -8px 20px #ffffff; /* lighter */
  padding: 40px;
}

カード内に画像の背景を使う場合は、透明からカードの色へ変化するグラデーションオーバーレイを使用します。画像が境界で唐突に切れるのではなく、表面に溶け込むようにします。

---

画像の処理

ルール：画像には硬い境界線ではなく、グラデーションによるフェードアウトが必要です。

.image-card {
  position: relative;
  overflow: hidden;
}
.image-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--ink) 0%, transparent 60%);
}

人物写真では、background-size と background-position を調整して、気が散る背景を切り取ります。background-size: 150–180% を使い、ヘッダーや UI が見えないように拡大します。配色に合わせた境界線を加え、全体のパレットにつなげます。

ホバー時には、0.5 秒かけて 1.05 倍に微拡大します（transform: scale(1.05)）。控えめにします。

---

コピーの原則

• 専門用語より平易な英語：「高含有量のバイオポリマー基材」ではなく「木材に次いで最も一般的な天然素材」
• 短い文：8～12 語を目安にします。声に出して読みます。息が続かないなら短くします。
• 実用的な具体性：「あらかじめ水和されており、すぐに導入できます。新たな設備は不要です。」これは機能を形容する言葉ではなく、実際の主張です。
• 一行で伝える感情的な言葉：「もうそんなことはありません。」「科学の先を行きましょう。」短いからこそ響きます。
• ラベルで枠組みを示す：見出しの前に小さな等幅ラベルを置き、ユーザーが情報をどのカテゴリーに入れるべきか伝えます。
• フッターの引用文：プレミアムなページはすべて、哲学的な一文で締めくくります。陳腐な言い回しではなく、内容に見合った言葉にします。
• ファイルに書き込む前に、公開するすべてのコピーにヒューマナイザーのスキルを適用します。

---

UI/UX の基本（クイックリファレンス）

タイポグラフィの調整

すべての見出しの字間を -0.02em～-0.03em に詰め、行の高さを 1.1～1.2 に下げます。この調整だけで、大きなテキストはすぐにプロらしく見えます。本文は通常の字間を保ち、行の高さは 1.5～1.6 にします。

アイコンのサイズ

アイコンは、隣接するテキストの行の高さに合わせます。フォントの行の高さが 24px なら、アイコンも 24px にします。大きすぎるアイコンは、素人っぽく見える最も一般的な要因です。

ボタンの基本

• パディングの比率：水平方向のパディングは垂直方向の 2 倍にします（例：12px 24px）
• 必須の 4 つの状態：デフォルト、ホバー、アクティブ／押下、無効。必要に応じて読み込み中（スピナー）も加えます。
• ゴーストボタン：背景はなく、テキストと任意の境界線だけを表示します。ホバー時に背景を表示します。塗りつぶしのプライマリボタンの隣に、セカンダリ CTA として使用します。

入力状態

すべての入力欄には、デフォルト、フォーカス（ブランドカラーの境界線）、エラー（赤い境界線と下部のメッセージ）、および任意で警告の状態が必要です。状態が不足していると、フォームが壊れているように感じられます。

適切なシャドウ

シャドウが最初に目に入るなら、強すぎます。不透明度を下げ、ぼかしを強めます。同じ階層の背景にあるカードには控えめなシャドウを使い、コンテンツの上に浮かぶポップオーバーやドロップダウンには、より強いシャドウを使います。

ダークモードのルール

• 奥行きを出すためにボックスシャドウは使わず、ページの背景より明るいカード背景を使います
• 枠線のコントラストを下げます（暗い背景に明るい枠線を使うと強すぎます）
• チップやバッジの彩度と明るさを抑え、中のテキストは明るくします
• 深い紫、赤、緑を活用し、安易にグレーやネイビーに頼らないでください

セマンティックカラー

青は信頼、赤は危険や緊急性、黄色は警告、緑は成功を表します。色は装飾ではなく、目的に応じて使います。緑のチップは「新着」や「成功」を意味します。見た目がよいというだけで緑を使わないでください。

1つのプライマリーカラーからカラーパレットを作る

ブランドカラーを起点にします。背景には明るくした色、テキストには暗くした色を使います。これだけで、場当たり的にセカンダリーカラーを選ばなくても、カラーシステムの半分は整います。

マイクロインタラクション

ユーザーのすべての操作に、目に見える反応が必要です。コピーボタン → 確認チップがスライドして表示される。フォーム送信 → 成功状態になる。切り替え → 滑らかに遷移する。ユーザーが何かを操作しても目に見える変化がなければ、UI は壊れています。

テキストを読みやすくする画像オーバーレイ

基本から高品質なものまで、次の3つの方法があります。

1. 画面全体に半透明のオーバーレイを重ねます（機能しますが、画像が隠れます）
2. 透明から背景色へ変化する線形グラデーションを使います（画像を見せながら、読みやすくします）
3. グラデーションの上に段階的なぼかしを加えます（現代的で高品質な印象になります）

レスポンシブグリッドのガイドライン

構造化された反復コンテンツ（ギャラリー、ブログのグリッド、カードレイアウト）では、デスクトップは12列、タブレットは8列、モバイルは4列にします。独自性のあるセクションやストーリー性のあるセクションは、列グリッドに従う必要はありません。配置よりも余白と視覚的な重みが重要です。

---

避けるべきこと

単体では印象的に見えても、ページの質を下げるものは次のとおりです。

• テキストへの水面の波紋や複雑な SVG 変形：やりすぎです。注意をそらします。
• 数値を延々と増加させること：表示時に一度だけアニメーションさせ、その後は止めます。無限にカウントし続けないでください。
• ナビゲーションの色の自動判定（セクションに応じて明暗を切り替えること）：認知的不協和を生みます。ナビゲーションのスタイルを1つ選び、統一してください。
• セクション間のグラデーションによるつなぎ：カードの境界やシャドウに置き換えます。
• 複数の要素を同時に表示すること：必ず時間差をつけてください。
• グーイーフィルターでピクセル化が発生する場合の Color Matrix：ぼかしだけを使います。
• カルーセル：可能な限り、画面いっぱいに表示する静的なカードに置き換えます。
• 汎用的なプロモーション用 CTA：それぞれの CTA は、そのセクションの内容に即したものにします。

---

デプロイ（API 経由の Netlify）

# Deploy single HTML + images to Netlify without CLI
NETLIFY_TOKEN="your-token"
SITE_ID="your-site-id"

# Create zip, deploy via API
zip -j deploy.zip index.html image1.jpg image2.jpg
curl -X POST "https://api.netlify.com/api/v1/sites/$SITE_ID/deploys" \
  -H "Authorization: Bearer $NETLIFY_TOKEN" \
  -H "Content-Type: application/zip" \
  --data-binary @deploy.zip

HTML のみをデプロイする場合は、Netlify Files API を使い、SHA によって個々のファイルを PUT します。

1. 各ファイルのハッシュを計算します
2. デプロイマニフェストを POST します
3. Netlify にまだ存在しないファイルを PUT します
4. 必要なファイルがすべてアップロードされると、デプロイが自動的に公開されます

---

ウェブサイト構築の完全チェックリスト

複数ページのサイトを構築する場合は、必ず次の項目を順番に確認してください。該当しない項目は省略できますが、それぞれ確認を行ってください。

フェーズ 1：基盤

1. 要件の把握 — このビジネスは何か。誰がサイトを訪れるのか。訪問者にどのような気持ちになってほしいか、どのような行動を取ってほしいか。
2. デザインシステム — UI/UX Pro Max --design-system を実行して、カラーパレット、タイポグラフィ、スタイルを決めます
3. CSS 変数 — 色、シャドウ、角丸、余白はすべてカスタムプロパティにします。個別の16進数カラーコードは一切使いません。
4. タイポグラフィ — Google Fonts を読み込みます。見出し用フォント、本文用フォント、ラベルや統計用の等幅フォントを指定します。フォントファミリーは最大3種類です。
5. 基本スタイル — Reset、body、img、a、button のデフォルトを設定します。表示アニメーションシステム（.reveal、.d1～.d6）を用意します。

フェーズ 2：ページ構成（index.html）

6. ナビゲーション — スクロール時にシャドウと背景のぼかしを付ける固定表示。ロゴ＋ページリンク＋CTA ボタン。ハンバーガーメニュー＋モバイルメニューのオーバーレイ。
7. ヒーロー — アクセントカラーのスパンを含む見出し、サブタイトル、CTA ボタン。任意：画像付きの統計カード、浮かぶタグ／バッジ、ロケーションバッジ。
8. 機能／特徴 — アイコン＋タイトル＋説明のカードを 3 列グリッドで表示。
9. 製品紹介 — 選択肢（例：2 種類のスキャナー）を比較する、中央に仕切りを入れた左右分割レイアウト。バッジラベル、グラデーションフェード付き画像カード。
10. チーム — 名前、役職（等幅フォントのラベル）、資格一覧を載せた写真カード。写真にグラデーションオーバーレイをかけ、カードの背景になじませます。
11. お客様の声 — 星評価、イタリック体の引用文、アバターのイニシャル、投稿者名＋メタ情報。3 列グリッド。出典を示す行。実際のレビューのみを使用し、捏造は絶対にしないでください。
12. プロセス／ステップ — 番号付きアイコン、接続線、矢印表示を使った横方向のステップフロー。モバイルでは縦に並べます。
13. ロケーション — 住所、電話番号、FAX、バッジ（例：「X 線検査対応」）を載せた地図埋め込みカード。地図の下端にグラデーションオーバーレイ。
14. 保険／料金 — 受け付けている保険プランのチェックリストと、自費診療／別の選択肢を示すビジュアルカードの分割レイアウト。
15. FAQ アコーディオン — 一度に 1 項目だけ開くアコーディオン。開くとプラスアイコンが X 字型に回転。max-height を使ったスムーズなトランジション。
16. お問い合わせ — フォーム（名前、メールアドレス、電話番号、ロケーションの選択、メッセージ用テキストエリア）を備えたダークセクション。ソーシャルリンク。フッターのラッパーも兼ねます。
17. フッター — ダークなお問い合わせエリア内に複数列で配置：ブランド＋説明、ページリンク、ロケーション列。ソーシャルアイコン付きの著作権表示バー。
18. モバイル用固定 CTA — モバイルのみ画面下部に固定するバー。「今すぐ電話」＋「予約をリクエスト」ボタン。IntersectionObserver を使い、ヒーローを過ぎてスクロールすると表示します。フッターに下部パディングを追加し、バーと重ならないようにします。

フェーズ 3：サブページ

19. デザインシステムを厳密に統一する — 同じナビゲーション、同じフッター、同じ CSS 変数、同じフォントのインポート、同じリビールシステムを使います。すべてのサブページでサイト全体の一貫性を保ちます。
20. ページヒーロー — ホームのヒーローより短くします。セクションラベル＋h1＋サブタイトル。任意でパンくずリストまたは戻るリンクを追加します。
21. サブページの種類 — 技術（スキャナーの仕様、画質）、専門医（詳しいプロフィール、資格）、患者（事前準備の情報、受診時の流れ）、保険（すべてのプラン一覧、請求情報）、お問い合わせ（独立したフォーム）、医師／紹介（紹介手順、FAX 情報、対応可能な検査）。

フェーズ 4：仕上げ

22. コピー — 公開するテキストはすべて /humanizer に通します。マーケティング調の言い回しは避け、短い文にします。
23. テキストの孤立行 — すべての見出し、サブタイトル、短い段落に text-wrap: balance を追加します。本文に max-width の制約を設定し、1 語だけが改行されるのを防ぎます。
24. レスポンシブ対応の確認 — 375px、768px、1024px、1440px で各セクションを確認します。グリッドの折り返し、フォントサイズの調整、モバイルでの非表示要素を確認します。
25. 画像の処理 — すべての画像に object-fit: cover、グラデーションフェードのオーバーレイ、適切な代替テキストを設定します。ホバー時は 0.5 秒かけて transform: scale(1.05) を適用します。
26. アニメーション — 統計値のカウントアップ（1 回だけ実行、イージングは cubic、継続時間は 1.4 秒）。ヒーロー画像に控えめな視差効果（デスクトップのみ、移動幅 20px）。すべてのセクションに順次表示アニメーションを適用します。
27. アクセシビリティ — アイコンのみのボタンに ARIA ラベル、フォームラベル、セマンティック HTML、視認できるフォーカス状態を設定します。

---

Extremity MRI の構築で学んだパターン

統計値のカウントアップアニメーション

ヒーローカードや統計セクションの数値は、スクロールして表示されたときに 0 からアニメーションさせます。IntersectionObserver でトリガーし、requestAnimationFrame でスムーズに補間して、cubic のイーズアウトを適用します。実行は 1 回だけです。小数（0.4）と接尾辞（+）は個別に処理します。

function animateCountUp(el, target, suffix) {
  const duration = 1400;
  const isFloat = String(target).includes('.');
  const start = performance.now();
  function tick(now) {
    const elapsed = now - start;
    const progress = Math.min(elapsed / duration, 1);
    const eased = 1 - Math.pow(1 - progress, 3);
    const current = isFloat ? (eased * target).toFixed(1) : Math.round(eased * target);
    el.textContent = current + suffix;
    if (progress < 1) requestAnimationFrame(tick);
  }
  requestAnimationFrame(tick);
}

FAQ アコーディオン

一度に 1 項目だけ開きます。1 項目をクリックすると、ほかの項目はすべて閉じます。回答のラッパーに max-height を使ってアニメーションさせます。プラスアイコン（+）は開くと 45 度回転し、× になります。

.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-item.open .faq-question svg { transform: rotate(45deg); }

固定モバイル CTA

画面下部に固定するバーです。デフォルトでは非表示（transform: translateY(100%)）にし、ヒーローセクションがビューポートから外れたときに表示します。ヒーローセクションにIntersectionObserverを使用し、交差しなくなったら.visibleクラスを追加します。

カード内のフローティングタグ

注意点：画像をクリッピングするためにカードにoverflow: hiddenが設定されている場合、カードの外側（top: -0.75rem）に配置した要素は切り取られます。フローティングタグはカードの境界内（top: 0.75rem; right: 0.75rem; z-index: 2）に配置し、代わりに画像の上に重ねます。

背景クリップテキストとイタリック体のクリッピング

注意点：-webkit-background-clip: textをfont-style: italicおよび狭いline-heightと組み合わせると、イタリック体の文字の端（特に末尾の「s」、「g」、「y」）が切り取られます。修正するには、アクセント用のspanにpadding: 0 0.15emを追加し、margin: 0 -0.1emで補正します。さらにbox-decoration-break: cloneを指定します。

お客様の声カード

レビューを捏造しないでください。実際のレビューがない場合は、[Paste real Google review here]をプレースホルダーテキストとして使用します。クライアントの承認用にプレースホルダーのレビューを書く場合は、自然な文法や具体的な詳細を含め、マーケティング用語を使わず、実在の人が書いたような文章にします。各レビューでは、異なるセールスポイントを取り上げます。

複数拠点への対応

• ヒーロー：CTAボタンの下に、ピンアイコンと区切り線付きの控えめな拠点バッジを配置
• ナビゲーション：拠点ごとに電話番号のCTAボタンを分ける（「Miami」／「Broward」）
• 拠点セクション：地図の埋め込みカードを横並びで配置
• フッター：拠点ごとに列を分ける
• モバイル：拠点を縦に並べ、区切り線を非表示にする

ナビゲーションの電話番号 CTA

サービス業のサイトでは、ナビゲーションのCTAボタンをページ内アンカーではなく、tel:リンクにします。電話番号ではなく拠点名を表示します（こちらのほうがすっきりします）。ナビゲーションのデザインに合わせたピル型ボタンにします。

---

参考：Tydra

• 公開サイト：https://tydra.netlify.app
• 作業ファイル：~/Desktop/tydra-v2.html
• カラーパレット：--ink（ダーク）、--cream（アイボリー）、--teal-glow（ブランドのティール）、--terracotta（問題を示す赤）
• フォント：Playfair Display（ディスプレイ）、system mono（ラベル）、Georgia（引用）
• セクション：ヒーロー → キチンの解説 → 問題 → 概要／統計 → 製品ライン → 用途 → 効果の理由 → チーム → ニュースレター → フッター

参考：Extremity MRI

• 作業ディレクトリ：~/Desktop/extremity-mri/
• カラーパレット：--ivory: #f5f0eb、--blue: #5a8abf、--black: #0a0a0a、--blue-pale: #dce8f4
• フォント：Space Grotesk（見出しと本文）、JetBrains Mono（ラベル／統計）
• ページ：index、technology、specialists、patients、insurance、contact、physicians
• セクション：ヒーロー（統計カード＋拠点） → 機能 → スキャナー（分割レイアウト） → チーム → お客様の声 → 手順 → 拠点 → 保険 → FAQ → お問い合わせ／フッター
• 主なパターン：統計カウントアップ、FAQアコーディオン、固定モバイル CTA、ヒーローの視差効果、複数拠点対応のナビゲーション

---

実際のブランドキット制作から学んだパターン

データ提示の原則

1. 出典を必ず記載し、リンクしてください。 ベンチマークや業界平均（例：「Instagram の平均エンゲージメント率は 0.50％」）を示す場合は、その数値の近くに目立ちすぎないクリック可能な出典リンクを付けてください。小さな文字、低い不透明度で邪魔にならないようにしつつ、確認したい人が参照できるようにします。出典のないデータは信頼性を損ない、レビュー担当者にはすぐに見抜かれます。

2. データには期間を明記してください。 「合計 397,486 件のインタラクション」も、期間が分からなければ意味がありません。期間を示すデータには必ず「過去 90 日間」のように期間を添えてください。期間のないデータは、作り話のように見えてしまいます。

3. データを見ている人に分かるように導いてください。 2 つの数値をただ並べるだけでは不十分です。統計データとその背景の間に「これは驚くべきことです。なぜなら」のようなつなぎの表現を加えてください。見る人には、数値が「何であるか」だけでなく、「なぜ重要なのか」も伝える必要があります。比較は視覚的にも工夫してください。「当社」の数値を平均値より実際に大きく表示し、読む前から差を感じられるようにします。

4. 数値の合計が合っていることを確認してください。 週ごとの成長を示す棒グラフの合計が 31.9K なのに、実際のフォロワー数が 28K であれば、誰かが気づきます。内訳の数値の合計が、示している合計と一致するか、必ず確認してください。明記されている場合を除き、総数ではなく純増数を使います。約 4K の差異がレビューですぐに見つかったことがあります。

5. 単位や文脈を示す言葉を加えてください。 「0 から 58,500」では、58,500 は何の数でしょうか。必ず名詞を付けて、「0 から 58,500 人のフォロワーへ」としてください。数値が何を表すのか、見る人が知っていると決めつけないでください。

コピーの原則（ブランドキット向け）

6. 専門用語を平易な言葉に置き換えてください。 「シェアを優先する行動」はマーケティング用語です。「自然に広がる口コミ」なら、人が普段使う表現です。読み手が意味を解読しなければならない表現は、書き直してください。

7. 「人々」より「コミュニティ」を使ってください。 「人々の声」より「コミュニティの声」のほうが力強く伝わります。コミュニティという言葉は、スポンサーが重視する忠誠心、帰属意識、継続的なエンゲージメントを連想させます。

8. 説明しすぎる小見出しは削除してください。 見出しが十分に力強い（「4 か月でフォロワー 0 人から 58,500 人へ」など）なら、同じ内容をより多くの言葉で説明する小見出しはインパクトを弱めます。数値に語らせましょう。頼りすぎている説明は削ってください。

9. プラットフォームの背景を伝えてください。 「Instagram より後に Facebook を始めました」と伝えれば、一方のプラットフォームでフォロワーが少ない理由が分かります。背景がなければ、成績が振るわないと思われてしまいます。

ビジュアル／デザインの原則

10. コピーだけでなく、デザインで主要な提供内容を優先してください。 30 日間の掲載が最も重要なスポンサーシップなら、ほかの 3 つと同じ大きさのカードにしてはいけません。金色の枠、「最も人気」のバッジ、統計の内訳を備えた全幅のヒーローカードにしてください。デザインは言葉よりも早く優先順位を伝えます。

11. プラットフォームのセクションには、プロフィール写真とクリック可能なハンドルを配置してください。 各プラットフォームのセクションには、小さな円形のプロフィール写真とクリック可能な @ ハンドルを配置し、セクション見出しの横に並べてください。アカウントの存在や数値を自分で確認できるため、信頼につながります。

12. さりげなさより読みやすさを優先してください。 比較する数値が小さすぎたり、コントラストが弱すぎたりすると、比較の意図が伝わりません。0.50％と 18.3％を見せるなら、「当社」の数値を実際に大きく（36px 対 28px）表示し、差を視覚的に感じられるようにしてください。ラベルも読み取れる必要があります。透明度 0.25 の 10px の文字は見えません。

13. すべてのセクションに掲載する価値を持たせてください。 今回の制作では、成長のタイムライン、話題になった投稿のセクション、「閲覧数別の人気コンテンツ」パネルが削除されました。ブランドキットでは販売に、ランディングページではストーリーに直接貢献しないセクションは削除してください。埋め草のようなセクションがあると、隣接する強いセクションまで弱く見えてしまいます。

構造に関する原則

14. データは関連する場所に配置します。 Facebook の週ごとの成長グラフは、もともと独立した「結果」セクションにありましたが、Facebook セクション内に移動しました。プラットフォームに関するデータは、そのプラットフォームのセクションに配置します。自然な配置先があるデータのために、独立したセクションを作らないでください。

15. 視線を導くつなぎのラベルを使います。 大きな統計情報とその説明の間に、「これが驚くべき理由」のような小さな斜体または大文字のラベルを加えます。これはデザイン要素であり、物語を伝える仕掛けでもあります。次の情報を読む前に、どのような視点で捉えればよいかを閲覧者に示します。

---

Barilette Cafe の構築から学んだパターン

既存サイトのスクレイピングと再構築

1. Wix のサイトには WebFetch ではなく、ブラウザー自動化が必要です。 Wix はクライアントサイドでレンダリングされます。WebFetch が返すのはコンテンツではなく、インフラストラクチャ用の JS です。Chrome のブラウザーツールを使い、ページに移動して、コピーには get_page_text、DOM からすべての画像 URL を抽出するには javascript_tool を使います。遅延読み込み画像を読み込むため、まずページの一番下までスクロールしてください。

2. ライブサイトからカラーパレットを抽出します。 すべての要素に対して getComputedStyle を使い、実際にレンダリングされた色を取得します。透明色、黒、白などのノイズは除外します。最も特徴的な非ニュートラルカラーのうち、2 色をプライマリカラーとセカンダリカラーにします。Barilette の場合は、エスプレッソブラウン（#513408）と温かみのあるクリーム色（#FAF9F5）です。

3. メニュー画像は手作業で文字起こしする必要があります。 レストランのメニューは、デザインされたメニューの画像（JPG/PNG）であることがよくあります。スクリーンショットを撮り、目で見て内容を読み取り、構造化された HTML として作り直します。項目間に点線の区切りを設けたタブ式のメニューセクションは、画像を再現するよりもずっとプロフェッショナルに見えます。

小規模ビジネス／カフェのウェブサイトに関するパターン

4. レストランにはタブ式のメニュー表示が適しています。 カテゴリーをピル型ボタンのタブ（朝食／料理／ドリンク／コーヒー）で表示し、各タブ内は 2 列レイアウトにします。項目間には点線の境界線を設け、項目名にはセリフ体フォント、説明には控えめな色を使い、価格は右揃えにします。ウェブサイトというより、本物の印刷メニューのように感じられます。

5. 列のバランスを整えます。 片方の列に項目が 3 つ、もう片方に 12 個ある場合は、視覚的な重みがほぼ均等になるまでカテゴリーを列間で移動します。片側に空白があると、ユーザーはすぐに気づきます。Savory は項目が 3 つで短すぎましたが、その下に Healthy Hints を移動することでバランスが整いました。

6. セクション間で画像を重複して使わないでください。 ヒーローの背景に使った画像は、ストーリーセクションやギャラリーでは使わないでください。各画像は必ず 1 回だけ表示します。ユーザーはすぐに気づきます。

7. リモートの Wix URL より、ローカル画像（Downloads にある avif/jpg）を使います。 ユーザーからダウンロード済みの画像が提供された場合は、サイズ変更パラメーター付きのリモート Wix URL ではなく、ローカルパス（img1.avif）を使います。fill/encode パラメーター付きの Wix URL は、失敗したり、異なるコンテンツを返したりすることがあります。ローカルファイルは信頼性が高く、すぐに読み込まれます。

8. カフェ／レストランのヒーロー背景には、店内の写真を使います。 料理でもロゴでもなく、空間です。エジソン電球、素朴な棚、チェック柄のテーブルクロス、ブドウのつるなど、店の雰囲気を見せます。料理はギャラリーに配置します。店内の写真は、そこにいるとどんな気分になるかを閲覧者に伝えます。

9. 温かみのある色調のブランドには、茶色のナビゲーションバーを使います。 ブランドのパレットが温かみのあるブラウンやクリーム色の場合、クリーム色のナビゲーションバーは色が薄く見えてしまいます。クリーム色の文字と、反転した CTA ボタンを組み合わせた茶色のナビゲーションバーに切り替えます。ブランドとの相性がよく、上端がすっきりとまとまります。

10. 所在地セクションには Google Maps を埋め込みます。 事業所の住所を指定した Google Maps の埋め込み iframe を使います。住所、営業時間、電話番号、メールアドレス、配達情報と組み合わせ、2 列レイアウト（左に情報、右に地図）にします。サイトの角丸のデザインに合わせて、地図の角も丸くします。

写真を多く使うサイトの画像選定

11. HTMLを書く前に、画像の配置全体を計画します。 サイトに10枚以上の画像を追加する場合は、まず配置場所をすべて決めます。どの画像をどのセクションに使うのか、その理由も明確にします。各画像は一度だけ割り当てます。これにより、制作途中で画像の重複に気づいて慌てる事態を防げます。

12. 画像は、配置するセクションの内容に合わせます。 料理の写真（フムスのプレート）をドリンクメニューの目玉画像にするのは適切ではありません。実際のドリンク（スムージー）を使います。朝食のセクションには、ペストリーや朝食メニューの写真を使います。コーヒーのセクションには、エスプレッソバーの写真を使います。全体的な雰囲気だけで選ばず、画像の隣にある文章に合った画像を選びます。

13. 似た画像も重複として扱います。 同じアボカドトーストを少し違う角度から撮った写真が3枚あっても、画像は3枚ではなく1枚です。同じインテリアの一角を撮った写真が2枚ある場合も同様です。各被写体について最も優れた写真を1枚だけ選びます。ほかの写真は、レイアウト上で十分に離れており、異なる目的に使う場合に限って使用します。

14. 同じデザインパターンを使いすぎないようにします。 フォトストリップは2つでも多すぎます。特別感がなくなってしまいます。フォトストリップを1つ、パララックスの区切りを1つ、拡張ギャラリーを1つ使えば、十分な視覚的密度が得られます。強い理由がない限り、各パターンは1回だけ使います。

15. 画像数が多い場合は、メイソンリーギャラリーを使います。 ギャラリー画像が8枚以上ある場合は、固定グリッドではなく、CSS の columns を使ったメイソンリーレイアウトに切り替えます。これにより、縦長と横長の画像を無理にアスペクト比をそろえずに並べられます。リズムを生み出すため、料理の写真とインテリアの写真を交互に配置します。

ギャラリーグリッド

16. 画像数に合わせてグリッドの列数を決めます。 画像が3枚なら3列、4枚なら2×2、6枚なら3×2にします。1枚目を2行にまたがらせるなど、無理に変則的なレイアウトにするのは避けます。ただし、画像が5枚以上あり、その中に明らかに主役となる写真が1枚ある場合は例外です。料理やインテリアの写真には、アスペクト比 4/3 がほとんどの場合に適しています。

参照：Barilette

• 作業ディレクトリ：~/Projects/websites/barilette/
• デスクトップのシンボリックリンク：~/Desktop/barilette.html
• パレット：--espresso: #513408、--cream: #FAF9F5、--wine: #5a2b1c、--parchment: #D4CCC1
• フォント：Playfair Display（見出し）、Inter（本文）
• セクション：ヒーロー（インテリアの背景）→ ストーリー（インテリアの写真＋ハイライト）→ フォトストリップ（料理の写真5枚）→ メニュー（タブ式：Breakfast／Food／Drinks／Coffee、それぞれに目玉画像）→ パララックスの区切り（インテリア＋引用）→ ギャラリー（メイソンリーレイアウト、画像9枚）→ 来店案内（情報＋Google Map）→ フッター
• 主なパターン：点線の区切りを使ったタブ式メニュー、茶色のナビゲーションバー、img/ フォルダー内のローカル画像、2カラムのメニューレイアウト、セクション間のフォトストリップ、テキストを重ねたパララックスの区切り、CSS columns を使ったメイソンリーギャラリー
• 画像の割り当て：画像は20枚すべて異なり、それぞれ一度だけ使用します。用途別に分類します。雰囲気づくりにはインテリアの写真を使い、料理の写真はメニューのカテゴリーに合わせ、ギャラリーには両方を混在させます。

---

クライアント向け提案と監査

提案書を作成する場合や、クライアントの既存サイト／オンライン上の情報を監査する場合は、次のルールに従います。

公開前に、事実に関する主張をすべて確認します

提案書にクライアントのビジネスに関する具体的な情報（レビュー数、返信状況、写真の枚数、対応エリアの表記、ページ速度など）を記載する場合は、書き込む前に十分に確認します。18件のレビューのうち2件だけを確認して、「返信がない」と一般化してはいけません。実際に確認せずに、項目が空欄だと思い込んではいけません。誤った主張が一つあるだけで、信頼を損ないます。

手順：

1. 監査結果を書く前に、情報源（Google プロフィール、公開中のサイト、検索結果）を実際に確認します。
2. 抜き取りではなく、該当する項目をすべて確認します。レビューが18件あるなら、すべてに目を通します。
3. 完全に確認できない場合は、「返信がない」ではなく、「返信がないレビューが一部ある可能性があります」のように、断定を避けた表現を使います。
4. 提案書を公開する前に、事実に関する主張をすべて洗い出し、それぞれが確認済みか、推測に基づくものかを記録します。推測に基づく主張は修正します。

教訓（屋根工事業者への提案、2026年3月）

提案書に「返信のないレビューが18件」と記載しました。実際には、オーナーはいくつかのレビューに返信していました。最初の2～3件だけを確認し、残りは確認せずに推測していました。これにより、クライアントからの信頼を損ねるところでした。必ずすべてに目を通してください。