【ブログ初心者必見!】読まれるブログにする為のデザインテクニック11選

デザイン

初心者がブログを立ち上げた際に、デザインはどの範囲まで行えばいいの?と悩んだ事はありませんか?

 

ブログ初心者は、覚えなければいけないことがたくさんあります。

 

そんな中で、「デザインまでこだわってブログを作っている時間なんてないよ」思っているかもしれませんね。

 

ただ、デザインの最終目的は読者がブログを見やすいように色々な工夫を凝らす事だと私は考えています。

 

そう考えれば、初心者では最低限のデザインは施す必要があるという事は理解できますよね。

 

デザインの究極の目的は、『読者ファーストを実現する事』なのです。

 

この記事では、デザインの最終目的である読者ファーストを実現するためにデザインで行うべき11のテクニックについて解説していきます。

 

この11の施策を施すことによって、読者ファーストが実現され、初めてブログに訪れたユーザーも満足してブログの再訪が期待できます。

 

この記事を最後まで読んだあなたは、ブログにデザインを施す意味が理解出来て、読者にとって最適なデザインを施すことができます。

 

最後まで読んで、ぜひ実践してくださいね。

ブログの三大要素を理解する

三つの要素ブログにおける読者ファーストを考えた場合、最低でも以下に紹介する三つの要素は統一性を持たせることが必須事項としてください。

 

この三大要素をブログ全体、そして各記事に反映させることによって、あなたのブログは他の多くのブログと差別化されて見やすい読者ファーストを意識したブログに生まれ変わります。

 

ブログ全体の色合いを考えながらブログを構築していく

色合いブログ全体の色合いについては、あなたが想定しているターゲット、あるいはターゲットを更に細かく設定したペルソナに合わせて考えていきましょう。

 

例を挙げておきます。

 

例えば、あなたが狙うターゲット層が20代前半の女性だとします。
そうすると、今の二十代の女性が好む色合いはどんな色だろうか?

 

ここが出発点になります。

 

二十代前半の女性がよく読む雑誌や生活スタイル、ファッションの傾向など色々とリサーチした上でブログの色合いを決めていきましょう。

 

例えば、赤やピンクを多く使った色になる場合もあるでしょう。

 

次に狙うターゲット層が30代後半の男性だとします。その場合ならどうでしょうか?

 

まさか前述した赤やピンクを主体とした色合いにはしないはずです。
先ほどとは逆に、グレーや青などの落ち着いた色合いにしていくはずです。

 

この二つの例からも分かるように、狙うターゲット層によって、ブログの色合いも変わってくるという事です。

 

もう一つ例を挙げておきましょう。

 

次はジャンルによって色を使い分けるという例です。あなたはFX関連のブログを立ち上げるとします。

 

ターゲットは三十代前半の男性です。この場合はいかがでしょうか?

 

先ほどのブルーに加えて、黒っぽい色やグレー、紫色なども面白いかもしれません。
全体的に少し派手なデザインが良いかもしれないです。

 

次にあなたが自己啓発系で色々な勉強会やセミナー、人生を豊かに生きる為に・・・
そんな自己啓発系のブログを立ち上げるとします。

 

その場合は、黒っぽい色やグレーなど落ち着いた色合いになると思います。

 

この例のように狙うターゲット層やジャンルによってもブログのデザインは考えていかないといけないということなのです。

 

デザインに統一性を持たせる

デザインの統一性次に見ていくのはブログ全体のデザインについてです。
デザインを統一することで読者にとっては見やすくなります。

 

ブログの中で統一した方がいいデザインの例をいくつかあげておきます。

デザイン例

フォントの統一  →ページ毎にフォントを変更しない
画像の大きさ   →画像の大きさを統一する
記事中の枠    →ある程度は柔軟性を持たせてもいいが統一感が必要
文字の大きさ   →どのページも文字の大きさを統一する

 

これらの要素を統一するだけで、読みやすいブログへと生まれ変わります。

 

画像の挿入と挿入位置について

位置初心者が作るブログに多いのが文字ばかりのブログです。
私もブログを作り始めた当初は画像をほとんど挿入していませんでした。

 

今見ると、とても酷いブログで、とても人様に見せらられる代物ではありません。(笑)

 

今はブログもスマホで見るユーザーが増えています。

 

モバイルファーストを実現する為にも、上下にスクロールした際に、画像が一つは入るように工夫したいものです。

 

画像を挿入するタイミングですが、ひと通り記事を書き終わってから、記事のイメージに合うものを探していきましょう。

 

画像の挿入位置ですが、私はH2の見出し(青い見出し部分)のすぐ後に画像を入れるようにしています。

 

記事を読む前に記事の内容に沿った画像を挿入する事によって、読者に記事を読む心構えをしてもらったり、記事の内容をイメージしやすくしてもらう為です。

 

ブログに使うフリー画像については、こちらの記事をご覧ください。

 

記事の書き方についてはこちらの記事を参考にしてください。

 

読まれるブログにする為のマル秘テクニック11

マル秘テクニックここからは、具体的に読者ファーストを最大限にする為に、どんなデザインに関するテクニックを使っていくかについて解説します。

 

「もっとデザインを良くする方法っていっぱいあるよ」と考える人もいると思いますが、ここでは私がブログを作るときに意識している11のテクニックを紹介します。

 

テクニック①メインカラーはシンプルな色にする

シンプルな色私は毎日記事を書いているので、ライバルチェックは毎日行います。
その関連で、人が書いたブログも毎日見ています。

 

最近はブロガーも個性的な人が増えてきて、個性的でおしゃれなブログもよく見かけるようになりました。

 

でも、初心者がおしゃれで、あまりにも個性的なブログのデザインを参考にするのは少々無理があります。

 

また、最初から自分がおしゃれで個性的なブログを作るのは難しいです。

 

それよりも、一番意識しないといけないのは、読者ファーストなのです。
いかにブログに訪れた読者がストレスなしに記事を読み進めることが出来るか?

 

それこそが私たち情報を発信していく者が心がける事です。

 

初心者が最初に作るブログの色は白をベースに、その他の色は黒、グレーなどのシンプルな色合いのブログにすれば一番無難だと思います。

 

ワードプレスを導入していれば、どんな色も使う事は可能です。

 

そうなると、人間は不思議なもので人とは違う色を使いたくなりますが、そこはグッと我慢して読者ファーストを念頭に考えて色を使いましょう。

 

テクニック②オシャレな配色パターンを真似する

お洒落な色合い白や黒、グレーなどはみんなが使っているので、もう少し個性を出したいと考える人もいるでしょう。

 

もし、最初から個性を出したいと思うのであれば、どの色とどの色を組み合わせれば見やすくおしゃれになるかを考えて配色しましょう。

 

とは言っても、デザイナーでもなければ、どんな配色がいいかなんて分かりっこないですよね。

 

そこで、ここでは非常に参考になるサイトをご紹介します。

 

サルカワさんが提供する「COOL COLORS」です。

 

「サルカワさん」はブロガーの間では有名な方です。
どう有名かと言うと、あの人気ワードプレステーマ「SANGO」の開発者です。

 

私もSANGOでいくつかブログを作っていますが、独特の世界感を醸し出している非常のおしゃれなテンプレートです。

 

男性、女性どちらにも人気のあるテンプレートです。

 

紹介はさておいて、このページには40個のおしゃれな配色パターンが紹介されています。

 

色コードも表示されているので、非常に使いやすいです。

 

あなたが気に入った配色パターンを見つけたらクリックしてみてください。

 

右側にその配色を使ったプレビューを見ることが出来ます。

 

自分の好みに合った配色パターンをそのまま使える便利なツールに仕上がっています。

 

きっとあなたが気に入る配色パターンを見つける事ができると思いますよ。

 

テクニック②見出しを装飾する

見出しの装飾見出しを作ることによって、読者が文章全体の構成を把握して、読み進めやすいようになります。

 

ただ、見出しも単に大きいだけでは、ちょっともったいないです。せっかくなので、見出しもおしゃれなデザインを取り入れましょう。

 

ブログデザインは、CSSをいじることによって、装飾することができます。

 

「CSS」いうのは「Cascading Style Sheets(カスケーディング・スタイル・シート)」の略です。

 

「HTML」と同じマークアップ言語の一種です。
HTMLと違うのはデザイン、装飾のために作られている言語だ言うことです。

 

素人がCSSを触るのはかなり困難です。

 

そこで、コピペだけで簡単にデザインを装飾できるのが今回ご紹介する「Nomad Code」です。

→ 「Nomad Code」はこちら

 

このツールの素晴らしい所は、有料テーマや無料テーマの両方に対応している点です。
具体的に言うと、以下のテーマに対応しています。

■無料テーマ

・Cocoon
・その他ブログ

■有料テーマ

・JIN
・SANGO
・Affinger
・その他のワードプレステーマ

 

もう一つご紹介しておきます。

 

前述しましたサルカワさんのブログに掲載されている見出しの装飾パターンです。

 

→サルワカさんの「CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選」
という記事を参考にすれば、コピペでオシャレな見出しを実現することができます。

 

H2〜H4までの見出しを装飾することが出来ます。

 

この二つのサイトを使って、あなた独自の世界観を実現してくださいね。

 

テクニック③見やすいフォントにする

見やすいフォントテクニックの三番目は見やすいフォントの大きさにするという事です。
色々なブログを見ていて気付くのが文字が小さいということです。

 

若い世代なら文字が小さくても何の支障もありませんが、私くらいの年代になると、すでに老眼鏡が必要です。

 

老眼になると小さい文字ってすごく見ずらくなります。
多くのブログで多いのが10ピクセル~12ピクセルです。

 

これでは年配者は見ずらいです。

 

私のブログは14ピクセルに統一しています。

 

ですから、あなたもブログを作る際は読者ファーストを考えて14ピクセル~17ピクセルに統一してください。

 

私もブログをつくり始めた頃は気がつきませんでしたが、老眼になって初めて、文字の大きさは読みやすさに影響することが理解できました。

 

テクニック④フォントの大きさに合わせて行間を調整する

行間の調整次に解説するのは行間についてです。

 

文字の大きさも読者ファーストを考える際に大きな要素ですが、行間も意外と大きな要素になりえます。

 

文字と文字の行間はブログ全体のイメージに大きな影響を与えます。
何故なら、行間が狭すぎても、広すぎても読みづらくなるからです。

 

ここでも、サルカワさんの記事を参考にすればいいと思います。

→ 行間の調整でおすすめ記事

 

この記事で書かれている内容は以下の通りです。

→行間が作られる仕組み
→CSSで行間を指定する方法
→おすすめのLine-Heightの値

 

この記事を読む事によって、あなたは行間についての知識が深まり、簡単に行間を調整できるようになります。

 

テクニック⑤リンク色は必ず青にする

青色色々なブログを見ているとリンク色を赤や黄色、紫など自分の好みにしているブログもよく見かけます。

 

リンク色を気にしていないという事だと思います。

 

しかし、グーグルやヤフーなど大手ポータルサイトはリンク色に青色を使っています。

 

特に大手ポータルサイトを利用する機会が多い人は「リンク=青色」というイメージが定着しているのです。

 

ですから、青以外の色をリンク色に使ってしまうと、読者がリンクと認識しづらくなります。

 

これってリンクを貼っていても、リンクと気が付かなかったり、警戒心を抱かせてクリックしてもらう機会損失にもつながります。

 

特にブログで収益化をしたい人にとってはリンクのクリック率はとても重要です。

 

ですから、リンク色は必ず「青」にしましょう。

 

一番クリックされる色は「#0044CC」と言われているので、この色をリンク色に採用するのが無難です。

 

また、「リンク色+下線付き」の方が、さらにリンクとして認識されやすいです。

 

テクニック⑥ヘッダーに広告を置きすぎない

次に初めてブログを開いた時に目に入るヘッダー部分。これは「ファーストビュー」と言って、読者が初めて見る部分です。

 

正確に言うと、ブラウザでWEBサイトを表示した時に、スクロールしないで目に入る領域のことを指します。

 

ブログによっては、このファーストビューの領域に広告をいくつも置いているのを見かけます。

 

でも、これは読者目線から考えると、マイナスでしかありません。

 

読者は広告を見に来ている訳ではないからです。

 

少し考えれば分かることです。ですから、一つくらい置くのは構いませんが、最小限に留めましょう。

 

テクニック⑦1記事に最低でも一つの画像を配置する

先ほど少し触れましたが、画像は記事中にどんなに少なくても最低一つは挿入しましょう。

 

繰り返しになりますが、ひと通り記事を書き終えてから、記事のイメージに合う画像を探して挿入します。

 

ブログの読者の多くは、訪れたブログを流し読みします。

 

流し読みする時に、文字ばかりのブログだと、読まずにスルーします。

 

これは、SEO的にも大きなマイナス要素になります。グーグルの人口知能はここまでしっかりと把握しています。

 

読まれるブログにする為のも、画像は必須だと考えてください。

 

テクニック⑧読者が記事の内容を理解しやすいように工夫する

次も記事をひと通り書き終えてからの作業になります。

 

書いた記事をいかに分かりやすく、飽きずに読んでもらうかを工夫します。

 

具体的には、以下の要素を取り入れます。

・画像(イメージ図)
・表
・枠線
・箇条書き
・画像の配置を統一する

 

一番下の画像の位置ですが、ここも読者が記事を読む際の読みやすさに関係してきます。

 

例えば、記事の中で画像があって、画像の位置がコロコロと変わったらどうでしょうか?

 

同じ記事の中で、画像の位置が、


中央

 

こんな感じで画像の位置がコロコロと変わるのです。

 

読者の目線が右に行ったり、左に行ったり、真ん中に戻ったりと目が非常に疲れる状態になります。

 

読者ファーストを実現する為にも、画像の位置は一定の位置に置きましょう。

 

テクニック⑨吹き出しを使って会話調を取り入れる

ブログのデザイン的に吹き出しを使うことが、おしゃれかどうかは賛否両論あります。

 

ただ、最近のブログの流行として「吹き出し」を使っているブログが多くなっています。

 

流行を取り入れることは非常のいい事だと私個人は思っています。

 

吹き出しをワンポイント的に使えば読者の読みやすさはアップします。

 

人間は文章よりも会話形式の方が一般的には読みやすく感じて知らないうちに読み進めていく傾向があります。

 

そんな人間の行動パターンを上手く使っているのが吹き出しを上手に使って読ませるというテクニックです。

 

これは色んなブログを見ながら研究していけば自分なりの使い方が見つかると思います。

 

習うよりも慣れろです。

 

吹き出しについては、有料テーマであれば、最初からプラグインが用意されている場合もあります。

 

もし、デフォルトのテーマで吹き出しがない場合は、プラグインをインストールして使っていきましょう。

 

⇒吹き出しのプラグインはこちらの記事をご覧ください。

ワードプレスの有料テーマについては、こちらにまとめてあります。
 (私、masatoが今まで実際に購入して使ったテーマを厳選しています)
 

テクニック⑩文字の色を使い過ぎない(3色くらいが妥当)

ブログの中には個性を出そうとして、何色も使っているブログもあります。

 

ただし、ブログの中で色を何色も使うと、目がチカチカして非常に読みづらくなります。

 

その他の弊害としては、色を使いすぎると本当に強調したい部分やリンク色が目立たなくなりスルーされてしまうことがあります。

 

こういうマイナスを生み出さない為にも、色は最小限にとどめた方がいいです。

 

「色々な箇所で色文字を使って強調しすぎるのは、全部強調していないのと一緒」ということを覚えておいてください。

 

私が使っているのは太文字と赤文字、黄色マーカーだけです。

 

それも、出来るだけ使う頻度を少なくするように考えながら使っています。

 

まとめ~読まれるブログにする為のデザインテクニック11選

今回の記事では、

・ブログのデザインの三大要素を理解すること

・読まれるブログにする為のマル秘テクニック11

 

をお伝えしました。

 

 

そして、最も大切なことを繰り返しお伝えします。
ブログのデザインの最終目的は読者ファーストです。

 

読者にいかに読みやすい記事を提供するか?という事です。

 

必ず、ブログの記事の先には、ブログを読む読者がいると言うことを覚えておいてください。

 

その事を常に念頭に置きながらブログ運営をしていけば、あなたのブログは必ず読まれるブログになっていきます。

 

私も微力ながらお手伝いしますので、何回も作り直してあなた自身が納得できるまでブログを作り込んでいきましょう。

(Visited 9 times, 1 visits today)

コメントを残す

CAPTCHA