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

  1. TOP
  2. みんビズ運用講座 ブログをつかって情報発信 : 第3回 記事にインパクトを与えるポイントと、テキスト装飾で気をつけたい3つのこと

エキスパートコラム

みんビズ運用講座:ブログをつかって情報発信(全6回)

第3回:記事にインパクトを与えるポイントと、テキスト装飾で気をつけたい3つのこと

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

2013年8月7日更新

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

閲覧数2,930views

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

「みんビズ運用講座:ブログをつかって情報発信(全6回)」担当、マジカルリミックスの赤間です。
第2回:ブログに書く内容 テキスト編」では記事の組み立て方や、ブログを書く上で気をつけたいことなどを解説しました。ぜひ今回のコラムと併せてチェックしてみてくださいね。

さて、第3回目のテーマは「記事にインパクトを与えるポイントと、テキスト装飾で気をつけたい3つのこと」です。写真の効果的な扱い方や装飾のポイントを解説します。

ブログの本質の再確認

ブログの基本は「テキスト」です。もちろん、華やかにするためのデザインや装飾などは、閲覧者の満足度を向上させるのに必要なことです。しかしながら、よいブログというのは「文章」だけでも人気があるものです。これは見た目はさることながら、内容がしっかりしていることによるものです。

ブログのテーマにもよりますが、写真や装飾はあくまで本文を引き立たせるものです。前提には「しっかりしたテキストが必要」ということを念頭に置きましょう。

記事冒頭にアイキャッチ画像を挿入してみよう

ブログの記事を読む際に、まず目にするのは記事の上部です。見出しや本文などの明確な装飾も大事ですが、ここで「アイキャッチ画像」や「キービジュアル」と呼ばれる写真を挿入してみましょう。

アイキャッチ画像がなし・ありのものを見比べてみましょう。

アイキャッチ画像なし

テキストが主体の場合、メリハリは見出しを使って行う

アイキャッチ画像あり

関連する写真をアイキャッチとして挿入した

いかがでしょうか?アイキャッチ画像を使った場合、その記事の冒頭にインパクトが生まれます。伝えたいことを文字で書くのも大事ですが、視覚にも訴える「パッと見」も、つかみとしてとても大事なものです。

写真やイラストをチョイスするポイント

アイキャッチ画像に使用する写真やイラストは、好みのものをチョイスするというよりも、その記事に関連するようなものを選びましょう。

例えば、このbizYouエキスパートコラムでも、各エキスパートの人の記事の冒頭にアイキャッチ画像が使われています。
第1回:ブログを書く理由」では、「書く」というキーワードから万年筆の写真をチョイスしています。記事の内容的には、万年筆は直接関係ありませんが、言葉の意味や全体の雰囲気から、なんとなくイメージが合致しています。

ブログを書く、というテーマに沿って、書くための万年筆をチョイス

第1回:素材を使うその前に~仕様上の注意とルール~」では、「素材」というキーワードをもとに、もの作りや加工のための工具の写真をチョイスしています。

素材、というテーマに沿って、加工に必要な工具をチョイス

このように、キーワードから関連するような写真を差し込むだけで、目を引くようなインパクトを与えることができます。

アイキャッチ画像を使う際に注意したいこと

使用する写真は面積が大きければ、それだけインパクトも大きくなります。しかし、写真を大きく扱う際の注意として、画像が大きい分記事本文が下にずれていってしまいます。画面の大きなコンピューターにおいては特に気にならないかもしれませんが、ユーザーによっては小さめのノートパソコンだったり、タブレット端末など画面のサイズはさまざまです。

このような理由により、上記で紹介したような横長の画像がオススメです。インパクトこそ欠けますが、記事本文にたどり着きやすくなります。しかし、アフィリエイトなどの広告バナーも横長タイプが多く、広告と間違われないように注意しましょう。

また、アイキャッチのバリエーションとして、正方形の画像を利用する例もあります。

記事のタイトルを列挙するよりも、中身が連想できるアイキャッチが望ましい

写真素材の調達

使用する写真は、人物・コンピューター・CG・自然イラストなど、記事の内容に応じて適切なものを選びます。その際、無料で提供しているWebサイトを利用すると効率的です。

ただし、無料といっても使用に関するルールが設けられている場合があります。「みんビズ制作講座 上手に素材を使いこなそう : 第1回 素材を使うその前に~使用上の注意とルール~」を参考に、素材利用時の注意点などを事前に把握しておきましょう。

ひと手間かけて、インパクトを出そう!

テキストの装飾時に気をつけたいたった3つのこと

テキストを装飾する際に、特に気をつけたいことは「1.色を使いすぎない」「2.アンダーラインを多用しない」「3.リンク色との区別を意識する」の3つです。

Jimdoやみんビズをはじめ、多くのブログシステムの場合、「WYSIWYG(ウィジウィグ)」と呼ばれる、WordやExcelを操作する感覚で装飾できる入力ツールを使います。手軽がゆえに、過度な装飾を施しがちなので注意しましょう。

1.色を使いすぎない

語句を強調する場合は、太字やイタリックを使いましょう。いっけん地味ですが、ひと続きのテキストの中でも少なからず見た目が変化するので、実は効果的です。青や赤など、色数を多く使うと、まとまりのない見た目になってしまいます。もちろん、トーンを揃えるなどで見た目を良くすることもできますが、特別な理由が無い限り色数は極力抑え、あえて着色はしない、などの選択も検討しましょう。

2.アンダーラインを多用しない・リンク色との区別を意識する

HTMLでは、テキストに対してアンダーラインを引くことができます。しかし、このアンダーライン、インターネット上においては「リンク」の意味合いを強く含みます。アンダーラインの引かれた語句を見た場合、無意識にそこにリンクが張られている、と認識してしまうケースが多いのです。これはユーザーにとって好ましいことではなく、むしろわかりにくくしてしまう要因です。
明確にリンクと区別ができないようであれば、アンダーラインの使用は避けた方が無難です。

ブログに付属するエディタの例。アンダーラインや青文字はリンクと誤認してしまう

3.リンク色との区別を意識する

アンダーラインと同様の理由で、「青文字」もリンクと勘違いしてしまうケースがあります。ユーザーにストレスなくブログを見てもらうためにも、これらの3つの装飾には特に気を遣いましょう。

次回は「ページビューを意識したブログのチューニング」をお送りします。

まとめ

  • 記事の冒頭に「アイキャッチ画像」を入れてみよう
  • 写真は横長で使用すると、下に続く本文が近く、バランスもよい
  • 記事の内容からキーワードを抽出し、そのイメージから写真をチョイスする
  • テキストの装飾はほどほどに抑え、特にリンクとの差を意識する
  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

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

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

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

宮城県出身。コンピューター系の専門学校を卒業後、仙台のデザイン会社に入社。
Webサイトのデザイン・コーディングをはじめとし、各種デジタルメディアのデザインに従事。2002年に退職し、しばらくフリーランスとして活動。2007年に株式会社マジカルリミックスを設立。社内での業務担当は、Webサイト運用に関するコンサルティング、社内向けITトレーニング、セミナー出演、執筆など。2005年より仙台市内の専門学校において、非常勤講師としてWeb制作の講義を担当。
主な著書に『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』(共著、エムディエヌコーポレーション)、『基礎から覚える、深く理解できる。Webデザインの新しい教科書』(同)、『ああしたい、こう変えたいが手にとるようにわかるCSS基礎』(同)。

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

  • 1年間無料

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

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

コラム週間アクセスランキング[期間:2016/7/17~2016/7/23]

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • SmaBI

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

  • 経理通信

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