はじめてWEBエキスパート(専門家)コラム あなたのホームページを「読んで」もらおう!(全6回)

Webの情報を「いかに読みやすくするか」上級編は、色や余白を使った「グループ化」

整理した情報を「いかに読みやすくできるか」を考えてみたいと思います
※「はじめてWEB」は2020年10月13日をもってサービスを終了しました。

今回は、「第2回:情報もレイアウトしよう※「はじめてWEB」は
サービスを終了しました
」を、目に見えた形で表現する場合のヒントについてお伝えします。整理した情報を「いかに読みやすくできるか」を考えてみたいと思います。

青森県産品を取り扱っているお店を例にしてみます。

【目的】

自店商品の周知を図る(購買につなげたい)

【ターゲット】

お料理をする人、りんごが好きな人etc…

【紹介する商品】

  • (1) ジュース
  • (2) アイスクリーム
  • (3) スパークリングジュース
  • (4) りんご
  • (5) 「しじみ貝」も扱っている

【用意するもの】

  • 商品説明文
  • 商品イメージ写真

【伝えたいことを箇条書きにしてみます】

  • 素材として使われているりんごの素晴らしさ
  • りんごを育てている環境の素晴らしさ
  • りんごの保存方法
  • スパークリングは長年の研究が実った自信作
  • アイスクリームは地元でも人気
  • ジュースは無添加
  • 小さなお子さまも安心して摂取できる
  • しじみ貝の身は大きく旨みも最高
  • 新鮮なものをお届けしたい
  • お問い合わせはお電話で

さっそくページに入れ込みしてみましょう。

このままでもそんなにおかしくはないですが、箇条書きにした順番でそのまま掲載してしまったため、商品に統一感がなかったり文章だらけに感じます。また、パッと見たとき、りんごジュースとしじみ貝の写真が一緒に飛び込んでくるため、違和感を感じた方もいるかもしれません。

ここで重要なのが「グルーピング」です。

今回の商品内訳から分けられるのは

  • (1) りんご
  • (2) ジュース
  • (3) アイスクリーム
  • (4) しじみ貝

ですね。

さらに、(2) ジュースと (3) アイスクリームは、(1) りんご の中にも含まれます。
なので、

  • (1) りんご
  • ジュース
  • アイスクリーム
  • (2) しじみ貝

と、グルーピングをします。

そして、
※「第3回:文字もレイアウトしよう!※「はじめてWEB」は
サービスを終了しました

※「第4回:文字もレイアウトしよう!(2)※「はじめてWEB」は
サービスを終了しました

も意識しながら、レイアウトします。

すると、こうなります。

どうでしょう?
訴えたいことをどんどん書き連ねるのではなく、関連性の高いものをグルーピングし、まとめることで可読性が高くなります。

また、グループが変わるときは、スペースを若干多めに空けるとより伝わりやすくなります。
(上記の場合は「りんご」と「しじみ」の間)

まとめ

店頭ではお客さまに、商品の特徴などを直接説明することができますが、ホームページ上では会話ができません。商品を買ってもらうためには、「ページの中でいかに接客するか」が重要なポイントになってきます。そのためにも、なるべく多くのテキストを読んでもらったり写真を見てもらったりするための、情報整理(グルーピング)をおすすめします。

次回も、レイアウトの工夫について、お伝えします。

【参考】

写真に文字をのせたりする工夫も、ぜひやってみてください。

このコーナーのコンテンツは、KDDI提供の情報サイト「はじめてWEB」掲載の「エキスパート(専門家)コラム」の情報を、許諾を得てWeb担の読者向けにお届けしているものです。

※「はじめてWEB」のオリジナル版は掲載を終了しました

この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

Python
「Python」(パイソン)は、プログラミング言語の1つ。プログラマのグイド・ヴ ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]