やあ！みんな！探求者のケイだよ！
バックエンドのデータベース設計が終わり、AIとのペアプログラミングで処理のコードも書き上がった。 データが正しく保存され、計算結果もバッチリ返ってくる。 よっしゃ、これでついに僕のアプリも完成だ！
そう意気込んでブラウザの画面を開いた瞬間、君は絶望的な気持ちにならないかな？
そこにあるのは、白と黒の文字だけが羅列された画面。 ボタンは四角くて野暮ったく、入力欄は画面の端から端まで間延びしている。 どこをクリックすればいいのか分からないし、全体的に漂う『平成初期のホームページ感』がすごい。
裏側の仕組みは完璧に動いているのに、見た目がダサすぎて、とてもじゃないけれど人に見せられる代物じゃない。 ここで多くの個人開発者は、こう思って筆を折ってしまうんだ。
『僕には美術的なセンスが全くないから、カッコいいアプリなんて作れないんだ』
でもね、それは大きな誤解だよ。 Webサービスの見た目を作るフロントエンドの世界において、天才的な絵の才能や、色彩感覚なんてものは必要ない。 必要なのは、法則を知ること。そして、その法則をAIに言葉で指示する技術だけなんだ。
今日は、美術の成績がずっと2だったような人でも、ユーザーが惚れ込むモダンな ui デザイン を錬成できる、超実践的なAI活用術を翻訳していくよ。
意味のない精神論は一切なしだ。 今日からすぐに君のコードに組み込める、魔法のプロンプトとデザインの言語化テクニックを伝授しよう。 さあ、ダサい画面にお別れを告げる準備はいいかな？
💻 『動くけどダサい』という絶望の正体
まず、なぜ僕たちが作る画面は、あんなにも素人っぽくなってしまうのだろうか。 敵の正体を知らなければ、AIに正しい指示を出すことはできない。
なぜ素人の画面はダサくなるのか
プロのデザイナーが作った画面と、初心者が作った画面。 そこには、決定的な3つの違いがある。
1：余白がない 初心者は、画面の隙間を埋めようと要素を詰め込みすぎる。 文字と枠線の間、ボタンとボタンの間に呼吸できるスペース（余白）がないから、窮屈で安っぽく見えるんだ。
2：色が多すぎる、または原色を使っている 赤、青、緑といった原色をそのまま使ったり、目立たせようとして何色も使ったりすると、目が疲れるカオスな画面になる。
3：揃っていない 左揃え、中央揃えが混在していたり、角の丸みがバラバラだったりすると、無意識のうちにユーザーは違和感を覚える。
美術2でもUIは作れる
ここで朗報だ。 今挙げた3つの原因は、すべて『ルール』の問題であって『センス』の問題ではない。 ピカソのような独創的な絵を描く必要はないんだ。
Webの ui デザイン は、建築や数学に近い。 ルール通りにブロックを配置すれば、誰でもそれなりに美しいものが作れる。 そして、そのルールを世界で一番熟知しているのが、GeminiやCursorのAIたちなんだよ。
📐 ui デザイン の基本ルールをAIに組み込む
では、具体的にどうやってAIに指示を出せばいいのか。 現代のフロントエンド開発において、最も効率的で美しい画面を作れる魔法の杖がある。 それが『Tailwind CSS（テイルウィンド・シーエスエス）』という技術だ。
Tailwind CSSを魔法の杖にする
Tailwind CSSとは、あらかじめ用意された短いクラス名（タグにつける名前）をHTMLに書き込むだけで、スタイルが適用される仕組みのことだ。 例えば、ボタンを青くして角を丸くしたい場合、従来なら別のファイルに長々とスタイルを書いていた。 でもTailwindなら、HTMLタグの中に『bg-blue-500 rounded-lg』と書くだけで終わる。
AIはこのTailwind CSSのコードを書くのが異常なほど得意だ。 だから、AIに画面を作らせる時は、必ず『Tailwind CSSを使って』と指定しよう。 これだけで、出力されるコードのモダンさが桁違いに上がる。
余白と配色のルールをプロンプトで縛る
AIに自由度を与えすぎると、とんでもないデザインを出してくることがある。 だから、先ほど挙げた素人の失敗を避けるための『縛り』をプロンプトに入れるんだ。
プロンプトの基本ルール： ・色はベースカラー、メインカラー、アクセントカラーの3色に絞ること。 ・原色は避け、少し落ち着いたパステル調やダークトーンを使用すること。 ・要素間の余白（マージンとパディング）はゆったりと取ること。 ・角丸（rounded）や、わずかな影（shadow）をつけて、今風の柔らかい立体感を出すこと。
これらのルールを、Cursorのインラインチャットにそのまま叩き込むんだ。
🪄 実践：CursorとGeminiを使った魔法のプロンプト
それでは、実践的なプロンプトの例を見ていこう。 今回は、ユーザーの情報を表示する『プロフィールカード』を作ると仮定する。
失敗するプロンプト
『ユーザーの名前とアイコン、自己紹介文が入ったプロフィールカードのHTMLを作って。』
これだと、ただ四角い枠の中に文字が詰まった、味気ないカードが出てくる可能性が高い。
成功する超実践的プロンプト
これを、次のように変更する。シングルクォーテーションで囲んだ部分がポイントだ。
【実践プロンプト】 Tailwind CSSを使用して、モダンで洗練されたプロフィールカードのコンポーネントを作成してください。 以下の ui デザイン のルールを厳守すること。
- 背景色は薄いグレー（bg-gray-50）とし、カード自体は白（bg-white）にする。
- カードには柔らかな影（shadow-lg）と、適度な角丸（rounded-xl）をつける。
- カード内の内側の余白（p-8）を広めに取り、ゆったりとした印象にする。
- ユーザーアイコンは円形（rounded-full）にし、名前の文字は太字のダークグレー（text-gray-800 font-bold）にする。
- スマホで見ても崩れないように、レスポンシブ対応（flexboxやgrid）を含めること。
どうだろうか。 ただ『かっこよくして』と言うのではなく、Tailwindの具体的なクラス名や、余白、影の指示を言語化して伝えている。 AIはこれを読み取り、プロのデザイナーがFigmaで作ったような、洗練されたカードUIのコードを一瞬で生成してくれるんだ。
🏢 車両管理ダッシュボードを激変させる
もっと複雑な画面の場合はどうだろう。 例えば、以前の記事でも触れた『車両コスト管理SaaS』の管理画面（ダッシュボード）だ。
改善前のありがちな失敗
素人がダッシュボードを作ると、画面いっぱいにエクセルみたいな巨大な表を配置してしまう。 データは見えるけれど、今月の経費が上がったのか下がったのか、直感的に分からない。
改善プロンプト：プロのデザイナーになりきらせる
ダッシュボードのような複雑な画面をAIに作らせる時は、AIに『役割（ロール）』を与えることが重要だ。
【実践プロンプト】 あなたは、SaaSの ui デザイン を得意とするシニアフロントエンドエンジニアです。 車両コスト管理アプリのダッシュボード画面を、Tailwind CSSを用いて作成してください。 以下の要素を、ユーザーが直感的に理解できるように配置してください。
・画面上部：今月の総経費、先月比の増減を示す3つのサマリーカード。金額は大きく、増減は緑と赤の文字色で分かりやすく。
・画面中央：車両ごとのガソリン代の棒グラフを配置するスペース（プレースホルダーで可）。枠には影（shadow-sm）をつける。
・画面下部：直近の給油履歴を5件だけ表示するシンプルなテーブル。
・全体の色調：清潔感のあるブルーをメインカラー（bg-blue-600など）とし、背景は薄いグレーにしてコントラストをつける。
このように役割を与え、配置の意図（金額は大きく、増減は色で）を明確に伝える。 するとAIは、情報の優先順位を理解し、重要な数字がパッと目に飛び込んでくる、本格的なダッシュボードのコードを書き上げてくれる。
出力されたコードの読み解き方
出力されたコードをCursorで反映させて、ブラウザで確認してみよう。 もし、サマリーカードの間隔が狭すぎると感じたら、自分でコードを書き換える必要はない。 ハイライトして、Cursorのチャットにこう指示するだけだ。
『この3つのサマリーカードの間の余白が狭いです。gap-4をgap-8に変更して、もっとゆとりを持たせて。』
これで一瞬で修正される。 君はコードを手打ちするのではなく、画面を見ながらAIに微調整の指示を出す『現場監督』になればいいんだ。
🎨 デザインの言語化テクニック
AIを使ってモダンな ui デザイン を錬成するための最大の鍵は、『言葉のボキャブラリー』だ。 良いデザインを作らせるためには、良いデザインを言葉で表現できなければならない。
抽象的な形容詞から具体的な指示へ
『ポップな感じで』とか『スタイリッシュに』といった抽象的な形容詞は、AIには伝わりにくい。 スタイリッシュとは何かを分解して伝えるんだ。
・スタイリッシュ＝『モノトーンを基調とし、フォントは細めで、余白を広めにとる』
・ポップ＝『角丸を大きめに取り、少し強めの影を落とし、彩度の高いアクセントカラーをボタンに使う』
このように、形容詞を具体的なCSSのプロパティに変換して指示する癖をつけよう。
既存のサービスを参考にする
言葉で表現するのが難しい場合は、自分が『カッコいい』と思う既存のサービスをGeminiに分析させるのも効果的だ。
【分析プロンプト】 Stripe（ストライプ）という決済サービスのウェブサイトの ui デザイン が素晴らしいと感じています。 あの洗練されたモダンなデザインを実現するために、Tailwind CSSでどのようなクラス（色使い、余白、影の付け方、フォントの扱いなど）を使えばいいか、特徴を5つに分解して教えてください。
Geminiはプロの視点でStripeのデザインを分解し、『淡いグラデーションの背景』や『非常に繊細なドロップシャドウ（shadow-sm）』といった具体的なテクニックを抽出してくれる。 君はそれをコピーして、自分のアプリの開発プロンプトに貼り付ければいい。 一流のデザインのエッセンスを、言葉経由で自分のプロダクトに注入するんだ。
📐 マイクロインタラクションで命を吹き込む
静止画としての見た目が整ったら、最後にアプリに『命』を吹き込もう。 それは、ユーザーが操作した時のちょっとした動き（マイクロインタラクション）だ。
ホバー時のアクション
ボタンにマウスカーソルを乗せた時（ホバー時）、何も変化がないと、ユーザーはそれが押せるものなのか不安になる。
【実践指示】 すべての主要なボタンに対して、マウスオーバー時に背景色が少し濃くなり、上に1ピクセルだけ浮き上がるようなアニメーション（transition-all duration-200 hover:-translate-y-1 hover:shadow-md）を追加して。
この少しの動きがあるだけで、アプリの触り心地は劇的に向上し、高級感が出る。 AIに指示する時は、『transition（トランジション）』や『hover（ホバー）』といったキーワードを含めると、滑らかな動きを実装してくれる。
状態の変化を伝える
データが保存された時の『成功しました』という通知（トースト通知）や、データ読み込み中のクルクル回るアイコン（ローダー）。 これらも、優れた ui デザイン には欠かせない。 『データ保存後に、画面の右上に緑色でフェードインする成功メッセージのコンポーネントを作って』と頼めば、ユーザーを不安にさせない親切な設計が完成する。
🚪 結論：デザインはセンスではなく言葉の力だ
今日の探求をまとめよう。 裏側のコードは書けるのに、見た目のダサさに心を折られそうになっている君へ。
もう、デザインセンスがないと自分を卑下する必要はない。 フロントエンドの世界において、君は筆を持つ画家になるのではなく、優秀なAIデザイナーに的確な指示を出すディレクターになればいいんだ。
１．素人っぽさの原因である『余白のなさ』『色の乱用』をなくすよう、プロンプトで縛りを設ける。
２．Tailwind CSSを指定し、影（shadow）や角丸（rounded）などの具体的なクラス名を言語化して伝える。
３．抽象的な形容詞は使わず、既存の美しいサービスをAIに言語化させて、そのエッセンスを盗む。
これらを実践するだけで、君のアプリは見違えるように美しく、モダンに生まれ変わる。 ユーザーが最初に触れるのは、裏側の複雑なPythonのコードではなく、表側の画面だ。 画面が美しければ、プロダクト全体の信頼性は格段に跳ね上がる。
さあ、Cursorのチャットウィンドウを開こう。 『このダサいボタンを、思わず押したくなるようなモダンなデザインに変えてくれ』 その言葉の魔法が、君のプロダクトに魂を宿す瞬間を楽しんで！
それじゃあ、また次の探求で会おう！ （僕も今から、自分のアプリの余白をもう一度見直してくるよ！）
関連記事はこちら！
コメント