おしゃれなブログデザインを作る15のコツ&参考サイト22選 https://yujiblog.org/blog-design
おしゃれなブログデザインを作る15のコツ解説しました。 ブログのデザインは「印象」や「読みやすさ」に直結するので、キレイに整えておくことで大きなプラスの要素になります。 基本ルールを守れば悩むことなくデザインを再現できるので、ぜひこの記事を参考にしてみてください。 また、図解の簡単な作り方も紹介したので、こちらもブログ運営に役立てていただければと思います。
1. ブログデザインの効果とは？
1.1. 前提
1.1.1. ブログデザインは、記事の内容や文章構成と同じくらい大切な要素です。
1.1.2. 例えばブログのデザインを整えておくと、以下の効果があり、ブログ収益化にプラスの影響があります。
1.1.3. 直帰率が減る 滞在時間が伸びる アクセス数が増える ファンが増える
1.2. ブログデザインは時短で作る
1.2.1. ただし、ブログをデザインする作業では「時短」を意識してください。
1.2.2. ブログ運営のメインの仕事は、あくまで記事を書くことです。
1.2.3. 優先度でいえば、デザインよりも記事執筆の方がはるかに重要なので、時間のかけすぎに注意しましょう。
1.2.4. また、素人がデザインを考えたところで、そう簡単に良いものが作れるはずがありません。
1.2.5. なので、デザインの要点だけを押さえて、効率よく対策するのがおすすめです。
1.3. ブログデザインの2つのルール
1.3.1. ブログデザインは、大きく2つの方向性で作ることができます。
1.3.2. ブログ全体をおしゃれにするデザイン 文章を読みやすくするデザイン
1.3.3. どちらも特別なスキルは不要なので、以下で紹介するものを実践してみてください。
2. ブログ全体をおしゃれにするデザイン5個
2.1. ブログをおしゃれにすると「ハロー効果」で記事の説得力が上がります。
2.2. ①シンプルな色使いにする
2.2.1. ブログデザインに使う色は、シンプルさを意識しましょう。
2.2.2. まずは色に関するルールとして、以下を意識するだけでもブログの見た目が整います。
2.2.3. 原色は使わない：明度・彩度を下げて落ち着いた色を使う 使う色は4色以内：メイン20%・背景75%・アクセント5%・文字色
2.2.4. そして基本は白/黒/グレーなどの落ち着いた配色で、テキストの見やすさを最優先にしてください。
2.2.5. 文字を読みやすくする 雰囲気を壊さない 認知の邪魔にならない
2.2.6. ※文字には目に優しい色を使うのがおすすめで、当ブログでは#333333を使用しています。
2.2.7. また、色のバランスは以下の配色パターンを参考にしてください。
2.2.8. https://saruwakakun.com/design/gallery/palette
2.2.9. https://www.schemecolor.com/
2.2.10. https://www.canva.com/ja_jp/learn/100-color-combinations/
2.3. ②ブランドカラーを決める
2.3.1. ブログデザインでは、色の持つイメージを利用して「ブランドカラー」を決めましょう。
2.3.2. 【色の影響】 白：清潔/正しさ 黒：高級感/権威 グレー：大人/落ち着き 赤：活力/情熱 青：信頼/速度 緑：安定/自然 黄：軽快/カジュアル ピンク：可愛さ/柔らかさ
2.3.3. このような色の心理効果で、ブログの印象を方向付けることができます。
2.3.4. ブランドカラーは途中で変更してもいいので、相手に与える印象を判断基準にしてください。
2.3.5. ユーザーに伝えたい想いは？ ブログの思想を最も表している言葉は？
2.4. ③統一性を意識する
2.4.1. デザインに必要なのは、統一性です。
2.4.2. 文字の大きさを揃える フォントは1つに絞る 画像の大きさを均一にする 見出し/枠の雰囲気を合わせる テイストが違う絵を混同させない
2.4.3. このように見た目を整えることで、読者の集中力が切れることがなくなり、ブログの記事内容が伝わりやすくなります。
2.5. ④アイキャッチの雰囲気を合わせる
2.5.1. アイキャッチ画像はブログ内のあらゆる場所や、SNSでシェアしたときに表示されるので、雰囲気を大事にしましょう。
2.5.2. 全て同じデザインにする必要はないですが、統一感を持たせておくと効果的ですね。
2.5.3. 簡単な作成手順とデザインのコツを以下にまとめていますので、是非参考にしてみてくださいね。
2.5.4. https://yujiblog.org/blog-eye-catching
2.6. ⑤余白をつくる
2.6.1. ブログのデザインでは「余白」を使うとバランスが整います。
2.6.2. 行間を空ける 枠に余裕をもたせる ページ両端に空白を作る ひらがな7：漢字3で読みやすくする
2.6.3. このように、ブログ全体にゆとりを持たせることで「ごちゃごちゃ感」を減らせます。
2.7. WordPressテーマを使う
2.7.1. ブログの見た目を整えるには、WordPressテーマの利用が必須。
2.7.2. プロ仕様のデザインを手軽に実装できるので、以下のぺージから気に入ったものを使ってみてください。
2.7.3. https://yujiblog.org/wordpress-theme-recommend
3. 文章を読みやすくするデザイン10個
3.1. 続いて、文章を読みやすくするデザインについて解説します。
3.2. ①箇条書きを使う
3.2.1. 具体例や条件などが3つ以上揃うときは、すぐに箇条書きにまとめましょう。
3.2.2. 情報がまとまる 注目されやすい 文字数を減らせる 無駄をはぶける
3.2.3. このように、文章に緩急を付けながら読者をサポートできますよ。
3.3. ②枠・背景色を使う
3.3.1. 要点や具体例を書くときなどは、枠や背景色で情報を目立たせましょう。
3.3.2. 記事のポイントを区別できる 読者を飽きさせない
3.3.3. といった効果があります。
3.4. ③画像・図解を使う
3.4.1. ブログ記事には、適度に画像を挟むのがおすすめです。
3.4.2. 例えばH2ごとに画像を入れることで、話の区切りがわかりやすく、読者さんにとって若干の休息になりますね。
3.4.3. ちなみに当ブログではフリー素材を利用しており、以下でおすすめのサイトを紹介しています。
3.4.4. https://yujiblog.org/freepic
3.5. ④アイコン・吹き出しを使う
3.5.1. アイコンや吹き出しを使って、文章にリズムを作ることができます。
3.5.2. ブログに本腰を入れている方なら、似顔絵やオリジナルのキャラクターを制作するのも効果的です。
3.5.3. https://yujiblog.org/blog-icon
3.6. ⑤見出しを目立たせる
3.6.1. 見出しは読者にとって、記事内容を把握するための大切なポイントです。
3.6.2. 文章構成を正しく伝えるためにも、目立つ大きさ・デザインで装飾しましょう。
3.6.3. また、複雑な情報構造は理解されにくいので、見出しはH2〜H3までにするのがおすすめです。
3.7. ⑥文字装飾は控えめに
3.7.1. ブログでは、文字装飾の使いすぎに注意しましょう。
3.7.2. ✕…文字を大きくする ✕…文字色を変える ✕…アンダーライン
3.7.3. こうしたデザインは見た目がごちゃついて読みにくくなってしまいます。 （※アンダーラインはリンクと誤解されるのでNG。）
3.7.4. 記事内で強調したい箇所は、大手メディアでも使われている、見慣れた装飾を使いましょう。
3.7.5. ○…太文字 ○…マーカー
3.7.6. また、Googleのジョンミューラー氏は「段落上の重要なポイントを太字にすることは、 SEOやランキングに役立つ」と解説しています。（SearchEngineRoundTable） https://www.seroundtable.com/google-bold-seo-32418.html
3.8. ⑦文章表現を統一する
3.8.1. アルファベットや送り仮名などの文章表現は、ブログ内で統一しましょう。
3.8.2. WordPress ↔ ワードプレス 申し込み ↔ 申込み 12月 ↔ １２月 3つ ↔ 三つ
3.8.3. どちらが正解などは決まっていませんが、ばらつきがあると不自然な印象を受けます。
3.9. ⑧漢字かなの比率を整える
3.9.1. 読みやすい文章にするには、漢字・ひらがな・カタカナのバランスが大切です。
3.9.2. 漢字：30% ひらがな：60% カタカナ：10%
3.9.3. このようなざっくりとした目安で、読みやすい比率を意識しましょう。
3.10. ⑨文章は短くまとめる
3.10.1. 文章は、長くなりすぎないように注意してください。
3.10.2. 流し見をしているユーザーにとっては適度に短い文章の方が理解しやすく、PC・スマホの両方で読みやすいです。
3.10.3. 同じことを何度も言わない 単語の重複を避ける 見出しには体言止めを使う
3.10.4. このような工夫で文字数を減らすと、ブログの視認性が改善します。
3.11. ⑩広告を減らす
3.11.1. ブログの広告の貼りすぎはNGです。
3.11.2. アドセンス広告 バナー広告
3.11.3. はベタベタ貼っても意味がないので、控えめにしておきましょう。
3.11.4. 広告を減らしつつ的確にクリックしてもらう方法をまとめたので、以下をご覧ください。
3.11.5. https://yujiblog.org/affiliate-ads
3.12. この他にも読みやすい文章を書くテクニックを以下で深掘りしてますので、こちらも是非お読みください。 https://yujiblog.org/blog-writing-ability
4. ブログで使える図解のデザイン方法3つ
4.1. ブログ記事では、図解があると内容が伝わりやすくなります。 そこで、素人にもできる図解のデザイン方法を簡単にまとめました。
4.2. ①トレースする
4.2.1. ブログで図解を作るときは、プロが作ったデザインをトレースするのがおすすめです。
4.2.2. たとえばGoogle画像検索で、次のものを入力すると、参考になるデザインが表示されます。
4.2.3. 対立 図解 段階 図解 比較 図 具体化 図解 抽象化 図解 関係図 テンプレート 因果関係 テンプレート ロジックツリー フローチャート マトリックス図 ピラミッド図 サイクル図 ステップ図 ベン図 座標図
4.2.4. こちらをそのまま盗用するのはNGですが、構造をマネすることで素人でもデザインが可能ですね。
4.2.5. また、以下のサイトでも、参考になる画像やスライドが見つかります。
4.2.6. https://the.alleslide.com/ https://cone-c-slide.com/see-sla/ https://www.pinterest.jp/
4.3. ②テンプレをそのまま使う
4.3.1. 画像編集ソフトやスライド作成ソフトには、以下のような図解のテンプレが用意されていることが多いです。
4.3.2. こうした素材はデザインとして完成されているので、ベースは崩さずにこのまま使いましょう。
4.4. ③見やすさを最優先する
4.4.1. 図解のデザインでは視認性が大切なので、見やすさを最優先してください。
4.4.2. 文字や線を減らす 枠・矢印は細くする 文字を読みやすくする 縦や横のラインを揃える 中央に寄せて余白を作る 影や枠などの特殊効果を使わない
4.4.3. こうした最低限のルールだけ守っていれば、狙い通りにデザインに注目してもらえるようになります。
4.4.4. また、画像1枚に複数のメッセージが入っていると理解しにくくなるので、メインメッセージは1つに絞りましょう。
5. ブログデザインの参考サイト5つと、おしゃれなブログ17選
5.1. ここからは、ブログデザインを作る上で参考になるサイト5つと、おしゃれなブログを17個紹介します。
5.2. awwwards.
5.2.1. awwwards.は、海外のおしゃれなWebデザインを探せるサイトです。 デザイナー投票とユーザー投票が行われており、世界中のデジタルデザイナーが日々新しいアイデアを発見しています。
5.2.2. https://www.awwwards.com/
5.3. Siiimple
5.3.1. Siiimpleは、海外のシンプルなページをまとめたサイトです。 ホワイトがベースになっているので、余白を大事にしたいWebデザインの参考になります。
5.3.2. https://siiimple.com/
5.4. MUUUUU.ORG
5.4.1. MUUUUU.ORGには、クオリティが高い縦に長いサイトが厳選して掲載されています。 プロが作ったデザインをまとめてみれるので、ブログだけでなくLP作成やなどにも参考にできます。
5.4.2. https://muuuuu.org/
5.5. I/O 3000
5.5.1. I/O 3000は、Webデザインに関わる人のためのWebデザインギャラリーサイトです。 国内外を問わず、Web制作の参考となるサイトがまとめられています。
5.5.2. https://io3000.com/
5.6. イケサイ
5.6.1. ikesai.comは「いけてるサイト」をピックアップして掲載するサイトです。 カテゴリ分けされており、参考にしたいジャンルのホームページを簡単に見つけることができます。
5.6.2. https://www.ikesai.com/
5.7. ここからは、個人的にデザインが好きなサイト17個です。
5.8. カラシソエルの絵と文具
5.8.1. https://karashi-soell.com/press/
5.9. macaroni
5.9.1. https://macaro-ni.jp/
5.10. milieu
5.10.1. https://milieu.ink/
5.11. monograph
5.11.1. https://number333.org/
5.12. トバログ
5.12.1. https://tobalog.com/
5.13. サルワカ
5.13.1. https://saruwakakun.com/
5.14. DESIGN MEMO
5.14.1. https://designmemo.jp/
5.15. BOTANIST
5.15.1. https://journal.botanistofficial.com/
5.16. WIRED
5.16.1. https://wired.jp/
5.17. DRESS CODE
5.17.1. https://www.fukulow.info/
5.18. lopan
5.18.1. https://lopan.jp/
5.19. eureka.design
5.19.1. https://eureka.design/
5.20. world of wanderlust
5.20.1. https://worldofwanderlust.com/
5.21. hand luggage only
5.21.1. https://handluggageonly.co.uk/
5.22. brit+co
5.22.1. https://www.brit.co/
5.23. microsoft story lab
5.23.1. https://news.microsoft.com/stories/
5.24. zoella
5.24.1. https://zoella.co.uk/
6. おしゃれなデザインのWordPressテーマ5選
6.1. デザイン性の高いおすすめのWordPressテーマは、以下の5つです。
6.2. ①SWELL（スウェル）
6.2.1. SWELLは、現在人気が急上昇しているテーマです。
6.2.2. また「デザインのセンスがないので心配」という方でも、デモサイトと同じカスタマイズをダウンロードできるので、色味や画像を変えるだけでオリジナルなブログが作れます。
6.2.3. 実際に使ってみたレビューは、以下の記事にまとめています。
6.2.4. https://yujiblog.org/wordpress-swell
6.3. ②STORK19（ストーク19）
6.3.1. STORK19は、きれいなブログを簡単に作ることができます。
6.3.2. 人気WordPressテーマの多くは自由度が高いですが、見栄えを良くするにはセンスが必要。
6.3.3. 一方、STORK19は最初からデザインが整っているので「誰が使っても美しい」状態に仕上げることができます。
6.3.4. 初心者向けの優しい作りになっているので、設定に時間をかけたくない方にはSTORK19がおすすめです。
6.3.5. STORK19の評判・口コミは、以下の記事をご覧ください。
6.3.6. https://yujiblog.org/stork19
6.4. ③THE THOR（ザ・トール）
6.4.1. THE THORは、デザイン着せ替え機能が人気のテーマです。
6.4.2. プロのデザイナーが作成した美しいデザインを1クリックで利用できるのが特徴です。
6.4.3. きれいなデザインでブログを楽しみたい方は、THE THORがおすすめです。
6.5. ④Sango（サンゴ）
6.5.1. Sangoは、サイト全体がフラットデザインになるテーマです。
6.5.2. 読者にとって読みやすく、編集者にとっては記事執筆がしやすい、使い心地を追求したデザインが人気です。
6.5.3. 初心者でも気軽に使えるので、デモサイトで確認してみてください。
6.6. ⑤Cocoon（コクーン）
6.6.1. Cocoonは、デザインの着せ替えが可能な、無料WordPressテーマです。
6.6.2. カスタマイズもしやすく、自分の好みに合わせてブログデザインを作ることができます。
6.6.3. また、当ブログのCocoonカスタマイズは以下の記事で紹介していますので、参考にしてみてください。
6.6.4. https://yujiblog.org/cocoon-customization