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

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

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

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

アイキャッチ画像なし

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

アイキャッチ画像あり

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

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

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

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

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

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

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

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

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

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

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

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

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

• 写真素材 足成【フリーフォト、無料写真素材サイト】
• PAKUTASO/ぱくたそ-WEB制作向けの無料写真素材/商用可
• 無料写真素材【モデルピース】人物・モデルの素材サイト

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

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

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

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

1.色を使いすぎない

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

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

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

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

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

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

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

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