フリーランスについて PR

【5分で出来る!】ブログ記事を見やすくおしゃれに装飾するコツ|図解で徹底解説!

記事内に商品プロモーションを含む場合があります

こんなお悩みありませんか?

  • サイト全体に統一感がない
  • 装飾がイマイチで見づらい
  • アイキャッチ作りに時間がかかりすぎる
  • ブログをおしゃれに見せる方法が知りたい

ブログをおしゃれにするっって、何から始めればいいか分からないですよね。

しかし、今回ご紹介するコツを知れば、たったの5分で伝わりやすい記事の装飾をすることができます!

大事なのは、おしゃれに見えるルールを知って、
装飾のパターンを決めてしまうこと。

今回の記事では、初心者でもすぐに真似できる見やすくおしゃれでおしゃれな装飾のコツを
解説していきます!

この記事はこんな方にオススメ! 
  • ブログデザインに興味がある
  • ブログ記事をもっと読みやすくしたい
  • ブログをおしゃれに見せる方法が知りたい

ブログで「装飾」が需要な理由

サイトの第一印象を決める

人においても、相手の印象は第一印象で決まるように、ブログも見た目の印象で判断されます。

第一印象が好みでないサイトは、いくら有益な内容を書いていても
読み進めようとさえ思ってもらえず、離脱される原因に。

内容が伝わりやすい

ブログのデザインが整っていると、ユーザーも文章を読みやすくなります。

読みやすいことがユーザーにとっての満足感に繋がり、ブログへの回遊率や滞在時間の
UPなど数値的にもいい結果が見込めます。

デザインがイマイチだと、ユーザーが大事なコンテンツを読む前に
離脱してしまう要因になるので、最低限のポイントは抑えていきましょう。

他のブログと差別化できる

検索意図を考慮しながら記事を書くと、どうしても他のブログと似たり寄ったりな
内容になります。

検索ワードにもよりますが、記事で差別化はかなりの高度な技。

しかし、デザインはターゲットや運営者の好みで自由に設定できるので、
他のブログと簡単に差別化できます◎

たとえ記事は似たり寄ったりの内容でも、デザインで差別化できれば
印象に残り、このブログから学びたいと思ってもらえて再訪問の可能せも高まりますよ!

読みやすいブログデザインの基本

ブログ装飾の基本はこちら

  • 見出しを入れる
  • 揃えることを意識する
  • 余白を設ける
  • 色は3色までに抑える

見出しを入れる

ブログにおいて大見出し(h2)はほぼ必須ですが、小見出しはh4まで装飾すると見栄えがよくなります。全部の記事に必要あるわけではなく、必要に応じて読みやすくなる等に小見出しで分けていきましょう。

そして、目次を設けることによって、読者が迷子になりにくいです。
目次を見て自分が読みたいところだけ読んだり、目次から後でもう一度見にきたりすることができるので、目次を付けることは読者にとって親切です。

揃えることを意識する

デザインの4原則の中にもあるように、揃えることはデザインの基本です。

例えば、アイキャッチの画像の大きさやブログ内の画像の大きさは
揃えた方が見栄えが良くなります。

さらにデザインのテイストを統一してあげることで、おしゃれさも増しブログ全体の
世界観に統一感を出すことができますよ◎

余白を設ける

文字やデザインは十分な余白がないと窮屈な印象になってしまいます。
余白を設けることで文字が読みやすくなり、ぱっと見でも内容が入ってきやすくなります

適度な改行を心がける

ブログの場合、改行のない文章は読むのにも時間かかり疲れてしまいます。
1行〜2行、多くても3行で改行する(PC表記の場合)ようにしましょう。

文字の行間を意識する

改行だけでなく、文字の高さ(行間)と行の余白(マージン)を調節するだけでも印象が変わります

色は3色までに抑える

初心者さんでやりがちなのが強調したいがために色を使いすぎることです。しかし色を使いすぎるとどれが重要なのかわからなくごちゃごちゃした印象になります。

ならないように、テーマカラーを3色以内で決めるように意識しましょう。

70:25:5の法則

基本カラー3色を「70%:25%:5%」の
比率で配色すると、バランスの取れた美しい配色になります。

70%:ベースカラー(基調色)
25%:メインカラー/サブカラー(主役色/補完色)
05%:アクセントカラー(強調色

配色に迷ったら配色に便利なサイトも色々あるので参考にしてみてくださいね!

よりおしゃれに装飾するコツ5選

1スクロールに1装飾を意識

スマホからの読者は、かなり早いスピードでスクロールしながら読んでいます。

そのため、画面が文字だらけで見づらいと離脱される原因に。

1スクロールに1装飾すると画面がスッキリし、重要なポイントも伝わりやすくなります。

【装飾の例】

  • 太字
  • マーカー
  • 囲み
  • 箇条書き
  • 吹き出し
  • 画像

見出し下に画像を入れる

見出し下に画像を入れると、ブログにメリハリが出て読みやすくなります。

フリー素材(写真)をそのまま貼るのもOKですが、フリーイラストを使ってオリジナル画像を作るのもおすすめ。

オリジナル画像を作るメリットは以下の通り。

【オリジナル画像を作るメリット】

  • 他サイトと差別化できる
  • SEOに強くなる
  • 読者が内容を掴みやすくなる
  • ブログに統一感が出る
  • あなたらしさをアピールできる

アイキャッチのデザインを統一する

アイキャッチのテイストが毎度バラバラだと、
トップページの印象に統一感がなくなります。

とはいえ、毎度デザインを作るのは大変だと思うので

アイキャッチのデザインは、ルールを決めておけば毎度悩むことなく作ることができます。

アイキャッチデザインのルール

  • フォント
  • 文字の大きさ
  • 使用する素材のテイスト
  • 使用するカラー
  • 配置のパターン

私のアイキャッチも、一度決めてしまって毎度文字と写真を入れ替えているだけです◎

できればブログで使用しているカラーと統一してあげるとよりおしゃれに見えますよ!

原色や蛍光色は避ける

原色や蛍光色を使うと、デザインが一気にダサくなるので避けましょう。

目がチカチカして見にくく、安っぽい印象を与えてしまいます。

サイトや広告にある原色っぽい色も、実は原色ではなくおしゃれに見えるよう彩度と明度を調整してあります。

同じように、真っ黒(#000)もwebデザインでは、あまり使用されません。

吹き出しを使う

ブログ初心者
ブログ初心者
この吹き出しのことですね

この吹き出しを使うと対話形式にもできますよ!

 

吹き出しがあるだけで、単調だった文章がリズミカルになり読みやすくなります◎

使いすぎると読みづらさもあるので、適度に使いましょう!

ブログの装飾がしやすいブログテーマはこれ一択

初心者でもブログをおしゃれに作ることができ、装飾もしやすいのが

『LIN」というブログテーマです!

私も実際に使ってこのブログを書いているのですが、未経験からでもそれなりにおしゃれな
ブログを作ることができています!

11個あるサンプルからデザインを選択するだけで、簡単におしゃれなブログを作れます。
公式プラグインをインストールすれば、さらにデザインの幅が広がるので可能性は無限◎

また、公式HPには解説動画もあるので、導入・カスタマイズしやすいうえにJINユーザーが多いので、疑問を解決しやすいなど、初心者に優しいテーマとなっています。

JINの詳細はこちら

まとめ

今回はおしゃれで伝わりやすいブログデザインのコツをご紹介しました!

まとめると

ブログデザインの3つ基本

  • 見出しを入れる
  • 揃えることを意識する
  • 余白を設ける

どれも簡単にできることばかりなので、早速実践してみてくださいね!

最後までお読みいただきありがとうございました^^