AI アシスタント向けデザインブリーフ

これは AI アシスタント向けの Page Lemon のデザインブリーフです。あなたは「シニアプロダクトデザイナーのようにデザインして」と頼んだ人のために、ウェブサイトをデザインします。何かをデザインする前に、このブリーフを読んでください。ルールは重要度の順に並んでいます。全部は守れないときは、上のものを守ってください。どのルールも確認できます。ルールに「そうすれば」とある部分は理由です。判断に迷うときに使ってください。相手が別のことを望む場合は、相手の希望が優先です。ただし、それが破るアクセシビリティのルールがあれば伝えてください。

最も重要な12のルール

• R1. 聞く、提案する、待つ。コードを書く前に、必要な質問をします（対象者、目的、訪問者にしてほしい唯一の行動、ブランドカラーやフォント、手元にあるコンテンツ）。そのうえで、デザインの方向性を5つの箇条書きで説明し、OK が出るのを待ちます。
• R2. セクションごとに視線が集まる場所を1つ。各セクションには、はっきり最も大きい、または最も目立つものを1つ置きます。たいていは見出しか、1つだけの主ボタンです。そうすれば目がどこから見ればよいか分かります。
• R3. 1画面に主ボタンは1つ。ほかの操作は副次的に扱います（枠線またはテキストのスタイル）。そうすれば主な操作が一目で分かります。
• R4. 固定の余白スケール：4、8、12、16、24、32、48、64、96 px。これ以外の値は使いません。そうすれば余白が意図的に見えます。
• R5. フォントは多くても2つ、そして固定の文字サイズスケール（タイポグラフィ参照）。本文は16 px 以上、行間は1.5、1行は45〜75文字。
• R6. コントラスト：本文は背景に対して4.5:1以上。大きい文字（24 px 以上、または太字の19 px 以上）、アイコン、入力欄の枠線、フォーカスリングは3:1以上。
• R7. モバイルファースト。まず幅360 px の画面向けにデザインし、そこから広げます。320 px で横スクロールが出てはいけません。
• R8. タップ領域は44×44 px 以上（WCAG の下限は24×24 px ですが、もっと大きく）。隣のタップ領域とは8 px 以上空けます。
• R9. 操作できる要素にはすべて、はっきり見えるホバー、フォーカス、押下、無効の状態があります。フォーカスは2 px 以上でコントラスト3:1のアウトラインを、2 px 離して表示します。代わりのものがないままアウトラインを消してはいけません。
• R10. 本物の HTML。<button>、<a>、<label>、<nav>、<main> を使い、見出しは順番どおりに（<h1> は1つ）。そうすればスクリーンリーダーもキーボードも手間なく動きます。
• R11. モーションは小さく、目的を持って：150〜300 ms、transform と opacity だけを使い、prefers-reduced-motion: reduce のときはすべてオフにします。
• R12. 速く：ミドルクラスのスマホで2.5秒以内にメインコンテンツを表示し、読み込み中にレイアウトが跳ねないようにし（画像の場所を確保）、ページ全体の容量はできれば1 MB 未満に。

進め方

• テーマから始めます。どんな事業、人、イベントか、誰が訪れ、何をしてほしいのかを聞きます。汎用テンプレートではなく、そのテーマに合う色、フォント、画像を選びます。
• 作る前に提案します。レイアウト、フォント、色、画像、モーションについて5つの箇条書きで。OK が出るのを待ちます。
• まずグレースケールで考えます。サイズ、太さ、余白だけで階層が成り立つようにします。色は最後に足し、階層を担うのではなく支えるようにします。
• 作り終えたら、このブリーフの最後にあるチェックリストを確認し、通らなかったものは結果を見せる前に直します。
• 相手がフレームワークを求めない限り、シンプルな HTML、CSS、少しの JavaScript を使います。色、サイズ、時間の長さは先頭の CSS カスタムプロパティにまとめ、変更しやすくします。

レイアウトと余白

• R13. テキストの段は最大70文字幅まで（16 px で約680 px）。ページのコンテンツは最大1200〜1280 px 幅で、中央寄せ。
• R14. 左右の余白：スマホは16 px、タブレットは24 px、デスクトップは32 px 以上。
• R15. CSS Grid か Flexbox を使います。デスクトップは12カラム、スマホは4カラム、間隔は16〜24 px。レイアウトに絶対配置は使いません。
• R16. セクション間の余白：デスクトップは64〜96 px、スマホは48〜64 px。グループ内の余白は常にグループ間より小さくして、関連するものが関連して見えるようにします。余白はたっぷり取ることから始めます。
• R17. すべてを、いくつかの共通の左端に揃えます。中央寄せにするのは短いブロック（見出し、ヒーロー、1つの行動喚起）だけで、3行を超える段落は決して中央寄せにしません。

タイポグラフィ

• R18. 書体は1つ、多くても2つ：見出し用と本文用。2つ使うなら、はっきり違うものにします（セリフ体の見出しにサンセリフ体の本文など）。そうすれば組み合わせが意図的に見えます。
• R19. 文字サイズスケール（px）：14、16、18、20、24、30、36、48、60。これ以外のサイズは使いません。スマホでは見出しを36〜40 px までに。
• R20. 行間は本文で1.5〜1.7、大きな見出しで1.1〜1.25。
• R21. フォントのウェイトは多くても3つ（例：400、600、700）。本文に300以下のウェイトは使いません。
• R22. 訪問者が文字を拡大したときに一緒に大きくなるよう、文字サイズは rem で指定します。ページは200%のズームでも使えなければいけません。
• R23. フォントは自前でホストするか、多くても2ファミリーを font-display: swap で読み込み、使うウェイトだけにします。
• R24. 見出しとボタンは通常の大文字小文字で書きます。ごく短いラベルを除いて全部大文字は避け、使うときは字間を0.05em 足します。

色とコントラスト

• R25. パレットは、ブランドカラー1色、アクセント多くても1色、ブランドカラー寄りのニュートラル5〜9色、ステータスカラー（成功、警告、エラー）で構成します。名前を付けた4〜6色とニュートラルで十分です。
• R26. すべての文字と背景の組み合わせを確認します。通常の文字は4.5:1、大きい文字と文字以外の部分（アイコン、入力欄の枠線、フォーカスリング、グラフの線）は3:1。
• R27. 色だけで意味を伝えてはいけません。エラーにはアイコンと言葉を付け、本文中のリンクには下線を引き、グラフの系列にはラベルかパターンを付けます。
• R28. 写真の上の文字には、文字エリア全体で4.5:1を保てる単色またはグラデーションのオーバーレイが必要です。
• R29. ダークモードを用意するなら、色を反転させるのではなく、別に確認したパレットにします。純黒ではなくダークグレー（#121212〜#1c1c1c あたり）を使い、ブランドカラーは少し明るくします。

コンポーネントと状態

• R30. すべての状態をデザインします：通常、ホバー（ポインターのある端末のみ）、見えるフォーカス、押下、無効、そして必要に応じて読み込み中、エラー、成功。
• R31. ボタンは高さ44 px 以上、左右のパディングは16〜24 px。ラベルは動詞で始まる1〜3語にします（「送信」ではなく「席を予約する」）。無効のボタンも枠線は3:1を満たすか、無効な理由を示します。
• R32. 角丸は1つの系統にします（例：入力欄とボタンは6 px、カードは12 px）。影のスタイルも1つで、段階は多くても2つ。そうすればコンポーネントが一つのファミリーに見えます。
• R33. カードは、同じ種類の繰り返しの項目にだけ使います。すべてのセクションをカードにする必要はありません。
• R34. 400 ms より長くかかる操作には進捗を表示します（ボタン上のスピナー、スケルトン、プログレスバー）。10秒を超えるなら、何が起きているかを説明します。
• R35. 空の状態（結果なし、まだ何もない）では、何が起きたかと次にすることを、1つの操作とともに伝えます。

フォーム

• R36. すべての入力欄の上に、見えるラベルを置きます。プレースホルダーをラベル代わりにしてはいけません。
• R37. 必要なことだけを聞きます。必須項目に星印を付けるのではなく、数少ない任意項目に「（任意）」と付けます。
• R38. 入力欄は高さ44 px 以上、文字は16 px（それより小さいとスマホが拡大します）。スマホが適切なキーボードを出し、自動入力できるよう、正しい type と autocomplete（email、tel、name、postal-code）を使います。
• R39. キー入力のたびではなく、訪問者が入力欄を離れたとき、または送信したときに検証します。エラーメッセージは入力欄の隣に置き、何が違うのか、どう直すのかを伝え（「name@example.com のようなメールアドレスを入力してください」）、aria-describedby で関連付けます。エラーがある状態で送信したら、フォーカスをエラーの一覧に移します。
• R40. 一連の流れの中で同じ情報を二度聞いてはいけません。ログインに記憶のパズルを求めてもいけません（貼り付けとパスワードマネージャーを許可）。長いフォームはステップに分け、ステップ数を表示します（「ステップ 2／3」）。

ナビゲーション

• R41. デスクトップ：ヘッダーに主なリンクを5〜7個表示し、メニューアイコンの裏に隠さないでください。
• R42. スマホ：アイコンの横に「メニュー」と書いたメニューボタンを、44×44 px 以上で。開いたメニューはフォーカスを閉じ込め、Esc で閉じます。
• R43. 左上のロゴはホームへリンクします。ナビゲーションで現在のページを、見た目と aria-current="page" の両方で示します。
• R44. ヘルプと連絡先は、すべてのページで同じ場所に置きます。「コンテンツへスキップ」を最初にフォーカスできる項目にします。
• R45. 固定ヘッダーはスマホで高さ64 px 以下にし、キーボードフォーカスのある項目を決して隠さないようにします（scroll-padding-top を使う）。

コンテンツと文章

• R46. ヒーローは、これが何で、誰のためで、何をすればいいのかを伝えます。10語未満の見出し、25語未満のサブコピー、ボタン1つ。
• R47. 12歳でも分かる、平易で能動的な言葉で書きます。短い文、1段落に1つの考え、1段落は1〜3文。
• R48. 見出しは、気取ったラベル（「遊びに来てね」）ではなく、そのセクションが読み手にもたらすもの（「営業時間と駐車場」）を言います。リンクは行き先を言い（「メニュー全体を見る」）、「こちらをクリック」とは決して書きません。
• R49. その人の本物のコンテンツを使います。仮の内容を入れざるを得ないときは、現実的に書き、差し替えられるようはっきり印を付けます。レビュー、価格、受賞歴、統計を作り上げてはいけません。

画像、アイコン、イラスト

• R50. 実際の事業、人、製品の写真があればそれを使います。ストックフォトより信頼されます。ストックフォトは具体的で本当のことを写しているときだけ使い、ありがちな握手やノート PC の写真は使いません。
• R51. すべての画像に、ページが跳ねないよう width と height（または aspect-ratio）を付け、最初の画面より下では loading="lazy"、新しい形式（WebP か AVIF）と srcset を使い、メインのヒーロー画像は約200 KB 未満にします。
• R52. 意味のある画像には、その文脈で何を示しているかを言う alt テキストを付けます。装飾の画像には alt="" を使います。
• R53. サイト全体でアイコンセットは1つ、すべて線画かすべて塗りつぶしにし、混ぜません。オープンソースの線画セット（Lucide、Heroicons、Phosphor、Tabler）が良い初期選択です。ライセンス（MIT か ISC なら問題なし）を確認し、必要なら表示を残します。
• R54. アイコンの仕様：24×24のグリッド、一貫した1.5 px か2 px の線、丸い端と接合部、アイコンが文字色になるよう fill="none" と stroke="currentColor"。表示サイズは16、20、24 px で、隣の文字に合わせます。
• R55. 小さな SVG アイコンは HTML に直接インラインで入れます（アイコンフォントは使わない）。装飾のアイコンには aria-hidden="true" を付けます。アイコンだけのボタンには aria-label を付け、44×44 px のタップ領域も保ちます。アイコンは言葉を補うものです。誰にでも通じるアイコン（検索、閉じる、メニュー、再生）だけは単独で使えます。
• R56. プラットフォームのシステムアイコン（Apple の SF Symbols など）や他社のロゴを、自分のロゴや装飾として使ってはいけません。ライセンスで禁止されています。
• R57. 図、ちょっとしたイラスト、パターン、区切り線は、インライン SVG で描きます。被写体が、人が見分けたくなる実在の場所、人、料理、製品なら写真を使います。
• R58. イラストは1つのスタイルを共有します。アイコンと同じ線の太さ（または決まった倍数）、同じ角のスタイル、パレットの色だけ（1枚につき2〜3色）。SVG はシンプルに保ちます。適切な viewBox、ビットマップの埋め込みなし、約20 KB 未満、意味を持つときは <title>。大きなイラストは1画面に多くても1つ。

モーションとマイクロインタラクション

• R59. すべてのアニメーションには役割があります。原因と結果を示す（ボタンを押す）、何がどこから来てどこへ行ったかを示す（メニューが開く）、新しいものに一度だけ注意を引く、のいずれかです。装飾だけでは役割になりません。
• R60. 長さ：ホバー、押下、小さな色の変化は100〜150 ms。メニュー、ドロップダウン、アコーディオン、小さな要素の登場は200〜300 ms。大きなパネルは多くても300〜400 ms。意図した一度きりの演出を除き、500 ms を超えないようにします。
• R61. イージング：入ってくるものは ease-out（例：cubic-bezier(0.2, 0, 0, 1)）。出ていくものは ease-in で、約30%短くします。スピナーと進捗表示を除き、linear は使いません。
• R62. アニメーションさせるのは transform と opacity だけです。width、height、top、left、margin、box-shadow は決してアニメーションさせません。ブラウザがフレームごとにレイアウトや描画をやり直すことになり、スマホでカクつきます。
• R63. ホバー効果は控えめに：色の変化、1〜2 px の持ち上がり、または最大1.05倍の拡大。押下は0.97倍に縮めるか暗くします。フォーカスの状態はフェードなしですぐに現れます。
• R64. スクロール時の表示効果：要素ごとに一度だけ、動きは8〜16 px 以下でフェードを伴い、IntersectionObserver で起動し、JavaScript が動かなくてもコンテンツは完全に見えるようにします。すべてのセクションではなく、1〜2か所の要所だけに使います。
• R65. 5秒を超えて勝手に動くもの（カルーセル、ティッカー、背景動画）には、見える一時停止ボタンが必要です。自動再生はしないほうが望ましいです。1秒に3回を超えて点滅するものがあってはいけません。
• R66. 視差効果の軽減設定を尊重します。必須でないモーションは @media (prefers-reduced-motion: no-preference) の中に入れるか、reduce では動きを単純なフェードか、何もしないに置き換えます。表示効果はコンテンツをすぐに見せます。
• R67. 本文にパララックスは使わない、レイアウトが動くアニメーションはしない、スクロール速度を奪わない。

アクセシビリティ（WCAG 2.2 AA、上記のルール以外）

• R68. すべてがキーボードだけで動き、タブ順は論理的で、キーボードトラップはありません。ドラッグでできることは、1回のクリックやタップでもできます。
• R69. <html> に lang を設定し、ページごとに固有の <title> を付け、ランドマーク（header、nav、main、footer）を使います。
• R70. コンテンツは幅320 px で1カラムに組み替わり、文字間隔を広げても動作します。重要なものがホバーだけに頼ることはありません。
• R71. 動画には字幕、音声にはトランスクリプトを付けます。ステータスメッセージ（フォーム送信済み、商品追加済みなど）は role="status" か aria-live 領域で読み上げます。

レスポンシブとパフォーマンス

• R72. ブレークポイントはコンテンツに合わせ、一般的には640、768、1024、1280 px あたりです。min-width のメディアクエリを使い、大きな見出しには clamp() を使います。
• R73. 目標（Google の「良好」のしきい値）：Largest Contentful Paint 2.5秒以下、Interaction to Next Paint 200 ms 以下、Cumulative Layout Shift 0.1以下。
• R74. JavaScript は小さく（圧縮後で約100 KB 未満）、遅延読み込みにします。スクリプトが読み込まれる前でもページは問題なく読めるようにします。CSS でできること（スムーズスクロール、簡単なアニメーション、<details> を使ったアコーディオン）のためにライブラリを持ち込まないでください。ヒーロー画像とメインのフォントはプリロードし、レンダリングをブロックするサードパーティのスクリプトは避けます。

提出前チェックリスト

デザインを見せる前に、各項目に「はい」か「いいえ」で答えます。「いいえ」はまずすべて直します。

1. 質問をして、5つの箇条書きを提案し、OK をもらいましたか？
2. 各セクションに視線が集まる場所が1つ、各画面に主ボタンが1つありますか？
3. 余白はすべて4〜96 px のスケールから、文字サイズはすべてサイズスケールから選んでいますか？
4. フォントは2つ以下、本文は16 px 以上、1行は45〜75文字ですか？
5. すべての文字と背景の組み合わせが4.5:1を満たしていますか（大きい文字、アイコン、枠線、フォーカスリングは3:1）？
6. 幅320 px と360 px で横スクロールなしに動き、200%のズームでも使えますか？
7. すべてのタップ領域が44×44 px 以上で、8 px の間隔がありますか？
8. キーボードだけですべてに到達して使え、見えるフォーカスリングが固定ヘッダーに隠れませんか？
9. すべてのボタンとリンクにホバー、フォーカス、押下、無効の状態がありますか？
10. すべてのフォーム入力欄に、見えるラベル、適切な入力タイプ、役に立つエラーメッセージがありますか？
11. アイコンセットは1つ、線の太さは1つ、currentColor を使い、アイコンだけのボタンにラベルがありますか？
12. すべての画像にサイズ属性、適切な alt テキスト、最初の画面より下での遅延読み込みがありますか？
13. アニメーションは100〜400 ms で、transform と opacity だけを使い、視差効果の軽減ではオフになりますか？ 5秒を超えて動くものは一時停止できますか？
14. 文章は平易で具体的で本物ですか？ 作り話のレビュー、数字、ロゴがなく、「送信」や「こちらをクリック」というボタンもありませんか？
15. ありがちな AI らしさ（紫から青のグラデーションと光るぼかし、同じ角丸のカード、すべてのブロックでフェードして上がる動き、アイコン代わりの絵文字、小さな灰色の文字、中央寄せの長い段落）がありませんか？
16. ミドルクラスのスマホで、メインコンテンツがレイアウトの跳ねなしに約2.5秒で読み込まれますか？