本記事のもくじ
おしゃれなブログを作りたい...と思ってる方は、ちょっと黄色信号ですよ！
この記事で紹介する「おしゃれなブログデザインの作り方」を実践すると、ユーザーファーストなブログデザインを構築できます。
そこで本記事では、そもそも「おしゃれなブログデザインとは？」を解説しつつ、ブログ運営に求められる本質的なデザインやコツを深堀りします。
この記事を読むと、Webデザイン初心者でも、ユーザーの心を惹きつける洗礼されたブログデザインを実装できます。
おしゃれなブログを作りたい...という思考はあるあるですが、方向性を間違えると、自己満なブログ運営になりかねません。
本記事にて5分ほど立ち止まり、ブログにおける"おしゃれ"なデザインの本質を一緒に考えてみましょう。
＼WordPressブログの始め方／
WordPressブログを始めるなら、僕も愛用する「エックスサーバー」一択ですよ。
- 初期費用が無料
- ドメイン2つまで永久無料
- 国内シェア&サーバー速度No.1【hostadvice.com（2024年）】
たったの月額ワンコインで始められます。10分でブログデビューしましょう！
-
-
【無料】たった10分でできるWordPressブログの始め方【エックスサーバー】
続きを見る
【執筆者】
【ミヤビ：当サイトの編集長】
- ブログ歴３年
- ブログ収益７ケタ達成
- ブロガー/デジタルノマド
おしゃれなブログデザインとは？
そもそも、ブログに「おしゃれ」って必要でしょうか？
結論「不要」だと思いまして、むしろ「見やすさ」「読みやすさ」が大切だと思います。
※いうまでもなく、ブログのデザインは重要です。つまり、サイトや記事の「見た目」でして、人は見た目で6割以上も判断することが知られてます。
【前提】おしゃれ ≠ 自己表現
SNSでもそうですが、自分のステージを「自己表現の場」と捉えてしまう人が多いです。
しかし、こーいった姿勢だと、たぶんですが、プロにはなれません。なぜなら、プロでさえ、自己表現をしないからです。
- YouTube：ユーザーの興味ある動画を作る
- ブログ：読者の悩みを解決する記事を作る
- テレビ：視聴率の取れる番組・企画を作る
このとおり、目線は「自分」ではなく、、、必ず「相手」です。
たとえば、自己流のおしゃれって、わりとダサいですよね...チェーン財布とか、トンガリ靴とか、いろいろ客観視できないんですよね。まさに「痛い人...」です。
ブログも同じでして「好きなことを書こう」みたいな記事ほど、読まれません。だから「おしゃれなブログを作ろう」という自己目線は、いったん忘れた方が「吉」ですね。
>> 関連：【悲報】ブログに自己表現は不要です【物書きは「調べる」が9割9分5厘6毛】
読みやすい > おしゃれなブログ
僕の考えですと、ブログにおけるおしゃれ =「見やすさ」「読みやすさ」と捉えてます。おしゃれな髪型や洋服でキメる...ではなく「清潔感」といった感じです。
- 一文が短い
- 表示速度が速い
- リズミカルな文章
- 結論がわかりやすい
- 適度にマーカーや画像がある
いくら"おしゃれ"にこだわっても、クドい文章や配色が雑だったら、それじゃあモテませんよね...
だから本記事では、おしゃれなブログ =「見やすい or 読みやすい（清潔感ある）ブログ」として、解説しますね。
しかし、ブログの役割は「有益な記事を届ける」こと。素人が素晴らしいデザインなど作れるハズもなく、時間をムダにしないよう注意しましょう。
おしゃれなブログデザインの要素
"おしゃれ"なブログを着飾るデザイン要素は、たとえば、下記のとおりです。
- 画像
- 引用
- 配色
- 見出し
- リンク
こーいった要素を織り交ぜつつ、リズムを与えつつ、ユーザーの悩みを包括的に解決します。
ブログはテキスト中心ですが、文字だけのコンテンツなど読まれません。正しくは、検索上位にヒットしづらい...ですが。（テキストは、いつの時代も読まれます）
本記事では、上記のような"おしゃれアイテム"についても、深掘りしますね。
ブログ全体をおしゃれにデザインする方法3つ
ブログの目的は「読者の悩みを解決する有益な記事を届ける」ことです。
だから、記事内容よりもデザインを優先しすぎると「木を見て森を見ず...」にて、失敗します。まずは、サイト全体の"清潔感"が大切です。細部のデザインは、後回しでOK。
- 方法①：WordPressテーマを使う
- 方法②：統一感を出す
- 方法③：レスポンシブ対応
いきなりイケメンを目指すのではなく、まずは"清潔感"を出しましょう。
ここが、デザインにおける「幹」ですね！
方法①：WordPressテーマを使う
おしゃれなブログデザインにするなら「WordPressテーマ」を使いましょう。
Webデザインやプログラミング知識がなくても、デザインテンプレートにて、プロ並みなデザインを構築できます。たとえば、下記のとおりです。
- トップページのカスタマイズ
- プラグインの導入
- 配色や背景
- プラグインの実装
- 表
- 吹き出し
- カルーセル
- アコーディオン
WordPressテーマの機能は、枚挙にいとまがありません。
可能性は無限大でして、サクッと導入した方が時間をムダにせず、コスパ良いです。
おすすめなWordPressテーマは、次章「ブログデザインをおしゃれにするWordPressテーマ」にて紹介しますね。
方法②：統一感を出す
ブログに"清潔感"を出すなら「統一感」を意識しましょう。
- フォントの大きさ、種類、カラー
- 背景色
- 段落、余白
- 画像の配置
- アイキャッチ画像
上記についても、WordPressテーマを使えば、カンタンに統一感を出せます。
人は統一感を好む傾向にあり、雑多なブログデザインは、読みにくいです。
方法③：レスポンシブ対応
パソコンだけでなく、スマホやタブレットでもデザインの崩れない「レスポンシブ対応」が大切です。
たとえば「表」を挿入する際、レスポンシブ対応すると、縦長なスマホ表示でも「横スクロール」が可能になります。
スマホに最適化されたデザインは、ユーザービリティが大きく向上します。これは「平均滞在時間」に影響をもたらすため、SEO対策としてかなり重要です。
今の時代、スマホで記事を閲覧する人が大半であることを忘れてはいけません。そのため、パソコンよりもスマホのデザイン設計を優先すべきです。
この点についても、WordPressテーマを使えば、カンタンにレスポンシブ対応できます。ぜひ、導入しましょう。
ブログデザインをおしゃれにするWordPressテーマ3選
WordPressブログでおすすめ人気なテーマを紹介しますね。
- その①：AFFINGER（アフィンガー）
- その②：THE THOR（ザ・トール）
- その③：SANGO（サンゴ）
経験にて、上記がおすすめです。
もちろん、ご自身でも使ってみないと、その良し悪しはわかりませんが、導入して「失敗だった...」みたいなことはありません。どうか、ご安心を。
詳しいWordPressテーマについては【比較】WordPressブログでおすすめな有料テーマ7つ【AFFINGER6一択】をどうぞ。
僕は「AFFINGER」を愛用してます！
その①：AFFINGER（アフィンガー）
AFFINGER（アフィンガー）は、圧倒的性能を誇る人気WPテーマです。
- 美しいデザイン
- 豊富なカスタマイズ機能
- 充実した内部SEO対策
ブログ運営に必要な機能がすべて詰まっており、理想のデザインを実装できます。
本音を言うと、カスタマイズ機能はややむずかしいです。正直「慣れ」ですが、チョコチョコいじってれば自然と使いこなせるようになりますが。
とりま「デモサイト」でも眺めつつ「なるほど...こんな感じのブログデザインを構築できるのか〜」とイメージを膨らませておきましょう。
その②：THE THOR（ザ・トール）
THE・THOR（ザ・トール）
は、おしゃれで美しい、洗練された人気WPテーマです。
「デザイン着せ替え機能」を使えば、プロのデザイナーによるおしゃれで美しいデザインを、1クリックでコピーできます。
アフィリエイトに特化したブログ運営にピッタリです。SEOにも強いと評判でして、ブログ・アフィリエイトで稼ぎたい方は、選択肢としての価値は十分ありますね。
気になる方は「デモサイト」から、イメージを膨らませてみましょう。
その③：SANGO（サンゴ）
SANGO（サンゴ）は、フラットデザインが特徴的な「居心地の良い」WPテーマです。
Web制作で役立つノウハウを発信するWebメディア「サルワカ」から生まれ、愛用してるブロガーはかなり多いですね。僕もブログを始めた当初は、SANGOデビューでした。
常に更新されてるため、以前より、メッチャおしゃれですね。また、新機能「SANGO Land」にて、450種類以上のデザインをコピペ実装できます。
SANGO独特のフラットデザインが気になる方は、まずは「デモサイト」をご覧ください。きっと、欲しくなるハズです。
ブログ記事をおしゃれにデザインするコツ10個
それでは、ブログ記事のデザインをワンランクUPさせる"おしゃれアイテム"を丁寧に解説します。
まさに、ブログデザインの「枝葉」ですね！
コツ①：タイトル
ブログ記事のタイトルは、クリック率に影響する大切な要素です。
デザイン性とは少しかけ離れるかもですが、微妙なタイトルだと、そもそも記事が読まれにくくなります。
魅力的なタイトルをつけるには、少々ポイントがあります。詳しくは【本質】ブログで適切な記事タイトルの付け方とは？【ポイントは5つだけ】をどうぞ。
コツ②：見出し
ブログ記事は「見出し」の使い方がとても大切です。
見出し
見出し（Heading）とは、記事内容を端的に説明した「章」を意味します。
- H1：記事タイトル
- H2：記事のメイントピック
- H3：H2の内容を細分化した見出し
- H4：H3の内容を細分化した見出し
見出しデザインは、WordPressテーマを導入することで、いろんなデザインをワンクリックで変更できます。
当サイトの見出しデザインは「縦型ボーダーライン」です。フォントの大きさやカラー、背景色なども自由に変えられるため、ブログ独自のデザインを施せます。
詳しい見出しの作り方については【コツ7つ】読まれるブログ見出しの作り方【SEOより読者にフォーカスせよ】をどうぞ。
コツ③：画像
ブログ記事には、適度に画像を挿入しましょう。
- H2見出し下
- 図解
当サイトでは、表示速度の対策として、あえて「H2見出し画像」を入れてません。
画像や図解があると、記事内容が分かりやすくなります。誰もテキストだけの記事など読みたくないので、適度に挿入しましょう。
その際は、画像もSEO対策すること。詳しくは【10選】SEOに効果的！おすすめ画像対策まとめ【PV1.5倍/画像検索の重要性】をどうぞ。
コツ④：表
表は、複数の項目を、異なる角度から整理するときに役立ちます。
| 春 | 夏 | 秋 | 冬 | |
|---|---|---|---|---|
| 赤 | サクランボ | スイカ | イチジク | リンゴ |
| 黄 | レモン | パイナップル | 梨 | ハッサク |
| 橙 | デコポン | マンゴー | 柿 | ミカン |
ブログに表を挿入するには、WordPressプラグイン「Advanced Editor Tools」がおすすめです。
しかし注意ですが、必ず「レスポンシブ対応」しましょう。表を「横スクロール」可能にすることで、縦長なスマホ画面でもデザインを損いません。
これは、ユーザーの「平均滞在時間」や「ユーザービリティ」に大きく関わるため、SEO対策、SXO対策としてもかなり重要です。
コツ⑤：箇条書き
要点をまとめる際は「箇条書き」を積極的に活用しましょう。
箇条書きは、要点をサクッと把握できるため、ユーザー目線です。むしろ活用しないと、長々と文章で説明しなければならないため、不親切だと思います。
コツ⑥：吹き出し
アクセントで「吹き出し」を使うと、文章にリズムが生まれますよ。
必須ではないですが、最近の傾向として、検索上位にも散見されますね。
吹き出しは、フリー素材ではなく、オリジナルなアイコンを作りましょう。ブログに"個性"が出て、独自性につながります。
とはいえ、吹き出しの多用はおすすめしません。読者が「読んでて、飽きそうなタイミング」で、ぴょこんと添えるイメージです。
WPテーマを導入すると、サクッと実装できます！
コツ⑦：マーカー・太字
伝えたい箇所に「マーカー/太字」を活用しましょう。というのも、本やブログでも「読み飛ばし」が基本だからです。
- 要点だけを把握できる
- 文章にリズムが生まれる
- 重要な情報を読み落とさない
マーカーや太字を活用すると、検索エンジンからも、重要な要素であると認識されやすくなります。
とはいえ、使いすぎもかえって読みづらくなるため、あくまで「ワンポイント」ですね。
コツ⑧：枠・背景
大切な「想い」を強調したい場合は「枠」や「背景色」で目立たせましょう。
こーいった「ボックス背景」があると、読みやすいですよね！
WPテーマを導入すると、多彩なバリエーションの枠組みデザインを実装できますよ。
コツ⑨：引用
他人のコンテンツをブログ記事に記載する際は、必ず「引用」しましょう。
WordPressブログでは、引用タグ「blockquote」が用意されてます。
引用タグ
引用デザインは、ユーザーにも検索エンジンにも一目でわかります。
引用には、いくつか「ルール」もあります。詳しくは【簡単】ブログで正しい引用の書き方とは？【5つのルールを守り、愛されよ】をお読みください。
コツ⑩：コンテンツ（動画/SNS投稿）
テキストや画像以外にも「動画」や「SNSコンテンツ」を含めると、独自性が出ますよ。
なるべく「マイ・コンテンツ」をおすすめしますが、他人のコンテンツでもOKです。たとえば、他人のツイートなんかは、勝手にブログに掲載しても問題ありません。
しかし、プラットフォームの利用規約や本人確認が必要になる場合もあります。また、こーいった要素はわりと重たいため、挿入のしすぎには注意しましょう。
以上が、ブログデザインの"おしゃれアイテム"です！
ブログデザインに統一感を出すコツ5つ
さらに、ブログデザインに"深み"を出すには「統一感」が大切です。
- コツ①：アイキャッチ画像を統一する
- コツ②：画像サイズや配置を統一する
- コツ③：段落や文字幅を統一する
- コツ④：リンクを統一する
- コツ⑤：配色を統一する
ブログ記事は、統一感がないと、かなり読みにくいですよ。日本人の"ワビサビ"は、必要ありません。
コツ①：アイキャッチ画像を統一する
まずは「アイキャッチ画像」のデザインを統一させましょう。
特にトップページにおいて、統一されたアイキャッチ画像は、まるで美術作品のごとく「芸術」を予感させます。デザインがバラバラだと、ブログの世界観がボヤけてしまいます。
当サイトでは、アイソメトリックなマテリアルデザインにて、統一してます。
画像なら、画像だけを。イラストなのか写真なのかも統一させること。テキストを入れる際は、文字は大きくハッキリさせましょう。
詳しいアイキャッチ画像の作り方は【Canva】ブログ用アイキャッチ画像の作り方【思わずクリックしたくなるコツ7つ】をどうぞ。
コツ②：画像サイズや配置を統一する
画像サイズも、なるべく統一させましょう。
正解はありませんが、画像サイズは「16：9」「4：3」などのアスペクト比をおすすめします。
詳しいブログの画像サイズについては【簡単】ブログ画像の適切なサイズ・容量とは？【最適化・圧縮化のススメ】をどうぞ。
コツ③：段落や文字幅を統一する
ブログの読みやすさは「余白」に隠されてます。
- 段落：Pタグ下の余白
- 文字幅：字間の余白
僕のこだわりを暴露すると、段落下の余白は「60px」に設定してます。
特にスマホ画面は小さく、余白や改行のない文章はとても読みづらいです。
そのほか、フォントサイズや種類によっても、印象は大きく変わります。必ずユーザー目線に立ち、読みやすさを意識しましょう。
コツ④：リンクを統一する
リンクカラーは、必ず「青系」に統一させること。
GoogleやYahoo!などの検索エンジンを分析しても、必ず「青」です。
これは、歴史と検証にて導かれた、もっともクリック率が高いカラーです。そして、僕たちも、リンク =「青」と刷り込まれてます。
リンクがリンクであるために、認識され、クリックされなければ意味ありません。変に「グリーン」などにすると、逆にリンクって分かりませんよね...
質問：リンクの種類も統一すべき？
基本的には「テキストリンク」一択です。
実際には「ABテスト」が一番ですが、ブログカードを優先させない方が良いと思います。
当サイトでは「テキストリンク」を優先してます。収益記事に誘導する場合は、テキストリンクとセットでカードリンクを添えると、クリック率が高まるかもしれません。
>> 関連：【コツ9つ】SEO最適化したブログ内部リンクの貼り方【リンクは添えるだけ】
コツ⑤：配色を統一する
ブログは「配色」が重要です。原色を使わず、落ち着いた、やさしい色を使いましょう。
- 背景色
- ヘッダーカラー
- フッターカラー
- テキスト
目にやさしい色がおすすめでして、たとえば、当サイトの記事タイトルは「#7b7b7b」です。
自己流で配色すると、120%失敗します。下記のサイトを参考にしつつ、こだわりましょう。
ブログデザインをおしゃれにする際の注意点6つ
ブログデザインを構築する際の注意点です。
注意点①：広告の貼りすぎ
ブログに広告を貼りすぎるのは論外。
ただでさえ、広告は嫌われやすいです。お金を匂わせると、離脱される可能性が高まります。あくまで、ユーザーの悩みを解決することが、ブログの目的ですので。
自我の出しすぎは、ダメですよ。
ステマ規制の強化
2023年10月1日より、ステルスマーケティング（通称、ステマ）の規制が強化されました。
ステルスマーケティング
ステルスマーケティング ステマとは、広告を広告でないかのように見せかけ、商品サービスを宣伝、口コミを行う行為のこと。
あくまで「広告主」側への規制ですが、広告をブログに掲載する際は、サイトや記事内に「広告明記」が必要です。違反すると、提携が解除される可能性もあります。
詳しくは、消費者庁「令和5年10月1日からステルスマーケティングは景品表示法違反となります。」をお読みください。
注意点②：表記ゆれ
テキストが統一されてない「表記ゆれ」をなるべく避けましょう。
検索エンジンは頭が良く、たとえ表記ゆれを起こしても、同じ言葉として認識できる場合が多いですね。
とはいえ、ユーザーにとってはストレスかもしれません。こーいった何気ない言葉でも、デザインに関わる細かいテクニックです。
表記ゆれを確認するには、グーグルChromeの拡張機能「文章校正と表記ゆれチェックツール」がおすすめ。ワンクリックで、ページ内の表記ゆれを発見できます。
注意点③：漢字・カタカナ・ひらがなの比率
文章を書くときは「漢字」「カタカナ」「ひらがな」のバランスを整えましょう。
黄金比は「ひらがな・カナカナ：漢字 ＝ 7：3」と言われてます。
僕も、常に気をつけてます。ブログ以外でも、仕事やLINEでも役立ちますね。
特に、むずかしい漢字や専門用語の多用は避けるべき。かたっくるしい印象を与え、読む気すら失せます。ひらがな多めで書きましょう。
注意点④：表示速度
デザインにこだわるあまり、サイトの表示速度が遅くなってはいけません。
表示速度が遅いと、離脱率が跳ね上がります。これは「読まれない」と同じ意味でして、デザインの方向性をミスると、おしゃれの価値が半減します。
表示速度の改善方法については【13個】WordPressブログの表示速度を高速化する方法【プラグインなしで実現】をどうぞ。
注意点⑤：一文が長い
一文が長いと、ストレスです。そもそも、テキストを読む =「苦痛」でして、長ったるい文章なんて、誰も読みたくないですよ。
例：『～することができます』
- NG：〇〇することができます
- OK：〇〇できます
例：『～なのではないでしょうか？』
- NG：〇〇なのではないのでしょうか？
- OK：〇〇ですよね？
このような「冗長表現」や「重複」を避けましょう。
Webライターでもそうですが、ムダに文字数を稼いでも、かえって信頼を失います。くれぐれも、一文は「短いが正義」ですよ。
>> 関連：【SEO】ブログ記事に最適な文字数とは？【結論、存在しません/ただし、目安アリ】
注意点⑥：過度な装飾
装飾の使いすぎは、かえって、見づらくなります。
- フォントカラーを変える
- マーカーをたくさん使う
- フォントサイズを変更する
- アンダーラインを引く
- リンク以外のテキストを青色にする
装飾は、あくまで「ワンポイント」ですので、使いすぎはNGです。
周囲のデザインや配色も考えつつ、見やすい、読みやすい記事を作りましょう。
ブログデザインのおしゃれでよくある質問3つ
おしゃれなブログデザインで独自性を出そう
本記事では、"おしゃれ"なブログデザインの作り方についてマルっと解説しました。
- ブログにおしゃれは不要
- それよりも「見やすさ」「読みやすさ」が大切
- WordPressテーマを導入する
- ブログ全体に統一感を出す
- レスポンシブ対応にする
まだ「WordPressテーマ」を導入してない方は、プロ級なデザインテンプレートにて、サクッと実装しましょう。まさに「時は金なり」です。
-
-
【比較】WordPressブログでおすすめな有料テーマ7つ【AFFINGER6一択】
続きを見る
WordPressブログの始め方
-
-
【無料】たった10分でできるWordPressブログの始め方【エックスサーバー】
続きを見る
最後までお付き合いありがとうございました。僕のTwitter（@ImperialMiyavi）もフォローしてもらえたら嬉しいです。ブログ運営に関するお役立ち情報を発信しており、ブログとセットで勉強できます！
