この章では、デザインチェックと改善の方法を学びます。
デザインは、最初から完璧に作るものではありません。
一度作ったあとに、余白、文字、色、画像、導線、スマホ表示を確認し、少しずつ整えていきます。
チェックの目的
デザインチェックの目的は、感覚的に良い悪いを決めることではありません。
見やすさ、伝わりやすさ、使いやすさに問題がないか確認することです。
チェックでは、次のような視点を持ちます。
- 情報の順番は自然か
- 重要な情報が目立っているか
- 余白がそろっているか
- 文字が読みやすいか
- 色を使いすぎていないか
- 画像が内容に合っているか
- ボタンが見つけやすいか
- スマホで使いやすいか
見た目の好みだけでなく、目的に合っているかを確認します。
余白をチェックする
まず、余白を確認します。
余白の不揃いは、素人っぽく見える原因になりやすいです。
確認したい項目は次の通りです。
- セクション間の余白がそろっているか
- 見出しの上と下の余白が自然か
- カード内の余白が窮屈ではないか
- ボタン周りに余裕があるか
- スマホで左右余白が狭すぎないか
- 同じ役割のパーツで余白がばらついていないか
余白のチェックでは、画面を少し引いて全体を見ると気づきやすくなります。
文字をチェックする
次に、文字を確認します。
文字が読みづらいと、どれだけ見た目が整っていても情報は伝わりません。
確認したい項目は次の通りです。
- 本文が小さすぎないか
- 行間が狭すぎないか
- 見出しが大きすぎないか
- 見出し階層がわかるか
- 太字が多すぎないか
- 1行が長すぎないか
- ボタン文言がわかりやすいか
文字は、読み始めた時に負担が少ないかを確認します。
色をチェックする
色は、増えすぎていないかを確認します。
色が多すぎると、ページ全体のまとまりが弱くなります。
確認したい項目は次の通りです。
- ベースカラー、メインカラー、アクセントカラーの役割があるか
- 目立たせたい場所が明確か
- ボタンが他の要素に埋もれていないか
- 文字と背景のコントラストがあるか
- リンクが本文と区別できるか
- 注意やエラーの色がわかりやすいか
すべてを目立たせようとすると、何も目立たなくなります。
重要な導線に色の力を集中させます。
画像をチェックする
画像は、内容に合っているかを確認します。
雰囲気だけで選んだ画像は、ページの目的とずれることがあります。
確認したい項目は次の通りです。
- 画像が内容を補っているか
- 実際の商品や場所が伝わるか
- 画像が粗くないか
- トリミングが不自然ではないか
- 一覧の画像比率がそろっているか
- 画像の上の文字が読めるか
- 素材感が強すぎないか
画像は存在感が強いため、違和感があるとページ全体の印象に影響します。
導線をチェックする
導線は、ページの目的に直結します。
問い合わせ、予約、資料請求、詳細ページへの移動など、次の行動がわかりやすいか確認します。
確認したい項目は次の通りです。
- 主要なボタンが見つけやすいか
- ボタン文言が具体的か
- ページ下部にも導線があるか
- リンクが見落とされないか
- 複数の行動がありすぎないか
- 重要度に応じてボタンの強弱があるか
導線が弱いと、せっかく読まれても次の行動につながりにくくなります。
スマホでチェックする
デザインは、PCだけでなくスマホでも確認します。
スマホでは、PCで気づかなかった問題が見つかることがあります。
確認したい項目は次の通りです。
- 見出しが大きすぎないか
- 本文が読みやすいか
- ボタンが押しやすいか
- 画像が見切れていないか
- 横スクロールが発生していないか
- セクション間が間延びしていないか
- メニューが使いやすいか
できれば、実機でスクロールしながら確認します。
改善の進め方
改善する時は、一度に全部直そうとしなくて大丈夫です。
まず、大きな問題から直します。
おすすめの順番は次の通りです。
- 情報の順番
- レイアウト
- 余白
- 文字
- 色
- 画像
- UIの状態
- 細かな装飾
装飾を細かく直す前に、情報とレイアウトを整えます。
土台が崩れていると、細部を直しても効果が出にくくなります。
この章のまとめ
- デザインチェックは、見やすさ、伝わりやすさ、使いやすさを確認する作業
- 余白、文字、色、画像、導線、スマホ表示を順番に見る
- すべてを目立たせず、重要な情報と行動を明確にする
- 改善は、情報の順番やレイアウトなど大きな部分から進める
- 次の章では、小さなサイトを題材にデザインの流れを通して確認する