スマートフォンサイトを表示する

  1. TOP
  2. あなたのホームページを「読んで」もらおう! : 第5回 色や余白を使って「グループ化」してみよう

エキスパートコラム

あなたのホームページを「読んで」もらおう!(全6回)

第5回:色や余白を使って「グループ化」してみよう

執筆:蝦名 晶子(ディーシーティーデザイン)

2014年8月4日更新

  • このエントリーをはてなブックマークに追加

閲覧数8,212views

このコラムをPDF形式でダウンロードする

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

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

【目的】

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

【ターゲット】

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

【紹介する商品】

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

【用意するもの】

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

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

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

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

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

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

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

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

ですね。

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

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

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

そして、
※「第3回:文字もレイアウトしよう!
※「第4回:文字もレイアウトしよう!(2)
も意識しながら、レイアウトします。

すると、こうなります。

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

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

まとめ

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

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

【参考】

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

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

蝦名 晶子(えびな・あきこ)

蝦名 晶子(えびな・あきこ)

ディーシーティーデザイン 代表
NPO法人あおもりIT活用サポートセンター 副理事長
http://dct-design.net/
http://aoit.jp/

生まれも育ちも、現在の活動拠点も青森県青森市。
地元青森のショッピングセンターの販売促進課でマーケティング・共同販促・広告・イベント企画・ディスプレイ等に携わる。「何かをつくりあげる」ことに魅力を感じ、「デザインを発注する側」から「デザインする側」へ転身。
2004年に「ディーシーティーデザイン」を設立、Webサイトや紙媒体の企画から制作、活用提案、さらに継続的な運用支援を行っている。クリエイター向けのセミナー講師のほか、経営者向けの講演なども行う。2012年、青森県内の仲間とNPO法人あおもりIT活用サポートセンターを設立。IT教育部会を担当し、ITに関わる人材育成に力を注いでいる。
何事も「つなげる」ことが好き。人と人、モノやコトはひとり(ひとつ)よりもつながることでより良いものになると信じている。自他共に認める「愛犬家」で、縁あって里親になったフレンチ・ブルドッグの「タロウ」を溺愛中。

  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス
  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2019/4/14~2019/4/20]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ