無料オンライン講座｜非デザイナーのための Webデザイン発注術
「いい感じにして」を、伝わる言葉に。
AIやデザイナーへのデザイン発注が思いどおりにならないのは、センスの問題ではありません。伝えるべき観点を分解して言葉にできていないだけです。この講座では、Webデザインを14の観点に分解して指定する方法を、全8章で学べます。
- 全8章・無料
- 14観点を体系化
- 26スタイル図鑑つき
- 章末にコピペで使えるプロンプト
いままでの発注
「いい感じに、おしゃれにしてください。今っぽく、見やすい感じで」
→ 何往復しても、思っていたのと違う
講座を読んだ後の発注
「20代後半女性向けに、ナチュラルで上品・親しみやすい。可愛すぎ・子どもっぽいは避け、余白広め、サーモンピンク＋アイボリーの柔らかい配色。UIはカード型中心、角丸大きめ、影薄め」
→ 初回の提案から、意図に近い
こんな経験は、ありませんか？
- AIに「いい感じにデザインして」と頼んだら、狙いと全然違うテイストで返ってきた
- デザイナーへの発注文を書こうとして、何をどこまで書けばいいのか分からず手が止まった
- できあがった画面が「なんとなく安っぽい」と感じるのに、どこが原因か言葉にできない
- 色やフォントは選べても、「なぜその選択なのか」を人に説明できない
これは、あなたのセンスの問題ではありません。
Webデザインを構成する観点を、まだ分解して持っていないだけです。
デザインを「14の観点」に分解して、
言葉で指定できるようにする講座です
「おしゃれに」という一言は、誰に・何を・どの順番で・どんな見た目で・どんな色で、という複数の独立した観点をすべて相手の想像に委ねてしまいます。この講座では、その観点を1つずつ言葉にできるようにします。
骨組みの観点
誰に・何を・どの順番で届けるかを決める土台
- 目的・ターゲット
- 情報設計
- ページ構成
- レイアウト
見た目の観点
同じ骨組みでも印象を大きく左右する部分
- ビジュアルスタイル
- トーン&マナー
- カラー設計
- タイポグラフィー
- 余白・角丸・影
部品と挙動の観点
実際に触れたときの使い勝手を決める部分
- コンポーネント設計
- UI状態
- レスポンシブ設計
- アクセシビリティ
まとめる観点
決めたルールを再利用可能な形にする
- デザインシステム化（Design Token）
この講座の3つの特徴
「なぜ」を必ずセットで解説
用語の暗記では、初めての案件に応用できません。各観点を「観点 → なぜ必要か → 具体例 → 指定例プロンプト」の順で解説し、判断基準ごと持ち帰れるようにしています。
章末に、そのまま使える指定例プロンプト
すべての章の最後に、AI・デザイナーへコピペで渡せる指定文を掲載。最終章には14観点をひとつにまとめた発注テンプレートもあり、学んだその場で自分の案件に使えます。
見た目の違いを「実物」で見比べられる
26種のビジュアルスタイルと12種のトーンを、同じ文面のカードに実際のHTML/CSSで適用したギャラリーを収録。「モダン」「ナチュラル」といった言葉のイメージ差をなくします。
進め方は、3ステップ
-
無料で読み始める
会員登録は不要。ブラウザでそのまま読めます。スマートフォンにも対応しています。
-
観点と「なぜ」を学ぶ
全8章。目的・ターゲットから情報設計、色、文字、部品、Design Tokenまで順番に押さえます。
-
プロンプトで発注する
章末の指定例を自分のサービスに書き換えて、AIやデザイナーにそのまま渡すだけです。
読みながら、次にAIへ出す依頼文がそのまま書けます。
無料で読み始める読んだ人の声
発注テンプレートの空欄を埋めるだけで、初回提案のズレが激減しました。いままで自分は「いい感じに」としか言えていなかったんだと痛感しました。
AIに画面を作らせるとページごとに色も余白もバラバラだったのが、Design Tokenを渡すようにしたら一発で揃うようになりました。最終章だけでも読む価値があります。
デザイナーさんとの打ち合わせで「カードのPaddingは24pxで」と言えるようになり、確認のやり取りが一往復で済むように。非デザイナーこそ読むべき講座です。
料金
デザインシステム基礎講座
¥0（無料）
会員登録・メールアドレスも不要です
- 14観点の解説（全8章＋イントロダクション）
- 各章末の指定例プロンプト
- 14観点の発注テンプレート
- 26スタイル・12トーンの実物ギャラリー
現在すべての章を無料で公開しています。
よくある質問
Q. デザインの知識がまったくなくても読めますか？
A. はい。この講座はAIやデザイナーに発注する側の非デザイナーの方を対象にしています。デザインの専門用語は、出てくるたびに定義から説明します。
Q. コードが書けなくても大丈夫ですか？
A. 大丈夫です。HTML/CSSの書き方には立ち入りません。発注とレビューに必要な言葉と観点に集中しています。
Q. Figmaなどのデザインツールの使い方は学べますか？
A. ツールの操作方法は扱いません。どのツールを使う場合にも共通して必要になる「何を決めて、どう伝えるか」を学ぶ講座です。
Q. どの章から読んでもいいですか？
A. 第1章から順に読む前提で構成していますが、各章は観点ごとに独立しているので、気になる章から読んでもかまいません。章末の指定例プロンプトは単体でも使えます。
Q. 本当に無料ですか？
A. はい。全章を無料で公開しており、会員登録も不要です。