Webサイトやランディングページ、チラシのデザインは、作り始める前の「情報の整理」で仕上がりが大きく変わります。何を、だれに、どの順番で伝えるのかが決まっていないと、どれだけ見た目を整えても伝わるデザインにはなりません。
この記事では、デザイン制作をしている株式会社Ryuki Designの編集部が、情報を整理する理由、整理が進まないときの対処、情報が多いとき・少ないときの整理のしかた、読みやすくする文字の整え方を紹介します。
目次
デザインの前に情報を整理する理由
デザインは、伝えたいことを、伝えたい人に分かりやすく届けるためのものです。何を伝えるのかが整理されていないまま作り始めると、情報が足りなかったり、まとまりのないページになったりします。
デザインに取りかかる前に、次の4つをはっきりさせておきましょう。
何のために作るのか
来店してほしい、問い合わせを増やしたい、商品を買ってほしいなど、そのページやチラシで実現したいことです。目的が決まると、いちばん目立たせる情報が決まります。
だれに伝えるのか
年代や性別、どんな悩みや関心を持っている人かを考えます。伝える相手によって、言葉の選び方や、のせる情報の順番が変わります。
何を伝えるのか、その優先順位
伝えたい情報を書き出し、どれがいちばん大事か順番をつけます。たとえばカフェのWebサイトなら、「おすすめの商品」「営業時間」「場所」「お得な情報」などを並べて、何を最初に見せるかを決めます。
いつ、どこで見られるのか
スマホで移動中に見るのか、パソコンでじっくり読むのか、店頭で一瞬目に入るだけなのかによって、のせられる情報の量や文字の大きさが変わります。
情報の整理が進まないときの原因と対処
情報の整理が苦手だと感じるときは、次のどれかに当てはまっていることが多いです。
頭の中だけで考えている
頭の中だけで整理しようとすると、何について考えているのか分からなくなりがちです。まずは思いつくことを紙やメモに全部書き出しましょう。書き出すと全体を見わたせるので、整理に集中できます。
分類できていない
書き出した情報の中から、似ているものどうしをまとめ（グルーピング）、それぞれに「料金」「特長」「使い方」のような名前をつけます。ばらばらに見えていた情報のつながりが見えてきます。
ゴールが決まっていない
最終的に何を伝えたいのかが決まっていないと、書き出した情報はただの文字の羅列になってしまいます。先にゴール（目的）を決めると、必要な情報と、なくてもよい情報を見分けられます。
情報を集めすぎている
情報を集めすぎると、どれも大事に見えて決められなくなります。ある程度集めたら、そこで止めて優先順位をつけましょう。全部をのせる必要はありません。
情報が多いときの整理のしかた
のせたい情報が多すぎるときは、次の3つの方法で整理します。
グルーピングする
似た情報をまとめると、読む人が理解しやすくなります。たとえば、あるアプリの強みとして「スマホで使える」「初期費用無料」「実績が豊富」「1か月無料」「データ分析ができる」「セキュリティが安全」が並んでいたら、次のように分けられます。
・会社や製品の信頼：実績が豊富、セキュリティが安全
・できること：スマホで使える、データ分析ができる
・料金：初期費用無料、1か月無料
優先順位で強弱をつける
情報が同じ大きさで並んでいると、どこを見ればいいのか分かりません。いちばん伝えたい情報は大きく・太く、補足は小さくするなど、強弱をつけて目に入る順番をつくりましょう。
見出しと段落で区切る
長い文章は、内容のまとまりごとに見出しをつけ、段落を分けます。見出しを読むだけで内容が分かるようにしておくと、読む人が必要なところをすぐに見つけられます。
情報が少ないときの整理のしかた
反対に、わずかな文章だけを渡されて「これでページを作ってほしい」と頼まれることもあります。そんなときは、次の方法で対処します。
文章を分けて、組み直す
短い文章でも、中に入っている情報は意外と多いものです。まずは文章を箇条書きに分け、グルーピングして、グループの名前を見出しにします。
たとえば「駅から歩いて3分。おすすめはブレンドコーヒーで1杯300円。豆にこだわっている。営業は6時から18時。500円のモーニングもある」という文章なら、「お店の場所」「おすすめの商品」「営業時間」「モーニング」に分けて、それぞれを見出しと説明文にできます。
写真や図、アイコンで補う
それでも情報が足りないときは、写真や図、アイコンで内容を補ったり、強弱をつけて見せ方を工夫したりします。ただし見た目でごまかすのには限界があるので、できるだけ情報そのものを増やすことが大切です。
最初の聞き取りで情報を引き出す
情報が少ないと、ほかの会社のページと比べたときに伝わる内容で負けてしまいます。依頼を受けるときや打ち合わせのときに、目的・ターゲット・強み・よくある質問などを聞いて、できるだけ多くの材料を集めておきましょう。
読みやすくするための文字の整え方
整理した情報を読みやすく見せるには、文字の組み方も大切です。Webページの本文の目安を紹介します。
1行の文字数
1行が長すぎると視線の移動が大きくなって疲れ、短すぎると行が増えて読みにくくなります。パソコンで見る本文は、1行30〜50文字くらいが目安です。
文字の大きさ
多くのブラウザでは、標準の文字の大きさが16pxに設定されています。本文は見慣れたこの大きさを基準にし、スマホでも小さくしすぎないようにしましょう。
文字の間隔
本文の文字の間隔は、文字の大きさの5〜10％くらい空けると読みやすくなります。広めにするとゆったりとした高級感が、狭めにすると引きしまった印象が出るので、見出しなどでは目的に合わせて調整しましょう。
行間
日本語の本文の行間は、文字の大きさの1.5〜2倍くらいが目安です。広すぎると間のびし、狭すぎると窮屈で次の行を見失いやすくなります。
チームで情報を共有するときは
整理した情報は、デザイナーや社内の関係者と共有して初めて役に立ちます。
情報をまとめる場所をひとつに決める
メールやチャット、紙のメモなどに情報が散らばっていると、最新の内容がどれか分からなくなります。共有のドキュメントやフォルダなど、まとめる場所をひとつに決めておきましょう。依頼の内容をまとめるときは「デザイン指示書の書き方」も参考になります。
デザインの確認と修正はデザインの上で
デザインができあがったあとの確認や修正の指示は、文章だけで伝えるより、デザインの上に直接書きこむほうが確実です。デザインに直接書きこめる無料のツール「mitekaku」なら、修正指示をURLで共有できます。
まとめ
デザインの情報整理は、目的・相手・伝えたいこと・見られる場面をはっきりさせ、書き出して、まとめて、順番をつけることが基本です。情報が多いときはグルーピングと強弱で、少ないときは文章を分けて組み直すことで、伝わるページに近づけられます。
デザインのイメージの伝え方は「デザインイメージの伝え方」で紹介しています。
ポイント
■最初にはっきりさせること
・何のために作るのか
・だれに伝えるのか
・何を伝えるのか、その優先順位
・いつ、どこで見られるのか
■情報が多いとき
・グルーピングする
・優先順位で強弱をつける
・見出しと段落で区切る
■情報が少ないとき
・文章を分けて、組み直す
・写真や図、アイコンで補う
・最初の聞き取りで情報を引き出す
■本文の文字の目安
・1行30〜50文字
・文字の大きさ16px
・文字の間隔は文字の大きさの5〜10％
・行間は文字の大きさの1.5〜2倍
