AIに頼んだデザインが「どこかで見た」画面になる理由 —— 2026年のAIデザイン（デザインエージェント・DESIGN.md）を実際の画面で解説

予約ページをAIに頼むと

画像のAIに頼んだ例（イメージ）

「おしゃれな予約ページを作って」と画像のAIに頼むと、それらしいデザインの画像が返ってきます（イメージ）。しかし、それは1枚の絵です。

値段の部分だけを書き換えることはできず、頼むたびにお店の色が変わり、ほかのお店とそっくりな見た目になることもあります。これはAIのデザインでよくある悩みですが、2026年になって状況が変わってきました。絵を1枚出すAIから、デザインを組み立て、直し、動かすAIへと進んでいるのです。[s1][s5][s10]ただし、すべてをおまかせできるわけではありません。各社の実際の画面を見ながら整理します。

AIのデザインには3つの種類がある

家にたとえると

要点

家で例えると

完成予想図

1枚の絵（画像）

設計図

部品に分かれたデータ

建った家

押せて動くページ

AIに頼めるデザインは、出てくるものによって3種類に分けられます。家にたとえると、1つ目は完成予想図で、きれいな1枚の絵です。雰囲気を見るには向いていますが、窓だけを直すようなことは苦手です。2つ目は設計図で、文字や写真やボタンが部品ごとに分かれたデータです。3つ目は建った家で、実際に押して動かせるページ、中身はプログラムのコードです。

出てくるものと主な道具（2026年10月）

比較表

出てくるものと、主な道具（2026年10月）

項目	絵	設計図	ページ
中身	1枚の画像	部品とレイヤー	プログラム
一部を直す	苦手	部品ごとに	数字や指示で
公開	できない	書き出して	できる
主な道具	画像のAI	Figma・Canva	Figma Make・v0

各社の発表・公式サイトをもとに整理

予約ページがほしいなら、必要なのは設計図か建った家です。道具でいえば、設計図ならFigmaやCanva、動くページならFigma Makeやv0などが該当します。[s7][s10][s16]そして2026年は、この3つがどんどんつながってきました。

変わったこと① 頼んだ所だけが変わる

公式の資料から引用

頼む前

頼んだ後

• 「見出しを、もっとわくわくする文に」
• 変わったのは見出しだけ
• 写真と配置はそのまま

Canvaが4月に発表した「Canva AI 2.0」の動画では、作ったお知らせに「見出しを、もっとわくわくする文に」と頼むと、見出しの文字だけが書き換わり、写真や配置はそのまま残っています。[s10]Canvaは、1枚の平らな絵ではなく、直せる部品でデザインを作るため、「何かを変えてと頼むと、それだけが変わる」と説明しています。[s10]設計図の形で作るからこそできることです。

公式の資料から引用

• 「コップとシャツとトートバッグに」
• ロゴを入れた見本が並ぶ

Adobeの例では、ロゴを1つ渡して「コップとシャツとトートバッグに」と頼むと、ロゴを入れた商品の見本がまとめて並びます。[s11][s12]ただし、これは見本の絵なので、実際に印刷した色は本物で確かめる必要があります。

変わったこと② デザインエージェント

デザインエージェントの動き

2つ目の変化は、デザインエージェントの登場です。エージェントとは、自分で手順を進めるAIのことで、それがデザインの道具の中に入りました。部品やルールを見て、画面を作り、ルールに沿っているかを確かめる、という作業をくり返します。[s4][s5]

2026年のデザインのAIの主な発表

2026年は、各社からデザインのAIの発表が続きました。[s1][s10][s11]Figmaのエージェントは、5月にベータ版となり、10月6日に正式版になっています。[s4][s5][s13]

公式の資料から引用

• 「茶色の配色と、ダークモードに」
• 4つの画面をまとめて

Figmaの発表の画面では、「茶色の配色と、ダークモードに」と頼むことで、4つの画面の色をまとめて切り替えています。[s4]

公式の資料から引用

• 色のコントラストを確認中
• 決めたスタイルを当てる

こちらは作業中のエージェントで、色のコントラストを確かめたり、決めたスタイルを当てはめたりしています。[s5]

Figmaのブログで紹介された使い方

Figmaのブログでは、実際の会社での使い方も紹介されています。Uberでは、何人かで何か月もかかっていた部品の説明書を、1人のデザイナーが午後のうちに出せるようになったそうです。Granolaは、会議のメモから直す点をエージェントに画面の横へ書き込ませています。[s5]いずれも、利用者の話として紹介されたものです。

Figma自身も「AIでデザインを作るのが簡単になるほど、平均的なものを出してしまう危険がある」と書いています。そのため、方向の違う案をいくつも出し、人が選ぶ使い方を勧めています。[s4]

目的と気分で頼む「バイブデザイン」

これまでの頼み方と、バイブデザイン

頼み方も変わりました。Googleが3月にStitchで打ち出した「バイブデザイン」です。[s1]以前は、置く場所や色を1つずつ指定していましたが、バイブデザインでは、何のためのページか、使う人にどう感じてほしいかを先に伝えます。[s1]

公式の資料から引用

• 案を広げて、くらべる

Stitchの画面では、AIがたくさんの案を一度に並べ、比べられるようにしています。[s1]1つの正解を出させるのではなく、方向の違う案を広げてから選ぶ、という使い方が前提になっています。

指示がないと「どこかで見た」になる

公式の資料から引用

何も指示しない

文字や配色を指示

一方で、何も指示しないと「どこかで見た」デザインになりやすくなります。Anthropicのブログの例では、何も指示せずに作ったページは白い背景に紫のグラデーションでした。何も言わないと、AIはいちばんよくある無難な見た目を選びやすいのです。文字や配色の指示を足すと、同じお願いでも見た目が大きく変わりました。[s15]

予約ページの頼み方の例

和菓子ECショップの予約ページを、3案ください
・使う人：はじめてのお客さん。スマホで見る
・目的：迷わず「予約する」まで進める
・必ず：予約ボタンをいちばん目立たせる しめきりは前日の15時と書く
・雰囲気：老舗の安心感と、秋の新作のわくわく
・ほしいもの：配置のちがう3案と、それぞれのねらい

予約ページなら、誰が使うのか、何のためのページか、必ず入れることは何か、どんな雰囲気にしたいかの4つを伝えると、案がぶれにくくなります（例）。出てきた案は並べて比べ、決めるのはお店の人です。

お店のルールをAIに渡す「DESIGN.md」

公式の資料から引用

• 「このデザインのルールを、サイト全体に」

そこで、お店のデザインのルールをファイルにしてAIに渡します。Googleが出したこのファイルの形が「DESIGN.md」です。3月にStitchに入り、4月には、どの道具でも使える形で仕様が公開されました。[s1][s2][s3]

DESIGN.mdの書き方

---
colors: primary: "#8DC63F" # ブランドカラー（深緑） neutral: "#FFFFFF" # 白 ink: "#2E3A23" # 文字の色
components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.neutral}"
---
## Colors
- primary：ブランドカラー（深緑）。お店の顔。予約ボタンに使う

ファイルの上の部分に色や文字の決まりを数値で、下の部分にその理由を文章で書きます。数値だけでは何に使う色か分かりませんが、理由があればAIが使い分けられます。[s2][s3]Claude CodeのCLAUDE.mdのデザイン版と考えると分かりやすいでしょう。

チェックの道具にかけた結果

$ npx @google/design.md lint DESIGN.md
"severity": "warning",
"path": "components.button-primary",
"message": "textColor (#ffffff) on backgroundColor (#8dc63f) has contrast ratio 2.04:1, below WCAG AA minimum of 4.5:1."

実際にGoogleのチェックの道具（lint）にかけてみると、予約ボタンを明るい緑に白い文字にした設定に対して、「コントラスト比は2.04:1で、最低基準の4.5:1に届かない」という警告が出ました。[s3][s17]

コントラスト比とは

コントラスト比は、文字と背景の明るさの差を表す数字です。同じ色同士なら1:1、白と黒がいちばん差の大きい21:1で、ふつうの大きさの文字は4.5:1以上がWebの読みやすさの国際的な目安です。[s17]文字を濃い色に変えると5.89:1になり、警告は消えました。[s3][s17]

公式の資料から引用

• 「ページの題名は見出し1の文字。1ページに1つだけ」

ルールを書いておけば、どのAIに頼んでも同じ色を使い、読みやすさまで確かめられます。[s3]ほかの道具にも同じ考え方があり、Framerのスキルでは「ページの題名は見出し1の文字で、1ページに1つだけ」のような決まりを文章で書いておけます。[s14]Figmaでも、部品のまとめにガイドラインを付けられ、たとえば「赤は削除のボタンだけに使う」と書いておけます。[s5]

ルールはファイルで、手順はスキルで、外部とのつながりはMCPで渡す、というAIへの渡し方は、デザインでも同じです。

デザインから動くページへ

公式の資料から引用

• すき間を「24」と数字で直す

最後は、設計図から建った家への流れです。Figma Makeは、文章で頼むと動く画面を作る道具で、7月からは、できた画面をデザインの道具のように直接いじれるようになりました。すき間や文字の太さを数値で直すと、プログラムのほうも書き換わります。[s7]

公式の資料から引用

• 「メニューを押したら、全画面のメニューを出して」

動きのように数値で直せないことは、画面の場所に注釈を付けて頼みます。Figmaは、直接いじるほうが、文章で頼むより速く、使うトークンもずっと少ないと説明しています。[s7]

Coinbaseの例

公式の資料から引用

• いちばん下の行が、つないだ後の平均

会社のデザインの部品とプログラムの部品をつないだ例もあります。暗号資産の取引所Coinbaseは、同じデザインを同じAIに3回ずつ作らせ、つなぐ前と後を比べました。つないだ後は、平均で費用が22.5%、時間が22.3%、トークンが11.5%減ったそうです。[s8]

ただし、これは1社が3回ずつ試した結果を、Figmaの紹介記事で伝えたものです。[s8]それでも、AIがイラストやアイコンの名前をでっち上げる失敗が消えたという話は、実務の参考になります。[s8]動くページまで作る道具には、ほかにv0などもあります。[s16]

注意点

作れることと、公開できることは別

注意点は4つあります。1つ目は、見た目の良さと使いやすさは別だということです。Framerも、ページを作るのは簡単でも、公開するには画面の大きさへの対応、誰でも使えるか、直し続けられるかといった点が必要だと書いています。[s13]最後は、本物のお客様に、実際のスマホで試してもらうことが欠かせません。

2つ目は、似た見た目になることです。何も伝えなければ、AIは無難でよくある見た目を選びやすくなります。目的とお店らしさを言葉で渡すことが、いちばんの対策です。[s15]

似ていないかを確かめる

3つ目は権利です。文化庁の考え方では、AIで作ったものでも、既存の作品に似ていて、それをもとにしたと認められれば、著作権の侵害になり得ます。[s18]できたロゴやイラストがほかのものに似ていないかを確かめ、お店で使ってよいかはサービスごとの決まりも読みましょう。

お金と秘密

4つ目はお金と秘密です。Figmaのエージェントは、ベータ版の間はクレジットを使いませんでしたが、正式版からは使った分だけクレジットを消費し、重い作業ほど多く使います。[s4][s9]発表前の新商品のデザインを入れる場合は、会社の決まりと、学習に使われる設定になっていないかを確かめておきましょう。

デザインの作り方を比べると

AIだけが方法ではありません。テンプレートは定番のものをすぐ作るのに向き、お店の顔になるロゴや看板はデザイナーと作り込むのが向いています。AIは案をたくさん出して比べるのが得意なので、目的に応じて組み合わせるとよいでしょう。

今日からできること

AIと予約ページを作る流れは、5つの手順にまとめられます。まず、誰が何のために使うのか、どんな気分にしたいかを言葉にします。次に、方向の違う案を3つほど出して比べ、選びます。選んだ案の色や文字はルールのファイルに書いて、チェックの道具にかけます。[s3]そのうえで動くページにし、本物のスマホでお客様に試してもらいながら直していきます。

まとめ

AIでデザインを作るときは、まず、ほしいのが絵か、設計図か、動くページかを決めましょう。そのうえで、目的と気分を言葉で伝え、方向の違う案を並べて比べます。[s1][s4]

お店のデザインのルールをDESIGN.mdのような形でAIに渡せば、色をそろえ、読みやすさまで確かめられます。[s3]そして、最後は本物のスマホで試すこと。AIがどれだけ進歩しても、決めるのは人です。