おしゃれな文章デザインでブログを魅力的にする6つの基本テクニック

• 最後まで読んでもらえる文章を書きたい
• ブログを簡単にデザインする方法が知りたい

と考えているWebライターも多いでしょう。

そこで今回は、誰でも簡単にできる文章デザインの方法を紹介します。

文章デザインに難しい知識やスキルは不要です。

よく使われるタグをコピペしたりすれば、初心者でもブログをおしゃれに改善できるので、ぜひチャレンジしてみましょう。

ブログの文章をデザインするときの6つの基本テクニック

ブログなどWebサイト上の文章を書くときは、第一印象が重要です。

せっかくよい内容を書いても、読者に「なんとなく読みにくそう……」と思われると最後まで読み進めてもらえません。

以下6つのテクニックを使って、文章を読みやすくデザインしましょう。

1. 重要な文章や例文を枠で囲む
2. 適切な位置で文章を改行する
3. 箇条書きで情報のグループをまとめる
4. 太字やマーカーで重要な部分を示す
5. 見出しだけ読めば文章全体を把握できるようにする
6. 1文の文字数は80文字程度にする

それぞれのテクニックについて順番に解説していきます。

1．重要な文章や例文を枠で囲む

文章だけがダラダラと続くと、

• 読者が飽きてしまう
• 重要なポイントを把握しにくい

といった問題が発生します。

重要な文章や例文などは、色付きの枠を使って囲むとよいでしょう。

私は、次のような枠をよく使っています。コードをWordPressなどにコピペすれば簡単に使えるため、ぜひ試してみてください。

▼青い枠のコードはこちら

<div style="display: inline-block; background: #3399ff; padding: 5px 10px; color: #ffffff;"><strong>青い枠</strong></div>
<div style="background: #ffffff; padding: 10px; border: 2px solid #3399ff;">
<div>テキスト</div>
<div>テキスト</div>
<div>テキスト</div>
</div>

▼オレンジの枠のコードはこちら

<div style="display: inline-block; background: #ff9900; padding: 5px 10px; color: #ffffff;"><strong>オレンジの枠</strong></div>
<div style="background: #ffffff; padding: 10px; border: 2px solid #ff9900;">
<div>テキスト</div>
<div>テキスト</div>
<div>テキスト</div>
</div>

▼赤い枠のコードはこちら

<div style="display: inline-block; background: #ff6666; padding: 5px 10px; color: #ffffff;"><strong>赤い枠</strong></div>
<div style="background: #ffffff; padding: 10px; border: 2px solid #ff6666;">
<div>テキスト</div>
<div>テキスト</div>
<div>テキスト</div>
</div>

2．適切な位置で文章を改行する

改行は、誰でも簡単に使える文章デザインの方法です。

文字ばかりが続くと読者が「読みにくそう……」と感じて、途中で読むのをやめてしまう可能性もあります。

たとえば、次の文章を読んでみてください。

文字ばかりが続いていて、少し読みにくいですよね。

次のように適度に改行を入れてみましょう。

まったく同じ文章ですが、改行を入れるだけでサクッと読めるようになりました。

最近はスマホやタブレットで記事を読む人も多いため、小さな画面でも読みやすい文章デザインにすることはとても大切です。

改行については下記の記事でも詳しく解説していますので、参考にしてください。

3．箇条書きで情報のグループをまとめる

文章を箇条書きにするメリットは、以下のとおりです。

• 情報のグループがわかりやすい
• 1文が短くなって読みやすい
• 文章が苦手でもまとめやすい

次の例文を読んでみてください。

1文が長いので、次のように箇条書きにしてみましょう。

並列的な情報がまとまり、サクッと読めるようになりました。

箇条書きのコツについては以下の記事で詳しく解説していますので、気になる人は読んでみてください。

4．太字やカラーで重要な部分を示す

インターネット上の文章を書くときは、「読んでもらう」というより「見てもらう」ことを意識するのが重要です。

太字やカラーを用いれば、読者に重要な情報を届けつつ、最後まで読み進めてもらえる確率が高まるでしょう。

このWebサイトでは、重要な部分を太字にしています。

5．見出しだけ読めば文章全体を把握できるようにする

見出しも重要な情報を読者に届けるうえで重要です。

• 大見出し（h2）
• 小見出し（h3、h4など）

を適宜設置しましょう。

大見出しだけで1,000文字を超えるような場合は要注意。

小見出しを2つくらい設置するほうが読みやすいでしょう。

6．1文の文字数は80文字程度にする

1文が長くなりすぎると、

• 主語と述語がねじれてしまう
• 意味が伝わりにくい

といった問題が発生しがちです。

長くても80文字程度でまとめるようにしましょう。

ブログの文章をデザインして読了率をアップさせよう！

今回は、簡単に使える文章デザインのテクニックを紹介しました。

ブログの文章は見た目が重要です。

読者が離脱してしまわないよう、読みやすい文章デザインを心がけましょう。