秘書アプリ開発
デザイン・レイアウトの改善
専門用語を使わずに見た目の改善指示を出す方法、全体のレイアウトや文字・余白のチェックポイント、Claude Codeとの対話による洗練されたデザインへの改善
はじめに
前回までで、秘書アプリを実際に動かせるようになりました。メモやタスクの機能は問題なく動いていても、「なんとなく見づらい」「もう少し使いやすくしたい」と感じることがあるはずです。今回はその「見た目」の部分を、専門用語を一切使わずにClaude Codeへ伝えて改善していく回です。
デザインの知識がなくても大丈夫です。あなたに必要なのは「かっこいい」「見やすい」といった感覚を、そのまま言葉にする力だけです。仕上げの精度を上げるためのチェックポイントと、Claude Codeとの対話の進め方も合わせて押さえていきましょう。
専門用語を使わずに見た目の改善指示を出す方法
感覚をそのまま言葉にする
「もう少しおしゃれにして」「なんか野暮ったい」——こうした感覚的な言葉だけでも、Claude Codeは十分に理解して修正してくれます。CSSやデザイン用語を覚える必要はありません。大切なのは「何を見て」「どう感じたか」を、飾らずそのまま伝えることです。
「ボタンのpaddingを広げて」ではなく「ボタンがギュッと詰まって押しにくそう」で十分です。Claude Codeが感想を実際の修正内容に変換してくれます。
色の伝え方
色の指示は、雰囲気だけでも十分伝わります。より正確に合わせたいときは、色名やカラーコードを使うとさらに精度が上がります。
| 伝え方 | 例 | 精度 |
|---|---|---|
| 雰囲気で伝える | 「落ち着いた紫系に」「もっと爽やかな印象に」 | おおよそ合う |
| 色名で伝える | 「ラベンダー」「チャコールグレー」「ミントグリーン」 | かなり近い |
| カラーコードで伝える | 「#7c3aed（濃い紫）にして」 | ピタリと合う |
秘書アプリで使いやすい配色の例
完了したタスクは緑っぽい色で、未完了は今のままでいい。
余白・配置の伝え方
「窮屈」「ごちゃごちゃしている」「余白が空きすぎ」——こうした感覚も、そのまま指示として通じます。
「メモとタスクの間が詰まっていて見づらい」「ボタンとボタンがくっついて押し間違えそう」「ダッシュボードの数字が小さくて目立たない」
「メモとタスクのセクションの間をもっと空けて」
「ボタン同士の間にすき間を作って」
「ダッシュボードの数字をもっと大きく、目立つようにして」
あと、追加ボタンが小さくて押しにくいので、もう少し大きくしてほしい。
文字・フォントの伝え方
タイトルはもっと大きく太く、本文は今より少し小さくして、メリハリをつけて。
色・余白・文字を同時に直すと、どの変更が良かったのか分からなくなります。「まず色だけ」「次に余白だけ」と、1回の指示を絞ると納得のいく仕上がりになりやすいです。
全体のレイアウトや文字、余白などのチェックポイント
5つの確認の視点
「どこを見れば改善点に気づけるのか」が分かると、指示も出しやすくなります。次の5つの視点で、自分の秘書アプリをひと通り眺めてみましょう。
要素の並び方に迷いはないか。どこに何があるかすぐ分かるか。
読みにくい小ささになっていないか。重要な文字が目立っているか。
要素同士が詰まりすぎ・空きすぎになっていないか。
色が多すぎて散らかって見えないか。状態が色で伝わるか。
チェックリスト
実際に触りながら、以下の項目を1つずつ確認してみましょう。気になった項目はそのままClaude Codeへの指示にできます。
| チェック項目 | 確認する視点 |
|---|---|
| ボタンの押しやすさ | 小さすぎたり、隣のボタンと近すぎたりしないか |
| 文字の読みやすさ | 文字が小さすぎない・薄すぎないか |
| セクション同士の余白 | メモ・タスク・ダッシュボードの境目が分かるか |
| 色の使いすぎ | 意味もなく色数が多くなっていないか |
| 大事な情報の目立ち方 | 未完了タスクの件数など、重要な数字がすぐ見えるか |
| 入力欄の分かりやすさ | 何を入力する欄か、見ただけで伝わるか |
チェックして気になった点をメモしておき、1〜2個ずつClaude Codeに伝えていきましょう。次の章の「対話のサイクル」で、その進め方を詳しく見ていきます。
スマホ表示の確認
秘書アプリは、パソコンだけでなくスマホから開くことも多いはずです。パソコンの画面できれいに見えていても、スマホでは文字が小さすぎたり、ボタンが押しにくかったりすることがあります。
ブラウザの端をドラッグして画面幅を狭くすると、スマホで見たときの見え方に近い状態を確認できます。
「スマホの幅にすると文字がはみ出す」「ボタンが横に並びすぎて押しにくい」など、見たままをClaude Codeに伝えます。
スマホの画面幅では、ボタンを縦に並べるようにしてほしい。
Claude Codeとの対話による洗練されたデザインへの改善
反復改善のサイクル
デザインの改善は「一発で完璧に仕上げる」ものではありません。触って、気づいて、伝えて、また触る——この繰り返しの中で、少しずつ洗練されていきます。
相談しながら仕上げる
Claude Codeは修正を実行するだけでなく、相談相手としても頼れます。どう直せばいいか迷ったときは、率直に意見を求めてみましょう。
毎日開いて、パッと状況を把握したいアプリにしたい。
完成の目安
「完成」の基準を先に決めておくと、いつまでも直し続けてしまうことを防げます。以下の項目がクリアできていれば、日常的に使い始めて問題ない状態です。
仕上がりチェックリスト
| ☐ | ボタンや入力欄が押しにくい・見づらいと感じないか |
| ☐ | スマホの画面幅でも崩れていないか |
| ☐ | 重要な情報（未完了件数など）がすぐ目に入るか |
| ☐ | 色や余白が使いすぎ・詰め込みすぎになっていないか |
| ☐ | 家族や知人に見せて「使い方が分かる」と言われたか |
自分では毎日見て慣れてしまいます。家族や知人に画面を見せて「どこで何をするアプリか分かる？」と聞いてみると、気づいていなかった改善点が見つかることがあります。
70〜80点の状態でも、実際に使い始めればまた気になる点が出てきます。そこからさらに直せばいい。まずは日常で使ってみることを目標にしましょう。
この章の確認チェックリスト
| ☐ | 専門用語を使わず、感覚をそのまま指示に変えられると理解した |
| ☐ | レイアウト・文字・余白・配色の4つの視点でアプリを見直した |
| ☐ | スマホの画面幅でも確認した |
| ☐ | 指示→確認→また指示、のサイクルを実際に試した |
| ☐ | 仕上がりチェックリストを確認した |