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

  1. TOP
  2. みんビズ制作講座 デザインカスタマイズ : 第9回 見やすい・読みやすいブログを書くコツ

エキスパートコラム

みんビズ制作講座:デザインカスタマイズ(全10回)

第9回:見やすい・読みやすいブログを書くコツ

執筆:赤間 公太郎(株式会社マジカルリミックス)

2013年3月13日更新

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

閲覧数5,532views

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

みんビズでは、ブログ機能を使用することができます。しかし、初めてブログを書く場合や、文章を書くことに慣れていない場合、どんな記事を書けばいいのか、どんな形式で書けばいいのかわからないものです。
「見やすい・読みやすいブログを書くコツ」では、見やすく読みやすいブログ記事の書き方と、余白の使い方について説明します。

ブログの設定や記事の投稿方法について

みんビズでブログを使用するには、ブログの設定をする必要があります。詳しい設定方法については、原さんのエキスパートコラム「みんビズ制作講座:ショップに便利な機能紹介(全4回)の第1回:ブログの活用」を参考にしてください。

見やすい・読みやすいブログの記事とは

みんビズのブログでは、一般的なブログと同じように、見出しや文章以外にも写真や動画などを掲載することができます。適切な分量の写真や動画などを掲載することで、より見やすく読みやすい記事になります。

しかし、ただやみくもに文章や写真を掲載していっても、乱雑な印象を与えてしまうだけです。訪問者が読みやすいブログの記事には、「読みやすい流れ」が必要です。必ずしもこれが正解、というものはありませんが、一例として、読みやすい流れを意識した文章の流れを解説します。

読みやすい流れで作成したブログの記事

写真と本文の並びについて

本文の次にリストや図表、写真を掲載するのが見やすいと説明しました。これは、写真を補足情報として扱う場合に、特に見やすくなります。
写真→本文の流れにしたものと、本文→写真の流れにしたものを見比べてみましょう。

写真を先に出して、本文を後に出す

写真を先に出してから文章を出すと、文章を読んだ後にもう一度写真を見て、内容を理解する必要があります。

写真を出してから本文を表示した例

本文を先に出して、写真を後に出す

文章を先に出してから写真を出すと、内容を理解した上で写真を見ることができるため、わかりやすくなります。

本文を出してから写真を表示した例

通常、ホームページやブログの記事は、ページ内をスクロールして閲覧します。写真を補足情報として扱う場合(文章内に写真を説明する単語が入っている場合など)、文章を出してから写真を出すと、自然な流れで理解することができます。

しかし、写真を先に出し、後から文章を出すと、写真の大きさ(特に縦長の写真)やスクロールしてきた位置によっては戻って写真を見直す必要が出てくる場合があります。その都度スクロールして戻ることを繰り返すのでは、ブログ記事を読むのにストレスを感じる場合があります。

読みやすい流れを作成するには、文章・写真の並びが重要になってきます。

しかし、必ずしも「リード文+見出し+本文+リスト・図表・写真」の流れが正しいというわけではありません。写真をメインとするホームページであれば、写真のあとに文章を配置して、文章をキャプションとして扱うなど、「自分なりのフォーマット」を確立していくとよいでしょう。

余白を活用して読みやすくしよう

みんビズのブログでは、文章や写真の上下に「余白」を挿入することができます。
この余白は、とても重要なものです。

余白のある記事

余白のある記事は、どこからどこまでがひとかたまりの情報なのかがひとめでわかります。記事内の情報の区切りが明確になっています。

デザインにおいて、この余白は「ホワイトスペース」と呼びます。ホワイトスペースとは、文字や画像など、何も表示されていない余白部分のことです。ホワイトという名前=白い余白、ということではなく、その空間に空きを持たせる、ということです。

このホワイトスペースをうまく活用することによって、記事にメリハリを持たせたり、特定の役割として視覚的に区切ることができます。ホワイトスペースは、デザインにおいてとても重要な役割を果たすのです。

リード文と写真の下に余白を作成した例

余白のない記事

余白のない記事は、すべてがひとつづきとなっているため、どこからどこまでがひとかたまりの情報なのかわかりません。記事内の情報の区切りが不明瞭です。

余白なしで記事を作成した例

このように、余白は視覚的な心地よさのほか、情報の区切りとして適切に付与することで、見やすいブログ記事を作成することができます。

また、みんビズではありませんが、筆者のブログ「kotalog」でも、文章や写真の並びを工夫したり、余白を活用することで記事が見やすく・読みやすくなる工夫をしています。

ブログの記事を読みやすくする方法には、さまざまなものがあります。ほかのブログを見る際に、見やすい・読みやすいと感じたら、なぜそう感じたのかを考えてみましょう。

まとめ

  • ブログは見出しや本文以外にも記事に表示させて、読みやすく
  • ブログは、リード文→見出し→本文→リスト・図表・写真の流れにすると見やすい
  • ホームページの傾向に合わせて、自分なりのフォーマットを確立することで見やすく
  • 余白をうまく使うことで、ブログを見やすく
  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

赤間 公太郎(あかま・こうたろう)

赤間 公太郎(あかま・こうたろう)

株式会社マジカルリミックス 代表取締役CEO/JimdoExpert
http://www.magical-remix.co.jp/
http://www.kotalog.net/

宮城県出身。IT関連の専門学校を卒業後、仙台のデザイン会社に入社。Webサイトのデザイン・コーディングを中心に従事。2002年退職後すぐに個人事業としてマジカルリミックスを創業。2007年に法人化し株式会社マジカルリミックスを設立。規模を問わずお客様のニーズにあわせたwebサイトの企画立案、制作、アクセスと売上アップをめざした更新サポートまで一貫して手がけている。
また、Web制作だけにとどまらず、社内向けのセキュリティ・IT活用のプライベートトレーニング、セミナー出演、執筆なども意欲的に手がける。全国からの講演依頼も多数。2005年から仙台の専門学校で、非常勤講師としてWeb制作講義を担当。

主な著書に『10日でSEO&アクセスアップ Jimdoデザインブック』(エムディエヌコーポレーション)『10日で作るかっこいいホームページ Jimdoデザインブック』(同)『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』(共著、同)『基礎から覚える、深く理解できる。Webデザインの新しい教科書』(同)。

[所属]
仙台商工会議所 エキスパートバンク登録/みやぎ産業振興機構 専門家アドバイザー/みやぎ工業会正会員

10日でSEO&アクセスアップ Jimdoデザインブック

  • 1年間無料

    「はじめてWEB」でホームページをはじめよう!
  • 晴れ晴れホームページ -ホームページで失敗しないために知っておきたいコト-
  • 15分×7日間 無料でできる はじめてのホームページらくらく作成ガイド

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

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

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • SmaBI

    会社設立から契約書作成ツール、オンライン上の経営顧問まで スマートな経営をサポート

  • 経理通信

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