初心者がブログを立ち上げた際に、デザインはどの範囲まで行えばいいの？と悩んだ事はありませんか？
- ブログのデザインってどういう意味？
- ブログにデザインをする目的が分からない
- 具体的なブログのデザインテクニックを知りたい
こんな悩みや疑問を解決します。
- ブログデザインの3大要素を理解する
- 読まれるブログにする為のマル秘テクニック11選
- デザインに役立つWebサイトのご紹介
ブログ初心者は、覚えなければいけないことがたくさんあります。そんな中で、「デザインまでこだわってブログを作っている時間なんてないよ」思っているかもしれませんね。
最初からデザインに拘ったブログを作成するのは少し難しいです。ですから、ブログのアクセスが増えてきた時点で、デザインを見直していきましょう。
デザインの究極の目的は、『読者ファーストを実現する事』です。この記事を最後まで読むことによって、 読者ファーストを実現するためにデザインで行うべき11のテクニックを知る ことができます。
ぜひ、最後まで記事を読んであなたのブログにデザインテクニックを使ってくださいね。
ブログの三大要素を理解する
ブログにおける読者ファーストを考えた場合、最低でも以下に紹介する三つの要素は必ず意識してブログを作っていきましょう。
この三大要素をブログ全体、そして各記事に反映させることによって、あなたのブログは他の多くのブログと差別化されて見やすい読者ファーストを意識したブログに生まれ変わります。
結果として、他のブログとの差別化ができて、あなたが作ったブログのファンが生まれ、アクセスが増えるという好循環を生むことになります。
- ブログ全体の色合いに注意する
- ブログに統一感を持たせる
- 最低でもH2の下に画像を挿入する
ブログ全体の色合いを考えながらブログを構築していく
ブログ全体の色合いについては、あなたが想定しているターゲット、あるいはターゲットを更に細かく設定したペルソナに合わせて考えていきましょう。
例を挙げておきます。
例えば、あなたが狙うターゲット層が20代前半の女性だとします。そうすると、今の二十代の女性が好む色合いはどんな色だろうか？
それを考えることがブログの出発点になります。 必要なことはリサーチ です。
二十代前半の女性がよく読む雑誌や生活スタイル、ファッションの傾向など色々とリサーチした上でブログの色合いを決めていきましょう。
例えば、赤やピンクを多く使った色になる場合もあるでしょう。あなたが作ろうとしているブログのジャンルで、どのようなブログが作られているかをしっかりリサーチしていきましょう。
次に狙うターゲット層が30代後半の男性だとします。その場合ならどうでしょうか？
まさか前述した赤やピンクを主体とした色合いにはしないはずです。先ほどとは逆に、グレーや青などの落ち着いた色合いにしていくはずです。
この二つの例からも分かるように、 狙うターゲット層によって、ブログの色合いも変わってくる という事です。
もう一つ例を挙げておきましょう。
次はジャンルによって色を使い分けるという例です。あなたはFX関連のブログを立ち上げるとします。
ターゲットは三十代前半の男性です。この場合はいかがでしょうか？
先ほどのブルーに加えて、黒っぽい色やグレー、紫色なども面白いかもしれません。全体的に少し派手なデザインが良いかもしれないです。
いくつか例を挙げましたが、 ブログで狙っているターゲット層やジャンルによってもブログのデザインは考えていかないといけない ということが分かりますね。
デザインに統一性を持たせる
次に見ていくのはブログ全体のデザインについてです。デザインを統一することで読者にとって、ブログ記事は見やすくなります。
ブログの中で統一した方がいいデザインの例をいくつかあげておきます。
- フォントの統一 →ページ毎にフォントを変更しない
- 画像の大きさ →画像の大きさを統一する
- 記事中の枠 →ある程度は柔軟性を持たせてもいいが統一感が必要
- 文字の大きさ →どのページも文字の大きさを統一する
これらの要素を統一するだけで、読みやすいブログへと生まれ変わります。
画像の挿入と挿入位置について
初心者が作るブログに多いのが文字ばかりのブログです。私もブログを作り始めた当初は画像をほとんど挿入していませんでした。
今見ると、とても酷いブログで、とても人様に見せらられる代物ではありません。（笑）
今はブログをユーザーの八割がスマホユーザーだと云われています。ユーザー側に立ってみると分かりますが，ぎっしりと文字が詰まったブログ記事って、正直なところ読む気がしないですよね。
モバイルファーストを実現する為にも、上下にスクロールした際に、画像が一つは入るように工夫したい ものです。
画像を挿入するタイミングですが、ひと通り記事を書き終わってから、記事のイメージに合うものを探していきましょう。
画像の挿入位置ですが、私はH2の見出しの直下に画像を入れる ようにしましょう。その時に挿入する画像は横長の画像をオススメします。
スマホでブログを見ることを想定した場合、縦長の画像だとスマホの画面が画像だけになってしまいます。記事を見てもらう為にも横長の画像がオススメです。
H2の見出しのすぐ下に画像を入れる理由は、記事の内容に合った画像を入れることによって、読者に記事を読む心構えをしてもらったり、記事の内容をイメージしやすくしてもらう為です。
記事の設計については以下のリンクから詳しく解説しています。ぜひ、ご覧ください。
読まれるブログにする為のマル秘テクニック11
ここからは、具体的に読者ファーストを最大限にする為に、どんなデザインに関するテクニックを使っていくかについて解説します。
「もっとデザインを良くする方法っていっぱいあるよ」と考える人もいると思いますが、ここでは私がブログを作るときに意識している11のテクニックを紹介します。
- メインカラーはシンプルな色にする
- オシャレな配色パターンを真似する
- 見出しを装飾する
- 見やすいフォントにする
- フォントの大きさに合わせて行間を調整する
- リンク色は必ず青にする
- ヘッダーに広告を置きすぎない
- 1記事に最低でも一つの画像を配置する
- 読者が記事の内容を理解しやすいように工夫する
- 吹き出しを使って会話調を取り入れる
- 文字の色を使い過ぎない
以下から、それぞれ解説します。
テクニック①メインカラーはシンプルな色にする
私は毎日記事を書いているので、ライバルチェックは毎日行います。その関連で、人が書いたブログも毎日見ています。
最近はブロガーも個性的な人が増えてきて、個性的でおしゃれなブログもよく見かけるようになりました。
でも、初心者がおしゃれで、あまりにも個性的なブログのデザインを参考にするのは少々無理があります。また、最初から自分がおしゃれで個性的なブログを作るのは難しいです。
それよりも、一番意識しないといけないのは、読者ファーストです。いかにブログに訪れた読者がストレスなしに記事を読み進めることが出来るか？
それこそが 私たち情報を発信していく者が心がける事 です。
初心者が最初に作るブログの色は白をベースに、その他の色は黒、グレーなどのシンプルな色合いのブログにすれば一番無難だと思います。
ワードプレスを導入していれば、どんな色も使う事は可能です。
そうなると、人間は不思議なもので人とは違う色を使いたくなりますが、そこはグッと我慢して読者ファーストを念頭に考えて色を使いましょう。
テクニック②オシャレな配色パターンを真似する
白や黒、グレーなどはみんなが使っているので、もう少し個性を出したいと考える人もいるでしょう。
もし、最初から個性を出したいと思うのであれば、どの色とどの色を組み合わせれば見やすくおしゃれになるかを考えて配色しましょう。
とは言っても、デザイナーでもなければ、どんな配色がいいかなんて分かりっこないですよね。
そこで、ここでは非常に参考になるサイトをご紹介します。サルカワさんが提供する「COOL COLORS」です。
「サルカワさん」はブロガーの間では有名な方です。どう有名かと言うと、あの 人気ワードプレステーマ「SANGO」の開発者 です。私もSANGOでいくつかブログを作っていますが、独特の世界感を醸し出している非常のおしゃれなテンプレートです。
男性、女性どちらにも人気のあるテンプレートです。紹介はさておいて、このページには40個のおしゃれな配色パターンが紹介されています。
色コードも表示されているので、非常に使いやすいです。あなたが気に入った配色パターンを見つけたらクリックしてみてください。
右側にその配色を使ったプレビューを見ることが出来ます。 自分の好みに合った配色パターンをそのまま使える便利なツール に仕上がっています。
きっとあなたが気に入る配色パターンを見つける事ができると思いますよ。
テクニック③見出しを装飾する
見出しを作ることによって、読者が文章全体の構成を把握して、読み進めやすいようになります。
ただ、見出しも単に大きいだけでは、ちょっともったいないです。せっかくなので、見出しもおしゃれなデザインを取り入れましょう。
ブログデザインは、CSSをいじることによって、装飾することができます。 「CSS」いうのは「Cascading Style Sheets（カスケーディング・スタイル・シート）」の略です。
「HTML」と同じマークアップ言語の一種です。HTMLと違うのはデザイン、装飾のために作られている言語だ言うことです。
素人がCSSを触るのはかなり困難です。
そこで、 コピペだけで簡単にデザインを装飾できるのが今回ご紹介する「Nomad Code」 です。
このツールの素晴らしい所は、有料テーマや無料テーマの両方に対応している点です。具体的に言うと、以下のテーマに対応しています。・Cocoon
・その他ブログ
■有料テーマ
・JIN
・SANGO
・Affinger
・その他のワードプレステーマ
以下のリンクから、色々な配色パターンを見ることができます。ぜひ、ご覧になってあなたのブログの見栄えをさらによくしてください。
H2〜H4までの見出しを装飾することが出来ます。この二つのサイトを使って、あなた独自の世界観を実現してくださいね。テクニック④見やすいフォントの大きさにする
テクニックの三番目は見やすいフォントの大きさにするという事です。色々なブログを見ていて気付くのが文字が小さいということです。
若い世代なら文字が小さくても何の支障もありませんが、私くらいの年代になると、すでに老眼鏡が必要です。
老眼になると小さい文字ってすごく見ずらくなります。多くのブログで多いのが10ピクセル～12ピクセルです。
これでは年配者は見ずらいです。私のブログは14ピクセルに統一しています。
ですから、あなたもブログを作る際は 読者ファーストを考えて14ピクセル～17ピクセル に統一してください。
私もブログをつくり始めた頃は気がつきませんでしたが、老眼になって初めて、文字の大きさは読みやすさに影響することが理解できました。
テクニック⑤フォントの大きさに合わせて行間を調整する
次に解説するのは行間についてです。文字の大きさも読者ファーストを考える際に大きな要素ですが、行間も意外と大きな要素になりえます。
文字と文字の行間はブログ全体のイメージに大きな影響を与えます。何故なら、行間が狭すぎても、広すぎても読みづらくなるからです。
ここでも、サルカワさんの記事を参考にすれば学びが大きいです。
この記事を読む事によって、あなたは行間についての知識が深まり、簡単に行間を調整できるようになります。
テクニック⑥リンク色は必ず青にする
色々なブログを見ているとリンク色を赤や黄色、紫など自分の好みにしているブログもよく見かけます。リンク色を気にしていないという事だと思います。
しかし、グーグルやヤフーなど大手ポータルサイトはリンク色に青色を使っています。
特に大手ポータルサイトを利用する機会が多い人は「リンク＝青色」というイメージが定着しているのです。ですから、青以外の色をリンク色に使ってしまうと、読者がリンクと認識しづらくなります。
これってリンクを貼っていても、リンクと気が付かなかったり、警戒心を抱かせてクリックしてもらう機会損失にもつながります。
特にブログで収益化をしたい人にとってはリンクのクリック率はとても重要です。ですから、 リンク色は必ず「青」 にしましょう。
一番クリックされる色は「#0044CC」と言われているので、この色をリンク色に採用するのが無難です。
また、 「リンク色＋下線付き」の方が、さらにリンクとして認識されやすいです。
テクニック⑦ヘッダーに広告を置きすぎない
次に初めてブログを開いた時に目に入るヘッダー部分。これは「ファーストビュー」と言って、読者が初めて見る部分です。
正確に言うと、ブラウザでWEBサイトを表示した時に、スクロールしないで目に入る領域のことを指します。
ブログによっては、このファーストビューの領域に広告をいくつも置いているのを見かけます。でも、これは読者目線から考えると、マイナスでしかありません。
読者は広告を見に来ている訳ではないからです。
少し考えれば分かることです。ですから、 一つくらい置くのは構いませんが、最小限に留めましょう。
テクニック⑧1記事に最低でも一つの画像を配置する
先ほど少し触れましたが、画像は記事中にどんなに少なくても最低一つは挿入しましょう。
繰り返しになりますが、ひと通り記事を書き終えてから、記事のイメージに合う画像を探して挿入します。ブログの読者の多くは、訪れたブログを流し読みします。
流し読みする時に、文字ばかりのブログだと、読まずにスルーします。
これは、SEO的にも大きなマイナス要素になります。グーグルの人口知能はここまでしっかりと把握しています。
読まれるブログにする為のも、画像は必須 だと考えてください。
テクニック⑨読者が記事の内容を理解しやすいように工夫する
次も記事をひと通り書き終えてからの作業になります。書いた記事をいかに分かりやすく、飽きずに読んでもらうかを工夫します。
具体的には、以下の要素を取り入れます。
- 画像（イメージ図）
- 分かりやすい表を入れる
- 枠線を入れる
- 箇条書きにできる所は行う
- 画像の配置を統一する
一番下の画像の位置ですが、ここも読者が記事を読む際の読みやすさに関係してきます。例えば、記事の中で画像があって、画像の位置がコロコロと変わったらどうでしょうか？
同じ記事の中で、画像の位置が、右、左、中央と同じ記事の中で、画像の位置が変わったら非常に見ずらいのは想像できますね。
何故、見ずらいかというと、ユーザーの目線が右に行ったり、左に行ったり、真ん中に戻ったりと一定しないために、非常に目が疲れます。
読者ファーストを実現する為にも、画像の位置は一定の位置に置きましょう。
テクニック⑩吹き出しを使って会話調を取り入れる
ブログのデザイン的に吹き出しを使うことが、おしゃれかどうかは賛否両論あります。ただ、最近のブログの流行として「吹き出し」を使っているブログが多くなっています。
流行を取り入れることは非常のいい事だと私個人は思っています。 吹き出しをワンポイント的に使えば読者の読みやすさはアップ します。
人間は文章よりも会話形式の方が一般的には読みやすく感じて知らないうちに読み進めていく傾向があります。
そんな人間の行動パターンを上手く使っているのが吹き出しを上手に使って読ませるというテクニックです。
これは色んなブログを見ながら 研究していけば自分なりの使い方が見つかります。 習うよりも慣れろです。
ひと通リ、記事を書き終えたら吹き出しを使ってみましょう。吹き出しについては、有料テーマであれば、最初からプラグインが用意されている場合もあります。
もし、デフォルトのテーマで吹き出しがない場合は、プラグインをインストールして使っていきましょう。
テクニック⑪文字の色を使い過ぎない（3色くらいが妥当）
ブログの中には個性を出そうとして、何色も使っているブログもあります。ただし、ブログの中で色を何色も使うと、目がチカチカして非常に読みづらくなります。
その他の弊害としては、色を使いすぎると本当に強調したい部分やリンク色が目立たなくなりスルーされてしまうことがあります。
こういうマイナスを生み出さない為にも、色は最小限にとどめた方がいいです。
「色々な箇所で色文字を使って強調しすぎるのは、全部強調していないのと一緒」 ということを覚えておいてください。
私が使っているのは太文字と太文字＋下線のシンプルな装飾にしています。これも戦略の一つでユーザーを中高年に設定しているので敢えて、そのようにしています。
おまけ～ ブログデザインに役立つWebサイトのご紹介
いよいよ最後になりました。ここでは、今後あなたが作っていくブログのデザインに役立ついくつかのWebサイトをまとめてご紹介します。
テクニック②でご紹介したサルカワさんのCSSの装飾サイトも併せて記載しておきます。
まとめ～読まれるブログにする為のデザインテクニック11選
- ある程度記事数が増えてきたら、読みやすさを意識してブログデザインを整える
- デザインの目的は読者ファーストを実践する具体的な対策であると認識する
- 資産となるブログを作るには、何回も見直して納得いくブログを作っていく
今すぐできる具体的な行動
②どこをどのように修正していくかの計画を立てる
③計画が決まったら少しずつ実行に移していく
繰り返しになりますが、ブログのデザインの最終目的は読者ファーストです。読者にいかに読みやすい記事を提供するか？という事です。
必ず、ブログの記事の先には、ブログを読む読者がいると言うことを覚えておきましょう。
その事を常に念頭に置きながらブログ運営をしていけば、あなたのブログは必ず読まれるブログになっていきます。読者の悩みを解決できる記事をたくさん書いて読者満足度を上げる事が収益に繋がると理解しておきましょう。
ブログをデザインする前の段階として、読まれる記事を書く必要があります。読まれる記事を書くにはブログ設計が大切。以下のリンクからブログ設計の記事をご覧ください。