デザイン基礎

9-1デザイン4原則

プロのデザインの土台は、たった4つの原則でできています。これを知るだけで「なんかダサい」の原因の8割が説明できるようになります。

4つの原則

「余白」は5つ目の主役

初心者のデザインが窮屈に見える最大の原因は余白不足です。要素を詰め込まず、たっぷりの余白を取る。迷ったら「余白を今の1.5倍に」と指示するだけで、ぐっと洗練されます。

9-2配色とタイポグラフィ

配色は「3色ルール」で破綻しない

• ベースカラー（70%） — 背景。白やごく薄い色
• メインカラー（25%） — アプリの顔。ヘッダーや見出しに
• アクセントカラー（5%） — ボタンや重要表示。1色だけ

色数を増やすほど難易度は上がります。3色＋無彩色（黒・グレー・白）に制限するのが、初心者が一番きれいに仕上がる方法です。

文字（タイポグラフィ）の基本

• フォントは1〜2種類まで — 日本語なら「Noto Sans JP」などの定番ゴシックが無難
• サイズに階層をつける — 見出し・本文・補足の3段階。本文は16px以上
• 行間はゆったり — 日本語の本文は行間1.7〜1.9倍が読みやすい
• 真っ黒(#000)を避ける — 濃いグレー(#333等)の方が目に優しく上品

このアプリの配色を整えてください。
- ベース：白〜ごく薄いグレー
- メイン：深い青緑（信頼感のある雰囲気）
- アクセント：オレンジ系を1色だけ（ボタンと重要表示のみ）
- 文字は真っ黒でなく濃いグレー
- この3色＋無彩色以外は使わないでください

9-3UIパターンとユーザビリティ

UI（ユーザーインターフェース）には、世界中で使い込まれた「定番の型」があります。奇抜さより定番。ユーザーが迷わないことが最優先です。

覚えておきたい定番パターン

• ナビゲーションは上か左 — メニューの定位置。スマホでは下タブかハンバーガーメニュー
• 主ボタンは1画面に1つ — 「今やるべき操作」だけ目立たせる（対比の応用）
• 破壊的操作は遠ざける — 削除ボタンは小さく・離して・確認ダイアログ付きで
• 状態を伝える — 読み込み中はスピナー、成功・失敗はメッセージで必ず知らせる
• 空っぽ画面に案内を — データゼロのとき「＋ボタンから最初のタスクを追加しましょう」と表示

スマホファースト

個人向けアプリの利用は大半がスマホです。「スマホで快適→PCにも対応」の順番で考えましょう。チェックポイントは3つ：親指でボタンが押しやすいか（最小44px四方）、文字は拡大せず読めるか、横スクロールが発生していないか。

このアプリをUI/UXの観点で点検してください。
- ユーザーが迷いそうな箇所
- スマホでの使いやすさ（ボタンサイズ・配置）
- 状態表示（読み込み中・成功・失敗・空状態）の不足
問題点を重要度順にリストアップして、改善案を提案してください。

9-4AIへのデザイン指示を極める

この章で学んだ言葉を使えば、デザイン指示は格段に通じやすくなります。仕上げに、指示の精度を上げる実践テクニックをまとめます。

レベル別・デザイン指示

家計簿アプリらしい、信頼感がありつつ親しみやすい
デザインにしてください。参考イメージは銀行アプリより
家計簿ノート。丸みと余白多めで。

・入力フォームのラベルと入力欄をもっと近接させて
・カード内の要素を左端で整列させて
・保存ボタンだけ対比を強く、他のボタンは控えめに
・全体の余白を1.5倍に

・本文のフォントサイズを16pxに、行間を1.8に
・カードの角丸を12px、影は薄く
・メインカラーを #2D6A4F に統一

さらに効く2つの技

• 実在アプリを参考に挙げる — 「Notionのような」「LINEのような」は大量の情報を一言で伝える最強の指示
• スクリーンショットで対話する — 現状の画面を見せて「ここが窮屈に見える理由と直し方を提案して」と聞くと、AIがデザイナー役になってくれる