【Claude Code 課金】AIに初めてお金を払った私が、月額から年額に変えて分かった料金と上限、よかったこと
youthmania
黒野ジミーのブログ
【Claude Code UIデザイン】イメージがなくても頼めた｜デザインは0→1じゃなくなる
youthmania
Claude Codeでアプリを作りたいけど、デザインのセンスがない…
色やフォントを決めようとしても、イメージが浮かばない…
そんなお悩みにお答えします。
Claude Codeに頼めば、アプリの機能はどんどん形になっていきます。
ただ、見た目となると、どんな色やフォントにしたいのかを決めるのは自分です。
頭の中に完成形がないと、AIに何を頼めばいいのかも分かりませんよね。
私のおすすめは、AIにデザインのパターンをいくつか出してもらい、その中から選ぶことです。
この記事を読むと、イメージがなくてもClaude CodeにUIデザインを頼む流れと、選べないときの聞き方が分かります。
私は、次に作るアプリの配色とフォントを、Claude Codeに出してもらったパターンから決めました。
もともとデザインには疎く、以前作ったアプリでは見た目を深く考えずに決めていたくらいです。
それでも、並んだ案を見比べているうちに「こっちがいい」と選べるようになり、デザインが0→1の作業ではなくなりました。
さっそく、デザインを頼めなかった理由から見ていきましょう！
Contents
イメージがなかったから、Claude CodeにUIデザインを頼めなかった
アプリを作るとき、機能については「こうしたい」が自分の中にあります。
でも、見た目となると話は別で、色にもフォントにもこだわりがありませんでした。
決めようとすると、参考にしたアプリと似たり寄ったりの見た目になりがちです。
どんな雰囲気にしたいのかも、自分では言葉にできません。
そのため、デザインについて何から伝えればいいのかが分かりませんでした。
人にお願いする場合を考えても同じです。
依頼するなら、まず「どんな感じにしたいですか」と聞かれると思います。
私の場合は、そこで答えられないのです。
その点、AIにデザインしてもらうなら、「イメージはないけど、形にしてほしい」から始められます。
頭の中が真っ白でも、とりあえず頼んでみることはできます。
次は、実際にどんな案が出てきたのかを紹介します。
あわせて読みたい
【アプリ開発】非エンジニアがClaude CodeでiPhoneアプリを自作｜難しかったのは「決める」こと
アプリのデザインをAIに頼むと、配色とフォントのパターンが出てきた
Claude Codeに見た目の相談をすると、アプリの中身や似たサービスを参考にしながら、案をいくつも出してくれました。
最初に決めたのは、全体の雰囲気です。
「温かみのある感じ」「やさしい感じ」などの方向から「すっきりシンプル」を選び、そのうえで配色とフォントを順番に決めていきました。
配色は3つの案から選んだ
配色は、イケハヤさんの『明鏡』で学んだ「ベース・メイン・アクセントの3色」を1組にして、3つ出してもらいました。
レシートのような生成り色、電卓のようなグレーとオレンジ、白と青の組み合わせです。
どれも入力画面に当てはめた画像で並んだので、使ったときの姿を想像しやすかったです。
私は、白と青の案にしました。
正直、決め手は「なんとなく、これがいい」という感覚です。
フォントは5つの案から選んだ
フォントの案は、iPhone標準のものやGoogle Fontsで無料公開されている書体など、全部で5つです。
最終的に、日本語はiPhone標準のまま、金額の数字だけ「DM Mono」にする案を選びました。
金額がレシートの印字のように見えて、すっきりした見た目にも合っています。
日本語と数字で書体を変えるなんて、考えたこともありませんでした…！
AIもほかのアプリを参考にしますが、案が何パターンも並ぶので、違う方向の案を選ぶ余地があります。
自分の好みで選べたのがよかったです。
ただ、いつもすんなり決まったわけではありません。
選べないときは聞けばいい｜AIデザインのプロンプトは漠然とでもいい
案が並んでも、どれもしっくりこなかったり、どれがいいのか迷ったりすることがあります。
そんなときも、プロンプト（AIへの頼み方）はきっちりしていなくて大丈夫でした。
私がやっていたのは、次の4つです。
しっくりこないときは、別のパターンをもらう
もらった案を見て、なんとなく違うと感じたとします。
そんなときは、「もっと違うパターンももらえますか」「もっと落ち着いた感じにして」のように、ざっくり伝えるだけで新しい案が出てきます。
人に何度も作り直しをお願いするのは気が引けますよね。
AIなら何回頼んでも気にならないので、私は気楽に頼めます。
ピンとこないときは、理由を聞く
案ごとの違いが分からなければ、「なぜこの配色にしたのか」「なぜこのフォントなのか」をAIに聞いてみます。
すると、配色なら「やさしさを出すため」「見やすさを優先した」、フォントなら「数字が読みやすい」「余白がある」といった背景を説明してくれます。
理由が分かると、そこからイメージを膨らませて色を変えることもできますし、もらった案のまま選ぶこともできます。
伝える言葉は、思ったままでいい
案を見てイメージが固まってきたら、それをそのままAIに伝えます。
うまく言葉にならなくても問題ありません。
人に頼むなら、相手に伝わるように文章を整える必要があると思います。
AIには、多少まとまっていない文章でも、言いたいことをくみ取ってもらえました。
書いているうちに自分の本当の考えにたどり着いたり、AIの返事を読んで言いたかったことがはっきりしたりすることも、よくあります。
あわせて読みたい
プロンプトの書き方が難しいと感じた理由｜自分の言語化力の壁
決めきれないときは「一旦」選んで進める
それでもなんとなくしか決まらなければ、一旦1つの案を選んで、先に進めます。
作っているうちに、デザインについて思うところが出てくるかもしれません。
そのときに改めて変更を頼むのも、AIなら気軽です。
最初からガチガチに決めなくても、アプリづくりは進められます。
こうしたやり取りを重ねて、デザインの決め方そのものが変わっていきました。
デザインは0→1じゃなくなった｜AIでゼロからデザインしなくていい
今回いちばん大きかったのは、デザインを0から1にしなくてよくなったことです。
振り返ると、私は普段から配色やフォントをほとんど気にしていませんでした。
アプリを使うときも、ゲームをするときも、本を読むときも、目に入っているのは中身だけです。
経験がないので、いざ選ぶ立場になると、ぼんやりしたイメージすら湧きませんでした。
AIを使えば、ゼロからデザインを考える必要はありません。
指示が出せない私にも、AIは先にパターンを用意してくれます。
私がやるのは、その中から選ぶことと、迷ったら「違いを教えて」「別のパターンをください」と言葉にすることだけです。
選ぶ基準も、自分の好みや直感で大丈夫でした。
AIは、案と一緒に理由つきのおすすめも教えてくれます。
先ほどの配色も、AIのおすすめは生成り色の案でした。
それでも私は、白と青の案にしています。
AIの提案と違う案を選んでも、何も問題はありません。
0から生み出すのは苦手でも、目の前の1を選んで、少しずつ自分好みに寄せていくことはできます。
まとめ：Claude CodeのUIデザインは、パターンから選ぶだけでいい
この記事では、デザインに自信がない私が、Claude Codeと一緒に配色とフォントを決めた流れをお伝えしました。
ポイントは、次の3つです。
- イメージがなくても、AIは配色やフォントのパターンを出してくれる
- 選べないときは、漠然とした頼み方でも、別の案をもらったり理由を聞いたりできる
- 自分の役割は、0から考えることではなく、出てきた案から好みで選ぶこと
私も、デザインを意識したことがないまま、選ぶ立場になったひとりです。
それでも、案を見て選び、迷ったら聞くことをくり返して、見た目をひとつずつ決められました。
次に作るアプリは、決めた色と書体を入れて、シミュレーター（パソコンの中でiPhoneの画面を動かせる機能）で動かせるところまで来ています。
まだ確定ではないので、作りながら見直していくつもりです！
もし、アプリを作ってみたいのに見た目で手が止まっているなら、まずは「イメージはないけど、いくつか案を出して」とClaude Codeに頼んでみてはいかがでしょうか。
正解を自分で生み出せなくても、選ぶことなら始められると思います。
この記事が、デザインへの苦手意識を手放すきっかけになればうれしいです。
ABOUT ME
はじめまして、黒野ジミーです。
会社員12年を経て起業。独学でFP3級・2級を取得した経験をもとに、働きながらFPを目指す社会人に向けて、実体験ベースの情報を発信しています。
最近はAIに興味を持ち、日々勉強中です。
保有資格：AFP / FP2級 / 日商簿記2級
