こんにちは。

AIにサイト制作を依頼するという話をよく聞くようになりました。一般的なコーポレートサイトからLP、何らかの自分用ダッシュボードまで、用途はさまざまです。

僕もそういう使い方をよくします。

ですが、コードは書けてる。レイアウトや構成もまあまあ。けれど、UIやデザインがどうも微妙。そんな経験がある方も多いと思います。

AIにデザインを伝えるコツは、感覚で指示をするのではなく「名前のあるデザインスタイル」を使うことです。

その理由を解説していきます。

2026/03/17 追記：
続編として、AIにサイトの「構造」を伝えるためのレイアウトパターン編を公開しました。デザインスタイルと組み合わせると、AIへの指示がさらに安定します。

AIに「おしゃれにして」と言っても微妙になりやすい理由

僕が普段AIにUIやサイト制作を頼んでいてよく感じるのは、抽象的な指示ほど平均点の見た目になりやすい、ということです。

例えば、おしゃれにして とだけ言うのは、配色や余白や文字の見せ方など、何もかもをAIに丸投げした状態になります。AIだって困るわけですよね。どうしたらいいかのヒントがあまりにも少ない。

実際、僕もWeb制作を10年やっていて、いい感じにして と言われて困った経験が何度もあります。こんなふわっとした指示ではうまくいくはずがありません。

しかも、こういう指示は再現性も低いです。同じことを言っているつもりでも、毎回少しずつ違う見た目が返ってきます。つまり、良し悪し以前に方向性が定まりにくいんですね。

今回はその違いがわかりやすいように、同じ「ブログ管理画面」を題材にした例を置いておきます。まずは おしゃれにして とだけ伝えた場合の例を見てください。

プロンプト：

1ブログ管理画面をHTMLで作ってください。
2
3## ルール
4- 日本語UI、デスクトップ幅、1画面完結、スクロールなし。
5- 左サイドバー：「投稿一覧」、「設定」がある。
6- メインは投稿一覧がリスト形式で表示されている。
7
8デザインはおしゃれにしてください。

成果物：

悪くはないのですが、何をもっておしゃれなのか の判断基準がないので、印象が少し弱いんですよね。また、後述する6つのデザインスタイルを見てからもう一度見るとわかるのですが、それら全部の中間のようなデザインになっています。良くも悪くも中途半端なんです。

うまく伝わるのは、感覚語より「名前のあるデザインスタイル」

一方で、例えば Material Designで作って と伝えるだけでも、方向性はかなり揃いやすくなります。理由は単純で、名前のあるデザインスタイルには共有されたルールがあるからです。

そのスタイルがどういう見た目の判断基準を持っているか をざっくりつかみ、名前を覚える。これだけであなたのAIのデザイン力はぐっと上がります。

たとえばGoogleのMaterial Design なら、視覚階層をはっきりさせること、色に意味を持たせること、読みやすいタイポグラフィを作ること、一貫したコンポーネントで画面を揃えること、そして動きにも意味を持たせること、といった考え方があります。

つまり Material Design という単語だけでも、余白、色、文字、部品、動きについての判断基準をかなりまとめて伝えられるわけです。おしゃれにして という指示に比べて情報量が圧倒的に多いですよね。

AIも完全ではありませんが、デザインスタイルを伝えてあげればこうした共通イメージを手がかりにしやすくなります。

AIに伝えやすい代表的なデザインスタイル6選

もちろん使えるのは Material Design だけではありません。目的に合わせてデザインスタイルを選べるようになると、AIへの指示はかなり楽になります。

ここでは覚えやすくて使いやすいものだけを6つに絞って紹介します。

Material Design

Material Design はGoogleが示したデザインシステムです。カード、余白、視覚階層、色の役割分担、一貫したコンポーネント設計といった考え方が強く、整理されたUIを作りやすいのが特徴です。

サービスサイト、管理画面、SaaS、アプリUIなど、とにかく「わかりやすく整った画面」にしたいときに向いています。最初の基準としてもかなり使いやすいです。

AIに伝えるなら、Material Designで、カードUI、余白広め、視覚階層を明確にして のように書くと通りやすいです。

プロンプト例：

1ブログ管理画面をHTMLで作ってください。
2
3## ルール
4- 日本語UI、デスクトップ幅、1画面完結、スクロールなし。
5- 左サイドバー：「投稿一覧」、「設定」がある。
6- メインは投稿一覧がリスト形式で表示されている。
7
8デザインはMaterial Designを完全に踏襲して、カードUI、余白広め、視覚階層を明確にしてください。

Fluent Design

Fluent Design はMicrosoftが示したデザインシステムです。落ち着いた業務UI、やわらかな階層感、整った印象を作りやすいので、いかにも仕事道具らしい画面にしたいときに強いです。Windowsっぽさも感じられますね。

B2Bのサービス、社内ツール、設定画面、業務システムなど、信頼感と実務感を両立したい場面で使いやすいです。

AIに伝えるなら、Fluent Designで、落ち着いた業務UIにして と書くと方向性が揃いやすくなります。

プロンプト例：

1ブログ管理画面をHTMLで作ってください。
2
3## ルール
4- 日本語UI、デスクトップ幅、1画面完結、スクロールなし。
5- 左サイドバー：「投稿一覧」、「設定」がある。
6- メインは投稿一覧がリスト形式で表示されている。
7
8デザインはFluent Designを完全に踏襲して、落ち着いた業務UIにしてください。

Apple Human Interface Guidelines系のミニマルデザイン

Appleの Human Interface Guidelines は、Apple製プラットフォーム向けの設計指針です。ここから生まれる見た目は、余白を大きく取り、要素数を絞り、静かで上品な印象です。成果物を見るとやはりMacっぽさを感じます。

サービス紹介ページ、プロダクトページ、ブランドのLPなど、「情報を詰め込む」より「きれいに見せる」を優先したい場面で相性がいいです。

AIに伝えるなら、Apple Human Interface Guidelines系のミニマルデザインで、余白を広めにして のように書くと使いやすいです。

プロンプト例：

1ブログ管理画面をHTMLで作ってください。
2
3## ルール
4- 日本語UI、デスクトップ幅、1画面完結、スクロールなし。
5- 左サイドバー：「投稿一覧」、「設定」がある。
6- メインは投稿一覧がリスト形式で表示されている。
7
8デザインはApple Human Interface Guidelinesを完全に踏襲したミニマルデザインで、余白を広めにしてください。

Swiss Design

Swiss Design はスイスで発展した国際的なタイポグラフィ様式、いわゆる International Typographic Style を指す言葉です。

グリッド、整列感、文字の見せ方、情報整理の強さが特徴で、信頼感が欲しいページにかなり向いています。コーポレートサイト、採用サイト、情報量の多いサービスページなどで特に使いやすいです。ただし色使いは若干癖があるので注意しましょう。

AIに伝えるなら、Swiss Designで、白背景、整列感重視にして と書くとわかりやすいです。

プロンプト例：

1ブログ管理画面をHTMLで作ってください。
2
3## ルール
4- 日本語UI、デスクトップ幅、1画面完結、スクロールなし。
5- 左サイドバー：「投稿一覧」、「設定」がある。
6- メインは投稿一覧がリスト形式で表示されている。
7
8デザインはSwiss Designを完全踏襲して、白背景、整列感重視にしてください。

Scandinavian Design

Scandinavian Design は北欧諸国で発展してきたデザインの流れを指す言葉で、やさしさ、温かさ、明るさ、親しみやすさを感じさせる見た目が特徴です。

個人サービス、小規模事業、ライフスタイル系のサイトなど、少し肩の力を抜いた空気感を出したいときに向いています。ただし、やわらかさを優先しすぎて文字まで弱くしないことが大事です。

AIに伝えるなら、Scandinavian Designで、やさしく親しみやすい雰囲気にして と書けます。

プロンプト例：

1ブログ管理画面をHTMLで作ってください。
2
3## ルール
4- 日本語UI、デスクトップ幅、1画面完結、スクロールなし。
5- 左サイドバー：「投稿一覧」、「設定」がある。
6- メインは投稿一覧がリスト形式で表示されている。
7
8デザインはScandinavian Designを完全踏襲して、やさしく親しみやすい雰囲気にしてください。

Editorial Design

Editorial Design は雑誌、新聞、書籍などの編集デザインの現場で育ってきた見せ方の名称で、大きな見出し、強いタイポグラフィ、余白を使った印象的なレイアウトが特徴です。

ブランド訴求の強いページ、ポートフォリオ、ストーリーを見せたいLPなどに向いています。整理された情報ページというより、印象を残したいページ向きですね。

AIに伝えるなら、Editorial Designで、大きな見出しと余白で見せて がわかりやすいです。

プロンプト例：

1ブログ管理画面をHTMLで作ってください。
2
3## ルール
4- 日本語UI、デスクトップ幅、1画面完結、スクロールなし。
5- 左サイドバー：「投稿一覧」、「設定」がある。
6- メインは投稿一覧がリスト形式で表示されている。
7
8デザインはEditorial Designを完全踏襲して、大きな見出しと余白を意識してください。

6つのデザイン早見表

迷ったらこの考えで選べば十分です

ざっくり言うと、

• 信頼感を出したいなら Swiss Design か Fluent Design
• すっきり整理したいなら Material Design か Apple HIG系ミニマル
• 親しみやすさを出したいなら Scandinavian Design
• 世界観を強く見せたいなら Editorial Design

です。

初心者はこの3つから始めれば失敗しにくい

もし最初の候補を3つに絞るなら、僕は Material Design、Fluent Design、Apple HIG系ミニマル をおすすめします。

どれもAIが比較的解釈しやすく、非デザイナーでも方向性をイメージしやすいからです。さらに極端にクセが強くないので、後から修正もしやすいです。SwissやEditorialはやや癖がありますよね。

まずはイメージ近いものを1つ選びましょう。それだけでも完全にノーヒントの状態 からは圧倒的に品質が上がります。

まとめ

というわけで、AIにサイトの見た目を伝えるときは、おしゃれにして のような感覚語ではなく、名前のあるデザインスタイルを使うのがおすすめです。

それだけで方向性が揃いやすくなり、やり直しも減ります。AIに強いデザインセンスを期待するというより、こちらが伝えるための語彙を持つ。まずはそこが出発点です。

そして、その中でも大事なのは、スタイル名を単なるラベルとして使うのではなく、そのスタイルが見た目のルールとして何を持っているか をざっくり理解しておくことです。そこまでわかると、AIへの指示は一気に高品質になります。

ただし、スタイル名だけではまだ少し曖昧な部分もあります。例えば同じSwiss Designでも、色、余白の広さや情報量、質感はかなり幅がある からです。

次は、そうしたブレを減らすために、AIにデザインをうまく伝える5項目プロンプトの型を書いていきます。

また、見た目だけでなく情報の並べ方（レイアウト）も名前で伝えるとAIの出力はさらに安定します。こちらもあわせてご覧ください。

参考記事

デザインスタイルの中には、Google や Microsoft、Apple のように公式の設計思想があるものと、Swiss や Scandinavian のように歴史の中で形づくられてきたものが混ざっています。なのでここでは、公式資料 と 背景がつかみやすい資料 をまとめて置いておきます。

• Material Design: Material Design / Material Design Introduction
• Fluent Design: Fluent 2 Design System
• Apple HIG系ミニマル: Apple Human Interface Guidelines
• Swiss Design: Britannica: Graphic design, postwar / HashBuilds: What is Swiss Design?
• Scandinavian Design: Britannica: Danish Modern / Oxford Academic: Scandinavian Design and the United States, 1890–1980
• Editorial Design: HashBuilds: What is Editorial Design? / HashBuilds: What is Magazine Layout?