デザインの基本を初心者向けに解説｜見やすさを作る7原則

デザインは装飾を増やす作業ではなく、情報を理解しやすい順番に整え、迷わず行動できる形にする作業です。初心者でも、判断する順番を固定すれば改善できます。

最初に目的を1文で書く

「おしゃれにする」では判断できません。次の3点を1文にします。

• 誰が見るのか
• 何を理解してほしいか
• 見た後に何をしてほしいか

例：初めてサービスを知った会社員が、3分で特徴を理解し、料金ページを確認できるようにする。

見やすさを作る7原則

1. 優先順位

タイトル、結論、補足、操作の順を決めます。重要度が違う情報を同じ大きさ・太さで並べません。

2. 近接

関係する見出しと本文、画像と説明、入力欄とエラーを近づけます。別のグループとの間には大きな余白を置きます。

3. 整列

左端、中央、基準線を揃えます。カードごとに開始位置が違うと、読むたびに視線を探し直すことになります。

4. 反復

同じ役割の見出し、ボタン、カードは同じ形にします。ページごとに表現を変えるより、操作の学習を助けます。

5. 対比

重要な要素と補足に、サイズ・太さ・色・余白の差を作ります。微妙な差を増やすより、役割が異なることが明確な差を使います。

6. 余白

余白は空きではなく、情報のまとまりを示す要素です。文字やカードを詰め込む前に、削れる情報を確認します。

7. 一貫性

同じ言葉、同じ操作、同じ状態は同じ見た目にします。戻る場所や次の操作を予測しやすくします。

直す順番

装飾から始めると、情報構造の問題を隠すだけになりがちです。

1画面1メッセージで確認する

画面を数秒見たときに、何のページか、重要な内容は何か、次の操作は何かを答えられるか確認します。全部を一画面に収める必要はありません。次の内容が続くことが分かる構成にします。

スマホでは情報を積み直す

PCを縮小するだけではなく、重要な順に縦へ並べ直します。複数カラムは1カラムにし、表は横スクロールやカード形式を検討します。文字を極端に小さくして収めません。

色だけに頼らない

エラーを赤だけ、選択中を青だけで示すと、色を区別しにくい人やモノクロ表示で伝わりません。アイコン、ラベル、線、太さなどを併用します。

デジタル庁デザインシステムも、色だけで情報を区別しないことを案内しています。

• デジタル庁デザインシステム：カラーのアクセシビリティ

5分レビュー

1. ページの目的を声に出す
2. 最重要要素を指差す
3. 同じ役割の見た目を比較する
4. スマホ幅で重なりを確認する
5. キーボードで操作する
6. 文字を拡大して欠けを確認する

まとめ

デザインの基本は、目的、優先順位、近接、整列、反復、対比、余白、一貫性です。色や装飾の前に情報を整理し、対象利用者が理解・操作できるかで評価しましょう。