※Claude Codeを使用して記事を作成しています。
はじめに
前回はClaude Codeを使って、カウンターアプリを一から作りました。
ボタンを押すと数字が増減する、ちゃんと動くアプリが完成しましたね！
でも、こんなことを思いませんでしたか？
「動くのはわかったけど、なんか地味…」
「もっとおしゃれなデザインにしたい！」
今回はそんな要望に応えるデザイン編です。
Claude Codeに日本語で「こんな見た目にしたい」と伝えるだけで、アプリの見た目をどんどん変えていきましょう。
コードの知識は引き続き不要です！
今回やること
| やること | 内容 |
|---|---|
| 🎨 テーマカラーを変える | アプリ全体の色をお好みに変更 |
| 🔤 文字のサイズ・スタイルを変える | 数字を見やすく、ボタン文字をおしゃれに |
| 🟦 ボタンのデザインを変える | 丸いボタン・色付きボタンにする |
| 🃏 カード風レイアウトにする | 数字部分を枠で囲んでスッキリ見せる |
今回作るアプリのイメージ
事前準備
第2回で作ったカウンターアプリが手元にある状態からスタートします。
Claude Codeも起動しておきましょう。
cd ~/AndroidStudioProjects/MyCounterApp
claude
Step 1：テーマカラーを変えてみよう
まずは一番わかりやすい変化として、アプリ全体の色を変えてみましょう。
✍️ Claude Codeへの指示（プロンプト）例：
アプリ全体のメインカラーを青紫（パープル）に変えてください。
ボタンも同じ色系統でまとめてほしいです。💡 色の伝え方のコツ：
「青紫」「ネイビー」「パステルピンク」など、日常的な色の名前で大丈夫です。
「#6200EE のような紫」と16進数カラーコードで伝えることもできます。
こんな指示も試してみよう
今の色が気に入らないので、オレンジとホワイトを基調にした
明るい感じのデザインにしてください。夜でも目に優しいように、全体的に暗い色（ダークモード風）に
してください。文字は白で見やすくしてほしいです。
Step 2：数字のデザインを変えてみよう
カウンターアプリの主役は、画面中央の大きな数字です。
ここを変えるだけで印象がガラリと変わります。
✍️ Claude Codeへの指示（プロンプト）例：
真ん中に表示されている数字をもっと大きくしてください。
数字のフォントを太くして、ドーンと目立つようにしたいです。数字の色を、0のときはグレー、1〜9のときは青、
10以上になったら赤にしてください。
数字が増えるにつれて色が変わると面白いと思います。💡 ポイント：
「〇〇のときは〜、△△のときは〜」という条件付きの指示もClaude Codeはちゃんと理解してくれます。
Step 3：ボタンのデザインを変えてみよう
「+1」「-1」「リセット」のボタンを、もっとかっこよくしましょう。
丸いボタンにする
「+1」と「-1」のボタンを正円形にしてください。
大きめにして押しやすくしてほしいです。アイコンを使う
「+1」ボタンに「＋」マーク、「-1」ボタンに「−」マークを
大きめのアイコンとして表示してください。
ボタンのテキストはなくしてアイコンだけにしてほしいです。影（シャドウ）をつける
ボタンに影をつけて、浮き出ているような立体感を出してください。
Step 4：カード風レイアウトにしよう
数字の部分を、カードのような四角い枠に入れると一気にアプリらしい見た目になります。
✍️ Claude Codeへの指示（プロンプト）例：
数字が表示されている部分を、角が丸い白いカードで囲んでください。
カードには薄い影もつけてほしいです。
背景は薄いグレーにするとカードが映えると思います。
Step 5：全部まとめてお願いしてみよう
慣れてきたら、一度にまとめて指示することもできます。
✍️ まとめ指示の例：
カウンターアプリのデザインを全体的に刷新してください。
イメージは「シンプルでモダンなスマホアプリ」です。
・背景色：薄いグレー
・数字部分：白いカードに入れて、角丸・影あり
・数字の色：0はグレー、1以上は青、10以上は赤
・「+1」「-1」ボタン：円形・大きめ・青色
・「リセット」ボタン：枠線だけのシンプルなボタン
・全体的に余白を広めにとってスッキリ見せてほしい💡 まとめ指示のコツ：
「〇〇なイメージ」と最初に雰囲気を伝えてから、細かい条件を箇条書きにすると、Claude Codeが意図を汲み取りやすくなります。
気に入らないときは「やり直して」でOK
デザインは好みがあるので、最初から完璧でなくて大丈夫です。
さっき変えてもらったボタンの色が少し暗すぎます。
もう少し明るい青にしてください。やっぱりさっきのデザインの方が好きでした。
ボタンを元の形に戻してもらえますか？このように、会話しながら少しずつ好みに近づけていく のがClaude Codeの使い方です。
動作確認を忘れずに
デザインを変えたあとは、Android Studioの ▶（Runボタン） でアプリを起動して確認しましょう。
確認チェックリスト
- [ ] アプリが正常に起動する
- [ ] ボタンを押すと数字が増減する（動作が壊れていない）
- [ ] 意図したデザインになっている
- [ ] 文字が読みにくくなっていない
⚠️ 注意：
デザインを変えた際に、まれにアプリが起動しなくなることがあります。
そのときは「さっきの変更のあとにアプリが起動しなくなりました」とClaude Codeに伝えれば修正してくれます。
まとめ
| 学んだこと | ポイント |
|---|---|
| テーマカラーの変更 | 色の名前や雰囲気で伝えるだけでOK |
| 文字・数字のデザイン | 条件付き（〇〇のときは〜色）も指示できる |
| ボタンのカスタマイズ | 形・色・影など自由に変えられる |
| やり直し方 | 「気に入らない」「元に戻して」をそのまま伝える |
デザインに正解はありません。Claude Codeと会話しながら、自分好みのアプリに仕上げていきましょう！
