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

  1. TOP
  2. あなたのホームページを「読んで」もらおう! : 第3回 文字もレイアウトしよう!

エキスパートコラム

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

第3回:文字もレイアウトしよう!

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

2014年6月9日更新

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

閲覧数4,487views

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

タイトルを見て「文字もレイアウト?」と思った方が多いかもしれません。
日本では、漢字、ひらがな、カタカナ、ローマ字など、使える文字の種類が多いため読みやすさを追求するとキリがないのが正直なところです。
そこで今回は、「文字」をレイアウトするためのコツについてお伝えします。

文章のまとまりを整理しよう

下の画像は、よくある商品紹介のページ例です。
内容が伝わらないでもないのですが、直した方が、よりわかりやすくなる!という箇所が「6つ」あります。ぜひ、見つけてみてください。

さて、どこでしょうか?

回答例

  1. 見出しに色をつけるなどし、コントラストをつける
  2. キャッチコピーにインデントは不要
  3. 注釈にあたる部分は、まとまり感を出す・文字を小さくするなど工夫を
  4. 左右や上下、文字の始まりの箇所などを「そろえる」ようにする
  5. 「円」を小さく
  6. 余白をうまく使う

これら全てを修正したものが下の画像です。

どうでしょう?
読みやすさがアップしていると思いませんか?
左右に並べてみるとよくわかると思います。

インデント(行頭一文字下げ)は、長い文章の時は読みやすくなるかもしれませんが、1行や2行のキャッチコピーには向きません。

また、人の目の動き、は雑誌や新聞・ホームページを見る際に、無意識のうちに左上から右上への水平に移動し、全体を見ながら徐々に左下へ移動すると言われています。
これを「Zの法則」と言います。

これに加え、ホームページを見る際の目の動きでは、左上から右上へと水平に移動し、開始した位置から少し下を始点に水平に右へ動かすとも言われています。
これは「Fの法則」と言われています。

主に、「Zの法則」で全体を把握し、「Fの法則」で内容を理解する、と考えられています。

Zの法則

<Zの法則>

Zの法則

<Fの法則>

この法則を意識しながら、読んでもらえるレイアウトを心がけてみましょう。

※こちらも参考になります!
みんビズ制作講座:デザインカスタマイズ 第5回:余白と水平線

カラムを活用しよう

「カラム」とは、「縦の列」という意味です。

  • 写真
  • 商品名
  • 商品キャッチコピー
  • 商品説明文と補足
  • 価格

などの、同じ要素を羅列する際に、見やすくレイアウトすることができます。

商品名から価格まで、すんなり読むことができると思います。

※こちらも参考になります!
みんビズ制作講座:デザインカスタマイズ 第6回:カラム機能を活用してみよう

まとめ

文字や写真を単に配置するのではなく、ホームページで欲しい情報がある人たちが少しでも読みやすいよう、「コントラストを考える」「揃える」「余白を使う」「関連する情報をまとめる」ことを意識して、レイアウトしてみましょう。

次回も、文字や余白についてお伝えします。

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

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

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

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

生まれも育ちも青森県青森市。
ショッピングセンターでマーケティング・共同販促・広告・イベント企画・ディスプレイ等の販売促進に携わる。当時おつきあいのあったデザイナーやクリエイターに影響をうけ「何かをつくりあげる」ことに魅力を感じるようになり、2000年、「デザインを発注する側」から「デザインする側」へ転職。2004年に起業し、現在は『ユーザー目線での制作』『スピーディーに良いモノを』をモットーとし、Webサイトや紙媒体の企画から制作・活用提案など、運用全般を手がけている。2012年、青森県内の有志一同とNPO法人あおもりIT活用サポートセンターを設立。IT教育部会を担当し、ITに関わる人材育成に力を注いでいる。
何事も「つなげる」ことが好き。人と人、モノやコトはひとり(ひとつ)よりもつながることでより良いものになると信じている。何事も「プロセス」にこだわり、常にいろいろなゴールを目指し模索している。自他共に認める「愛犬家」で、縁あって里親になったフレンチ・ブルドッグの「タロウ」を溺愛中。

  • はじめてWEB 大感謝祭!~新規加入または2年目更新をし、アンケートに答えてギフト券をもらおう!~
  • Jimdoリメイク | プロがあなたのホームページを今なら45,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

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

コラム週間アクセスランキング[期間:2017/3/12~2017/3/18]

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ
    今ならキャンペーン実施中!