① タイポグラフィ
Web 特有の制約は「フォントの自由度」「デバイスごとの文字サイズ」。紙のように自由に級数指定はしない。
まずは「読みやすさ」を最優先に、本文 16px（前後）を基準として階層を組む。見出しはサイズだけでなく、太さ・余白・行間で差を作ると崩れにくい。
サイズ設計
本文 16px を基準に見出しへジャンプ率を取る。
フォント選定
Web フォント or システムフォント。表示速度とのバランス。
行間・字間
line-height 1.7〜1.9 が目安。日本語は特に広めが読みやすい。
② カラー
RGB／HEX／HSL といったカラーモードと、アクセシビリティ（コントラスト比）に触れる。
Web は光（RGB）で表現するため、印刷（CMYK）と同じ色は再現できないことがある。色数を増やすより、背景・本文・アクセントの「役割」を固定すると統一感が出る。
CMYK（印刷）→ RGB（Web）への切り替え
Web では #e07050 のような HEX 表記が主流。アルファ値で透明度も扱える（rgba(0,0,0,0.5)）。
アクセシビリティ（コントラスト比）
本文は最低 4.5:1 のコントラスト比を確保。Figma / Chrome DevTools で自動チェック可能。
③ レイアウト
グリッド・余白・整列・視線誘導（Z 型 / F 型）。紙と共通する原則と、Web 独自の流れ。
Web ではスクロールが前提。ページ全体を「見出し → 要点 → 詳細」の順に流し、重要な判断材料を上に寄せるほど、離脱を防げる。
グリッド
12 分割が標準。複雑なレイアウトも "列幅" で統一感を保つ。
余白
8px / 16px / 24px / 32px のステップで統一すると整う。
視線誘導
Z 型（ランディング）／ F 型（長文）を使い分ける。
④ レスポンシブデザイン
PC・タブレット・スマホで同じ HTML を書き換えなくても見え方が変わる仕組み。
重要なのは「どこで折り返すか」より、折り返したときに情報の優先順位が保たれること。カードは 3 列→2 列→1 列のように自然に落ちる設計が扱いやすい。
モバイルファースト
実ユーザーの多くはスマホ。スマホのデザインから作り始めるのが現在の主流。
⑤ UX / UI
UI = 見た目・操作する部分／UX = 使った人の体験全体。デザイナーは両方に責任を持つ。
たとえば「ボタンが可愛い」は UI の話だが、「押したら何が起きるかがわかる」「迷わず次に進める」は UX の話。成果に直結するのは、多くの場合 UX 側の改善。
UI（User Interface）
ボタン・フォーム・ナビなど "触れる要素" の設計。見た目とインタラクション。
UX（User Experience）
サイトに来てから離脱するまでの体験全体。情報設計・導線・速度も UX の一部。
「なんとなくオシャレ」ではなく「なぜこの色・配置なのか」を説明できること。それがプロのデザイナーと趣味の違いです。ルールを知っていれば、AIへの指示も格段に的確になります。