【初心者必見】おしゃれなブログの作り方！デザインルール17選と参考サイト紹介

ブログをするならおしゃれでカッコいいサイトを作りたいと誰しも思います。ただ、何も考えずにブログを作ろうとすると、おしゃれなブログ作りはなかなか難しいです。

• どんなデザインのブログにすればいいかわからない
• 色合いになかなか満足できない
• 記事が読みづらい

この記事では、ブログ初心者の皆さんにおしゃれなブログとは何か、何を意識すればオシャレになるのか、細かいルール、簡単におしゃれなブログを作る方法をご紹介します。

＼本サイトで利用しているWordPressテーマ／

おしゃれなブログとは何か？

オシャレなブログを一言で表すと、個性ある綺麗なデザインを持ちつつもシンプルに統一されているブログのこと。

個性ある綺麗なデザインであること

有名なブログや会社サイトを見ると、とても個性的かつ綺麗で、誰しもが憧れるデザインをしています。

このようなおしゃれなサイトは、見る人の心に残り覚えてもらえるため、ブランディングの確立に繋がります。

綺麗だからもう一度見てみよう！であったり、綺麗なサイトだから紹介させてもらおう！など、ブログを運営する上で「個性的で綺麗なデザインであること」はメリットがたくさんあります。

ただ注意したいのは、初心者が個性を出そうとしすぎると、ブログ内が煩雑になり違和感を覚えてしまう・見にくいなどのデメリットが目立ってしまうことがあります。

おしゃれだな！と思うようなサイトは、Webデザイナーやブログ運営歴5年などのサイト運営のプロが作っている場合がほとんどです。

そのため、個性的なデザインは中上級者向けで、初心者のうちはシンプルなデザインに注力することをおすすめします。

シンプルに統一されたデザインであること

おしゃれなブログを作ろう！としたときに、特に重要視したいのがデザインをシンプルに統一することです。

「シンプルに統一すること」をさらに言い換えると、ユーザーが違和感を感じないようにすること。

ユーザーは自分の悩みを解決するために記事を読みにきますが、ブログに違和感（誤字や長文など）を感じると文章に集中できません。その結果、読みにくいから他のページに行こう！と離脱してしまいます。

この違和感に直結する原因として、

• ブログの色合い
• 画像やパーツの配置
• 読みやすさ

などがあげられます。

こういったユーザーが不満に思ってしまうきっかけ（違和感）を取り除くために、ブログをシンプルに統一することが求められます。

おしゃれなブログを構成する３大要素

おしゃれなブログを作りたい時に、特に意識したい３つの要素を紹介します。

• ブログ全体の色合いがマッチしていること
• デザインが統一されていること
• 適度に画像が使われていること

これらの要素を意識することで、おしゃれなブログを作ることができます。

もっと具体的にはどんなことをすればいいの？という詳細な説明は『おしゃれなブログを作るためのルール』で追ってご紹介します。

要素１：ブログ全体の色合いがマッチしていること

１つ目はブログで使う色についてです。

ブログで使う色合いは、ブログの雰囲気を形作り、記事の大事なところを強調立たせ、読み手を疲れさせないなどとても重要な要素です。

実はこの色合いは、様々なメディアで定義されるほど難しいジャンルです。

特に注意したいのが以下の点です。

• サイトのジャンルに色合いがあっていること
• 使っている色同士が邪魔し合わないこと

これらは点はブログに訪れたユーザーが真っ先に感じてしまう違和感なので、注意が必要です。

こんな失敗を起こさないために、色合いにおけるポイントをまとめます。

要素２：デザインが統一されていること

２つ目はデザインの統一性です。

ブログのデザインが統一されていないと、ユーザーに混乱を与えます。

統一されていないモノによっては、不快感や汚さを覚えてしまう可能性もあるので重要視したいポイントです。

デザインの統一性を維持するために以下の点は注意しましょう。

要素３：興味を引く画像が適度に使われていること

３つ目は画像が適度に使われていることです。

画像は目に直接情報が入ってくるため、情報が伝わりやすく目を惹きます。

また内容によっては文章で伝えるよりも、画像や図解で説明する方がブログ全体がシンプルにまとまりユーザーも理解しやすいです。

１万文字の文章（文字のみ）と、画像が適度に使われた１万文字の文章では圧倒的に後者の方が読みやすいです。

その他にも画像を使うことで、以下のようなメリットがあります。

おしゃれなブログを作るための具体的なルール17選

おしゃれなブログを作るための３大要素を紹介してきましたが、次はもっと具体的なルールをご紹介していきます。

冒頭の『おしゃれなブログとは何か？』でご説明した通り、おしゃれなブログを構成するのは個性的なデザインの綺麗さとシンプルに統一することです。

個性的なデザインの綺麗さを実現するための

• 【綺麗】なデザインのルール

シンプルにする中でも特に文章をシンプルに読みやすくするためのデザインルール

• 文章を【見やすく】するためのルール

をそれぞれご紹介していきます。

ルールの前に！WordPressにはブログを簡単におしゃれにするテンプレートがあります

WordPressには、ブログ運営では欠かせないカスタマイズテンプレート「WordPressテーマ」があります。

テーマというのは、”ファッションをテーマにブログを運営する”などのジャンルや主題を表すテーマではなく、WordPressのカスタマイズテンプレートを指します。

WordPressテーマはデザインだけでなく、SEO（検索エンジン最適化）や記事執筆のしやすさなあらゆる面でブログ運営をを楽にしてくれるツールです。

WordPressでブログを運営している人は全員使っている必須のツールと言っても過言ではありません。

もう少し詳しくWordPressテーマについて詳しく知りたい方は『【決定版】現役ITコンサルタントが選ぶおすすめWordPressテーマ６選』を併せてチェックしてみてください。

これからブログをおしゃれ（綺麗に/見やすく）にするルールを17個ご紹介していきますが、WordPressテーマを使うことによって則りやすくなります。

綺麗にするルール：ブログ全体のカラーを統一する

ブログのカラー・色合い・色の組み合わせについてのルールです。

ルール1：色はブログのジャンルにマッチするものを選ぶ

ブログの色はユーザーにブログの内容を連想させます。

そのため、ブログのジャンルにあった色を使いましょう。

例えば、プロ野球（特に広島カープファン向け）のニッチな情報を発信するブログを運営するのに、青を基調としたデザインの場合、ユーザーはおそらく混乱します。

ジャンル×色を考えたときに、少しでも疑念を抱くような色合いはやめましょう。

また、ペットの飼い方や購入方法を発信するブログを運営する場合、温かみのある色合いにされる方がほとんどだと思います。真っ黒や真っ赤など、クールな印象を与える色合いがマッチしないと考えられるため妥当な選択と言えます。

ルール2：メインカラーはシンプルにする

メインカラー（背景色などブログの大部分を占めるエリア色）は、白やグレーなどシンプルな色を選択しましょう。

ブログはあくまでユーザーの悩みを文章で解決するメディアなので、ユーザーが文章を読みやすい色合いを選びましょう。

ルール3：色合いはプロのデザインを真似る

色合いの組み合わせは、実はとても難しい選択です。

カラーコーディネーターという職業があるくらい、色合いの組み合わせは奥が深く難しいです。

このように色合いで悩んでしまう場合は、プロの色合いを真似することをおすすめします。

参考として、メディア「サルワカ」の『COOL COLORS』というデザインパターンををご紹介します。

本ブログはこのサイトから色合いを参考に作成されています。

また本ブログでは、本ブログ利用のWordPressテーマ「SWELL」と「COOL COLORS」のカラーパターンを組み合わせたデモサイト例を紹介しています。

テーマ選び・色合い選びの参考に『WordPressテーマ「SWELL」デモサイトの色カスタマイズ例一覧』をチェックしてみてください。

綺麗にするルール：画像のルールを統一する

ルール4：アイキャッチ画像の世界観を統一する

アイキャッチ画像の世界観を統一することで、ブログをおしゃれにすることができます。

以下のような点を統一すると良いです。

• 色合い
• 画像なのかイラストなのか
• リッチデザインなのかフラットデザインなのか

ルール5：画像サイズを統一する

アイキャッチ画像やブログ内の画像のサイズを統一することで、ブログをおしゃれにすることができます。

画像の推奨サイズは、利用するWordPressテーマごとに異なるため、詳しくは「WordPressテーマ名 画像サイズ」で検索してみてください。

一般的な推奨サイズとしては、アイキャッチ画像はSNSにリンクをした際のサイズが推奨されます。

ルール6：オリジナルアイコンを使う

オリジナルのアイコンを使ってブログのおしゃれにしつつ、ブランディングを図りましょう。

オリジナルアイコンを使う理由は３つあります。

• おしゃれなブログに独自性を持たせるため
• ブログのブランディングを持たせるため
• SNSでのアイコンとして利用できるため

オリジナルアイコンについては、フリー素材ではなく少しお金をかけてでも独自のキャラクターを作成する方が良いです。

ブログ内だけで使う分にはフリー素材で十分なのですが、ブログのブランディングやSNS発信をするなら高品質なアイコンを使って、このブログといえば◯◯、◯◯といえばこのブログ！のようなブランディングを狙いましょう。

アイコンを手軽に作成依頼できるサービスとして、有名どころでは「ココナラ」があります。

>>ココナラで「アイコン作成依頼」 ←「アイコン イラスト」で検索しておきました！

綺麗にするルール：不要なものを画面に写さない

ルール7：固定フッター、追尾サイドバーは使わない

固定フッターや追尾サイドバーは、ユーザー目線でなくブロガー目線で設置している場合がほとんどなので、使わない方が良いです。

固定フッター、追尾サイドバーの要否は人によって意見が分かれるため、あくまで本ブログの見解です。

見やすくするルール：シンプルにかつスタイルの統一をする

ブログのメインコンテンツである「文章」をよりシンプルに、直感的に伝わる工夫を凝らすこともおしゃれなブログに効果的です。

文章は読むものですが、Web上の文章では「読む＜見る」ことで理解できる文章が求められます。

ルール8：表を使う

比較や情報の列挙では、表を適度に利用することで情報を見やすくまとめることができます。

ルール9：余白を入れる

文章に適度に余白を入れることで、読み疲れない文章を作ることができます。

ルール10：箇条書きを使う

情報の列挙の場合は、箇条書きを適度に使うことでよりシンプルに伝えることができます。

ブログを作るには、レンタルサーバー、ドメイン、WordPress、WordPressテーマ、記事を用意する必要があります。

よりも

ブログを作るには以下５点の用意が必要です。

• レンタルサーバー
• ドメイン
• WordPress
• WordPressテーマ
• 記事

のように箇条書きを効果的に用いることでシンプルに情報を伝えられます。

ルール11：枠・ボックスを使う

まとまりのある文章がある際は、ボックスを使うことをおすすめします。

先ほどのブログの必要なものを例にあげると

のように、コンテンツの境界がはっきりしつつ、何を表している情報なのかシンプルに伝えることができます。

ルール12：見出しを入れる

文章の変わり目に見出しを入れることで、読みやすい文章を作ることができます。

Webライティングでよく言われる技法としては、見出しを流し見するだけで理解できる文章構成が良いとされています。

ルール13：リンク色を統一

リンク色を統一することです。特にリンク色は青系にすることをおすすめします。

基本的にインターネット上のサイトでは、リンクは青色に統一されています。もし個性としてリンク色を奇抜な色にしたときに、ユーザーはその文字列をリンクと認識できない可能性があります。

そのため、リンク色は青色に統一しましょう。

Google推奨のリンク色は「#1a0dab」です。

ルール14：コンテンツ幅を揃える

コンテンツ（記事や画像）の幅を揃えることで、見やすいスッキリしたブログを作ることができます。

ルール15：色文字を多用しない

色文字を多用しすぎると、読みにくい文章になります。

そのため色文字は最小限に留め、読みにくい文章と感じる場合は太文字や「」を使う、あるいは文章そのものを見直すことを検討しましょう。

色文字を使う場合は、色のルールを明確にしておくこともおすすめします

ルール16：吹き出しを使う

吹き出し（第三者視点）を使うことで、見やすい記事を作ることができます。

ルール17：記事内の画像のテイストを統一

記事内で利用する画像のルールを統一することで、おしゃれなブログを作ることができます。

注意したいポイントとしては以下です。

• サイズ
• 配置（画像内の文字配置も）
• フォント
• 色合い

見やすい記事の詳細を以下にまとめています。読みやすくするためのルールもあるのでぜひ。

【準備中】見やすい記事のルールと読みやすい記事のルール

簡単におしゃれなブログを作るためにはWordPressテーマを使おう

ブログをおしゃれにするためのルールを17個ご紹介してきましたが、それぞれのルールを意識しながらブログ作成・記事執筆をするのは中々大変です。

そのためブログをおしゃれにするための、個人の独自性以外の設定はできるだけWordPressのデザインテンプレート（=テーマ）に任せることで、シンプルでおしゃれなブログを作ることができます。

WordPressテーマを使うと簡単にシンプルなデザインを実現できる

WordPressテーマを使うことで、デザインのプロが作ったルールを簡単にWordPressブログに反映することができます。

また、各WordPressテーマでは既におしゃれなデザインが完成されたデモサイトを用意しているため、ものの５分でおしゃれなブログを作ることができます。

WordPressテーマのデザインを自分仕様にカスタマイズすることで、自分だけの個性的なブログを作ることをおすすめします。

おすすめWordPressテーマ1：可愛い〜スタイリッシュまで「SWELL」

リッチデザインからフラットデザインまで、シンプルでおしゃれなデザインが得意なWordPressテーマ「SWELL」です。

＞＞『WordPressテーマ「SWELL」のインストール手順』はこちら

おすすめWordPressテーマ2：カッコいいリッチデザインの「AFFINGER6」

リッチデザインが特徴的で、特にパーツの配置位置などがとても自由なWordPressテーマ「AFFINGER6」です。

＞＞『WordPressテーマ「AFFINGER6」のインストール手順』

SWELLやAFFINGER6以外のおすすめテーマ

本記事ではおしゃれなブログを作るためのおすすめとして、SWELLやAFFINGER6を紹介していますが、デザイン面以外で見ても2021年12月現在で見てもSWELLとAFFINGER6が最強と言っても過言ではありません。

ただし、他にはどんなテーマがあるんだろう？であったり、なぜSWELLやAFFINGER6がいいのか具体的に知りたい方は『【決定版】現役ITコンサルタントが選ぶおすすめWordPressテーマ６選』も併せてチェックしてみてください。

おしゃれなブログには欠かせない綺麗なアイキャッチ画像の作り方

おしゃれなブログを作る上で、アイキャッチ画像はとても重要です。

特に、トップページやカテゴリーページ、タグページはブログの色合いとアイキャッチ画像がおしゃれかどうかの分岐点とも言えるでしょう。

また、記事をSNSなどのメディアで紹介する際にもアイキャッチ画像が顔になってきます。

そんなブログ作成には欠かせないアイキャッチ画像の作り方として、おしゃれなアイキャッチ画像を作るためのルールとツールをご紹介します。

おしゃれなアイキャッチ画像を作る上でのルール

おしゃれなアイキャッチ画像を作るためには、様々なルールがあります。

ただその中でも重要なのはアイキャッチ画像はあくまで、記事を表す画像です。その記事が何の記事なのかがわからないアイキャッチ画像では意味がないので、記事の主題を表現する画像作りを心がけましょう。

その上で以下の点に注意してアイキャッチ画像を作りましょう。

アイキャッチをオシャレに作るツール「Canva」

アイキャッチ画像を作るための無料ツールとして「Canva」をご紹介します。

Canvaはソフトのインストールなどは不要、でWeb上でアイキャッチ画像を作ることができるツールです。

アイキャッチ画像を作るなら「Canva」となるくらい有名なツールです。

パソコンだけでなく、スマートフォンでもAppを落として簡単にアイキャッチ画像が作れるためとても便利なツールです。

Canvaでの詳しいアイキャッチ画像作成の手順・使い方は『【準備中】Canvaの使い方』でご紹介しています。併せてチェックしてみてください。

【準備中】Canvaの使い方

おしゃれなブログの先輩達を紹介！おしゃれは真似しよう

運営者の独断でおしゃれ！と感じるブログを紹介します。

まとめ：おしゃれなブログは誰にでも作れる

今回は「おしゃれなブログの作り方」をご紹介してきました。

おしゃれなブログを作るためには、ルールに従って「ユーザーに違和感を与えない」シンプルさを追求しつつ、個性的なデザインを組み合わせることが大事です。

ただし直感的にわかるルールもあれば、意味は理解してもブログに具現化するには専門的なルールもたくさんあります。

ルールに従うことはとても重要ですが、ルールに縛られて手が止まってしまうことは勿体無いので、ルールを意識しつつちょっとした逸脱は看過してでもブログを作っていきましょう。

WordPressのデザインテンプレートであるWordPressテーマは、このようなルール群をデフォルトで縛ってくれる素晴らしいツールなので、ルールはWordPressテーマに任せて、個性を出すところに注力することも検討してみてください。

おしゃれなブログを作るためのロードマップ

以下の手順でおしゃれなブログ作りに挑戦してみてください。