【Webデザイナーが解説】見やすいブログのデザイン・書き方14選

この記事で解決できる悩み

こんな悩みを解決する記事を用意しました！

ボクの初めてのブログも「30万PV」を超えるメディアに成長しました！

本記事の信頼性

なぜなら、全サイトで「見やすい・読みやすいブログ」を徹底してきたからです。

前職はフリーランスの「Webデザイナー」なので、企業のWordPressサイトや個人のLPをいくつも作ってきました。

また、ブログで累計５億稼いだ「クニトミさん」には、こう言ってもらえたんです。

今まで見た中でいちばん綺麗なサイトでした！
クニトミ

そこで、記事の前半で「見やすいブログの注意点」を。

後半では「見やすいブログを作るコツ〝デザイン編と書き方編〟」を解説します。

本記事を最後まで読むことで、初心者でも「見やすく・読みやすいブログ」をデザインできますよ！

見やすい・読みやすいブログとは【大前提】

見やすい・読みやすいブログとは、以下２つを満たした記事のことです。

見やすい・読みやすいブログとは

〝読者はブログを読まない〟という大前提のもと、読者の気持ちを考えた「デザイン・書き方」を常に意識しましょう。

見やすい・読みやすいブログを作る４つの注意点

見やすい・読みやすいブログの「注意点」は、次のとおり。

この章のもくじ

見やすいブログを作るコツの前に、〝デザイン・書き方〟に共通する「注意点」から。

注意点①スマホでも確認する

ブロガーはPCで記事を書きますが、読者のほとんどはスマホで読んでいます。

とはいえ、スマホで確認するには「記事を公開」しなければなりませんよね。

そこで、ブラウザの「検証（デベロッパーツール）」を使います。

Webデザイナーは、みんなこの「検証」を開きながら、サイトを作っています。

これで、プレビューでも「スマホ表示」で確認することができますよ。

注意点②装飾・文章を続けない

装飾には、文章が続くことで読む気をなくす「読者の離脱率を下げる」目的があります。

読者はブログを読まないんです😭

３つのNot

なるべく読まずに「知りたい・解決したい」と思っているわけですね。

なので、Yahoo!ニュースのような「文章がただただ続く記事」はそっとブラウザバック（戻るを押すこと）されます。

そこで「装飾」を使うわけですが、装飾が続くのもそれはそれで変なので「文章で装飾をサンドイッチ」しましょう。

文章で装飾をサンドイッチ

このブログを読み進めてもらえばわかりますが、「装飾も文章も続かない」ようにデザインしてあります。

注意点③色を使いすぎない

WordPressテーマにはたくさんの「装飾」が用意されています。

とはいえ、使いすぎるとカラフルでダサいんですよね。。。

３〜５色まで

ベースとなる「背景色や文字色」をふくめても「５色まで」としましょう。

とくにリンクはぜったい青！

リンクは「青」、注意点は「赤」など、一般的にみんながそう考える色を選びましょう。

ここにオリジナリティは一切いりません！

また、マーカーを多用するとぜんぶ目立ってしまうので「ここぞ！」という部分にだけ使ってくださいね。

注意点④広告を貼らない

ぶっちゃけ、広告ってジャマですよね？

ブログを「見にくく・読みにくく」するだけでなく、サイトを重くしているのです。

サイトが重くなる原因

「広告」はブロガーのため。「広告」以外は読者のため。

もし、あなたが「アフィリエイトで稼ぎたい」なら、思いきってアドセンスを捨てるのも一案です。

見やすい・読みやすいブログを作るコツ９選【デザイン編】

見やすい・読みやすいブログを作るコツ「デザイン編」は、次のとおり。

この章のもくじ

「書き方編」の前に、取り入れやすい「デザイン編」から解説します！

その①見出しを入れる

大前提として、記事の中に「見出し」を作りましょう。

ボクは「H2とH3」のみ使っています（多くても「H4」まででOK）。

見出しを作るメリット

たとえば、いま読んでくれている「見出し」はこんな感じ👇

この見出しの構成

１つの「見出し」に対して、「伝えたいこと」が１つ。

あなたは記事を書きやすいし、読者は読みやすい。Googleもこう言っています。

わかりやすい見出しを使用して重要なトピックを示すと、コンテンツの階層構造が作成され、ユーザーがドキュメント内を移動しやすくなります。
検索エンジン最適化（SEO）スターター ガイド

さらに、Googleのクローラー（ロボット）がブログ内を回遊しやすくなり、記事の内容を理解してくれるんです。

また、そもそもブログは真っ白なエディタに、いきなり文章を書くものじゃありません。

「記事構成（もくじ）」を作ってから、本文を書くのです。

合わせて読みたい

くわしくは、【超有料級】の別記事をどうぞ🙌

その②画像を入れる

読者のために、ブログには「画像」を用意しましょう。

それぞれの用途

これも読者のためです。「注意点」が次のとおり。

画像の注意点

順番にサクッと解説しますね！

フリー画像サイト３選

結論、この３サイトをブックマークしておけばフリー画像には困りません。

とはいえ、高画質なあまり「4,000px」などの大きい画像であることがほとんど。

ブログ記事内の最大幅は、MAXでも「1,200px」ほどなので、かならず縮小してから使ってくださいね。

当ブログの場合

画像の縮小・圧縮はWebサービス『Squoosh』を使っています。

Googleが提供する無料サイトなので、おすすめですよ。

altタグとは

代替テキストに入れる「説明文」のことですね。

Googleのロボットは、画像を見てどんな画像かを判断できません。

altタグの説明文で判断しているだけなので、かならず書きましょう。

代替テキスト

とくに決まりはありませんが、キーワードをふくめると「SEO的」にもいいですね◎

また、できれば「オリジナル画像」を用意するのがベスト。

コスパのいい作り方

フリー画像より「文字入れしたオリジナル画像」の方が評価されますよ。

関連記事【Canvaで５分】ブログ用アイキャッチ画像の作り方と最適サイズ

その③箇条書きを使う

装飾でいちばん使うのが「箇条書き」です。この記事内でも大活躍してますよね！

ただの箇条書きではなく、「ボックス」で囲った方が見やすいです。

とはいえ、こんなときは箇条書きより「テーブル表」を使いましょう。

こんなときはテーブル表

つぎの見出しに続きます。

その④テーブル表を使う

表は横にスクロールできます

商品の「比較やスペックをまとめる時」なんかに重宝しますね。

当ブログでは、横にスクロールできるようにしています。

その⑤ボックスを使う

ボックスこそ「使いすぎ禁止」です。

当ブログでは「シンプルなものを３つ」だけ用意しています。

箇条書き用ボックス

「吹き出し」以外で、文章を装飾したいときはコレ👇

そして、誰かの名言などを「引用するとき」はコレです。

〝疑わない事〟それが〝強さ〟だ!!!
シルバーズ・レイリー

ブルーとグレーだけのシンプルな色にしています。

その⑥吹き出しを使う

「LINE風のチャット形式」で話を進められて便利ですよね。

WordPressテーマに依存しないコピペOKな「吹き出しの作り方」は別記事をどうぞ👇

関連記事【コピペOK】ブログの吹き出しの作り方３選をWebデザイナーが解説

その⑦マーカー・太字・赤文字を使う

この３つは「箇条書き」などの装飾内ではなく、「文章部分」に使います。

「ブログを読まない読者」は、ここしか見てません👇

読者が最低限みるやつ

読者はなるべく「読まずに理解したい」ので、読まない前提でデザインするといいですよ。

その⑧目次を入れる

ブログには、かならず「目次」を入れましょう。

なぜなら、読者が「読みたい見出し」へスキップできるから。

もくじの作り方

『Table of Contents Plus』などのプラグインを入れるのが一般的ですが、おすすめは「自作すること」。

プラグインのデメリット

とくに、目次のプラグインは「不具合が起こりやすい」です。

まだ記事数が少ないなら、自作するのがおすすめ。

長くなるので、別記事を用意しました👇

関連記事【コピペOK】ブログの目次の作り方｜プラグインなしで自作しよう！

その⑨余白（改行）を入れる

書き方編の「一文を短くする」にも通じる概念ですが、文章が詰まってると圧迫されるからですね。

専門的にいうと

テキストなど要素まわりの余白を「margin（マージン）」と言います。

margin-bottom（マージン・ボトム）は「60px」がおすすめ。

なにより、「余白を統一すること」が大切です。気になる人は気になりますからね。

見やすい・読みやすいブログを作るコツ５選【書き方編】

見やすい・読みやすいブログを作るコツ「書き方編」は、次のとおり。

この章のもくじ

順番に見ていきましょう！

その①見出しを結論にする

本文は「PREP法」を使いましょう。

PREP法とは

頭文字をとって、「PREP法」ですね。具体的には、次のとおり。

表は横にスクロールできます

大事なことなので、何度でも言いますが・・・

読者は読まないので、「見出しだけ」で何が言いたいのか伝わるように設計しましょう。

関連記事ブログの見出しの作り方３ステップ｜付け方でSEOを制す！

その②一文を短くする

PCだと短く感じますが、スマホだと「60文字で3行」くらいになるんですよね。

どんな文章でも「60文字あれば」いったん切れるはずなので、目安にしてくださいね。

その③漢字・ひらがな・カタカタはバランスよく

これが「文章の黄金比」になります。

とはいえ、ふつうに書いてたら、漢字の比率はもっと多くなるはず。

漢字はひらく

漢字をあえて「ひらがな」にすることを「漢字をひらく」といいます。

ひらがな化する漢字を自分なりに決めておきましょう。

とはいえ、ひらがなが続きすぎるのも読みにくいですよね。

その④同じ文末をくり返さない

同じ文末が続くのも「読みにくいブログあるある」です。

「機械的＋アホっぽく」見えるので、意識的に変えましょう。

この５つでOK

基本的に、この５つの文末が「二回連続しない」ように配置すればOK。

もちろん本記事もそうなってるので、意識して読みすすめてみてくださいね。

その⑤文章は３〜５行に抑える

文章は装飾でサンドイッチするんでしたよね。

文章を装飾でサンドイッチ

文章が３〜５行続いたら、かならず「装飾・画像・見出し」のどれかを入れてください。

なぜなら、スマホの画面が「文章だけで埋まってしまう」から。

この記事で何度も言っている読者に「圧迫感」を与えないためです。

当ブログのデザイン・装飾を大公開！【WordPress編】

すでに、お気づきの方も多いかもですが、当ブログのデザインは『manablog』そのものです。

この章のもくじ

WordPressテーマ『AFFINGER』の中に、マナブログを完全再現しています。

パターンAManablog copyをコピーする

テーマ『manablog copy』はすでに販売を停止しているので、マネしたい方は以下をどうぞ。

HTML/CSSコードをコピペできますよ。

関連記事Manablog copyのデザインを完全再現【マナブログコピー】

パターンBAFFINGERをカスタマイズする

また、当ブログ経由で『AFFINGER』を購入すると、「カスタマイズの教科書」が無料でついてきます。

カスタマイズ特典

ぶっちゃけ、『AFFINGER』のカスタマイズは初心者には難しいので、ボクが代わりに教科書を作っておきました。

基本的に〝コピペするだけ〟で、「当ブログ＋manablogの装飾」が完全再現できますよ。

AFFINGERのメリット

『AFFINGER』は、一つ買えば「複数サイト」に使っていいので、ボクは３サイトで使っています。笑

デザインも「メインカラーが違うだけ」で、コピペでサクッと終わらせていますよ。

さらに、特典はぜんぶで「14個」用意しました（まだまだ増えます）！

カスタマイズだけでなく、『ブログアフィリエイトの教科書』というマネタイズに特化した特典もありますよ。

当ブログのコンセプト

初心者でもスタートダッシュを切れるように「５年間のすべて」を込めたので、テーマのついでにどうぞ👇

関連記事【14大特典】AFFINGER6本音レビュー！３年使ったメリット

【14大特典】AFFINGER6本音レビュー！３年使ったメリット

【Q&A】見やすい・読みやすいブログのよくある質問

見やすい・読みやすいブログの「よくある質問（Q&A）」は次のとおり。

この章のもくじ

長くなってしまったので、一つだけ。

Q1：おしゃれなブログデザイン・装飾は無料で作れる？

AHTML/CSSをコピペすれば、「無料」で再現できますよ。

HTML/CSSシリーズ

どれもWebデザイナー時代に書いた記事です。

プラグインを入れなくても大丈夫。WordPressテーマを変更しても大丈夫。

とはいえ、『AFFINGER』の特典をコピペするのが手っ取り早いですね👇

関連記事【14大特典】AFFINGER6本音レビュー！３年使ったメリット

【14大特典】AFFINGER6本音レビュー！３年使ったメリット

【まとめ】見やすくてオシャレなブログデザインは意識的に作れる

「見やすい・読みやすいブログの作り方」を解説しました。

まとめ

「デザインと書き方」も振り返っておきましょう。

デザイン編

書き方編

この「14ヶ条」を意識するだけで、誰でも「見やすい・読みやすいブログ」が書けるようになりますよ。

本記事をブックマークしたら、１記事目を書いてみてくださいね👇

関連記事【パート別】ブログの書き方テンプレート５つ｜初心者でもスラスラ！

関連記事【超有料級】ブログ１記事目は何を書く？最初の記事の書き方テンプレ

ブログを始めたい方へ

人気記事【無料】WordPressブログの始め方【初心者でも10分でできる】

人気記事【14大特典】AFFINGER6本音レビュー！３年使ったメリット

人気記事Rank Trackerの料金・使い方・無料版との違い・解約方法

人気記事【５万稼ぐ】A8.netのセルフバックのやり方とおすすめ案件６選