AFFINGER6

AFFINGER6で使う装飾は6つだけ【読者に読まれる工夫】

AFFINGER6
悩んでいる人
AFFINGER6を使っているけど、装飾が多すぎてどれを使えばいいのか分からない。お勧めの使い方などを知りたいな。

 

こんな疑問を解決します。

 

記事の内容

  • ブログの装飾とは
  • AFFINGERの装飾はたくさんある
  • やってはいけない装飾
  • AFFINGERおすすめの装飾6つ

 

プロフィール

プロフィール

 

よっしー(@yosshiblog

 

今回はAFFINGERの数ある装飾の中から、いったいどれを使えばいいのかという疑問にお答えします。

 

結論、使う装飾は5,6個で十分です。

というのも、使える装飾がたくさんあるからと言って使いまくると見づらい記事になってしまうからですね。

 

私がよく使っているボックスは、以下のようになります。

  1. 太文字
  2. 赤文字
  3. グレーボックス
  4. ブルーボックス
  5. 吹き出し
  6. チェックマーク

これだけでも十分すぎるくらいですよ。

私も初心者時代は、「ここも読んでもらいたいな」という考えからたくさん装飾を付けていました。

 

ですが、たくさん装飾をしたところで読者に読んでもらうことも無いし、記事執筆の時間がすごくかかってしまいます。

読みやすい記事を作るためには、装飾より先にやらなければならないことがあります。

 

今回は、やってはいけない装飾の例や実際に私が使っている装飾について詳しく紹介していきます。

 

AFFINGER6をさっそく導入したい方は、3ステップで分かりやすく解説をしているのでこちらの「AFFINGER6の導入方法」からご覧ください。

当サイトをの装飾ルールを全部紹介するので、よかったら参考にしてみてください。
yosshi

ブログの装飾とは:味付けという考え

ブログの装飾とは:味付けという考え


ブログの装飾とは:味付けという考え

 

装飾は、本当に重要な部分や、まとめるときに使います。

ブロガーによってやり方は様々で、たくさん装飾をする人もいますし全くしない人もいます。

 

基本的にはブログを運営していくうえで、装飾は必須になってきます。

 

ですが最初に解説した通り、装飾の優先度は低いです。

優先度

  1. ライティング技術
  2. 文字の行間
  3. 装飾

このように優先度が低いことが分かりますね。

優先度が低いから全くやらないというわけではありませんが、やりすぎには注意が必要です。

 

装飾のポイント

装飾のポイント


装飾のポイント

 

装飾のポイントは、以下のようになります。

  1. 本当に重要な所を装飾する
  2. 吹き出しを使う
  3. 装飾範囲は狭く
  4. 装飾のルールを決める

順に解説をします。

 

本当に重要な部分を装飾する

 

装飾が多いとあまり良くないので、基本的に重要な部分だけ装飾するようにしましょう。

 

「装飾は重要な部分だけをした方がいいのはわかっているけど、どうしても装飾が多くなってしまう」

 

結論、ブログ初心者の時は装飾が多くなってしまってもそこまで気にしなくてもいいです。

というのも、初心者はまずブログに慣れることが大事ですので、装飾にこだわらなくてもいいです。

 

ブログに慣れてきたら参考とするブロガーさんを見つけて、装飾の真似をしてみましょう。

自分との違いが一目でわかり、「この表現分かりやすいな」など納得します。

 

吹き出しを使う

 

意外と吹き出しを使っていないブロガーさんがいますが、吹き出しがあると一気に読みやすくなります。

なぜなら、吹き出しは読者の悩みやワンポイントアドバイスをする時に使うことで読者の目に入るからです。

 

吹き出しは会話形式で分かりやすく解説するように使う方が多いんじゃないでしょうか。

ですが、吹き出しを使う一番の理由は、「読者の悩みが一目でわかる」ということです。

 

会話形式でも問題ありませんが、ただの日常会話では読者の悩みではないので読んでもらえません。

NG

悩んでいる人
ブログって難しいね~
初心者時代は僕も心が折れそうだったよ~
yosshi
悩んでいる人
何が難しかったの?
設定やカスタマイズが難しくて諦めようかなと思った
yosshi

 

確かに会話形式で読者の悩みを書くと、共感できる部分があるため見られることもあります。

ですが、「NG例」のように日常会話みたいに書くのならポイントをまとめて書いたほうが良い記事になります。

 

読者に飽きさせず、印象に残る使い方をしましょう
yosshi

装飾範囲は狭く

 

太文字やマーカをする時に、その文章全部装飾していませんか?

 

本当に伝えたいところだけを装飾するのがポイントです。

なぜなら、その文章全部を装飾してしまってはどこが重要なのか分かりづらいからです。

具体例

ブログ運営で必要なことはたくさんありますが、その中でも重要なのはキーワード選定です。

 

キーワード選定が一番大事だと伝えたいのに、全部太文字にしてしまっては伝わりづらくなってしまいます。

少なくとも前半の太文字はいらないですね。

 

ブログ運営で必要なことはたくさんありますが、その中でも重要なのは「キーワード選定」です。

 

どうでしょうか。先ほどよりはどこが大事なのか一目でわかると思います。

このように装飾する部分を限定することで、大事ことを読者に伝えることが出来ます。

 

文章全体を装飾してしまいがちですが、装飾範囲は狭い方がおすすめです。

 

装飾のルールを決める

 

装飾のルールを決めることで統一性が出て、見やすい記事になります。

なぜなら、装飾のルールがないと重要な部分が伝わりづらくなってしまうからです。

当サイトの場合

  • 強調したい部分・・・太字
  • 重要な部分・・・赤文字
  • 読者の気持ちや、ちょっとしたポイント・・・グレーボックス

 

1サイト単位で装飾ルールを決めると良いでしょう。

また、重要度をたくさんの色で分けていると読者は分かりづらいです。

 

実際に「キーワード選定」を使って、いろいろな装飾をしてみましょう。

キーワード選定

キーワード選定

キーワード選定

 

どの「キーワード選定」が一番重要に見えましたか?私にはすべてが重要に思えました。

このように同じような色を多用すると、どれが重要かわからなくなるので注意が必要です。

 

実際どうやって装飾ルールを決める?

実際どうやって装飾ルールを決める?


実際どうやって装飾ルールを決める?

 

結論、自分が読みやすいと思ったブログの装飾を参考にするのがいいでしょう。

というのも、自分が読みやすいと思った記事は他の人も読みやすいと感じるはずなので、装飾方法を真似るだけで読みやすい記事になります。

 

「真似をすればいいと言うけど、具体例が欲しい」

 

ブログの装飾は人それぞれですが、有名ブロガーの意見を見てみましょう。

  • マナブさん・・・装飾はほとんどしない
  • tuzukiさん・・・必要最低限
  • なかじさん・・・スマホ基準で装飾をする

 

有名ブログーでも意見は分かれていますね。

1人を参考にしてもいいし、いろいろなブログを参考にしてみてもいいです。

 

私は、スマホ画面基準で考えて装飾をしています。

パソコンで十分だと思っていた装飾がスマホ画面だと少なく感じてしまいます。

 

なのでスマホ画面基準で装飾をしています。

スマホの1画面で必ず1つ装飾をするのが重要です。

PCの場合

画像準備中

スマホの場合

画像準備中

 

2つを比べると明確な差が出ます。

パソコンで十分だと思っていた装飾がスマホで確認をしてみると、装飾が1つもなく見づらい記事になっていることは良くあります。

 

最初はプレビューで確認しながら装飾を付けていきますが、慣れてきたらスマホ画面の感覚が分かってくるのでぜひ試してみてください。

 

質問:スマホ画面いっぱいに装飾してもいい?

結論、あまり良くありません。

というのも、スマホ画面いっぱいに装飾してしまうと何が重要なのか分からなくなってしまうからです。

 

スマホ1画面で2,3個を基準にして装飾をしてください。

 

私がよく使っているAFFINGERの装飾

私がよく使っているAFFINGERの装飾


私がよく使っているAFFINGERの装飾

 

私がよく使っているAFFINGERの装飾は以下のようになります。

  1. 太文字
  2. 赤文字
  3. グレーボックス
  4. ブルーボックス
  5. 吹き出し
  6. チェックマーク

他にも使っているものはありますが、よく使っている装飾を順に紹介します。

細かく解説をするので、参考までに
yosshi

 

装飾①:太文字

 

ただ文字を太くするだけですが、ちょっとしたポイントだったり「この部分意外と重要かも」という場面で使います。

当サイトの使用例

 

 

当サイトでは、赤色や青色で引くであろう部分もまとめて太字を使っています。

まとめて使うことで、変に装飾が増えることなく本当に重要な部分が読者に伝わるからです。

 

例えば、マイナス面を青のマーカーで引いても良いでしょう。

青マーカーで引くことで読者は、「ここはマイナスポイントが書かれているんだな」と装飾の色でなんとなく理解することが出来ます。

 

当サイトでは、統一感を目指しているため使用していませんが一目でわかる装飾ですのでお勧めです。

装飾②:赤文字

 

当サイトでは、重要な部分を赤文字で装飾しています。

読者に伝えたいところは一番目立させたいですからね。

 

良く赤文字にしているのは、「結論~~~」という部分です。

読者が知りたいのは結論ですので、赤文字を使用しています。

 

装飾③:グレーボックス

 

数あるボックスの中で、よく使っているのがグレーボックスです。

 

AFFINGERのスタイルから選んでいるボックスです。

 

 

  1. スタイル
  2. ボックス
  3. グレー

 

当サイトの使用例

  • 読者の気持ちを表したいとき
  • ワンポイントアドバイス
  • 装飾が少ない時も

吹き出しと内容は被りますが、グレーボックスのほうが圧倒的に使用しています。

これこそ本当に味付けみたいなものでボックス1つに統一したかったのですが、装飾が少なくなってしまうのでグレーボックスも採用しました。

 

ボックスは目に留まりやすい装飾ですので、入れすぎには注意が必要です。

 

装飾④:ブルーボックス

 

当サイトで使っているブルーボックスは、AFFINGER特有の装飾です。

普通のボックスです。

「タグ→ボックスデザイン→マイボックス→しかく(枠)」

他のテーマでも良くあるボックスですが、AFFINGER流にアレンジして使っています。

当サイトの使用例

ブルーボックスの使用例


当サイトの使用例

 

 

青で統一しているボックスですが、リストをチェックマークと数字に変換して使い分けることによって読みやすさが変わります。

統一感を目指している当ブログでは、うってつけの装飾になりますね。

 

装飾⑤:吹き出し

 

吹き出しは主に2人分を使っています。

これは吹き出しです。
yosshi
悩んでいる人
これは吹き出しです。

 

 

 

吹き出しを使うタイミングは、以下の通り。

  • リード文の一番最初
  • リード文の最後
  • ワンポイントアドバイスを入れるとき

正直吹き出しは、リード文に入れるだけで十分ですが、本文にちょこちょこ入れることで読みやすさが変わります。

また、当サイトでは会話形式で吹き出しを使っておらず単体で使うことが多いです。

 

吹き出しのルールを決めておくことで統一感が出るのでお勧めです。

装飾⑥:チェックマーク

 

チェックマークを使う場面は、以下の通り。

  • ポイントのまとめ
  • 質問等
  • 見出しを使いたくない時

 

チェックマークを使うことで読者の目に入りやすく、統一感を出すことが出来ます。

 

当サイトでは、統一感を出すため見出し3までしか使用しておりません。

見出し3までに限定すると、「ここのポイントを段階に分けて解説したいな~」という場面がありますが、そういう時に便利なのがチェックマークです。

 

チェックマークはCSSコードとHTMLコードを使用しております。

「コードって難しそうで私には向いていない」と思う方も、3ステップで簡単に出来てしまうのでお勧めです。

 

まとめ:装飾ルールを決めてやりすぎに注意

まとめ:装飾ルールを決めてやりすぎに注意


まとめ:装飾ルールを決めてやりすぎに注意

 

今回は、「当サイトでの装飾」を紹介してみました。

ぶっちゃけ装飾は適当にやっています笑

 

ブログの装飾は、優先度が低いので初心者の方はあまり気にしなくてもいいですが、見やすい記事を作るためには必要なことです。

装飾ルールを自分の中で決めて、ある程度の装飾をするだけで見やすい記事となるのでぜひ参考にしてください。

  • この記事を書いた人

yosshi

ブラックなサイト運営を解説しています。
【経歴】高卒で大手企業に就職▶︎2サイト運営▶︎今のSEOで正攻法では戦えないと気づく▶︎中古ドメインとInstagram運用
インフルエンサーを信じるなっ
とにかく被リンク獲得せいっ
ブロガー界隈は闇が深いでっ

-AFFINGER6