おしゃれなブログデザインを作る22のコツ&見本12選

せっかくブログを運営するなら”おしゃれ”なブログが良いですよね。

しかし、なんとなくブログをカスタマイズしても、おしゃれなブログにはなりません。

この記事では、広告代理店でSEOディレクターをする かずたか/ウェブ解析士 が、誰でも簡単に”おしゃれなブログデザインを作るコツ”について紹介します。

おしゃれなブログデザイン＝シンプルなデザイン

最初に、おしゃれなブログ作りで最も基本的な考え方をお伝えします。おしゃれなブログデザインを作るコツは「シンプルなデザイン」にすることです。

 

ブログにはさまざまなテーマやデザインのものがあります。しかし全てに共通することは、記事が主役ということです。

後ほど、おしゃれなブログの見本を紹介していますが、おしゃれなブログほどシンプルなデザインになっています。これは、凝ったデザインにせずとも、記事が良く、且つ見やすいシンプルなデザインになっていればおしゃれに見えるからです。

反対に、主役である記事がイマイチなら、デザインにこだわっていても、おしゃれなブログと思ってもらうことはできません。

ブログの主役は記事ということを理解した上で、以下を読んでいただけるとスムーズにおしゃれなブログが作成できます。

おしゃれなブログにするメリット、デメリット

おしゃれなブログデザインにするためには、それなりに時間、お金がかかります。

おしゃれなブログにするメリット、デメリットについて認識し、どこまで取り組むかを考えてみましょう。

メリット

記事が読みやすくなる

おしゃれなブログは、主役である記事が読みやすくなります。

記事が読みやすくなると、離脱率が下がったり、内容を理解してもらいやすくなります。

その結果、ユーザーにも、検索エンジンにもコンテンツを正しく評価してもらいやすくなります。

ユーザーの信頼が獲得しやすい

おしゃれなデザインのブログは、それだけ気を使って運営しているということでもあります。また、洗練されたデザインは誠実な印象にもつながります。

メラビアンの法則にあるように、印象は見た目で９割が決まってしまうと言われており、おしゃれなデザインのブログは、ユーザーの信頼を獲得しやすくなります。

成果が伸びる

商品を買ったり、問い合わせするなら、おしゃれで信頼できるブログが良いですよね。

記事の質が同じ位なら、当然おしゃれなデザインの方が選ばれやすいです。

つまり、ブログのデザインがおしゃれになると、問い合わせや売上といった”成果”が伸びやすくなります。

デメリット

デザインの知識が必要

「デザインセンス」といった言葉がありますが、デザインはセンスではなく、論理的に、意図的に行うものです。

例えば配色を決めるとき、”直感”ではなく、色の持つ印象を考慮し”意図的に”決めるのがデザインです。

つまり、おしゃれなデザインにするためにはそれなりに知識が必要です。

デザインに時間がかかる

ウェブデザイナーなら話は別ですが、初めてブログのデザインをする方は完成までに相当時間がかかります。

ヘッダー周り一つとっても、イチからやるとなると1～2週間かかることも珍しくありません。

ブログ全体のデザインを考えるとなると、さらに膨大な時間がかかります。

お金がかかる

デザインを外注する場合はお金がかかります。

自分自身でデザインする場合でも、PhotoshopやIllustratorなどのソフト代がかかります。

また、デザインの教材を買うとお金がかかります。もしYouTubeやブログなどを使って学習し、自分ですべてデザインする場合はお金はかかりませんが、その分、時間的なコストがかかります。

おしゃれなブログデザインを作る22のコツ

ここからは、おしゃれなブログデザインを作るための22のコツを紹介します。

具体的な方法を紹介しますので、ぜひ取り入れてみてください。

基本

ブログの目的を明確にする

おしゃれなブログデザインのためには、ブログの目的を明確にすることが重要です。

というのも、

など、目的によって配色やフォント、情報配置が変わるからです。

ブログの目的を考える際は、以下のような観点で分解して考えるとイメージしやすくなります。

使う色は3色以下にする

ブログデザインの重要項目に配色があります。配色はユーザーの印象に直結するので、慎重に決めるべきです。

中でも、特に重要なのが使用する色の数です。ブログに限った話では無いですが、配色は使う色の数が多くなるほど、まとめるのが難しくなります。そのため、ブログの配色は3色以下になるようにしましょう。

3色で配色を行う際は、

の3つを組み合わせます。また、この3つの色はそれぞれ、

の割合で使用するのが理想的だとされています。

メインカラーを決める

配色を考える際にメインカラーを先に決めてしまえば、その他の色が決まりやすくなります。

メインカラーをブログの印象を左右する色です。そのため色の持つ意味を理解して選ぶことが重要です。

以下で、主要な色の持つ印象を簡単に記載します。参考にしてみてください。

ベースカラーには白を使用する

配色は、ベースカラー、メインカラー、アクセントカラーの3つを利用しますが、ベースカラーは特別な理由がない限り”白”を選びましょう。

というのも、ベースカラーはブログの背景色に当たります。冒頭で紹介したとおりブログの主役は記事ですので、記事が読みやすいように背景色は白にしておくべきです。

もちろん、視力にハンディキャップがあるような方を対象にする場合は、黒などの背景を選ぶこともあります。

フォントを統一する

フォントが統一されていないブログは、素人くささや、古臭さを感じさせてしまいます。フォントというのは、簡単に言えば字体のことです。

ブログツールでは、いくつかのフォントが選べるようになっていますので、任意のフォントに変えることができます。

ちなみに、HTML編集ができるWordPressなどのブログツールを使っている場合、テキストをコピペした際に、コピー元のフォントデザインが引き継いでしまうこともありますので注意しましょう。

過度な装飾をしない

ブログは、装飾をすればするほど、おしゃれなデザインから遠ざかります。

例えば、以下のように過度に装飾された文を見てどう思うでしょうか。

おそらく、”洗練されている””おしゃれ”といった印象は受けないでしょう。

また、本文だけでなく、ブログタイトルや見出しといったパーツも、過度な装飾をするほど、おしゃれに見えなくなりますので注意しましょう。

画像のサイズを統一する

ブログに写真やイメージ画像を挿入する際は、画像のサイズをできる限り統一しましょう。

もし、縦横比が異なる画像を複数使用する際は、横幅、もしくは縦幅のいずれかを統一すれば整った印象になります。

また、一つひとつの記事内で統一するのはもちろんのこと、ブログ全体で統一するとより洗練された印象になります。

画像のアスペクト比を絶対に変えない

最近のブログツールでは、画像を挿入した後、ドラッグアンドドロップで画像のサイズを変えることができます。

このとき画像のアスペクト比を変えてしまうと、一気にデザインがダサく見えてしまいますので注意しましょう。

アスペクト比というのは縦横比のことです。

リンクの色は青系に設定する

ブログデザインは、見た目も重要ですが、「ユーザービリティ」も重要です。

ユーザービリティにつながる項目として、リンクの色は原則「青系」に統一するようにしましょう。

というのもインターネット上の慣習として、リンクの色は青系の色がデフォルトの色になっています。そのため青系の文字はリンクだとわかりやすく、サイト内でユーザーが迷うのを防ぐことができるからです。

厳密に色が決まっているわけではありませんが、カラーコードとしては、以下の3色が一般的に使われることが多いです。

表記ルールを統一する

ブログのデザインと関連する要素として、表記ルールがあります。表記ルールとは、記事を書く際の表記をあらかじめ決めたものです。

以下の文章はわざと表記ルールをバラバラにした文章です。

上記の文章では、

ブログ集客、集客ブログ
企業様、企業さん、企業
行う、おこなう
様々、さまざま

といった表記がバラバラになっています。

表記ルールが整っていないと、記事がよみづらく、管理の行き届いていない印象を与えます。

誤字脱字をしない

ブログの90％以上を占めるコンテンツは文字です。ほとんどのユーザーは文字を読むためにブログへ訪れますので、誤字脱字というのは意外と気が付かれます。

誤字脱字は直接ブログのデザインとは関係ありませんが、きれいなデザインのブログでも、誤字脱字があるとそこが気になり、ブログのイメージが悪くなります。

デザインを引き立たせるためにも、誤字脱字がないようにチェックをしましょう。

日本語を正しく使う

誤字脱字と同様、おかしな日本語を使っているとそこが気になり、せっかくのデザインも台無しです。

例えば、以下のような表現は使わないようにしましょう。

12.おしゃれに見せようとしない

ファッションをイメージするとわかりやすいですが、おしゃれな人は、”おしゃれに見せよう”とはしていません。

反対に、”おしゃれに見せよう”としている人ほど、ダサく見えるものです。

ブログデザインも同じで、おしゃれに見せようと装飾をつければつけるほど、ダサい印象になります。

ブログを始めた頃は、デザインに手を入れておしゃれに見せたくなるものですが、まずは記事コンテンツを充実させることを考え、”おしゃれに見せよう”と無駄な装飾に時間を使わないようにしましょう。

応用編

ここからは、ブログをおしゃれに見せる応用テクニックを紹介します。

オリジナルのロゴを使う

ブログにアクセスしたときに、最初に目に入るのは、ロゴやGナビのあるヘッダー部分です。そのため、ヘッダー部分はブログの印象を決める重要な要素です。

ブログをおしゃれに見せるために効果が大きいのが、オリジナルのロゴを使うことです。

ロゴはそのブログのテーマや内容を一目で伝えるために重要なパーツです。ロゴがおしゃれでなら、ブログ全体はおしゃれな印象になります。

最近では、ランサーズ、クラウドワークスなどのクラウドソーシングサイトを利用すれば、数千円程度でロゴ制作を依頼することも可能です。

せっかくブログを始めるのであれば、オリジナルなロゴを使用してはじめてみてはいかがでしょうか。

ファビコンを設定する

ファビコンとは、ブログにアクセスした際にブラウザのタブに表示される小さなアイコンです。

WordPressを使用している場合には、設定していないとWordPressのロゴが表示されます。その他のブログサービスの場合も、ブログサービスのロゴマークなど何らかのファビコンが表示されます。

ファビコンが設定してあるだけで、こなれた印象になります。

写真、イメージ画像を多めに使う

ブログはテキストがメインの媒体です。文字ばかりで画面が黒々としていると、ユーザーにおしゃれな印象を与えることはできません。

そのため、最低でも大見出しごとに写真やイメージ画像を設置するようにし、画像素材を多めに設置すると、おしゃれなデザインやイメージになりやすいです。

画像素材は厳選する

写真やイメージ画像として使用する画像は、厳選し質の高い素材を使うようにしましょう。

例えば、料理のイメージ画像を使用する際、以下の2枚うちどちらがおしゃれなイメージに近いでしょうか。

画像素材は、ブログの印象を左右する影響力のある素材ですので、厳選して使用しましょう。

また、本気でブログをやっていくつもりのある方は、無料素材だけではなく有料素材の使用も視野に入れておくと良いでしょう。

アイキャッチをオリジナルで作成する

ブログ記事の一番上にアイキャッチ画像を設定している人は多いと思います。

アイキャッチ画像も素材をそのまま貼り付けるだけよりも、ひと手間加えたアイキャッチ画像の方がブログをおしゃれに見せてくれます。

例えば、記事のタイトルを上に重ねるだけでも、ぐっとおしゃれな印象に近づきます。

見出しを装飾する

見出しはブログ記事のテキストの中で、最も視覚的にインパクトのあるパーツです。そのため、見出しもブログのデザインを左右する要素です。

見出しには、ブログのイメージカラーや、あらかじめ決めておいたブログの配色などを考慮してシンプルな装飾をしましょう。文頭に縦線を入れたり、下線を引くといったシンプルなデザインで十分です。

見出しに装飾をすることで、おしゃれに見えやすくなるだけではなく、記事も読みやすくなります。

吹き出しを使う

記事部分がテキストだけで淡々と書かれていては、ユーザーにおしゃれな印象を与えることはできません。

そのため、記事中に変化をつけることはおしゃれな印象につながりやすいのでおすすめです。

具体的には、誰かのセリフや会話部分に吹き出しの装飾をすると、今風の見た目になり、おしゃれな印象につながりやすくなります。

箇条書きを使う

テキストをダラダラと書いているだけでは、ユーザーが飽きてしまいますし、おしゃれな印象にはなりません。

そこで、簡単に記事に変化をつけ、メリハリのある見た目にするために、箇条書きを取り入れるのがおすすめです。

例えば、以下の2つの文章があったとき、どちらの方がより洗練された印象になるでしょうか。

箇条書きを使ったほうが、読みやすく、おしゃれな印象になりやすいです。

枠を使う

枠もブログの記事に変化をつけ、おしゃれな印象につなげるためには有効な装飾です。

枠と行ってもシンプルなソリッドの線のものから、画像素材を利用した枠まで様々ですが、基本的にはソリッドな枠でも十分です。

枠を使っておしゃれに見せるコツは、以下の2点です。

簡単にできる！おしゃれに見せる3つのコツ

ブログデザインをおしゃれにするのはHTMLやCSSの知識が必要だったり、デザインの基礎的な知識が必要だったりと簡単ではありません。

色々やるのはめんどくさい！という方のために、簡単におしゃれなブログデザインにするための3つのコツを紹介します。

モノトーンにする

白、黒、グレーだけで他の色を使わないモノトーンは、ブログをおしゃれに見せるのに効果的です。

ブログがダサく見える原因の一つに配色の違和感があります。

例えば、「赤」という色一つとってもマゼンタ、ワインレッド、朱色、紅色、、、など様々な色があります。また、同じ赤でも、種類によっては見た目の印象は大きく異なります。

このように、無限にある色の中から違和感なく、おしゃれに見える配色を考えるには、デザインの知識はもちろん、配色に関する知識も必要です。

もし、配色に自信が無いという方は、思い切ってモノトーンにしてみましょう。モノトーンは基本的に配色を考える必要はありません。

おしゃれなデザインテーマを使う

ブログツールには『デザインテーマ』が用意されていることがほとんどです。

WordPressでは、無料・有料、公式・非公式を合わせると数え切れないほどたくさんのデザインテーマを手に入れることができます。

どうしてもおしゃれなデザインが作れないという方は、おしゃれなデザインテーマを使ってしまうというのも一つの方法です。

手っ取り早く、質の高いものを手に入れるにはこの方法は最適ですが、有りものを使うわけですので、オリジナリティを出すのは難しくなってしまいます。

おしゃれなブログをまねる

最も簡単におしゃれなブログを作るための、おすすめの方法はおしゃれなブログをまねすることです。

ブログデザインに限らず、何かをするときは上手にやっている人をまねすることが最も近道で、自分のスキル向上にもつながります。

もし、憧れているブログがある方は、それをまねて作ってみましょう。もし、そういったブログが無い方は、次でおしゃれなブログを紹介していますので、参考にしてみてください。

おしゃれなブログ・メディア12選

ここでは、おしゃれなブログデザインづくりの見本になるブログ、メディアをご紹介します。

ブログ編

ブログは星の数ほどあります。その中でも知名度が高く、おしゃれなブログ作りの参考になるブログをいくつか紹介します、

Google Japan Blog

あまりご存知ない方もいると思いますが、実はGoogleが運営する公式ブログがあります。

ユーザーファーストのお手本のような企業ですから、ブログのデザインも参考になるはずです。

見ていただくとわかる通り、無駄な装飾は一切ありません。まさにミニマルデザインです。

人によっては、シンプル過ぎて好みじゃないという方もいると思いますが、個人的には最も好きなブログデザインの一つでしたので紹介しました。

→Google Japan Blog

monecre（もねくり）

monecre（もねくり）は、モネさんというデザイン系のクリエイターさんが運営するブログです。

ブログのデザインのおしゃれ度はピカイチです。また、個別の記事も読みやすくキレイに装飾されていて素晴らしいと思います。

ただレベルが高すぎて、そもそもまねできないという方も多いと思います。

→monecre（もねくり）

トバログ

トバログは、鳥羽さんと言う方が運営されている個人ブログです。

ブログを見ていただいたらわかる通り、個人ブランディングの媒体としての側面が結構強く、鳥羽さんが”バン”と前に来ているデザインです。

ブログを通じて、自分自身を世の中に売り込んで行きたいんだ！という方にはとても参考になるブログだと思います。

→トバログ

ツヨシウェブ

ツヨシウェブは、TOPページファーストビューに動画が設置されており、かなりデザイン性の高いブログになっています。

モノトーンのアイコンが、クールな中にもポップさを感じさせるアクセントになっていて、私もアイコンを取り入れたデザインにしたいなと思いました。

→ツヨシウェブ

manablog

manablogは、近年のブロガーの中では特に知名度の高い「マナブ」さんのブログですね。

ブログ全体はシンプルですが、ポップなイメージ画像に統一されているため、全体的に親しみやすいデザインになっているのが特徴です。

シンプルでおしゃれなデザインですが、これからブログを本格的に始めると言う方にもまねしやすいブログだと思います。

→manablog

サルワカ

サルワカも、近年、知名度の高いブログの一つです。

ポップな配色で可愛らしいデザインが特徴です。配色の知識が必要ですが、こちらも参考にしやすいブログデザインですので、まだ見たことがない方は一度チェックしてみてください！

→サルワカ

メディア編

「ブログ＝個人ブログ」というイメージが強いですが、おしゃれなブログデザインを作る際には企業の運営するオウンドメディア（企業ブログ）もとても参考になります。

経営ハッカー

経営ハッカーは、テレビCMSなどでもおなじみのクラウド会計システム「freee」が運営する経営者向けのメディアです。テーマカラーである青をメインにしたシンプルなデザイン、クールな印象です。

→経営ハッカー

「AIアナリスト」ブログ

「AIアナリスト」ブログは、AIを活用したアクセス解析ツール「AIアナリスト」が運営するブログメディアです。

とてもシンプルなデザインですが、イメージカラーのグリーンが映えており非常におしゃれな印象です。

また、アクセス解析ツールの会社というだけあり、CTAの位置やデザイン、設置の仕方など非常に参考になる点の多いブログです。

→「AIアナリスト」ブログ

マーケターのよりどころ「ferret」

「ferret」は株式会社ベーシックが運営するマーケター向けのメディアです。

こちらもシンプルながら親しみやすいデザインで、とてもコンテンツが見やすいメディアとなっています。

→マーケターのよりどころ「ferret」

サイボウズ式

サイボウズ式は、中小企業向けのグループウェア「サイボウズ」が運営するオウンドメディアです。サイボウズの価値観を記事にしたメディアで成功したオウンドメディアとして紹介されることも良くある、有名メディアです。

これまで紹介したメディアよりも、個人ブログ寄りなデザインなので参考にしやすいのでは無いでしょうか。

→サイボウズ式

WORKSIGHT

「WORKSIGHT」はオフィス用品メーカーである「コクヨ」が運営する”ワークスタイル戦略情報メディア”です。

ブログというと親しみやすいデザインのものが多いですが、スタイリッシュでクールな印象のデザインになっています。

→WORKSIGHT

LIG

https://liginc.co.jp/

「LIG」は、東京のウェブデザイン会社のオウンドメディアです。随所に遊び心が取り入れられた個性的なデザインが特徴です。

デザインをまねするというよりは、こういうメディアもあるよというところで紹介させてもらいました。

→LIG

デザインの基礎が学べる名著「ノンデザイナーズデザインブック」

一般的に「デザイン＝センス」と思われていますが、そうではありません。

デザインは技術という側面が強く、”基本”を学ぶことで誰でもできるようになります。

そこでおすすめしたいのが、デザイナーでは無い方がわかりやすくデザインの知識を身につけられる名著「ノンデザイナーズ・デザインブック」です。

「ノンデザイナーズ・デザインブック」は20年以上愛される、デザインに関する定番の書籍です。

ブログに限らず、読みやすい、見やすい、伝わりやすい、わかりやすいを実現するためのデザイン知識に関して紹介されています。

私は、新卒で入社した会社のチーフデザイナーさんに、この本を紹介いただき読みました。

今でもパワーポイントで資料を作成したり、サイトのデザインカンプを作成したりしますが、この本で学んだ知識がとても生きていると思います。

もし、デザインに関して学んでみたいと言う方は、この本を是非オススメします。

→「ノンデザイナーズ・デザインブック」

まとめ

この記事では、広告代理店でSEOディレクターをする かずたか/ウェブ解析士 が、誰でも簡単におしゃれなブログデザインを作るコツについて紹介しました。

デザインはセンスではなく知識です。

また、世の中には教材となるおしゃれなブログはたくさんあります。

そういったものを参考に、自分だけのおしゃれなブログを作成していただければ幸いです。せっかくブログをするなら”おしゃれ”なブログの方が良いですよね。

▶「マーケティングハック | ブログ集客のノウハウサイト」TOPへ