つくる前に、相手の行動を決める。
誰が、どこから来て、何を知りたいのか。入口での期待から、伝える言葉・画像・次の行動を組み立てます。
具体例とチェックポイント
たとえば
価格を調べに来た人には料金の手がかりを。初めて訪れた人には、誰のための何のサービスかを先に伝える。
確かめること
見た目を整える前に、訪問者の疑問に答える情報があるか。
デザインのノウハウ
制作で使う考え方と、noteで解説している実践のヒント。
一度に伝える中心を、一つにする。
すべてを強調すると、何も目立ちません。主役のメッセージを決め、補足や根拠は役割に応じて小さく整理します。
具体例とチェックポイント
たとえば
セミナー告知なら、参加する理由を主役に。日時・会場・講師情報は、探しやすい位置にまとめる。
確かめること
縮小しても、最も伝えたい言葉が先に目に入るか。
近づける・揃える・繰り返す・差をつける。
関係する情報は近くに。文字の始まりは共通の軸に。同じ役割は同じ見た目に。主役と補足には明確な差をつけます。
具体例とチェックポイント
たとえば
見出しと説明の間は狭く、次の話題との間は広くする。余白の量で情報のまとまりを伝える。
確かめること
余白を均一にする前に、同じ意味の情報がまとまっているかを見る。
見た目より先に、関係を選ぶ。
違いを伝えるなら比較、手順ならフロー、親子関係なら階層。内容に合う形を選ぶと、説明を減らせます。
具体例とチェックポイント
たとえば
二つのサービスを比べるときは、料金・対象・提供範囲など、同じ項目を同じ順に置く。
確かめること
線や位置に意味があるか。読者が図だけで中心の結論をつかめるか。
見出しだけで、話がつながるようにする。
最初に全体の道筋を示し、各ページは一つの問いに答える。最後は理解したことが判断や行動につながる構成にします。
具体例とチェックポイント
たとえば
「導入効果」だけで終わらせず、根拠がある場合は「確認工程を共通化できる」のように結論を書く。
確かめること
見出しだけを順に読んで、なぜその結論に至るかを追えるか。
迷わせないことを、演出より優先する。
迷う、押しにくい、読みにくい、待ち状態がわからない、エラーから戻れない、誤解する。使いにくさを具体的に分けて確認します。
具体例とチェックポイント
たとえば
送信中と保存完了は別の状態として表示。入力エラーは、間違いの場所と直し方まで伝える。
確かめること
目的の操作を終えられるか。失敗しても自分でやり直せるか。スマホやキーボードでも確かめる。
変える場所と、残す場所を伝える。
「見やすくして」だけでは、気に入った写真や配置まで変わることがあります。変更点・維持する要素・完成条件を分けて指示します。
具体例とチェックポイント
たとえば
「見出しを2行に収める。写真・ロゴ・配色は維持する。スマホ幅で文字が欠けないことを確認する」と具体化する。
確かめること
直した箇所以外に変化がないか。価格・日時・固有名詞は元の情報と照合する。
感覚を、確認できる基準に変える。
訴求・文字・配置・配色・写真など、評価する観点を共有します。点数だけで判断せず、読めない・誤解する問題を先に直します。
具体例とチェックポイント
たとえば
バナーを縮小して主役と文字を確認。「なんとなく弱い」ではなく、見出しと背景の区別がつかない箇所を指摘する。
確かめること
見た目の評価と、申込・購入などの成果は別。修正は影響の大きいものから絞って確かめる。
文字の役割を、見た目で揃える。
見出し・本文・補足で使い方を決め、同じ役割には同じ書体や太さを使います。改行は文字数だけでなく、意味のまとまりで考えます。
具体例とチェックポイント
たとえば
カードごとに見出しの太さを変えない。長い見出しは、言葉のつながりが自然な位置で改行する。
確かめること
文字が枠に近すぎないか。強調が増えすぎて、読む順番が曖昧になっていないか。
色を選ぶ前に、役割を決める。
背景・文字・強調の役割を決めると、色の使い分けに理由が生まれます。状態の違いは、色に加えて文字や形でも伝えます。
具体例とチェックポイント
たとえば
エラーを赤くするだけでなく、「メールアドレスを確認してください」と修正内容を添える。
確かめること
色を見分けにくい状況でも意味が伝わるか。強調色が、本当に注目してほしい場所に使われているか。
揃えるのは、サイズだけではない。
線の太さ、角の丸み、見た目の大きさを揃えると、画面に統一感が出ます。意味が曖昧なアイコンには、言葉を添えます。
具体例とチェックポイント
たとえば
同じ24pxでも、塗りつぶしと細い線では強さが違う。同じ系統のアイコンで揃え、必要なら視覚的な大きさを調整する。
確かめること
初めて見る人にも用途がわかるか。装飾と、押せる操作を区別できるか。
ルールは揃え、レイアウトは使い分ける。
一枚ずつ綺麗でも、資料全体が揃うとは限りません。書体・色・余白のルールを共通にし、表紙・比較・図表などの役割に合う配置を選びます。
具体例とチェックポイント
たとえば
表紙と本文を同じ構図に無理に合わせず、見出しの扱いや色のルールを共通にする。
確かめること
複数ページを並べたとき、同じ資料に見えるか。情報量に合わない型へ詰め込んでいないか。
リンク先の記事には、有料・メンバーシップ限定の内容が含まれる場合があります。
制作物で、確かめる。
図解、Web、UIなどの制作例をご覧いただけます。
ほかの解説も、KAWAI BOOKSで。
記事一覧を見る（新しいタブ）