① タイポグラフィ
Web 特有の制約は「フォントの自由度」「デバイスごとの文字サイズ」。紙のように自由に級数指定はしない。
📌 【タイポ 実装注釈】
要確認・仮テキスト。最終的には「本文 16px / 行間 1.7 以上」「見出しと本文のジャンプ率」を実例プレビューで示したい。
サイズ設計
本文 16px を基準に見出しへジャンプ率を取る。
見出しサンプル
フォント選定
Web フォント or システムフォント。表示速度とのバランス。
Noto Sans JP プレビュー
行間・字間
line-height 1.7〜1.9 が目安。日本語は特に広めが読みやすい。
行間を広めにとると、長文も読みやすく情報がスッと入ります。
② カラー
RGB／HEX／HSL といったカラーモードと、アクセシビリティ（コントラスト比）に触れる。
📌 【カラー 実装注釈】
要確認・仮テキスト。スウォッチは仮配色のため、最終版で「背景・メイン・アクセント・テキスト」の 60-30-10 ルール見本に差し替え予定。
CMYK（印刷）→ RGB（Web）への切り替え
Web では #FF6B6B のような HEX 表記が主流。アルファ値で透明度も扱える（rgba(0,0,0,0.5)）。
Accent #FF6B6B
Accent2 #4ECDC4
Dark #1A1F36
Bg #F8F9FC
アクセシビリティ（コントラスト比）
本文は最低 4.5:1 のコントラスト比を確保。Figma / Chrome DevTools で自動チェック可能。
③ レイアウト
グリッド・余白・整列・視線誘導（Z 型 / F 型）。紙と共通する原則と、Web 独自の流れ。
📌 【レイアウト 実装注釈】
要確認・仮テキスト。将来的には「グリッド12分割の上にコンテンツを配置した例」を画像 or 実装で入れる想定。
グリッド
12 分割が標準。複雑なレイアウトも "列幅" で統一感を保つ。
余白
8px / 16px / 24px / 32px のステップで統一すると整う。
視線誘導
Z 型（ランディング）／ F 型（長文）を使い分ける。
④ レスポンシブデザイン
PC・タブレット・スマホで同じ HTML を書き換えなくても見え方が変わる仕組み。
📌 【レスポンシブ 実装注釈】
要確認・仮テキスト。ブレイクポイントは実在する数字を入れているため変更不要。
本公開時にブラウザ開発者ツールでのチェック手順（動画 or GIF）を追加検討。
MOBILE〜 768px
TABLET768 〜 1024px
DESKTOP1024px 〜
モバイルファースト
実ユーザーの多くはスマホ。スマホのデザインから作り始めるのが現在の主流。
⑤ UX / UI
UI = 見た目・操作する部分／UX = 使った人の体験全体。デザイナーは両方に責任を持つ。
📌 【UX/UI 実装注釈】
要確認・仮テキスト。ここだけで 1 ページ作れる深い領域。このページでは "違い" と "何を意識するか" の 2 点に絞る。
UI（User Interface）
ボタン・フォーム・ナビなど "触れる要素" の設計。見た目とインタラクション。
UX（User Experience）
サイトに来てから離脱するまでの体験全体。情報設計・導線・速度も UX の一部。