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

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

エキスパートコラム

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

第4回:文字もレイアウトしよう!(2)

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

2014年7月7日更新

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

閲覧数4,479views

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

前回「第3回:文字もレイアウトしよう!」は、文章のまとまりをどう整理したら良いか、カラムの活用等についてお伝えしました。
今回も、文字を読んでもらいやすくするポイントについてお伝えします。

リストを活用しましょう

伝えたいことがたくさんある時、長い文章にするよりも箇条書きにした方が伝わりやすいことがあります。例として食品などの注意書きが挙げられます。

例)

独自の手法で焼き上げた青森県産りんごと、とびきり美味しいカスタードクリームをパイで焼き上げました。
パイは直径15センチの丸型で4個入り。賞味期限は製造年月日から30日となっております。
ラッピングやのしをつけてお届けすることも可能です。
保存の際は10℃以下で保存してください。クール便でのお届けとなります。なるべく早めにお召し上がりください。
尚、配達日の指定はできませんので、予めご了承ください。
手提げ袋が必要な方は、お申込みの際にご指定ください。

これを箇条書きにすると・・・↓

独自の手法で焼き上げた青森県産りんごと、とびきり美味しいカスタードクリームをパイで焼き上げました。

  • 直径15センチの丸型
  • 4個入り
  • 賞味期限・・・製造年月日から30日
  • ラッピング・のし対応可能
  • 保存方法・・・10℃以下で保存
  • クール便でのお届けとなります
  • なるべく早めにお召し上がりください。
  • 配達日の指定はできませんので、予めご了承ください。
  • 手提げ袋が必要な方は、お申込みの際にご指定ください。

読みやすくなりましたね!
ここでもうひと工夫!
「リスト」の活用です。

みんビズやJimdoでの例

テキストエディタのメニューの中に、箇条書きを表すアイコンがあります。

リストにしたい文章を選択し、このアイコンをクリックするだけで、リスト化できます。

行が増えても、リストアイコンの後ろで改行してくれるので、読みやすくなります。

表現は統一しましょう

パソコンを使っていると、文字入力の際にいともたやすく漢字に変換してくれます。
とても便利な機能ですよね。
でもそれに甘えてしまい、同じものの表現を混在させてしまうことがあります。

例)

青森県産林檎をふんだんに使ったアイスクリーム。
りんごのうまみをぎゅっと詰め込みました。
青森リンゴの中でも酸味が強い品種をつかっているので、ほどよい酸味がくせになります。

同じ「りんご」なのですが、3種類に見えませんか?
また、文中の「使った」も2種類あるため、違和感を感じた方もいるのではないでしょうか?
表現を統一してみました。

違和感がなくなり、スラスラ読むことができます。
ここでもうひと工夫!
このアイスクリームの売りは青森県産りんご。
ここを強調してみましょう。

「 」(かぎ括弧)をつけるだけでも、訴求力が上がります。

そして、「第1回:すぐに活用できる2つのポイント」でお伝えした、「優しいイメージ」を意識するとこうなります。

カタカナの方が伝わりやすい言葉もたくさんあります。

漢字とひらがなの使い分け方については下記をぜひ参考にしてみてください。
Web文章入門(全6回)特別編:漢字とひらがなの使い分け方

背景色や線の色にも気をつけましょう

強調したい文章の背景に色をつけたり、線で囲んだりすることがあると思います。
このときも読みやすさに配慮が必要です。

例えば、
特価=赤
目立たせたい=赤
りんご=赤
ということで、背景を赤にするとこうなります。

文字を読んでいるうちに目がチカチカしてきますよね。
これは、赤を使いすぎているためです。
モノクロにしてみると可読性の確認がしやすいので、見てみましょう。

濃い色に白文字は、長い文章には向きません。
目立たせたいところは赤地でも良いですが、面積は少なめの方が逆に目立つことがわかると思います。

こちらもぜひ参考にしてください。
0からスタート ホームページ配色入門(全6回)第2回:色を詳しく説明できるようになろう

文字を羅列するのではなく、ホームページで欲しい情報がある人たちが少しでも読みやすいよう、「コントラストを考える」「揃える」「リストを使う」「色の濃淡を意識する」ことを意識して、レイアウトしてみましょう。

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

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

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

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

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

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

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

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

コラム週間アクセスランキング[期間:2017/4/16~2017/4/22]

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

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