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

  1. TOP
  2. Jimdoで魅せる日本語Webデザイン : 第7回 文章を読みやすく掲載しよう

エキスパートコラム

Jimdoで魅せる日本語Webデザイン(全12回)

第7回:文章を読みやすく掲載しよう

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

2016年10月3日更新

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

閲覧数785views

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

JimdoExpertとしてこれまで100件以上のJimdoサイトに携わってきた筆者が、Jimdoを使用して日本語のWebサイトをデザインするポイントについて解説する本コラム。

前回のコラムではJimdoに新しく追加されたフォトエディターについて解説しました。第7回目となる今回は、読みやすい文章の掲載方法について解説します。

Webサイトのメインコンテンツは「文章」である

皆さまはWebサイトの「コンテンツ」と聞いて何を連想するでしょうか?

Webサイト上には画像や商品、問い合わせフォームやスライドショーなど、様々なコンテンツが掲載されています。ではその中でもっとも重要なコンテンツは何か?と問われれば、それは間違いなく「文章」です。商品について解説をするのも、会社の理念について説明をするのも、すべて言葉、つまり文章だからです。

しかしJimdoで作成されたWebサイトの中には、写真やレイアウト、カラーリングなどは非常にこだわっていても、文章の掲載方法についてはあまり重視されていないサイトが多く見られます。

そこで今回のコラムでは文章をテーマに、と言っても「上手な文章の書き方」などのライティングのお話ではなく、文章の「掲載方法」に焦点を絞って解説をします。どれだけ素敵な文章でも、読みやすく配置されていなければ、読んでさえもらえないことも多いのです。

なぜ読みにくいかを知れば改善点が見える

読みやすい文章について考えるには、読みにくい文章を知るほうが近道です。読みにくさの原因が分かれば、改善点が見えてきます。ここでは4つの代表例を見ながら、それぞれの問題点と解決策について解説していきます。

1. 1行の文字数が多い

これが最も多いケースです。最近のWebサイトの傾向としてサイドバーのないレイアウトが多く、Jimdoでもこういった「シングルカラム」と呼ばれるレイアウトが多く採用されています。これまで主流であったサイドバーのあるレイアウトに比べて横幅が広くなるため、1行の文字数が多くなってしまうのです。

一見問題ないように見えますが、読みやすい1行の文字数は25~35文字程度のため、40文字以上になると視線の移動距離が長く読みにくさを感じます。これを改善するには、文字サイズを大きくする、画像付き文章にするなどいくつかの方法がありますが、例えば下の図のようにカラムを利用して文章を分割する方法もオススメです。

テキストを分割することで、無理なく読めるようになる

2. 行間隔が狭い

行間隔はとても重要です。行間隔が詰まっていると、同じ行を何度も読んでしまう間違いが発生したり、窮屈さを感じさせ、読みたいという気持ちを阻害してしまうことがあります。

Jimdoではこの行間隔をスタイルメニューから変更できます。オススメの設定は「1.5 or 1.75」です。日本語の文章の場合、このいずれかの設定であればどんなテキストでも見やすく表示することができます。

行間隔を広くとることで読みやすくなる ※上図は行間隔「1.5」に設定

3. 改行されていない/改行しすぎ

改行の頻度やバランスについては好みもありますが、全く改行されていない文章や改行の多すぎる文章はやはり読みにくいものです。(詩や歌詞など特別な意図がある場合を除く)

適切な改行のコツは文章を音読することです。声に出して読むと、どこに「間」を入れると聞きやすいかが分かります。そこに改行を入れましょう。

適度に改行された文章は読みやすい

4. 文字のスタイルを多用している

強調したい箇所に文字の装飾をするのは効果的な手法ですが、やりすぎはいけません。多様なスタイルが混在していると、結局どこを強調したいのかが分からなくなります。文字のスタイル変更は、最も強調したい部分だけに留めたほうが効果的です。

文字の装飾は特に強調したい箇所だけに留めたほうが効果的

会話するときのことをイメージすると簡単

文章の掲載方法は、人に何かを話すときのことをイメージするとうまくいきます。例えば文字数については、長々と話す人の話が分かりにくいのに似ていますし、改行は息継ぎ、文字のスタイルは声色などに例えられるでしょうか。どちらも適度な方が聞き取りやすいことが分かります。

デザインはコミュニケーションの手段です。コミュニケーションにおいてもっとも重要な「言葉」をデザインすることは、適切なコミュニケーションには欠かせません。ぜひ、読み手の気持ちになって掲載方法を工夫してみてください。

次回は、デザインの原則を応用したテクニックについて解説します。

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

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

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

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

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

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

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

  • 1年間無料

    「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを今なら45,000円(税抜)でリニューアル!

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

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

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

    飲食・小売・サービス業での開業スケジュールから融資申込に必要な書類が作成できるサービスです

  • 経理通信

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