AIディレクションの教科書
AIプロンプターのためのWebデザイン基礎知識と導き方
なぜコードを「HTML・CSS・JS」の3つに分けて運用するの？
プロの現場では、1つのファイルにすべてのプログラムをごちゃ混ぜに書くことはしません。「index.html（骨組み）」「style.css（見た目の装飾）」「script.js（ボタンの開閉などの動き）」の3つのファイルに綺麗に役割を分離して管理します。
役割ごとに部屋を分けてあげることで、人間にとっても、そして指示を受けるGemini（AI）にとっても「どこを修正すればいいか」が一目でクリアになり、プログラムのバグを激減させ、爆速で正確な修正プロンプトを投げられるようになるという最強のメリットがあります。
【初めてでもできる】Day 5: v0からの抽出 ➔ Geminiで3ファイルへの分離手順
v0ツールが生成したNext.jsコード（.tsx形式）から、人間のブラウザで読める標準のHTML・CSS・JSへ、Geminiを使って安全に分解するロードマップです。
- コードの引っこ抜き： v0の編集画面の左側メニューから、
appフォルダ内のpage.tsxを開き、中央のコードをすべてコピー（Ctrl + A➔Ctrl + C）します。同様に、componentsフォルダ内にある各セクションのファイル（hero-section.tsx等）のコードもメモ等に集めます。 - Geminiへの分離命令： コピーしたすべてのコードを丸ごとGemini（このチャット）に貼り付け、「これを初学者が扱いやすいように独立した index.html, style.css, script.js の3つに分けて出力して」と指示します。
- 手元での保存： パソコンの「メモ帳」を3つ新しく開き、Geminiが出力したコードをそれぞれ別々に貼り付け、半角英数字で
index.html、style.css、script.jsと名前をつけて保存します。同じフォルダにまとめて置いておけば、ブラウザで1秒で確認できます。
第1章 情報設計とワイヤーフレーム
1. 「ペルソナ（ターゲット）」を1人に絞る本当の理由
「たくさんの人に来てほしいから、全員をターゲットにすればいい」というのは素人の罠です。全員に向けたメッセージは、結果的に誰の心にも刺さりません。
➔ 誰も足を止めない地味なメッセージになります。
➔ 対象の人が「私のことだ！」と深く突き刺さります。
2. 「売れるLP」の黄金ルート
ランディングページ（LP）の構成順序は、人間の心理学に基づいています。人間がネットで買い物をしたり予約をしたりするときの「心の変化」に沿っているのです。
- 🚀 メインビジュアル： 3秒で「自分に関係あるサイトだ！」と手を止めさせる。
- 🤝 お悩み共感： 「そうそう、そうなのよ！」と共感させ、ページを下に読み進めさせる.
- 💎 選ばれる強み： 「へぇ、ここなら私の悩みを解決してくれそう」と納得してもらう。
- 💳 料金プラン： 不安を取り除き、最後の「申し込みボタン（CTA）」へ背中を押す。
第2章 デザインの4原則
AIが出してきたデザインをプロ級に化けさせるための、絶対に破ってはいけない4つの基本ルールです。
① 近接（きんせつ）
関連する情報同士を「近づけてグループ」にし、違う情報は「遠ざける」こと。
❌ 素人の罠： メニュー名と金額の間の余白が空きすぎていて、どれがいくらか分からなくなる。
【AI指示例】「メニュー名と価格はセットの情報なので、もっと近づけて配置してください」
② 整列（せいれつ）
要素の端（左端、中央、右端）を綺麗に1本の見えないラインで揃えること。
❌ 素人の罠： 文字のスタート位置が、上の画像や見出しと微妙にズレていてガタガタに見える。
【AI指示例】「メインコンテンツの左端的ラインを、ヘッダーのロゴの左端と綺麗に整列させてください」
③ 反復（はんぷく）
同じ役割 of パーツ（ボタンや見出しなど）のデザインのルールを繰り返すこと。
❌ 素人の罠： 1つ目のボタンは青、2つ目は緑、3つ目は赤…とバラバラで、どこがボタンか混乱する。
【AI指示例】「サイト内のすべての重要ボタンのデザインを、style.cssで共通のクラスとして反復定義して」
④ コントラスト
一番大事な情報と、そうでない情報の「強弱・大小」をハッキリつけること。
❌ 素人の罠： 全部を大きく目立たせようとして、結果的にどこを読めばいいか分からなくなる。
【AI指示例】「キャッチコピー以外の文字サイズを一段落とし、主役の文字だけが圧倒的に目立つようコントラストをつけて」
第3章 プロの配色ルールとタイポグラフィ
プロのサイトがすっきり見えるのは、使う色の「面積」のルールを厳格に守っているからです。
- ベースカラー（背景など）：70% （基本は白や薄いグレー）
- メインカラー（主役の色）：25% （企業のテーマカラー。紺や緑など）
- アクセントカラー（一番目立たせる色）：5% （ボタン等に使う、パッと目を引く色）
フォント（文字の形）は、人間でいう「話し方の声」と同じです。世界観に合わないフォントはユーザーに違和感を与えます。
第4章 スマホ対応とコードの裏側
現代 of Webアクセスは8割以上が「スマホ」からです。PC画面がどれだけ綺麗でも、スマホで見づらければ価値はゼロになります。画面の横幅が変わる境界線のことを専門用語で「ブレイクポイント」と呼び、横並びのレイアウトをスマホ時に縦並びへ自動変換する指示をAIへ的確に出すスキルを磨きます。
<div> とは、ただの「中身のない透明な箱」という意味です。すべてがdivの箱で作られたサイトは、Googleの検索ロボット（AI）が読みに来たときに「どこが重要か」を理解できず、SEO（検索順位）で圧倒的に不利になります。
見た目は同じでも、ヘッダーには <header>、中身には <main>、フッターには <footer> という、意味のある正しいHTMLタグ（セマンティックタグ）にAIに清書（リファクタリング）させることがプロの条件です。
第5章 品質保証（QA）と言語化
完成してすぐに「できました！」と出すのはアマチュアです。プロは泥臭いテストを必ず行います。
- 複数ブラウザチェック： ネットを見るアプリ（Chrome/Safari/Edge）の違いによる崩れを事前に防ぐ。
- 画像の軽量化（表示速度）： 人間はサイトが開くのに3秒以上かかると、半分以上の人がイライラして閉じてしまうデータがあります。見た目を保ったまま容量を極限まで軽くするようAIに指示します。
Day 20のプレゼンで一番大切なのは、「なんとなく作りました」を100%封印することです。
このように、すべてのデザインの裏側にある「意図（理由）」を説明できること。これこそが、AIに丸投げする素人と、AIを駆使して価値を生み出す「本物のプロ」の決定的な違いです。
第6章 GitHubへのアップロードと共有方法
メールアドレス、パスワードを決めて入力します。その後、入力したメールアドレスに確認用コードが届くため、そのコードを入力してアカウントを登録してください。
画面左上にある「三本線のメニュー」をクリックします。英語のメニューがいくつか出てきますが、その中から「All repositories」をクリックしてください。次に、画面右上にある緑色の「New repository」ボタンをクリックします。
入力欄がいくつか表示されるので、以下のように設定を進めていきます（英語・日本語どちらでも入力可能です）。
- Repository name： 成果物の名前を入力します。
- Description： 成果物に対しての説明を入力します。
- Choose visibility： 公開範囲を設定します。範囲を限定したい場合は「Private（鍵マーク）」を選びます。
主にこの3つを選択・入力すれば設定は完了です。
③が完了すると、成果物をアップロードする専用のページが出来上がります。
まず、Quick setupに書かれている「uploading an existing file」（青文字の部分）をクリックします。これは「自分でファイルを選択してアップロードする」という意思表示になります。
次に、画面中央の「choose your files」と書かれているエリアに、アップロードしたいファイル（index.html, style.css, script.js）をドラッグ＆ドロップしてください。ファイルが追加されたら、ページ下部にある緑色の「Commit changes」をクリックします。これで無事にアップロードが完了します。
公開範囲を「Private」に設定した場合、他の人を自分のページ（リポジトリ）に招待しないと内容を見てもらうことができません。そのため、以下の手順で招待を行います。
- 画面上部にある「Settings」タブをクリックします。
- 左側メニューにある「Collaborators」をクリックします。
- 画面中央にある緑色の「Add people等级」ボタンをクリックします。
- 入力欄が表示されるので、招待したい人の「GitHubアカウント名」「フルネーム」「メールアドレス」のいずれかを入力して検索し、選択して招待を送信します。
【自分で調べてみよう！】自走力をつける検索キーワード
気になった言葉があれば、GoogleやCursorのAIチャットで調べてみよう。調べる力こそが最大の財産になります。