AIで見栄えのよいアプリをデザインする方法

AIから見栄えのよいアプリを引き出すには、「おしゃれにして」と頼むのをやめ、デザイナーが欲しがる材料を渡すことです。気に入った参考例を2〜3個、デザインの方向性に名前を付けたもの、文字・色・余白の具体的なルールです。そのうえで1画面だけ作り、正しく仕上がるまで直し、同じ仕組みを他の画面にも適用させます。AIらしい見た目の多くは曖昧な指示が平均的な答えを生むことから来ており、具体的な入力が具体的なデザインを生みます。

AIのデザインが無個性に見える理由

AIに「モダンでクリーンなSaaSダッシュボード」と頼むと、これまで見てきた無数のダッシュボードの統計的な中央値のようなものが返ってきます。同じサンセリフフォント、紫から青へのグラデーション、柔らかい影の付いた角丸カード、円の中の絵文字風アイコン、そして「ワークフローをシンプルに」と書かれた中央寄せのヒーローです。どの選択も間違ってはいません。問題は、どれもあなたの製品のために選ばれたものではないことです。

良いデザインは、ほとんどが判断の積み重ねです。あなたの仕事は、アプリに個性を与える少数の判断を下し、無数の細かい判断はAIに一貫して任せることです。

ステップ1：プロンプトの前に参考例を集める

20分ほどかけて、製品に合う見た目のアプリやウェブサイトを2〜4個集めましょう。良い情報源は、利用者がすでに使っている製品、デザインのギャラリー、近い分野の企業のサイトです。

それぞれについて、何が気に入ったのかを平易な言葉で書き出します。

• 「余白が多く、本文は細い列に収まっている。大きな数字の上に小さなグレーのラベルがある。」
• 「細い罫線の密な表。カードの影はなし。操作ボタンだけに1色のアクセントカラー。」
• 「大きな明朝体の見出し、温かみのあるオフホワイトの背景、イラストではなく写真。」

その説明をAIに渡し、ツールが画像に対応していればスクリーンショットも添付します。参考にするのは製品ではなく、その質です。他社のレイアウト、ブランド、コピーをそのまま真似ると、法的にも信頼の面でもリスクになります。

ステップ2：デザインの方向性を決めて名前を付ける

方向性とは、雰囲気を短く説明したものです。AIがあらゆる判断を下す際のフィルターになります。うまくいきやすい例をいくつか挙げます。

最初のプロンプトに、方向性と対象ユーザーを一緒に書きましょう。

個人経営のヨガスタジオ向けの予約アプリを作ってください。デザインの方向性は「落ち着いたミニマル」で、印刷されたスタジオの時間割のような雰囲気にしてください。背景は温かみのあるオフホワイト、文字はほぼ黒、ボタンと選択状態にはくすんだセージグリーンのアクセント1色を使ってください。見出しは明朝体、本文はすっきりしたサンセリフ体です。余白はゆったりと、グラデーションも影もなし、絵文字も使わないでください。スマホ優先で作ってください。

ステップ3：ルールを決める（文字・色・余白）

この3つが見た目の質の大部分を決めます。ここを明示することが、最も効果の大きい改善です。

文字

• 書体は1〜2種類。 見出し用と本文用の2つ、または1つのファミリーを複数の太さで使う。
• 文字サイズの体系。 14、16、20、28、40pxのように少数のサイズを決め、コンポーネントごとに勝手に選ばせないこと。
• 読みやすい本文。 Webでは16px前後、行間は1.5程度、長い文章では1行あたり約60〜75文字。
• 色ではなく太さとサイズで階層を作る。 見出しは太く大きく、補足テキストは小さく柔らかいグレーに。

色

• ほぼニュートラルな色を使う。 背景、面、罫線、テキストのグレーがほとんどの役割を担います。
• アクセントカラーは1色。 操作と選択状態に使う。2色目は明確な役割がある場合だけ。
• 意味を持つ色。 成功、警告、エラーの色は、その用途にだけ使う。
• コントラスト。 WCAG 2では、通常の本文で4.5:1以上、大きな文字で3:1以上のコントラス比が求められます。白地の薄いグレーの文字は基準を満たさないことが多いので、AIに確認させましょう。
• ダークモードは、必要なら色を反転させるのではなく、意図して設計する。

余白とレイアウト

• 余白のスケール。 4、8、12、16、24、32、48、64pxなど。すべての値をこのスケールに揃える。
• 整列。 端を揃え、コンテンツはグリッド上か、一定の最大幅の列に置く。
• 近接。 関連するものは近くに、無関係なものは離して置く。このルールだけで、ごちゃついた画面の多くは解決します。
• コンテナを減らす。 すべてをカードに入れる必要はありません。罫線、区切り線、余白のほうが、静かにまとまりを作れることも多いです。

一度でシステムを整えるためのプロンプトの例です。

画面を増やす前に、小さなデザインシステムを作って全体で使ってください。文字サイズは14/16/20/28/40px、本文の行間は1.5、余白のスケールは4/8/12/16/24/32/48px、ニュートラルはほぼ白からほぼ黒まで、アクセントカラー（#3F6B5A）は主要なボタンだけに使い、赤はエラーのみ。ボタン、入力欄、カードは同じ角丸にしてください。すべての文字がWCAG AAのコントラストを満たしているかも確認してください。

コードを扱えるビルダーなら、これは通常デザイントークン（CSS変数やTailwindのテーマ）になります。そうすれば、後の変更を1か所で済ませられます。

ステップ4：まず1画面をきちんと作る

12画面をまとめて生成してから、すべてを直そうとしないでください。利用者が最もよく見る画面（多くはダッシュボードや主要な一覧）を選び、正しくなるまで反復します。そのうえで、次のように頼みます。

ダッシュボードを他のすべてのページの基準にしてください。ヘッダー、余白、文字サイズ、ボタンのスタイル、表のスタイルを揃えてください。設定ページと予約ページを、これに合わせて更新してください。

完成した基準の画面は、どんな形容詞よりも、あなたの好みを明確に伝えます。

ステップ5：具体的で小さな依頼を重ねる

AIへのフィードバックは、経験の浅いデザイナーへのフィードバックと同じように働きます。具体的で、一度に1つの領域を扱い、何を残すかを明確にすることです。

変更の際は、残すものも必ず書き添えましょう。たとえば「すべてのルート、コピー、機能は同じまま」と書けば、見た目の修正によって機能が黙って消えることを防げます。次の依頼に進む前に、スマホ幅の画面で変更を確認してください。小さな画面でどう見えるのが良いかは、モバイル対応のWebアプリの作り方をご覧ください。

ステップ6：良いデザインと普通のデザインを分ける細部

構造が正しくなったら、次の小さな要素がアプリを完成したように感じさせます。

• 空の状態。 データがない新規利用者が最初に見る画面。短い説明と1つの明確な操作を置き、空白の表にしないこと。
• 読み込み中の状態。 どこにでもスピナーを出すのではなく、コンテンツの形に沿ったスケルトン表示を使う。
• エラーの状態。 原因となった入力欄の近くに、平易な言葉でメッセージを出す。
• ホバー、フォーカス、押下時の状態。 操作できるすべての要素に。キーボード利用者のためにフォーカスリングは重要です。
• 実際のコンテンツ。 「Lorem ipsum」や「山田太郎」のようなダミーを、現実的な文章やデータに置き換える。プレースホルダーは、レイアウトの問題を隠してしまいます。
• 1つのアイコンセット。 1〜2種類のサイズで、線の太さを揃える。
• 目的のある画像。 一般的なストック写真より、製品、場所、人物の実際の写真のほうが効果的です。ストックや生成画像を使う場合も、スタイルを揃えましょう。
• コピー。 「送信」ではなく「クラスを予約」のような短く具体的なラベルは、どんな配色よりも仕上がりの印象を高めます。

よくある間違い

• 1つのプロンプトで全部を作り直す。 大きな書き換えは退行を招きます。ページごとに進めましょう。
• アクセントカラーが多すぎる。 すべてが強調されていると、何も強調されません。
• すべてを中央揃えにする。 中央揃えは見出し以外では読みにくくなります。ほとんどのコンテンツは左揃えに。
• 小さく、コントラストの低い文字。 大きなモニターで見ると上品でも、日差しの中のスマホでは読めません。
• 階層より装飾を優先する。 最も重要な操作が目立たない画面は、グラデーションや影では直りません。
• ランディングページを無視する。 多くの製品では、ランディングページが最初の印象になります。コンバージョンするランディングページの作り方をご覧ください。

デザイン以外のプロンプトの型については、AIアプリビルダーのプロンプトの書き方をご覧ください。あなたの仕事そのものが、デザインや写真のポートフォリオであるなら、ポートフォリオサイトの作り方で見せ方をさらに詳しく扱っています。

Mythexでのデザイン

Mythexでは、チャットでデザインを説明し、ライブプレビューで確認し、次の変更の前にスマホサイズの枠で見え方をチェックします。ドキュメントには短い型がいくつもあります。変更箇所と残す箇所を指定するデザインとUIのプロンプトと、機能を失わずに1ページずつ刷新するためのUIを刷新するです。Mythexでは、チャットでストック写真を探したり画像を生成したりすることもでき、ヒーロー画像、背景、共有用の画像などを頼めばアプリに配置できます。作業がうまくいかなかったら、その前のチェックポイントに戻しましょう。既存のデザインから始めて調整したい場合は、テンプレートを見てみてください。

よくある質問