AIが作るUIはなぜダサい？Claude DesignとGPT-6 Astraで検証

もしあなたが「AIに作ってもらったアプリのデザインが、なんだかダサい」と感じているなら、この記事がその状態から抜け出すヒントになります。私が開発中のアプリのUIをClaude Designで丸ごと作り替えた手順を、画面のどこを触るかというレベルまでお伝えします。あわせて、出たばかりのGPT-6 Astraに同じプロンプトを投げた結果も比べていますので、読み終える頃には「自分はどっちを使えばいいのか」まではっきりしているはずです。

AIに作ってもらったアプリ、正直デザインがダサくないですか？

「おお、アプリができた」——AIにお願いして、はじめて画面が動いたときのあの感動。あなたにも覚えがあるかもしれません。

この数ヶ月、私はClaude CodeやCodexを使って、いくつものウェブアプリを作ってきました。私はエンジニアではありませんし、AIが書いたコードは正直まったく読めません。それでも動くものができてしまう。最初はそれだけで十分に嬉しかったんです。

ところが、機能がどんどん増えて、自分でも毎日そのアプリを使うようになってくると、だんだん別のことが気になってきました。

デザインが、ありきたりなんです。

SNSで他の方が「AIでアプリを作りました」と画面を載せているのを見ても、どれも同じような顔をしています。白い背景に、角の丸いカードが並んでいて、青いボタンがある。悪くはありません。悪くはないんですけど、どれがどのアプリなのか、パッと見て区別がつかない。

これ、あなたも感じたことはありませんか？

そして、ここが意外と大事なところなんですが、デザインがかっこいいと、自分のテンションが上がります。テンションが上がると、そのアプリを使いたくなる。使いたくなると、改善のアイデアも出てくる。逆に、見た目がパッとしないと「まあ動くからいいか」で止まってしまうんですよね。

だから私は、アプリのUIのデザインって、思っている以上に大切だと考えています。お客様に使ってもらう予定があるなら、なおさらです。

この記事では、その「AIっぽいUI」から抜け出すために私が実際にやったことを、順番にお話ししていきます。

なぜAIが作るUIは「どれも同じ顔」になるのか

まず、なぜこうなってしまうのかを整理しておきましょう。ここがわかると、対処法も見えてきます。

機能は動くのに、使っていてテンションが上がらない

私が今作っているのは、サイトが作れて、メールも配信できる、マーケティング用のオールインワンのシステムです。「ファネリオ」という名前をつけています。

最初にClaude Codeに作ってもらった画面は、こんな感じでした。白を基調にした、シンプルなデザイン。最初は「これはこれでかっこいいかな」と思っていました。

でも、しばらく使っているうちに気づいてしまったんです。シンプルすぎて、他のアプリと何も違わない、と。

これには理由があります。AIは、何も指示しなければ「一番無難で、一番失敗しない答え」を出してくるからです。学習してきた膨大なウェブサイトの平均値のようなデザインが出てくる。だから当然、みんな同じような画面になります。

つまり、AIが悪いのではなく、こちらが方向性を渡していないだけなんですよね。

「UIを改善して」と頼んでも、ほとんど何も変わらなかった

そこで私は、素直にClaude Codeにお願いしてみました。

「このアプリのUIデザインを改善する案を考えて」

高性能なモデルを使って、じっくり考えてもらいました。返ってきた答えは、おおよそこんな内容です。

「デザインの方向性は白ベースで問題ありません。大きく変える必要はないでしょう」

……いや、そこを変えたいんですけど。

実際に出てきたブラッシュアップ案も見てみましたが、余白が少し変わったくらいで、パッと見はほとんど同じでした。正直、ちょっとがっかりしました。

ここで私が学んだのは、コードを書いているAIに「デザインを考えて」と頼むのは、あまり相性が良くないということです。コードを書くモードに入っているAIは、今あるものを壊さないように、なるべく変更を小さくしようとします。それは開発では正しい態度なんですけど、デザインを一新したいときには邪魔になってしまうんですね。

答えは「考える場所」と「作る場所」を分けることでした

ここからが本題です。

私が行き着いた答えは、とてもシンプルでした。デザインを考える場所と、実装する場所を、分ける。これだけです。

具体的には、こういう流れになります。

1. Claude Designという「デザイン専用の場所」で、UIの案だけを作ってもらう
2. 気に入った案が出たら、その案を「プロンプト」という形で書き出す
3. そのプロンプトをClaude Codeに貼り付けて、実際のアプリに実装してもらう

デザイン担当と、実装担当を分けるイメージです。人間の会社でも、デザイナーさんとエンジニアさんは別の人ですよね。それと同じことをAIでもやる、というだけの話です。

そういえばClaude（クロード）は、今年になってから「Claude Design」という機能を出していたな、と思い出したのがきっかけでした。

ちなみにClaude Designは、Claude Codeのコマンド入力欄で /design と入力しても使えるようです。ただ、私が一番おすすめしたいのは、次にご紹介するデスクトップアプリからの使い方です。画面で確認しながら進められるので、こちらのほうが圧倒的にわかりやすいと感じました。

Claude Designの始め方（画面のどこを触るか）

ここからは、実際の画面操作をお話しします。難しいことは一つもありませんので、安心してください。

デスクトップアプリの「デザイン」から開く

Claudeのデスクトップアプリを開くと、上のほうに「チャット」と「Cowork」というタブが並んでいます。その下に「デザイン」という項目があります。

これをクリックすると、Claude Designの画面が開きます。

なお、画面のメニューなどは、今のところまだ英語です。でも、心配はいりません。入力は全部日本語で大丈夫です。私も日本語だけで進めました。

デザインシステムは無理に使わなくて大丈夫

最初に「デザインシステム」というものが出てきます。「こんな感じの方向性でいきたい」という雰囲気を、あらかじめ用意されたテンプレートの中から選べる仕組みです。

いろいろ候補が並んでいるので、つい真面目に選ばなきゃと思ってしまうんですが、私はここを使いませんでした。

そして、使わなくても十分いい案が出てきました。ですので、ここで悩んで手が止まるくらいなら、飛ばしてしまってかまいません。

テンプレートは「UIモックアップ」を選ぶ

次に「何を作るか」を選ぶ画面が出てきます。ここには、けっこういろいろな種類があります。

• モバイルアプリのデザイン
• スライド
• ドキュメント
• ワイヤーフレーム
• アニメーション
• UIモックアップ

サイト作りだけじゃなく、スライドやアニメーションまで作れるみたいなので、ここはぜひあなたにもいろいろ試してみてほしいところです。

私の場合はウェブアプリの画面デザインをブラッシュアップしたかったので、「UIモックアップ」を選びました。

選ぶと「Make UI mockup for…」という英語の文が出てきます。この英語は消してしまってOKです。そこに、自分のアプリの名前と、どんなアプリなのかという説明を日本語で入れます。

たとえば、こんな感じです。

現在開発中の◯◯なアプリのUIデザイン案を考えてください

これだけで通じます。

モデルはFableかOpusか

モデルの選択肢も出てきます。私はFableモデルを使いました。

ただ、Opusモデルも普通に性能が高いので、Fableが使えないプランの方はOpusで問題ないと思います。ここで契約プランを変えてまで悩む必要はありません。

たった一行のプロンプトで、4つのUI案が出てきました

正直に言うと、私はあまり期待していませんでした。だって、渡した情報がほとんどゼロだったんですから。

私が最初に入力したのは、これだけです。

現在開発中のオールインワンマーケティングツール「ファネリオ」のUI案を考えて

本来なら、こんな色使いで、こんな雰囲気で、という情報を渡したほうがいいに決まっています。でも、あえて何も渡さずに「Claude Designに丸投げしたらどうなるんだろう」と試してみたかったんです。

すると、「初回UI案を4枚出しました」という返事とともに、4つのパターンが出てきました。

私が選んだのは「ダーク×ライム」の案

1枚目は、ダッシュボードの「ダーク×ライム案」でした。画面全体が黒っぽいダークモードで、差し色に緑っぽいライム色が使われています。

最初に見たとき、素直に「これ、普通にかっこいいじゃん」と思いました。Claude Designやるじゃん、と。

2枚目は、ステップメールの編集画面。こちらは白を基調にして、強調したいところだけがライム色になっています。

3枚目は「ファネルマップ」と呼ばれる画面でした。お客様がどこからサイトに入ってきて、どんな流れでメールが届いて、どうやって商品が売れていくのか。その一連の流れが一目で見える画面です。

4枚目は、1枚目のダッシュボードの白バージョンでした。

たった一行のプロンプトで、ここまで出てきたのは想定外でした。しかも、方向性の違う案が4つ並んでいるので、比べながら選べるのがありがたいところです。

参考サイトはURLではなくPDFで渡す

とはいえ、一つの提案だけで決めてしまうのはもったいない。私は他の案も見てから選びたかったので、参考にしたい海外のマーケティングツールのサイトを見せてみることにしました。

最初は、URLをそのまま貼り付けて「このサイトのデザイン言語を参考にしたバージョンも作れる？」とお願いしました。

ところが、「URLだけではサイトのデザインまでは読み込めません」と言われてしまったんです。

そこで使ったのが、この方法です。

Macの場合、Safariでそのサイトを開いて、メニューの「ファイル」から「PDFとして書き出す」を選ぶと、ページ全体をPDFにできます。そのPDFをClaude Designのチャットに添付して、「これを参考にしてくれ」とお願いしました。

これで、サイトの見た目をきちんと理解してもらえるようになりました。

出てきたのは、参考にしたサイトの色使いを取り入れたデザインです。背景がベージュっぽくて、オレンジや青などのカラフルな色が使われている。これはこれでかっこいいなと思いました。

つまり、こういうことです。

• とりあえずお任せで案を出してもらう
• あるいは、参考にしたいサイトのPDFやスクリーンショットを添付して「これを参考にして作って」とお願いする

どちらも使えます。あなたに「こういう雰囲気が好き」という好みがあるなら、後者のほうが早く近づけます。

私の場合は、最初に提案してくれたライム色の案がやっぱり気に入ったので、そちらでいくことにしました。

作ってもらった案をClaude Codeに渡す手順

さて、ここが一番大事なところです。せっかくかっこいい案ができても、実際のアプリに反映されなければ意味がありませんよね。

シェア＆エクスポートから「Claude Code」を選ぶ

Claude Designの画面の右上に、シェアボタンがあります。そこをクリックすると「シェア＆エクスポート」というメニューが出てきます。

開くと、いろいろな形式で書き出せることがわかります。PNG、HTML、PowerPoint、PDF、動画……。

その中に「Claude Code」という選択肢があります。私はClaude Codeで開発しているので、これを選びました。

次に、ローカルエージェントかウェブセッションかを選びます。私は自分のパソコンの中でAIにコードを書いてもらっているので、「ローカルエージェント」を選択しました。ウェブ上で開発している場合は、ウェブセッションでもいいと思います。

コピーしたプロンプトを貼り付けるだけ

「コピープロンプト」というボタンを押すと、「プロンプトがコピーされました」と表示されます。

あとは、これをClaude Codeのチャット欄に貼り付けるだけです。

私の場合、それまでClaude CodeにUIデザインを新しく考えてもらっていた途中だったので、こんなふうに一言添えました。

途中ですみません。Claude Designで作ってもらったこのUIモックアップを試したいです。ダークモードにも対応していますので、このUIに路線変更できるかご確認ください。

この「確認してください」という一言を入れるのが、地味に効きます。いきなり全部書き換えられて壊れるより、まず可否を確認してもらったほうが安心だからです。

貼り付けると、Claude Codeはすぐにプロンプトを理解して、「では実装します」という形で作業に入ってくれました。

ちなみに私はここでもFableモデルを使いました。Fableモデルは細かい質問をあまりしてこず、一気に長時間作業して素早く実装してくれます。大きな変更や新機能の追加のときは、私はFableモデルを使うようにしています。

実際に、どこまで変わったのか

しばらく待つと、実際のアプリの画面がリニューアルされていました。

Claude Designが提案してくれた案とほぼ同じ形で、画面左のメニューが紺色になり、重要なボタンがライム色になっています。ウェブサイトの編集画面、ファネル一覧、メールの配信画面、LINEの配信画面、画像や動画をアップロードするメディア画面。すべてが新しいデザインになりました。

白ベースの、どこかで見たような画面が、ちゃんと「自分のアプリの顔」になった瞬間です。

ダークモードにも対応できた

うれしい誤算だったのが、ダークモードです。

通常のライトモードだけでなく、切り替えると背景が黒くなるダークモードにも対応してくれました。深夜に作業するときも目に優しい画面になったのは、素直にありがたいです。

最近はダークモードが流行っていますが、こういったサイト作成ツールでダークモードに対応しているものって、あまり見たことがありません。個人的には、ここが実装できたのが一番うれしかったところかもしれません。

「存在しない機能」のアイデアまでもらえた

もう一つ、思いがけない収穫がありました。

Claude Designが提案してくれた「ファネルマップ」という画面。実は、デザイン案を作ってもらった時点では、そんな機能はアプリに存在していませんでした。Claude Designが勝手に「こういう画面もあったらいいんじゃない？」と提案してくれたわけです。

見た瞬間、「ああ、こんな機能あるといいじゃん」と思いました。

そこで、そのアイデアもClaude Codeに伝えて、実際に開発してもらいました。もう一度Claude Designに戻ってプロンプトをコピーし、「こんなファネルマップ機能も作ってくれ」とお願いしたところ、元のアイデアにかなり近い形で作ってくれました。

今では、こんなことができる画面になっています。

• お客様が登録ページからサンクスページへ進む流れが、視覚的に見える
• 登録するとステップメールが動き出し、メールアドレスがActiveCampaignに飛び、Kajabiに講座の閲覧権限が自動で渡る——そういう自動化の流れも一目でわかる
• 各項目をクリックすると、そのページの編集画面や設定画面に飛べる

この機能がなくてもサイトや自動化の仕組みは作れます。でも、全体の流れが見えていると、「ここを直したいな」と思ったときの動きがまったく違います。

デザインを考えてもらったつもりが、機能のアイデアまでもらえた。これは想定外の収穫でした。

公式サイトとマニュアルサイトも同じ世界観に揃えた

このアプリはまだ公開日が決まっていませんが、公式サイトとドキュメントサイト（マニュアルサイト）も、すでにAIに作ってもらっています。

そこで「最初に作ってくれたUI案が気に入りました。それと同じ方向性で、公式サイトとドキュメントサイトのデザインも作って」とお願いしてみました。

すると、紺色っぽい背景に白とライムグリーンを使った、アプリと同じ世界観の公式サイトのデザイン案が出てきました。プランの料金表の画面、ドキュメントサイト、モバイル版、APIリファレンスの画面まで、いろいろ作ってくれました。

あとは同じです。シェアからClaude Codeを選び、プロンプトをコピーして、Claude Codeに「公式サイトとマニュアルサイトもアップデートしたいです。デザインを統一してください」と伝えるだけ。すぐに実装してくれました。

ここで気づいたことがあります。公式サイトやマニュアルサイトは、つい「アプリが完成してから作るもの」と思いがちですよね。でも、同時進行で作っておくと、デザインの統一感がまるで違います。

最初は「いかにもAIが作ったサイトだな」という感じで、正直あまりテンションが上がっていませんでした。でも、実際のアプリと世界観が揃ったサイトになると、自分のテンションが明らかに変わりました。「よし、引き続き頑張って開発しよう」という気持ちになったんです。

別のアプリでも同じことをやってみました

せっかくなので、他に自分で作ったアプリのUIも変えてみることにしました。

私が使っているのは、YouTubeやブログ記事をアップしたら、FacebookやThreads、Xなどに自動投稿してくれる自動化アプリです。最初にClaude Codeに作ってもらったUIは、悪くはないけれど、普通。そんな印象でした。

今回はClaude Designで新しいチャットを開いて、実際の画面のスクリーンショットを渡し、こうお願いしました。

もっとおしゃれにしてほしいです。ライトモードとダークモード、両方のデザインを作成してください。

すると、すぐにデザインを作ってくれました。よりカラフルになって、ずいぶんおしゃれになりましたよね。しかも、その場でダークモードとライトモードを切り替えて確認できる形で出してくれます。

あとはいつもの手順です。シェア＆エクスポート → More formats & App → Claude Code → プロンプトをコピー → Claude Codeに貼り付け。すぐにモックアップと同じUIを、両モード対応で作ってくれました。

スクリーンショットを渡して「おしゃれにして」と言うだけでここまで来る。これは覚えておいて損のない使い方だと思います。

GPT-6 Astraと同じプロンプトで比べてみました

ここからは、追加で収録した内容です。

この記事のもとになる動画を撮り終えたあと、ちょうどOpenAIからGPT-6 Astraという新しいモデルが出てきました。せっかくなので、まったく同じプロンプトをChatGPTにも投げて、どこまでやってくれるのか比べてみることにしました。

まずはGPT-5.6で作ってもらった結果

比較の出発点として、まず一世代前のGPT-5.6で作ってもらったUIデザインを見てみます。

……これ、微妙じゃないですか？

ライトモードとダークモードの2パターンを出してくれてはいるのですが、いかにも「AIが作りました」という感じの画面でした。のっぺりしていて、記憶に残らない。

渡したプロンプトは、Claude Designに渡したものとまったく同じです。同じ指示なのに、ここまで差が出るのか、と正直驚きました。

この時点では、「Claude DesignのほうがChatGPTより上」という結論にするつもりでいました。

GPT-6 Astraに同じプロンプトを投げたら別物になりました

ところが、新しいモデルが出てきたのだから試さないわけにはいきません。同じプロンプトで、私のアプリのUIデザインをライトモードとダークモードの両方で作ってもらいました。

結果は、はっきり言って別物でした。

GPT-5.6のときと比べて、明らかに良くなっています。というより、Claude Designにお願いしたときと、かなり同じレベルのデザイン案が出てきたという印象です。

ライトモードもダークモードも、おしゃれになりました。ダッシュボードの画面も「これはこれでアリだな」と思えるものです。

ファネルの構成画面——登録ページがあって、サンクスページがあって、ご案内ページがあって、という流れを表した画面も作ってくれました。これがなかなかおしゃれで、しかも非常にわかりやすい。実際のサイトの編集画面も、オンライン講座の管理画面も、普通にかっこいいと感じました。

一世代でここまで変わるのか、というのが率直な感想です。

Plusプランだと「エフォート＝中」までしか選べません

ここで、契約プランの話も正直にお伝えしておきます。

私は今、ChatGPTは月額3,000円のPlusプランしか契約していません。この状態でGPT-6 Astraを使うと、「エフォート」（どれだけじっくり考えるかの設定）が中までしか選べないんです。

これ以上を選ぼうと思ったら、Proプランを契約する必要があります。

つまり、私が今回見たGPT-6 Astraの結果は、あくまで「中」の実力での結果ということになります。それでもClaude Designと肩を並べるレベルだったわけですから、上の設定ならどうなるのか、正直気になっています。Proプランへのアップグレードも検討しているところです。

結局、どっちを使えばいいのか

私の結論はこうです。

あなたがすでに契約しているAIツールで、まずやってみてください。

今、ChatGPTもClaudeもお互いに競い合っていて、性能はほとんど同じレベルになっています。「Claude Designを使うといいよ」という趣旨でこの記事を書き始めたのですが、正直に言えば、ChatGPTも同じところまで来ています。

ですので、この記事を読んで「新しくもう一つ契約しなきゃ」と思う必要はありません。手元にあるツールで、まず一行のプロンプトを投げてみる。それだけで、今のあなたのアプリの画面よりはずっといいものが出てくる可能性が高いです。

なお、私自身もChatGPTとClaudeの両方を使って、どちらが自分の仕事でより使えるのかを引き続き試していきます。その結果は、また別の機会にお話しできればと思っています。

この方法でつまずかないための注意点

ここまでの流れを、あなたが実際にやってみるときのために、気をつけたいポイントをまとめておきます。

最初からUIにこだわりすぎないこと。 これが一番大事かもしれません。アプリを作り始めた段階では、見た目は気にしなくて大丈夫です。まずは機能を動かす。ある程度できあがってきたところで、この記事の方法でブラッシュアップする。この順番がおすすめです。最初からデザインで悩むと、いつまでも完成しません（私も昔はこれで手が止まりました）。

参考サイトはURLではなくPDFやスクリーンショットで渡すこと。 先ほどお話ししたとおり、URLだけでは見た目まで読み取ってもらえないことがあります。

プロンプトは一行でも十分ですが、好みがあるなら伝えたほうが早いです。 私は今回あえて一行で試しましたが、「こういう色使いで」「こんな雰囲気で」と伝えたほうが、当然近づきます。

アプリに存在しない機能が混ざることがあります。 これは欠点ではなく、むしろチャンスだと私は考えています。「この機能、あったらいいな」と思ったら、そのままアイデアとして採用してしまえばいいんです。

Claude Codeに渡すときは「路線変更できるか確認してください」と添えること。 いきなり全部を書き換えられると、動いていたものが壊れる可能性があります。まず可否を確認してもらってから進めたほうが安全です。

元に戻せる状態にしておくこと。 大きな見た目の変更は、うまくいかなかったときに戻したくなります。AIに「変更前の状態に戻せるようにしておいて」と伝えておくだけでも違います。

よくある質問

ここまで読んで浮かんできそうな疑問に、先にお答えしておきますね。

Q. コードが読めなくても大丈夫ですか？

大丈夫です。私自身、AIが書いたコードはまったく読めません。それでもこの記事の流れは全部できています。やっていることは「デザイン案を見て、気に入ったものを選び、プロンプトをコピーして貼り付ける」だけです。

Q. 日本語で指示していいんですか？

はい。画面のメニューは英語ですが、入力は日本語で問題ありません。私も全部日本語で進めました。

Q. デザインツール（Figmaなど）の知識は必要ですか？

必要ありません。むしろ、デザインの知識がない人ほど恩恵が大きいと思います。自分では思いつかない配色や画面構成を提案してもらえるからです。

Q. 既存のアプリのデザインを変えると、壊れませんか？

可能性はゼロではありません。だからこそ、先ほどの「路線変更できるか確認してください」の一言と、元に戻せる状態の確保が大事になります。いきなり本番の環境で試さない、というのも安全策の一つです。

Q. UIモックアップ以外は何が作れますか？

スライド、ドキュメント、ワイヤーフレーム、アニメーション、モバイルアプリのデザインなどが用意されています。サイト作り以外にも使い道がありそうなので、ここはぜひあなたにも試してみてほしいところです。

まとめ：デザインは「後から」でも間に合います

長くなりましたので、要点を整理しておきます。

AIが作るUIがありきたりになるのは、こちらが方向性を渡していないからです。そして、コードを書いているAIに「デザインを考えて」と頼んでも、あまりうまくいきません。今あるものを守ろうとしてしまうからです。

だから、考える場所と作る場所を分ける。

1. Claude Design（または手元のAIツール）でUIの案だけを出してもらう
2. 気に入った案からプロンプトを書き出す
3. そのプロンプトをClaude Codeに貼り付けて実装してもらう

この3ステップだけです。参考にしたいサイトがあるならPDFやスクリーンショットで渡す。スクリーンショットを見せて「もっとおしゃれにして」とお願いするのも有効です。

そして、GPT-6 Astraを試してみた結果、ChatGPTもほぼ同じレベルに来ていることがわかりました。ですので、新しく契約を増やす必要はありません。今あなたが使っているAIツールで、まず一行投げてみてください。

最初は機能を優先して、見た目は後回しでいい。ある程度動くようになってから、この方法でブラッシュアップする。その順番で進めれば、「AIが作ったっぽいアプリ」から抜け出せます。

見た目が変わると、不思議と自分のやる気も変わります。私はそれを実感しました。あなたにも、ぜひ体験してみてほしいです。

この記事の内容を解説したYouTubeはこちら

関連記事はこちら