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

  1. TOP
  2. 自分でできる!セルフJimdoリメイク塾 : 第7回 Webサイトは文章が命。読みやすい文章のレイアウト手法

エキスパートコラム

自分でできる!セルフJimdoリメイク塾(全12回)

第7回:Webサイトは文章が命。読みやすい文章のレイアウト手法

執筆:服部 雄樹(服部制作室)

2017年10月16日更新

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

閲覧数1,093views

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

Jimdoで作られたWebサイトのリメイクを累計100件以上担当した筆者が、リメイクをする際にどこを見ているのか、どう手直しすれば見やすいWebサイトになるのか、具体的な事例とテクニックを交えながら紹介する本コラム。

第7回目となる今回は、Webサイトの命とも言える、文章を読みやすく配置するポイントについて解説します。

文章は内容だけでなく「見せ方」も大切

Webサイトでもっとも重要なコンテンツは「文章」です。アーティストや写真家など特別なケースを除けば、文章なくしてWebサイトは成り立ちません。文章の内容が大切なのは言うまでもありませんが、それと同じくらい「どのように見せるか」も大切です。せっかくいい文章を書いても、読みにくく配置されているとユーザーは途中で読むのをやめてしまうかもしれません。そこで今回は具体的な事例を紹介しながら、文章を配置する際のポイントや注意点などを解説していきます。

なお、「どんな文章を書けばいいか分からない…」という方は、以下のエキスパートコラムが大変参考になりますので、ぜひご一読ください。

それでは、読みづらい文章の例を具体的に見ていきましょう。少し大げさに感じられるかもしれませんが、全て実際にリメイクを申し込まれたサイトで見られたケースです。

Case1. 改行が適切でない

最も多いのは、改行が適切でないケースです。長文にも関わらず全く改行がされていないパターンや、反対に不要な改行が多く隙間だらけになっているパターンもよく見られます。

改行がされていないと文章が一つの塊に見えてしまうため、自分が今どこを読んでいるのか見失いやすくなります。そのため、長い文章であればあるほど読み進めるのに神経を使い、途中で読むのをやめてしまう可能性が高くなります。

改行されていない文章は一つの塊に見えてしまう

反対に、改行が多すぎるのも良くありません。文章の途中、例えば読点(、)のたびに改行しているケースがありますが、Webサイトではブラウザや端末によって表示が異なるため、見る人の環境によっては意図しない場所で改行されてしまうことがあります。PCではバランスがいいのにスマホでみると改行がおかしい、というケースはよくあります。

PC版とスマホ版で改行の位置がズレる

また、詩のような文章を除き、ほとんどのケースでは3行以上の連続改行は読みにくくなるだけなので、多用しないほうが良いでしょう。

改行を連続して空白を作るのは多用すると読みにくい

このように、改行を適切に行うことは読みやすい文章の第一歩といえます。あまり複雑に考えずに、文章の切れ目や段落ごとに改行を入れることを意識するだけで十分読みやすい文章になります。

適切に改行を入れることで読みやすくなる

Case2. 文字揃えがバラバラ

次に多いのが文字揃えがバラバラのケースです。本コラムの第1回目でも少し触れましたが、左揃えの文章の中に唐突に中央揃えの行があったり、同じページの中で異なった文字揃えが混在しているのは、視線の動きが一定でないため読む側はストレスを感じます。基本的には文章は左揃えにして掲載するのが良いでしょう。

左揃え、中央揃え、右揃えが混在した文章は読みづらい

Case3. 1行の文字数が多い

続いて、1行あたりの文字数が多いケースです。これは「シングルカラム」と呼ばれるサイドバーのないレイアウトが主流となったことによって増えてきました。

一見すると問題ないように見えるのですが、人の目が読みやすい文字数は1行あたり30~35文字程度とされています。下のケースでは1行あたり約70文字もあるため、行末から行頭への視線の移動距離が長くなり、次の行を捉えにくく読みづらさを感じます。

1行あたりの文字量が約70文字のケース

こういったケースではJimdoの「カラム」機能が役立ちます。カラムを使用してコンテンツエリアを左右に分割することで長文でも読みやすくレイアウトすることができます。これは雑誌や海外のWebサイトでよく見られる手法です。

カラム機能でコンテンツエリアを分割

文章を2つに分けて掲載する

1行の文字数が約35文字になり読みやすくなった

頑張って書いた文章も読んでもらえなければ意味がない

このように、同じ文章でも見せ方によって読む側の印象は大きく変わります。せっかく思いを込めた文章も、読んでもらえなければ意味がありません。また文章を読みやすく配置することは、Webサイトを訪れてくれた人に対する最低限のマナーでもあります。今回紹介した手法を使い、皆さまのサイトでも読みやすい文章の配置を検討してみてください。きっと文章に込めた思いがより伝わりやすくなるはずです。

次回は、Webサイトに掲載する写真の縦横比やサイズの調整方法について解説します。お楽しみに!

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

服部 雄樹(はっとり・ゆうき)

服部 雄樹(はっとり・ゆうき)

服部制作室 代表/JimdoExpert
http://www.hattori-studio.jp/
http://www.template-labo.com/

愛知県名古屋市出身。2014年までインドネシア・バリ島で活動し、世界各国のクリエイターと交流。多くの海外案件に携わる。帰国後、服部制作室を設立。Webサイトの制作だけでなく、各種WebサービスのテンプレートデザインやUI設計、セミナー登壇、コラムへの寄稿など精力的に活動中。"かっこいいを簡単に"をモットーに、海外のWebデザインを日本向けにローカライズした新しいデザインを提案している。

著書に『いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方』など。

HTML&CSSとWebデザインが 1冊できちんと身につく本

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

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

コラム週間アクセスランキング[期間:2018/2/11~2018/2/17]

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

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