デザイン初心者ロードマップ｜30日で1枚を8回見直す

デザイン初心者が30日で目指すのは、たくさんの機能や用語を覚えることではありません。小さな制作物を一つ完成させ、どこをどう直したか自分の言葉で説明できることです。

このロードマップでは、目的、優先順位、余白、配色、文字、レイアウト、スマホ確認を8つのステップに分けます。各ステップには「やること」と「終えてよい目安」があります。全部を一度に学ばず、いま見る場所を一つに絞って進めましょう。

5つの基本を先に理解したい人は「デザイン初心者は何から学ぶ？最初に見るべき5つの基本」から読むと、この計画を進めやすくなります。

3つの進め方から選ぶ

たとえるなら、視力検査でレンズを1枚ずつ替えるようなものです。一度に全部を変えず、「どちらが見やすいですか」と比べるから効いた変更が分かります。ただし、この例が示すのは変更を分けて比較する方法だけです。デザインの良し悪しは、目的、相手、アクセシビリティ、媒体の仕様も含めて判断します。

このロードマップのゴール

30日後に、次の四つができれば完了です。

1. 制作の目的と相手を一文で書ける。
2. 情報を「最初・次・最後」の順に並べられる。
3. 余白・色・文字・配置を、理由を持って一度ずつ直せる。
4. PCとスマホで確認し、修正前後を残せる。

完成させるものは、バナー、SNS投稿、記事のアイキャッチ、ショップカード、カードUIのうち一つで構いません。大きなWebサイトやLPを最初の課題にすると、学ぶことが増えすぎます。

まず用意するもの

• 直したい制作物、または作りたい一枚
• 紙のノートかメモアプリ
• Canva、Figma、Photoshop、Illustratorなど、使えるツールを一つ
• PCとスマートフォン
• 1日15〜30分の作業時間

有料ツールを新しく契約する必要はありません。ツールを比較する時間より、同じ制作物を一度直す時間を優先します。

余白灯舎では、ミナも同じように「全部学ばなければ」と立ち止まっていました。

ミナ配色も、フォントも、Figmaも、全部できないと始められない気がします。

アキラ今日は1枚の、1項目だけでいい。前後を残せば、次の判断に使えるよ。

8ステップの全体像

Step 1｜目的を一文にする

やること

制作物を開く前に、次の一文を埋めます。

【誰】に、【何】を伝え、見たあとに【どうしてほしいか】。

採用イベントのバナーなら、「未経験で転職を迷っている人に、見学だけでも参加できると伝え、詳細を確認してほしい」のように書けます。

終えてよい目安

• 「幅広い人」「いい感じにする」のような曖昧な言葉だけで終わっていない。
• 見た人に取ってほしい行動が一つに絞れている。

Step 2｜情報を3段階に並べる

やること

入れたい情報をすべて書き出し、次の三つに分けます。

1. 最初に見せる情報
2. 次に理解してほしい情報
3. 最後に確認・行動してほしい情報

大きさや色を変える前に、紙の上で順番を決めます。全部が「最初」になったら、目的の一文へ戻ります。

終えてよい目安

• 主役が一つに決まっている。
• 日付、補足、注意書きまで同じ強さにしていない。
• ボタンは内容を理解したあとに見つかる位置へ置ける。

Step 3｜余白で関係を分ける

やること

装飾を足さず、要素同士の距離だけを見直します。見出しと説明は近く、別の話題は離します。制作物の端と文字の距離、主役の周りの空間もそろえます。

終えてよい目安

• どこまでが一つの情報か、枠線がなくても分かる。
• 主役の周りに、ほかの要素が接近しすぎていない。
• 余白の大きさに、近い・遠いの二段階以上がある。

Step 4｜色の役割を決める

やること

使っている色を数え、背景、文字、メイン、アクセントの役割に分けます。意味を説明できない色は、いったん外して比較します。

終えてよい目安

• アクセントカラーを使う場所が一つか二つに絞れている。
• 本文と背景のコントラスト比を測り、基準を満たしている。
• 「寂しいから」以外の理由で色を選べる。

Step 5｜文字に役割を持たせる

やること

フォントを探す前に、見出し、本文、補足、ボタンの役割を分けます。サイズ、太さ、行間、文字色のうち、必要な差だけをつけます。

終えてよい目安

• 見出しと本文が一目で区別できる。
• 本文が小さすぎず、行間が詰まりすぎていない。
• フォントを増やさなくても読む順番が見える。

Step 6｜視線の道を一本にする

やること

画面を少し離して見るか、縮小表示します。最初に主役へ目が行き、次に説明、最後に日付やボタンへ進むかを確認します。位置のずれや、ばらばらな揃え方も直します。

終えてよい目安

• 最初に見る場所を、迷わず指で示せる。
• 関係する情報の左端や中心がそろっている。
• 視線を途中で奪う、意味のない装飾がない。

Step 7｜スマホで読む・押す

やること

画像としてスマホへ送り、実際の大きさで確認します。Webページなら、ブラウザ幅を狭めるだけで終えず、実機でも読みます。

レン作った画面ではなく、読まれる画面で確認する。

ミナPCで整っていても、スマホで読めなければ届かないんですね。

終えてよい目安

• 拡大しなくても主要な文字を読める。
• 画像の重要な部分が切れていない。
• ボタンやリンクを、ほかの要素と間違えずに押せる。
• Webの操作対象は、原則24×24 CSSピクセル以上または所定の間隔を確認した。

Step 8｜修正前後と理由を残す

やること

修正前と修正後を並べ、変えた理由を三つだけ書きます。

主役を一つに絞った。
関連する情報を近づけた。
赤をボタンだけに使った。

「おしゃれになった」ではなく、相手がどう読みやすくなったかを書きます。

終えてよい目安

• 変更点ではなく、変更した理由を説明できる。
• 直さなかった場所にも理由がある。
• 次に試したいことを一つ残せる。

7日で試す短縮プラン

まず一週間だけ試したい場合は、次の順で進めます。

一日で全部を直さないことがポイントです。昨日直した場所を、今日はなるべく触らず、見る対象を変えます。

30日の進め方

1週目｜目的と優先順位

題材を決め、相手・伝える内容・行動を一文にします。情報を三段階に並べ、ラフを二案作ります。この週は配色や装飾に時間を使いません。

2週目｜余白と文字

同じ一枚の距離、揃え、文字サイズ、行間を見直します。修正前の画像を残してから作業すると、変化を比較できます。

3週目｜配色とレイアウト

色の役割を決め、視線が主役から次の情報へ進むように整えます。別のテンプレートへ乗り換えるのではなく、今ある構成を理由付きで直します。

4週目｜スマホ確認と仕上げ

実機で読みやすさを確かめ、第三者一人に「最初に何が見えたか」を聞きます。最後に修正前後と判断理由をまとめます。

迷ったときの戻り先

• 何を目立たせるか決められない → Step 1の目的へ戻る。
• 全部を大きくしたくなる → Step 2の優先順位へ戻る。
• 寂しく見えて装飾を足したくなる → Step 3の距離を確認する。
• 色が決まらない → Step 4で役割を書き出す。
• 直し続けて終わらない → Step 8で理由を三つに絞る。

まとめ｜一枚を8回見る

デザイン初心者のロードマップは、知識を集める順番ではなく、同じ制作物を見直す順番です。

1. 目的
2. 優先順位
3. 余白
4. 配色
5. 文字
6. レイアウト
7. スマホ確認
8. 修正記録

30日で上達や習熟が保証されるわけではありません。一枚を完成させ、修正理由を言葉にできれば、次の制作で試す順番を持てます。迷う人は、まず7日版だけを終えてください。

物語から始めたい人は「第1話『なんかダサい』と言われた夜」へ。5つの基本を詳しく理解したい人は、ガイドへ進んでください。