Webの「言葉（用語）」を知っていると、AIとの会話は劇的にスムーズ！！
AIを最強の助っ人にする「ズルい」頼み方（調理の心得）
「レスポンシブ」という合言葉を最初に伝える。
「レスポンシブを前提にして！」と先に釘を刺すのがポイントで、後から「スマホで見たら崩れたわ」って言うより、最初に「スマホで見ることが多いから、レスポンシブ対応で書いてな」って伝えておく。
AIに流行りを聞いてから「選ぶ」だけの、ディレクター術。
詳しいことは抜きにして、「〇〇（モーダルやアコーディオンなど）を作りたいねんけど、今はどんなデザインが流行ってる？ 代表的なスタイルを5つ教えて。その中から私が選ぶから、選んだ後にコードを書いて！」
【土台】サイトの基本の形を作るパーツ（配置・レイアウト）
| ヘッダー ＆ グローバルナビゲーション | サイトの一番上にある、ロゴやメインメニュー（ホーム、会社概要とか）が並んでる場所。 例：「一番上にロゴとメニューが横に並んだ『ヘッダー』を作って。メニューは『グローバルナビゲーション』として、おしゃれなフォントにして」 |
| ハンバーガーメニュー | 三本線のアイコン「≡」をクリックしたら、メニューが横からスッと出てくるやつ。 例：「スマホで見るときだけ、メニューを『ハンバーガーメニュー』の中に隠して。クリックしたらアニメーション付きで開くようにして」 |
| ヒーローセクション | サイトを開いた瞬間に一番最初に目に飛び込んでくる、トップページの巨大なメインエリアのこと。 例：「トップページの一番上に、画面いっぱいの『ヒーロー』を表示させて。背景には動画を流して、真ん中にキャッチコピーを載せて」 |
| サイドバー | 記事の横にある、カテゴリー一覧とかプロフィールが載ってる場所。 例：「PCで見たときだけ右側に『サイドバー』を表示させて。中には〇〇を入れて」 |
| フッター | サイトの一番下にある、コピーライト（©）やお問い合わせへのリンクがある場所。 例：「一番下に『フッター』を作って。背景を濃いグレーにして、白文字で著作権情報を入れて」 |
【メイン具材】作りたいものが見つかる「UI部品リスト」
「必要な時だけ、パッと出す」系（省スペース）
| アコーディオン | Q&Aとかで、クリックしたらパカッと開くやつ。 |
| モーダル（ダイアログ） | 画面の真ん中にポンッと浮き出てくる窓。 |
| タブ | パチパチ切り替えて中身を変えるやつ。 |
「たくさんの情報を、きれいに並べる」系（整理整頓）
| カルーセル（スライダー） | 横にスルスル流れる画像とか。 |
| カード | 写真、文字、リンクなどがセットになった、おしゃれな箱。 |
| グリッド | 画像ギャラリーなど、縦横にきれいに並べるレイアウト。 |
| 無限スクロール | ページ遷移なしで新しいコンテンツが自動的に読み込まれしくみ。 |
「動きで、ワクワクさせる」系（演出・ヒント）
| トースト | 画面の端っこに「保存しました」とか一瞬出て消える小さな通知。 |
| ツールチップ | マウスを乗せた時に出る補足説明。 |
| ローディング・スピナー | 読み込み中にくるくる回るやつ。 |
| スケルトンUI | 中身が表示される前に、「ここには画像が入るで、ここは文章やで」って、うっすらグレーの枠がふわふわ光りながら待機してるやつ。 |
「ユーザーに選んでもらう」系（反応・切り替え）
「はい／いいえ」や、設定を変えてもらう時に使うやつ。
| トグルスイッチ | スマホの「ON/OFF」みたいなボタン。 |
| ドロップダウン | クリックしてリストから選ぶやつ。 |
| チェックボックス | レ点（チェック）をいくつも入れられるやつ（複数選べる）。 |
| ラジオボタン | レ点（チェック）1つだけ選んでほしいときのやつ（1つだけ選ぶ）。 |
「今どこ？次は何？」を教える系（案内・進行）
| パンくずリスト | 今いる場所を「ホーム ＞ 設定」みたいに教えるやつ。 |
| プログレスバー | 「あと50%で完了！」みたいな進捗バー。 |
| ページネーション | 「1 2 3 … 次へ」みたいに、長いリストを小分けにしてめくるボタン。 |
| ステップフォーム | 「①入力 ＞ ②確認 ＞ ③完了」みたいに、今どの段階かを教えてくれるバーのこと。 |
【味付け】見た目をプロ級に変える「デザインスタイル」図鑑
シンプル系（失敗しない！定番スタイル）
フラット：
影や立体感のない、スッキリした現代的なデザイン。
セミフラット：
基本はフラットやけど、ボタンにだけ少し影をつけて「押しやすく」したもの。
ミニマリズム：
余白をたっぷり使って、情報を極限まで絞り込んだ「大人のおしゃれ」な感じ。
マテリアルデザイン：
Googleが作った「使いやすさの教科書」スタイル。誰が見ても迷わない安心感。
質感・流行系（映える！最新スタイル）
グラスモーフィズム：
すりガラスのような透け感。
ニューモーフィズム：
プラスチックがふんわり浮き上がったような質感。
世界観・個性系（個性が光る！こだわりスタイル）
レトロ・モダン：
80年代風のパキッとした色使いや、懐かしいフォントを今風にアレンジしたもの。
スケッチ風：
鉛筆で描いたような線や質感。親しみやすさと温かみが出るで。
ブルータリズム：
あえて荒々しく、大きな文字や太い線を使った「カッコいい、尖った」デザイン。
【隠し味】AIに「もう一工夫」頼むための魔法のリスト
レスポンシブの隠し味（スマホ対応の鉄則）
今の時代、スマホで見られないサイトは致命的。「これだけは先に！」という合言葉
- ブレイクポイント（切り替わる境目）： 「768pxを境目にして」と伝えると、タブレットやスマホで見た時にちょうどいい感じに切り替えてくれる。
- カラムの変更（並べ方）： 「PCでは横に3つ並べて（3カラム）、スマホでは縦に1つずつ並べて（1列）」と指示する。
「レスポンシブ対応で。768px以下になったら横並びを解除して、縦1列に並び替えて」こんな感じ
見た目の質感（デザインの雰囲気）
- 角丸（Border Radius）：
- 弱め： 「少しだけ丸く（4px〜8px）」→ カチッとした、信頼感のある印象。
- 強め： 「かなり丸く（20px以上）」→ 優しくて、可愛らしい印象。
- 影（Box Shadow）：
- なし： フラットで今どきのスッキリ感。
- 薄い： ほんのり浮いている、上品な感じ。
- 浮いてる（強め）： 影を深くして「上に乗ってる感」を出す。クリックしやすそうに見えるで。
- 境界線（Border）：
- なし： 色の差だけで境界を作る、おしゃれなスタイル。
- あり： 1pxの細い線を入れると、情報の区切りがハッキリする。
- 色のトーン：
- 主張（ビビッド）： 原色に近いハッキリした色。
- 控えめ（パステル・くすみカラー）： 目に優しい、落ち着いた色。
動きの隠し味（アニメーションの魔法）
「スッ」と動くか、「ぬるっ」と動くか。ここでセンスが決まる！
- 速さ（Duration）：
- 即（0.1〜0.2秒）： キビキビした動き。ストレスがない。
- ゆっくり（0.5〜0.8秒）： 優雅で高級感のある動き。
- イージング（Easing / 動きの緩急）：
- スッ（Linear）： 一定の速さ。ちょっと機械的。
- ぬるっ（Ease-in-out）： 動き出しと終わりがゆっくり。これが一番「心地いい」動きやね。
- 方向（Direction）：
- 「下から上にフェードインさせて」「中央からパッと広がるように出して」と指定する。
操作との関係（ユーザーとの対話）
「これ、触れる」とユーザーに分かってもらうための工夫。
- ホバー（Hover）： マウスを乗せた時に色を変えるなど。
注意点： スマホにはホバーはない - クリック（Click）： 押した瞬間に少しだけボタンが沈む動き（Active状態）をつけると、操作感がめちゃくちゃ良くなる。
- スクロール（Sticky / Fixed）：「画面をスクロールしても、ヘッダーはずっと一番上に固定しててな」と頼むなど。