概要

「もう少し読みやすく」「スマホ対応して」という曖昧な指示を、数値と用語で正確に伝えられるようになります。

レスポンシブ・モバイルファースト・ブレークポイントの語彙を習得する
タイポグラフィ・カラー・コントラストを数値で指示できるようになる
CTA・マイクロコピー・アクセシビリティの設計語彙を押さえる

レスポンシブ・モバイルファースト：デバイス対応の語彙

「スマホ対応して」という指示より「モバイルファーストでブレークポイントをsm:768px・lg:1024pxで実装して」の方が、AIは一発で正しいCSSを出力します。デバイス対応の語彙を押さえることで、指示の曖昧さがなくなります。

レスポンシブデザイン（Responsive Design）

デバイスの画面幅に応じてレイアウトが自動的に変化する設計思想です。現代のWebでは必須の概念です。

モバイルファースト（Mobile First）

PCではなくスマートフォンを基準にデザイン・実装を始める考え方です。

アプローチ	実装の方向	CSSの書き方
モバイルファースト	スマホ基準→PCへ拡張	`min-width`のメディアクエリ
デスクトップファースト	PC基準→スマホへ縮小	`max-width`のメディアクエリ

ブレークポイント（Breakpoint）

レイアウトが切り替わる画面幅の境界値です。デザインシステムやCSSフレームワークによって異なります。

名称	Tailwind	Bootstrap	用途
xs	—（デフォルト）	〜576px	スマートフォン（縦）
sm	640px〜	576px〜	スマートフォン（横）
md	768px〜	768px〜	タブレット
lg	1024px〜	992px〜	小型デスクトップ
xl	1280px〜	1200px〜	デスクトップ
2xl	1536px〜	1400px〜	大型モニター

AIへの指示例：「モバイル（〜767px）は1カラム、md（768px〜）は2カラム、lg（1024px〜）は3カラムのグリッドレイアウトをTailwindで実装して」

ビューポート（Viewport）

ブラウザの表示領域のことです。デバイスの物理的な画面サイズとは異なります。

用語	説明	使いどころ
vw（viewport width）	ビューポートの幅の1%	`width: 100vw`で画面幅いっぱい
vh（viewport height）	ビューポートの高さの1%	`height: 100vh`で画面高さいっぱい
dvh（dynamic viewport height）	アドレスバーを考慮した動的な高さ	モバイルのフルスクリーンに推奨

レイアウトの種類を整理する

レイアウトは大きく4種類に分類できます。それぞれの特徴と使いどころを押さえることで、AIへの指示が正確になります。

種類	幅の指定	変化の仕方	具体例
固定レイアウト	px固定	画面が変わっても動かない	古い企業サイト・レガシー管理画面
フルードレイアウト	%・vwで指定	画面幅いっぱいに伸縮	全幅テーブル・グラフ・ダッシュボード
アダプティブレイアウト	ブレークポイントごとに固定	段階的にパキッと切り替わる	スマホ版・PC版を別々に設計するサイト
ハイブリッドレイアウト	コンテナ固定＋内部は%	コンテナ内がなめらかに伸縮	Zenn・GitHub・Notion・X（旧Twitter）

アダプティブとレスポンシブの違いはよく混乱するポイントです：

ハイブリッドレイアウトの構造（最も一般的）：

┌──────────────────────────────────────────┐ ← 画面幅（可変）
│         余白（自動調整）                  │
│  ┌────────────────────────────────────┐  │
│  │  コンテナ（max-width: 1200px固定）  │  │
│  │                                    │  │
│  │  ┌──────────────┐ ┌─────────────┐  │  │
│  │  │ カード        │ │ カード       │  │  │ ← 内部は%で伸縮
│  │  └──────────────┘ └─────────────┘  │  │
│  └────────────────────────────────────┘  │
│         余白（自動調整）                  │
└──────────────────────────────────────────┘

サイト	コンテナ幅の目安	内部の動き
Zenn・Qiita・Snipphy	〜900px前後	記事本文・カードが幅いっぱいに伸縮
GitHub	〜1280px前後	コードエリア・サイドバーが伸縮
Notion	〜900px前後	ドキュメントエリアが伸縮
X（旧Twitter）	〜1200px前後	タイムライン・サイドバーが伸縮

AIへの指示例：「コンテナはmax-width: 1200pxで中央寄せ、内部要素はフルードでレスポンシブに伸縮するハイブリッドレイアウトで実装して」

タイポグラフィ：文字で伝える視覚表現

「文字を大きくして」「もう少し読みやすく」という指示より、「body-lgを16px・line-height 1.6・letter-spacing 0.02emで設定して」の方がAIは一発で正しいCSSを出力します。タイポグラフィの語彙を押さえることで、文字まわりの指示が数値で伝えられるようになります。

フォントファミリー（Font Family）

書体の種類のことです。大きく3種類に分類されます。

種類	説明	印象	使いどころ
セリフ体（Serif）	文字の端に飾り（ひげ）がある	伝統的・高級感・信頼感	新聞・書籍・高級ブランド
サンセリフ体（Sans-serif）	飾りのないシンプルな書体	モダン・クリーン・読みやすい	WebUI・アプリ・テック系
モノスペース（Monospace）	文字幅が均等	技術的・コード感	コードブロック・ターミナル

フォントウェイト（Font Weight）

文字の太さのことです。数値または名称で指定します。

数値	名称	使いどころ
100	Thin	装飾的な大見出し
300	Light	サブテキスト・キャプション
400	Regular	本文テキスト（標準）
500	Medium	強調テキスト・ラベル
600	SemiBold	カードタイトル・小見出し
700	Bold	見出し・強調
900	Black	ヒーローエリアの大見出し

AIへの指示例：「見出しはfont-weight: 700、本文は400、補足テキストは300で実装して」

タイプスケール（Type Scale）

フォントサイズを一定の比率で段階的に定義したスケールです。サイズがバラバラにならず統一感が生まれます。

スケール名	サイズ（1.25比率）	使いどころ
xs	12px	キャプション・タグ・注釈
sm	14px	補足テキスト・ラベル
base	16px	本文テキスト（基準）
lg	20px	リード文・カードタイトル
xl	24px	小見出し（h3相当）
2xl	30px	セクション見出し（h2相当）
3xl	38px	ページ見出し（h1相当）
4xl	48px	ヒーローエリアの見出し

行間（Line Height）

行と行の間隔のことです。読みやすさに直結する重要な値です。

値	印象	使いどころ
1.0〜1.2	詰まった印象	見出し・短いテキスト
1.4〜1.6	標準的な読みやすさ	本文テキスト（推奨）
1.7〜2.0	ゆったりした印象	長文・読み物系コンテンツ

AIへの指示例：「本文テキストはline-height: 1.6、見出しはline-height: 1.2で実装して」

字間（Letter Spacing）

文字と文字の間隔のことです。トラッキングとも呼びます。

値	印象	使いどころ
-0.05em	詰まった・力強い	大きな見出し・インパクト重視
0em	標準	本文テキスト
0.05em	ゆったり・読みやすい	小さめのテキスト・キャプション
0.1〜0.2em	開放的・装飾的	ラベル・バッジ・大文字テキスト

タイポグラフィの階層設計

見出し・本文・補足テキストの3階層を意識することで、情報の優先順位が視覚的に伝わります。

AIへの指示例：「タイポグラフィ階層はh1: 38px/700、h2: 28px/700、h3: 22px/600、body: 16px/400、caption: 12px/400で統一して実装して」

カラー・コントラスト：色を正確に指示する語彙

「もう少し明るい青で」という指示より「Primary: #1976D2・コントラスト比4.5:1以上を満たす配色で」の方がAIは一発で正しい色設計を出力します。色を正確に伝える語彙を押さえることで、配色の指示が数値で伝えられるようになります。

色の表現方法

同じ色でも複数の表現方法があります。用途によって使い分けましょう。

表現方法	例	特徴	使いどころ
HEX	`#1976D2`	16進数表記。最も一般的	デザインツール・CSS全般
RGB	`rgb(25, 118, 210)`	赤・緑・青の3値	CSS・透明度が不要な場合
RGBA	`rgba(25, 118, 210, 0.5)`	RGB＋透明度	半透明のオーバーレイ・シャドウ
HSL	`hsl(211, 79%, 46%)`	色相・彩度・明度	色の調整・ダークモード設計に便利
HSLA	`hsla(211, 79%, 46%, 0.5)`	HSL＋透明度	半透明＋色調整が必要な場合

カラーパレットの構成

プロジェクトの配色は3種類のカラーグループで構成するのが一般的です。

グループ	役割	例
ブランドカラー	プロダクトのアイデンティティを表す色	Primary・Secondary・Accent
ニュートラルカラー	テキスト・背景・ボーダーなど無彩色系	Gray-100〜Gray-900・White・Black
セマンティックカラー	意味を持つ機能的な色	Success・Error・Warning・Info

AIへの指示例：「カラーパレットはブランドカラー（Primary: #1976D2）・ニュートラル（Gray系）・セマンティック（Success/Error/Warning/Info）の3グループで構成して」

カラースケール（Color Scale）

1つの色を明度違いで段階的に定義したものです。Tailwindのblue-100〜blue-900がこれにあたります。

スケール	明度	使いどころ
100	最も明るい	背景色・ホバー時の薄い色
300	明るい	無効状態・プレースホルダー
500	中間（メインカラー）	ボタン・リンク・アクティブ状態
700	暗い	ホバー時のボタン・強調
900	最も暗い	テキスト・アイコン

コントラスト比（Contrast Ratio）

背景色とテキスト色の明るさの差を数値化したものです。視認性とアクセシビリティの基準になります。

WCAG（Web Content Accessibility Guidelines）

Webコンテンツのアクセシビリティに関する国際基準です。コントラスト比の最低基準を定めています。

基準	コントラスト比	対象
AA（最低基準）	4.5:1以上	通常テキスト（18px未満）
AA Large	3:1以上	大きなテキスト（18px以上・太字14px以上）
AAA（高基準）	7:1以上	より高いアクセシビリティが必要な場合

ダークモードの配色設計

ダークモードは単純に色を反転させるのではなく、各トークンの値を切り替える設計が正しい方法です。

トークン	ライトモード	ダークモード
Background	`#FFFFFF`	`#121212`
Surface	`#F5F5F5`	`#1E1E1E`
Primary	`#1976D2`	`#90CAF9`
On Background	`#000000`	`#FFFFFF`
Error	`#D32F2F`	`#EF9A9A`

AIへの指示例：「CSS変数でライト・ダークモードのカラートークンを定義して、prefers-color-schemeで自動切替する実装にして」

CTA・マイクロコピー：言葉のUI設計

UIは見た目だけでなく「言葉」でも設計されています。CTA・マイクロコピー・トンマナの語彙を知ることで、AIへの指示にテキスト設計の意図まで含められるようになります。

CTA（Call to Action）

ユーザーに特定の行動を促すボタンや導線のことです。文言・色・位置・サイズがコンバージョン率を左右します。

種類	説明	例
プライマリCTA	最も重要な行動を促すメインボタン	「無料で始める」「今すぐ購入」
セカンダリCTA	補助的な行動を促すサブボタン	「詳しく見る」「資料請求」
テキストCTA	ボタンではなくリンクテキスト形式	「プランを比較する →」
フローティングCTA	画面に固定表示されるボタン	右下のチャットボタン・FAB

CTAの文言設計のポイント：

NG例	OK例	改善のポイント
「送信」	「無料で資料を受け取る」	行動後のベネフィットを伝える
「クリック」	「今すぐ試す」	動詞から始める
「はい」	「アカウントを削除する」	何をするか明確にする
「OK」	「変更を保存する」	具体的なアクションを示す

AIへの指示例：「ヒーローエリアにプライマリCTA『無料で始める』とセカンダリCTA『デモを見る』を横並びで配置して、プライマリは目立つよう大きめに実装して」

マイクロコピー（Microcopy）

ボタンのラベル・フォームのヘルプテキスト・エラーメッセージなど、UIの中の小さなテキストのことです。小さな言葉がユーザーの行動率を大きく変えます。

種類	説明	例
ボタンラベル	ボタンに書かれたテキスト	「保存する」「キャンセル」
プレースホルダー	入力前にフィールド内に表示されるヒント	「例：taro@example.com」
ヘルプテキスト	フィールドの下に表示される補足説明	「8文字以上・英数字を含む」
エラーメッセージ	入力ミスを伝えるテキスト	「メールアドレスの形式が正しくありません」
空状態のテキスト	エンプティステートの説明文	「まだタスクがありません。追加してみましょう」
確認テキスト	完了後のフィードバック	「保存しました ✅」

マイクロコピーの改善例：

場所	NG例	OK例
エラーメッセージ	「入力エラー」	「メールアドレスに@が含まれていません」
プレースホルダー	「名前」	「例：田中太郎」
ヘルプテキスト	「パスワード」	「8文字以上・英字と数字を組み合わせてください」
削除確認	「削除しますか？」	「『プロジェクトA』を削除しますか？この操作は取り消せません」

トーン＆マナー（トンマナ）

ブランドの「らしさ」を言葉と表現で統一するルールのことです。UIのテキスト全体に一貫した人格を与えます。

コンバージョン導線（Conversion Funnel）

ユーザーが最終目標（購入・登録・問い合わせ）に到達するまでの経路設計のことです。

AIへの指示例：「料金ページにスティッキーCTA（『今すぐ始める』ボタン）を画面下部に固定表示して、スクロールしても常に見えるようにして」

アクセシビリティ：すべてのユーザーに届くUIの語彙

「アクセシビリティ対応して」という曖昧な指示より、「ARIA labelを追加して・コントラスト比4.5:1以上を確保して・フォーカス管理を実装して」の方がAIは具体的な実装を出力します。アクセシビリティの語彙を知ることで、誰でも使えるUIの指示ができるようになります。

アクセシビリティとは

障害・年齢・環境に関わらず、すべてのユーザーがUIを使える状態にする設計思想です。

ユーザーの状況	影響するUI要素
視覚障害・全盲	スクリーンリーダー・alt属性・ARIA
色覚特性（色盲）	コントラスト・アイコン併用
運動障害	キーボード操作・タッチターゲット
高齢者	文字サイズ・コントラスト・シンプルな操作
一時的な障害	片手操作・明るい屋外での視認性

セマンティックHTML

「意味のある」HTML要素を使うことで、スクリーンリーダーやブラウザがコンテンツを正しく解釈できるようになります。

NG（非セマンティック）	OK（セマンティック）	理由
`<div>ボタン</div>`	`<button>ボタン</button>`	buttonはクリック可能とスクリーンリーダーが認識
`<div>見出し</div>`	`<h1>見出し</h1>`	h1〜h6で文書構造を伝える
`<div>ナビ</div>`	`<nav>ナビ</nav>`	navでナビゲーション領域と認識
`<div>記事</div>`	`<article>記事</article>`	articleで独立したコンテンツと認識

AIへの指示例：「ナビゲーションはnav要素・メインコンテンツはmain要素・フッターはfooter要素を使ったセマンティックHTMLで実装して」

ARIA（Accessible Rich Internet Applications）

HTMLだけでは伝えられないUI部品の役割・状態・関係をスクリーンリーダーに伝えるための属性群です。

ARIA属性	役割	使用例
aria-label	要素の名前を指定	`<button aria-label="メニューを閉じる">✕</button>`
aria-hidden	スクリーンリーダーから隠す	装飾用アイコンに`aria-hidden="true"`
aria-expanded	展開・折りたたみの状態を伝える	アコーディオン・ドロップダウンに使用
aria-live	動的に変化するコンテンツを通知	トースト・エラーメッセージに使用
aria-describedby	補足説明の要素を関連づける	フォームフィールドとヘルプテキストの紐付け
role	要素の役割を明示	`role="dialog"`でモーダルと認識させる

alt属性（代替テキスト）

画像が表示できない場合やスクリーンリーダーが読み上げる際の代替テキストです。SEOにも影響します。

画像の種類	alt属性の書き方	例
意味のある画像	内容を具体的に説明	`alt="青いTシャツを着た笑顔の女性"`
装飾用画像	空文字を指定	`alt=""`
アイコン（機能あり）	機能を説明	`alt="検索"`
グラフ・図	データの概要を説明	`alt="2024年売上グラフ：Q1が最高値"`

キーボード操作・フォーカス管理

マウスを使わずキーボードだけで操作できることは、アクセシビリティの基本要件です。

操作	キー	対象
フォーカス移動	Tab / Shift+Tab	インタラクティブな要素間を移動
決定	Enter / Space	ボタン・リンクの実行
キャンセル	Escape	モーダル・ドロップダウンを閉じる
選択肢移動	矢印キー	ラジオボタン・セレクト・メニュー

タッチターゲット（Touch Target）

モバイルでタップ操作をするための最小サイズのことです。小さすぎるボタンは誤タップを招きます。

基準	推奨サイズ
Apple HIG	44×44px以上
Material Design	48×48px以上
WCAG 2.5.5	44×44px以上

AIへの指示例：「モバイルのタッチターゲットは最小44×44pxを確保して、アイコンボタンが小さい場合はpaddingで当たり判定を広げて実装して」

アクセシビリティチェックリスト

AIへの指示に含めるべきアクセシビリティ要件をまとめます。

AIへの指示例：「アクセシビリティ対応として、コントラスト比WCAG AA基準・セマンティックHTML・alt属性・aria-label・キーボード操作・フォーカストラップをすべて実装して」