こんにちは、T部長です！
「デザインを整えて記事を読みやすくしたいけどわからない…」「記事のデザインを簡単におしゃれにできないかな？」と悩んでいませんか？
今回は記事デザインを初心者でもおしゃれにできる方法をお伝えします！
T部長
この記事はこんな人におすすめ！
- ブログの記事のデザインを整えたい人
- すぐにできるデザインの整え方を知りたい人
- 簡単に、おしゃれで、見やすい記事を作りたい人
ブログのデザインは大きく2つに分けることができます。
①ブログ自体の印象を決める「サイト全体のデザイン」
②記事の読みやすさ・分かりやすさを決める「記事に関するデザイン」
この記事では「②記事に関するデザイン」について話をしますね。
デザインを整える作業は簡単で、誰でもできるテクニックのみで構成されてるので、ぜひ実践してみてください！
「サイト全体のデザイン」について知りたい方は下記をご覧ください。
※ただいま記事を鋭意執筆中です。しばらくお待ちください！
目次
ブログ記事に求められる「デザイン」とは？
ブログ記事に求められるデザインは、「自分の好きなように、見栄え・雰囲気を良くすること」ではなく、「読者に、記事の内容が正確にわかりやすく伝わるようにすること」です。
つまり読者が読みやすい記事のデザインにすることが重要になります。
なぜなら、読みにくい記事は読者がすぐに離脱してしまい、こちらが知ってほしいことを伝えられないから。
T部長
ブログ記事に求められる「デザイン」のポイント3つ
下記でご紹介するたった3つのポイントを押さえるだけで読者にとって読みやすいデザインの記事ができあがります。
初心者でも意識すれば簡単に実践できるので、ぜひ読み飛ばさないでくださいね！
1：シンプルな装飾を心がけよう
装飾のデザインをシンプルにする理由は「読みやすい」から。
重要なポイントがはっきりするので「記事がわかりやすくなる」んですよね。
下記画像を見てください。
少し装飾をしただけで、ぜんぜん読みやすさが違うことを実感していただけると思います。
2：画像を使いましょう
文章だけだとリズムが短調になり、読者は読むのに疲れたり、途中で飽きたりしてしまうので離脱する人が増えます。
しかし画像をいれることで、記事にリズムがうまれ、内容も理解しやすくなるため離脱する人を減らせるのです。
下記画像をご覧ください。
画像を入れた方が、読む際のストレスが小さくなるのがお分かりいただけると思います。
T部長
3：デザインに統一感を持たせましょう
デザインが統一されていないと、バラバラな印象になり違和感を覚えます。読んでいてストレスを感じますので、記事のデザインは統一させましょう。
例えば画像やフォントの大きさを合わせたり、装飾方法を同じにしたりといった感じ。
繰り返しになりますが、下記3つが非常に重要です。
- シンプルな装飾を心がける
- 画像を使う
- デザインに統一感を持たせる
そのため以下では、このポイント3つを押さえながら、記事を読みやすいデザインにするコツ18個を紹介しますね！
ブログ記事を読みやすいデザインにするコツ18個
それでは早速みていきましょう！
記事の装飾を整える
ここではまず、記事の装飾についてできることを9つお伝えしますね。
あなたのブログでまだ実践できていない内容があれば、ぜひチェックしてみてください！
1：見出しのデザインを変えよう
ブログのデザインテーマにもよりますが、記事の見出しが装飾されていないときはCSSで装飾をしましょう。
見出しが装飾されていると、読者の目に止まりやすく、また話題の展開が明確になり読者の理解を助ける効果がありますよ。
特にWordPressの無料テーマだと、装飾されていない場合が多いので装飾を施していきましょうね。
見出しの簡単な装飾方法は、下記をご覧ください。
※ただいま記事を鋭意製作中です。しばらくお待ちください！
2：箇条書きを使おう
記事の要点をまとめる時や、補足情報を付け加える際に効果的なのが、箇条書きです。
例えばボクの場合、書き出しで「どのような悩みを抱えている読者に記事を読んで欲しいのか」を箇条書きで書いていますよ！
このようにダラダラと文章で書くよりも、手短に書くことで理解しやすい場合があります。
3：枠（ボックス）で囲もう
文章を枠（ボックス）で囲むのも効果的です。
枠で囲むことで「ここを読んでね！」と文章のポイントが明確になり、また具体例や要点などを囲むことで記事のテンポを変更できます。
WordPressのテーマによっては枠を挿入する機能が追加されているものも多くなりました。
自動で枠が挿入できない人は、CSSのコードで簡単に設定できますので、下記を参考に設定してみましょう。
※ただいま記事を鋭意製作中です。しばらくお待ちください！
4：マーカー、太文字など目立たせよう
ブログ記事は、よく斜め読みされ、文章が読み飛ばされるという特徴があります…
そのため、文章で特に言いたいポイントは、マーカーや太文字（フォントのボールド機能）で強調しましょう。
ボクがよく使っている色は、蛍光ペン風のアンダーラインの黄色です。
.keiko_yellow {
background: linear-gradient(transparent 80%,#fff070 50%);
font-weight: bold;
color: #000;
}
色合いなどとても良い感じに調整されていて気に入ってます！
5：ピンポイントで吹き出しを使おう
吹き出しを使って重要ポイントや補足情報を付け足すのは効果的です。
読者を飽きさせないですし、記事をスクロールしていても目に止まりやすくなりますよね！
下記が例です。
ただ、吹き出しは何度も連続で使用すると読みにくくなるので、ピンポイントで活用しましょう！
6：文字サイズを拡大しない
文字サイズは、できれば拡大しないようにしましょう。
なぜなら文章を読むときのリズムが変わって読みにくくなるから。
ボクがよく使っている色は、蛍光ペン風のアンダーラインの黄色です。
ボクがよく使っている色は、蛍光ペン風のアンダーラインの黄色です。
無料ブログなどでは内容を面白おかしく言う際に、文字を大きくして強調しているのを見かけますが、特に強いこだわりがなければ、拡大しない方が無難です。
T部長
7：文字の色はカラフルにしない
文字の色自体をさまざまな色で装飾するのはやめましょう。
どの文字を強調しているのかわからなくなるからです。
文字の色はカラフルにしない
またリンクなのか文字の強調なのか、区別できなくなるので、文字リンクの色と同じ色にするのは絶対にNG。
どこからリンクでしょうか。
どこからリンクでしょうか。
文字の色は使っても「テキストリンクの青」と、「重要な部分を強調させる赤」くらいでとどめておきましょう。
見栄えのいい画像を用意
下記では、画像に関するポイントを3つ書いていきますね。
8：アイキャッチ画像の雰囲気を全部合わせよう
記事ごとにアイキャッチ画像の雰囲気がバラバラだと雑な印象を与え、記事自体に良いイメージを与えないので、できれば雰囲気を統一させておきたいです。
最近、ボクのブログでは「タイトルで記事の内容がわかるように」というルールでアイキャッチ画像を作り、統一感を出しています。
簡単に印象のいい画像を選びたい方は下記をご覧ください。
【初心者向け】有料素材サービスとオリジナル画像作成サービスを紹介！
9：画像の幅を調整しよう
画像の幅や、大きさはある程度統一しましょう。
画像のサイズ、幅がバラバラだと、文章が読みにくいし、ダサい印象を読者に与えてしまいます…
とはいえ、小さくしたほうが見やすかったり、読みやすかったりする場合がありますので臨機応変に対応していきましょうね。
T部長
10：プロフィールアイコンを入れて個性を出そう
プロフィール（キャラクター）アイコンを入れると個性が出るのでオススメしています。
ボクのアイコンはフリー素材を合成して作られていますが、こういう風にひと手間加えるだけで、印象がガラッと変わりますよね！
フリー素材が気になる方は下記をご覧ください
【厳選】ブログに使えるフリー素材・無料画像のおすすめサイト10選
デザインを統一する
下記では、デザインを統一する方法を8つご紹介します！
11：ベースカラーはモノトーンで
記事の背景色や余白部分といったベースカラーは、モノトーン（白、黒、灰色など）をオススメします。
というのもベースカラーが派手なサイトだと、文字よりもデザインや装飾に気を取られ、読みにくくなってしまうから。
よく読まれるブログを見ると、派手な色はほとんどないので、落ち着いた色でデザインしましょう。
12：段落間の余白・文字の行間を調整しよう
文字の行間や段落間の余白を調整するとブログの読みやすさがかなり変わってきます！
文章が長くつながっている時よりも、改行や余白が入っていた方が、文章の内容をパッと見て把握できるからです。
13：画像配置ルールを統一しよう
例えば「h2見出しの下に、毎回画像を入れる」など。
当メディアの場合は、当初は毎回h2見出しの下に画像を入れるよう心がけていました。
しかし最近は記事の内容を画像で説明することが多くなったので、「h2見出しの下に毎回画像を入れること」はなくなりましたね。
T部長
画像配置のバランスが重要！画像を入れすぎると文章を読むときに邪魔になりますので注意しましょう。
14：配色パターンを引用しよう
記事の中で配色に悩んだ時は、よく使われるパターンを参考にしましょう！
どの配色がいいのか悩む人が多いですが、「配色パターン」と検索すると参考サイトが出てきますよ。
例えばこちらのサイトです。お気に入りの配色パターンを見つけてくださいね。
15：表記ゆれを無くそう
文章の中で表記が統一されていないことを「表記ゆれ」と言います。
例えば下記のようなものです。
- Google ⇔ グーグル
- Webサイト ⇔ ウェブサイト
- 申し込み ⇔ 申込み
- 引っ越し ⇔ 引越し
- 猫 ⇔ ネコ
表記ゆれは読んでいてストレスになりますので、できるだけ統一しましょうね。
16：広告を貼りすぎないようにしよう
ブログに広告を貼る場合は、貼りすぎに注意しましょう！
広告を貼りすぎて全面的に収益目的の雰囲気を出してしまうと、感情的に嫌がられ離脱される場合があります。
記事を読まれることが一番収益になりますので、読者の邪魔にならないよう広告を配置していきましょう。
17：漢字、ひらがなのバランスを重視しよう
文章の中で漢字、ひらがなのバランスを整えることも、デザインとして大事です。
今夜午後九時からの報道番組は、運動選手の記録番組になっており、一人一人の人生に迫ります。
今夜午後9時からのニュースは、スポーツ選手のドキュメンタリー番組になっており、一人一人の人生に迫ります。
18：有料テーマも選択肢の1つ
記事の統一感を出すのに、有料のWordPressデザインテーマを使用するのも選択肢の1つです。
文字や見出しなどの装飾は、CSSで調整しなくてもほとんど装備されているので、ブログ初心者でもデザインの統一感を簡単に出せますよ。
有料なのでお金に余裕があったり、好きなデザインテーマがみつかったら検討してみてくださいね。
まとめ
今回はサイト全体のデザインについてではなく、「記事単体のデザイン」について書きました。
いきなり全てを暗記して、実践しようとしても難しいので、チェックリストを作成するのがオススメです！
まだ理解できていない箇所、もう一度確認したい箇所があったら、下記のリンク先で確認してくださいね。
記事デザインを調整して、読者が少しでも読みやすいブログにしていきましょう！
以上、最後までお読みいただきありがとうございました。
ブログの始め方を知りたい！実際に始めたい方へ
国内シェアNo1レンタルサーバー「エックスサーバー」では12月9日18時まで、
利用料金最大25％OFFキャンペーンを開催中です！
今なら月742円からWordPressブログが始められます！
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。
独自ドメインの新規取得、独自ドメインの移管いずれにも適用可能ですので、
ぜひこの機会にご利用をご検討ください。
当メディア「初心者のためのブログ始め方講座」では、
初心者の方に分かりやすく簡単にブログを始められる方法を紹介しています！
WordPressに使用される国内シェアNo.1サービス「エックスサーバー」の中の人が確実で信頼性の高い情報をお届けしています！
ブログをこれから始める方はこちらの完全ガイドをぜひご覧ください！
【初心者向け】ブログの始め方完全ガイド！立ち上げから収入を得る方法まで
また、初心者の方向けにWordPressでのブログ立ち上げがたった10分できる方法も紹介しています！
【初心者でも安心】たった10分で出来るWordPressブログの始め方
ブログの始め方・立ち上げに関する、ご質問・ご相談はボクのツイッターDM（ @tbcho_xsv ）までお気軽にどうぞ！
