こんな経験、ありませんか

• AIに「いい感じにデザインして」と頼んだら、狙いと全然違うテイストで返ってきた
• デザイナーへの発注文を書こうとしたが、何をどこまで書けばいいのか分からず筆が止まった
• できあがった画面を見て「なんとなく安っぽい」「なんとなくAIっぽい」と感じるが、どこが原因か言葉にできない
• 色やフォントは自分で選べても、それが「なぜその選択なのか」を人に説明できない

これは、あなたのセンスの問題ではありません。

Webデザインを構成する観点を、まだ分解して持っていないだけです。

この講座で学べること

この講座では、Webデザインの発注・レビューに必要な14の観点を、体系立てて学びます。

• 骨組みの観点 — 目的・ターゲット、情報設計、ページ構成、レイアウト。「誰に・何を・どの順番で」を決める土台の部分
• 見た目の観点 — ビジュアルスタイル、トーン&マナー、カラー設計、タイポグラフィー、余白・角丸・影。同じ骨組みでも印象を大きく左右する部分
• 部品と挙動の観点 — コンポーネント設計、UI状態、レスポンシブ設計、アクセシビリティ。実際に触れたときの使い勝手を決める部分
• まとめる観点 — デザインシステム化（Design Token）。ここまでの観点を再利用可能なルールとしてまとめる考え方

各章の最後には、そのまま使える「AI・デザイナーへの指定例プロンプト」を掲載しています。学んだその場で、自分の案件に当てはめて使えます。

対象者

この講座は主に以下の方を対象にしています。

• AIやデザイナーにWebサイト・LPのデザインを発注する立場の方（非デザイナー）
• 「おしゃれにして」以外の言葉でデザインを発注できるようになりたい方
• できあがったデザインを見て、良し悪しを言葉で判断できるようになりたい方

コードを書く知識は前提にしません。デザインの専門用語も、出てくるたびに定義から説明します。

本講座の特徴

「なぜ」を必ずセットで説明する

用語の暗記では、初めて見る案件に応用できません。各観点を「観点 → なぜ必要か → 具体例 → 指定例プロンプト」の順で解説し、判断基準ごと持ち帰れるようにしています。

そのまま使えるテンプレート付き

最終章では、14観点を1つのプロンプトにまとめた発注テンプレートを掲載しています。空欄を埋めるだけで、AI・デザイナーへの発注文が完成します。

講座の構成

1. 目的・情報設計・ページ構成・レイアウト

誰に・何を・どの順番で・どんな骨組みで届けるか。すべての章の土台になる4つの観点です。

2. ビジュアルスタイル図鑑

フラットデザインからBento UIまで、見た目の流派26種類を一覧化。1つに絞らず組み合わせて指定する考え方を学びます。

3. トーン&マナー・カラー設計

雰囲気の言葉の選び方と、色を役割ごとに決める考え方。

4. タイポグラフィー

文字の見た目と読みやすさの設計。日本語サイト特有の注意点を扱います。

5. 余白・角丸・影

ゆとり・柔らかさ・立体感をコントロールする3つの要素。

6. コンポーネント設計・UI状態

ボタンやカードなどの部品の定義と、Hover・Disabled・Loadingなど状態の設計。

7. レスポンシブ設計・アクセシビリティ

PC・スマホでの見え方の違いと、誰にとっても使いやすくするための配慮。

8. デザインシステム化と発注テンプレート

ここまでの観点をDesign Tokenとしてまとめ、そのまま使える発注テンプレートで実践に落とし込みます。

本講座で扱わないこと

• 実際のコーディング方法 — HTML/CSSの書き方には立ち入りません。発注・レビューに必要な言葉と観点に集中します
• 特定のデザインツールの操作方法 — Figma等のツール操作は扱いません

実例：この講座の内容で作ったランディングページ

この講座で解説している観点を実際に適用すると、どんなページになるのか。第1章で扱う「良い情報設計の9ステップ」の構成どおりに組んだ、この講座自身のランディングページを実例として用意しています。

実例のランディングページを見る（ページ右下の「情報設計ラベルを表示」を押すと、各セクションと9ステップの対応が確認できます）