こんにちは😊 前回までで、秘書アプリが実際に動くようになりましたね。
メモを追加したり、タスクを完了にしたり——ちゃんと動いているはずです。
でも触っているうちに、「なんとなく見づらいな」「もう少し使いやすくしたいな」と感じる部分も出てきたのではないでしょうか😊
今回は、その「見た目」の部分を整えていきます✨ デザインの知識は一切いりません。必要なのは、「かっこいい」「見やすい」といった自分の感覚を、そのまま言葉にする力だけです。
今日の終わりには、自分の秘書アプリが今よりぐっと使いやすく、見やすくなっているはずです✨
一緒に進めていきましょう😊
まず最初にお伝えしたいのは、専門用語は一切いらないということです😊
「もう少しおしゃれにして」「なんか野暮ったい」
——こういった感覚的な言葉だけで、Claude Codeは十分に理解して直してくれます。
大切なのは、「何を見て」「どう感じたか」を、飾らずそのまま伝えることです。
「ボタンのpaddingを広げて」ではなく「ボタンがギュッと詰まって押しにくそう」で十分です。感想を実際の修正内容に変換してくれるのは、Claude Codeの仕事です😊
色の指示は、雰囲気だけでも十分伝わります。もっと正確に合わせたいときは、色名やカラーコードを使うと、さらに精度が上がります。
「落ち着いた紫系に」「もっと爽やかな印象に」——だいたい合う、くらいの精度です。
「ラベンダー」「チャコールグレー」「ミントグリーン」——かなり近い色になります。
「#7c3aed（濃い紫）にして」——ここまで伝えると、ぴたりと合わせられます。
「窮屈」「ごちゃごちゃしている」「余白が空きすぎ」
——こういった感覚も、そのまま指示として通じます😊
文字の大きさや太さも、「読みにくい」「区別しにくい」という印象をそのまま伝えれば大丈夫です。
色・余白・文字を同時に直すと、どの変更が良かったのか分からなくなってしまいます。「まず色だけ」「次に余白だけ」と、1回の指示を絞ると納得のいく仕上がりになりやすいですよ😊
「どこを見れば改善点に気づけるのか」が分かると、指示も出しやすくなります。次の視点で、ひと通り眺めてみましょう。
実際に触りながら、気になった項目はそのままClaude Codeへの指示にできます。全部を一度に直そうとしなくて大丈夫です😊
気になったことをメモしておいて、1〜2個ずつ伝えていきましょう。
秘書アプリは、パソコンだけでなくスマホから開くことも多いはずです。
パソコンの画面ではきれいに見えていても、スマホでは文字が小さすぎたり、ボタンが押しにくかったりすることがあります。
ブラウザの端をドラッグして画面幅を狭くすると、スマホで見たときの見え方に近い状態を確認できます。
「スマホの幅にすると文字がはみ出す」「ボタンが横に並びすぎて押しにくい」など、見たままをClaude Codeに伝えます。
デザインの改善は、一発で完璧に仕上げるものではありません。この繰り返しの中で、少しずつ洗練されていきます。
欲張って全部メモすると、どこから直せばいいか分からなくなってしまいます😊
少しずつのサイクルで大丈夫です。
Claude Codeは修正を実行するだけでなく、相談相手にもなってくれます。どう直せばいいか迷ったときは、率直に意見を求めてみましょう😊
「完成」の基準を先に決めておくと、いつまでも直し続けてしまうのを防げます。次の項目がクリアできていれば、日常的に使い始めて大丈夫な状態です。
自分では毎日見て慣れてしまいます。家族や知人に画面を見せて「どこで何をするアプリか分かる？」と聞いてみると、気づいていなかった改善点が見つかることがありますよ😊
完璧を目指さなくても大丈夫です。70〜80点の状態でも、実際に使い始めればまた気になる点が出てきます。そこからさらに直せばいい。まずは日常で使ってみることを目標にしましょう✨
今回は、専門用語を使わずに見た目を整える方法から、色・余白・文字の伝え方、チェックの視点、そしてClaude Codeと相談しながら仕上げていく進め方まで見てきました✨
「デザインなんて分からない」と思っていた方も、
実は毎日「なんとなく良い/悪い」を感じ取っているはずです😊
その感覚を言葉にするだけで、ちゃんとアプリは磨かれていきます。
今日、自分の秘書アプリがまたひとつ、使いやすく育ちました。
次回は、この秘書アプリに新しい機能を追加していきます😊