【今すぐできる】PVに直結する見やすいブログデザインの作り方講座
ブログを運営するにあたって一番大事なのは記事、つまりコンテンツですがほかにも重要な要素はたくさんあります。
その中でも見る人にとって目に留まりやすいのが「デザイン」です。
ブログデザインは人によってさまざまで、それぞれのブログのを印象付ける要素の一つになっています。
人によってはカラフルなものからシンプルなものまでたくさんあり、ぼくはどちらかというとシンプルなデザインが好んで使います。
- なぜブログデザインにこだわるのか？
- デザインにおいて注目する要素
- 文字
- 見出し
- 広告
- 色
- 色彩の効果
- ロゴ
- レスポンシブ
- デザイン制作で気を付けること
- 実際に変えたメリット
- 参考になるブログ様
- まとめ
なぜブログデザインにこだわるのか？
人によってブログのデザインも多種多様ですがなぜブログのデザインにこだわるのでしょうか？
デザインすることが好きだから
ブログを初めたてたことはブログサービスやＣＭＳが提供しているテンプレートをダウンロードして使うことが多いですよね。
しかし実際に運営していくうちにいろいろ変えたくなってＣＳＳとかを勉強してカスタマズしていくと結構楽しかったりするんですよね。
特に自分で自分好みのデザインにすることでオリジナリティもあがり愛着も沸くのでよりブログが楽しめるようになります。
ぼく自身もブログを始めてからCSSやHTMLに触れ、JavaScriptやPHPなどプログラミングを始めるきっかけにもなりました。
周りと差がつけられるから
ブログを運営していくにあたって「差別化」をしていくということは大事なことで、埋もれるようなブログはまず見てもらえません。
でもブログって基本文字だけのコンテンツなので差別化って結構難しんですよね。
そこで差別化のために注目したいのが、ブログデザインで、デザインは人によって多種多様なので個性を出すことができます。
なので読者の人にもデザインでサイトを認識してくれるので、その後のロイヤリティにもつながっていきます。
ユーザビリティを上げたいから
理由としてはデザインするのが好きとかいろいろな理由があると思いますが、多くの人に共通するのが「ユーザビリティ」を上げたいからだと思います。
ユーザビリティとはブログを訪れた読者が感じる使いやすさ・見やすさのことで、ユーザビリティにはデザインが大きく関係します。
具体的にいうとブログでは見やすさやほかの記事のアクセスのしやすさなどがこれにあたります。
ユーザビリティの例
- ・ページの見やすさ
- ・ロードの速さ
- ・他記事のアクセスのしやすさ など
ブログのユーザビリティ高めることによってどんな記事でも、より見てもらいやすいものになります。
逆に言うとどんなに良い記事を書いていいたとしてもデザインがひどいブログは人目通しただけで敬遠されるでしょう。これはもったいないですね。
ちゃんと見てくれる人は見てくれますが、早く解決策を知りたい人や文字の羅列に苦手意識がある人はページを去ってしまいます。
なので良い記事を書くということはとても大切なのですが、それを見てもらえるように
「デザインを工夫する」というのも重要なのです。
デザインにおいて注目する要素
デザインといっても抽象的なものなのでいまいちよくわからないこともありますよね。
なのでデザインを見やすいものにするために具体的にどこをいじればよいのかということを上げていきます。
デザインを変更するためには最低限ＣＳＳの知識が必要になります。あと開発者ツール（F12キー）も一緒に使っていきましょう。
必要なもの（全部無料）
- ・最低限のＣＳＳの知識
- ・開発者ツール（Chromeがおすすめ）
- ・がんばるきもち（大事）
文字
やはりブログは文字のコンテンツなので、文字に関するデザインは結構重要です。文字はHTMLでいうpに該当します。
文字関係のCSS
- ・font-size：文字の大きさ
- ・font-color：文字の色
- ・font-weight：文字の太さ
- ・font-family：フォントの種類
- ・line-height：行間の幅
- ・text-decoration：下線など
文字関係でもこれだけ変更できるものがあり、基本的にはデフォルトでも問題ないですが、できるだけ見やすくする必要があります。
見やすさと大きさは関係するので文字は大きければ大きいかというとそうでもなく、適切なサイズというものがあります。
SEO的には文字の大きさ16px前後がベターとされていて、ぼくも実際にそれぐらいの大きさを目安にしています。
また実際に記事を書いていくときは改行などを増やして、会話のような短い言い回しにすると読み手にとっても読みやすいものとなります。
見出し
見出しとは段落と段落を区切る際のタイトルを表示するものです。
見出しも結構人によってデザインが変わってくるので、個性が出やすい・出しやすいところだと思います。
見出しはHTMLで言うとＨ1～6ぐらいで表されるのが一般的です。
Ｈ1が一番大きい見出しでそれ以降は小さくなっていきます。実際に見出しタグの並び順はＳＥＯにも影響してくるのでごちゃごちゃさせるのはよくないです。
見出しタグでよく使うCSS
- ・font-size：文字の大きさ
- ・border：線
- ・background：背景 など
見出しタグを変えるだけでも段落ごとのメリハリがつくので読者にとっても読みやすくなるので、それぞれでデザインを変えておきましょう。
広告
ブログを運営している人の中にはGoogle Adsenseやアフィリエイトの広告を活用している人も多いと思います。
しかし広告が多すぎるブログは自分のコンテンツを薄くなりますし、読者としても悪い印象を与えてしまいます。
また規約的にもブログの数があまりにも多いと規約違反になり、サービス差しどめを食らう可能性もあります。
なのでデザイン面でも運営面でも適切に広告を張る必要があります。
ちゃんと効果的な場所に広告をつけることによって、読者にとっても助かる場合があるし、自分の収益上でもメリットがあります。
色
文字や見出しなどはそれぞれ色を設定することができますが、どの色を使うというのも重要です。
色彩には心理に影響をもたらすとされていて、心理学の分野でも研究されているほどです。
例えば赤い色は注意を促したり、青い色は集中効果などを高めてくれるといわれています。
色彩の効果
- ・赤色：注意喚起、注目
- ・青色：集中、冷静
- ・緑色：リラックス など
このように色彩の効果を使っていくことで読み手にとっても心理的に影響を与えることができるかもしれません。
しかし個人的にはあまりカラフルにしすぎると目がチカチカしたり、でざいんてきにもよろしくないので、できれば同系色の色に統一させた方が無難だと思います。
ロゴ
ブログにおいてはヘッダーやプロフィールにロゴを自作して設定することもできます。
なので実際に自分で絵をかいたり、イラストソフトを使ったり、などして自分のブログを代表するロゴを作成します。
ロゴってブログだけじゃなくて、会社やスポーツチームなどみんな作っていて、それぞれのイメージを与える重要な役割があります。
なのでロゴが特徴的であればそれだけでも読者にも覚えてもらいやすかったり、ブランディングを高めるのにもメリットになります。
イラストが苦手というひとでも最近ではフリー素材やクラウドソーシングなどもたくさんあるのでそれぞれを活用していっても良いと思います。
レスポンシブ
昔はネットはパソコンで見ることが一般的でしたが、現在ではスマートフォンで見るのが主流になっています。
実際に自分のブログのアクセス解析をしてもスマートフォンのユーザーが大部分を占めています。
なので今後はパソコン用のデザインよりもスマホ向けのデザインを注力したほうが需要的にはあっていると思います。
レスポンシブで使うCSS
- ・max-width：最大幅を指定
- ・min-width：最小幅を指定
スマホ用のHTMLは別々に設定することもできますが、今は画面によってＣＳＳを変更させるレスポンシブデザインが一般的になっています。
ＣＳＳではmax-widthやmin-widthで幅を指定して、個別にＣＳＳを記述していくという方法が使われます。
また最近ではBootStrapなどレスポンシブも簡単に使えてしまうフレームワークなどもあるので簡単に行うことができます。
デザイン制作で気を付けること
ごちゃごちゃさせない
コンテンツは多いほど良いサイトではあると思いますが、それをごちゃごちゃに並べているとせっかくのコンテンツも悪いイメージを与えてしまいます。
なので適度の空白というのも重要の概念で、空白自体もデザインとして考えてレイアウトを考えていくとよいでしょう。
余裕を持たせるテクニック
- ・カラムは2個以下
- ・改行する
- ・要素自体を離す
時間をかけすぎない
ブログをデザインするのって楽しいですし、こだわりすぎるとキリがないんですよね...
実際にブログを始めたてのころはブログのデザインに何日も使っていて、結果デザインだけで燃え尽きてしまったんですよね。
ブログにおいてはやはり一番重要なのは「記事」つまりはコンテンツなので、デザインに力を入れすぎると本業がなかなか進みません。
いまではテンプレートもある程度充実しているので良いテンプレートを使って、ある程度コンテンツを充実させてからデザインを決めていくとよいでしょう。
またデザインにかける時間も無意識だとあっという間に過ぎてしまうので、一日のデザインにかける上限などを定めておくと熱中しすぎないのですむのでお勧めです。
客観的に見る
自分の日記的なものなら問題ないですが、誰かに見せることが目的なら自分本位なデザインはあまり良くないです。
自分的にはイケてると思ったデザインでもその他大勢の人には見にくいと感じさせるものになっているかもしれません。
なのでブログをデザインするときは実際に自分が読者になって、違和感なく読めるかなども意識したほうが良いですね。
個人的な指標としては「自分のじゃないブログを読んでいる」感じになることを一つのラインにしています。
実際に変えたメリット
ＰＶが上がる
やはりデザインを変えてから記事は頑張って書いたのにデザインのせいで見られなかったというケースが少なくなった気がします。
結果的にデザインを変えてからはブログのＰＶなども増加しているので、少なからず効果があったのだと感じています。
また記事同士のアクセスもしやすくなったので、内部リンク的な意味でも効果を発揮し、直帰率などの低下もありました。
ＣＶ率が上がる
ＣＶ率とは広告のクリック率のことを指し、広告がごちゃごちゃしていた時はまったくクリックなどなかったです。
しかし現在は以前よりも広告の数が少ないのにもかかわらずＣＶ率は上昇しました。
やはり広告もむやみやたらではなく、適切で効果的な位置に貼ることによって初めて効果があるのだと実感しました。
モチベーションが上がる
デザインが良くなると運営していてもモチベーションの上昇に結構効果があると感じます。
実際に自分の作成したものでなくても、かっこいいテンプレートを使うとテンションも上がりますよね。
ブログのモチベーション生地って結構大変ですが、ブログのデザインというのは一つの効果的な手段として活用できます。
参考になるブログ様
一般的に良いデザインといっても抽象的なものでよくわからないですよね。
デザインの流行りというのも時代によって変わるので、トレンドをつかむのは実際難しいです。
しかし現在人気のあるブロガーの人などはコンテンツだけでなく、デザインの良さも影響していると思います。
ぼくも実際にブログをカスタマイズしたり、この記事を書くときなどにいくつかサイトを参考にしたりします。
デザインが良いと思うブログ
ここら辺はブログとしての人気も高く、デザインとしても見やすいと思います。
一般的なサイトとブログサイトでは若干見やすいの基準が違うと思っていて、最近のWebサイトならＵＸなどを意識したものも多いですが、ブログではシンプルなものもウケが良いと思います。
なのでサイトを参考するときも大手の企業などのサイトではなく、個人の人気ブロガーなどのデザインを参考にするとよいと思います。
まとめ
ブログをするにおいてコンテンツの量産も重要ですが、デザインも同等に重要です。
どんなによい記事を書いたとしてもデザインのせいで読まれないこともあるので、ある程度作成に慣れてきたらデザインもカスタマイズしてみるとよいでしょう。
実際にブログでカスタマイズに慣れることによりプログラミングに興味関心を盛ったり、今後の転職などにも役に立つかもしれません。
いまではHTMLやCSSなどはネットで簡単に情報が手に入るので勉強して良いデザインを作っていきましょう！
