初級③ デザインを整える

AIに作らせたサイトが「どれも同じ、いかにもAI」に見える最大の原因は、デザインの指示をAIに丸投げしているから。今日は、無料講座「デザインの基礎（UI/UX）」の知識を使って、デザインを言葉で指示する練習をします。

STEP1：方針を1行で言葉にする

デザインの回でやった「誰に・何を・どんな印象で」を、自分のアプリについて1行書いてみましょう。例：「自分用のメモアプリ。落ち着いた配色で、夜に見ても疲れない、静かな印象」。これが今日の設計図です。

STEP2：全体のテーマを指示する

方針が決まったら、具体的な言葉に翻訳して頼みます。ポイントは「色は2色＋強調1色」「余白」「参考の雰囲気」を入れること。

サイト全体のデザインを整えて。方針：「自分用の落ち着いたメモアプリ」。背景はやわらかいクリーム系、文字は黒に近いグレー、強調色は深い緑の1色だけ。余白は広めに、角丸はひかえめに。装飾しすぎないこと。mainに反映して。

STEP3：スマホの実機で確認する

1. 1公開URLを自分のスマホで開く（①で公開してあるから、これができる！）。
2. 2崩れている場所・読みにくい場所をメモ。
3. 3「スマホで見ると〇〇が△△になっている。直して」と具体的に注文。

STEP4：細部のループ（2〜3回）

• ・「ボタンにカーソルを乗せたとき、少し色が変わるようにして」
• ・「カードの影をもっと弱く、上品にして」
• ・「見出しと本文の文字サイズの差をもう少しつけて」

③（超初級）で覚えた修正ループを、今度はデザイン用語で回す練習です。1回ごとに公開URLで見比べましょう。

おさらい：今日使った“言葉”

デザイン方針

誰に・何を・どんな印象で。指示の前にまず1行。

色のルール

基本2色＋強調1色。使う色を絞ると上品になる。

Tailwind

クラス名で見た目を指定する道具。AIが書くので“名前だけ”でOK。

レスポンシブ

スマホ・PCどちらでも見やすいこと。実機確認が一番確実。