記事の配色や装飾の見本です
読者さんに視覚的に読みやすいと感じてもらえるように、上手に以下の装飾を使ってコンテンツ作成を行ないましょう。
※ 読者さんの8割以上がスマホです
※ 質問疑問は都度聞いてください
■ H2タグの配色参考
※ H2タグは自動で太字になるので「ボールド」にする必要はありません
※以下の配色を見本に記事の内容に近しいものを設定してください。
※以下はビジュアルエディタの文字色ボタンにある配色ですが、必ず以下の文字色でなくては、、、ではありません。
※H3タグはH2タグと同色でOKです(こちらもボールド必要なし)
H2タグは目次になるので、本の目次のように読者さんが理解しやすいように
ビジネス系(濃いめの青系) @例えば
#000080
#333399
#666699
恋愛系(ピンクや紫系) @例えば
#ff00ff
#ff99cc
#cc99ff
#800080
やる気、モチベーション、元気系(赤やオレンジ系) @例えば
#ff0000
#ff6600
#ff9900
人間関係、コミュニケーション系(緑や黄色系) @例えば
#003300
#003300
#008000
#ffcc00
占いや神秘系(紫系) @例えば
#800080
#666699
マナーや信頼系(ブラウン系) @例えば
#800000
#993300
H3タグ(見出し3)も自由に使ってください(色付けOK)
H4タグ(見出し4)も自由に使ってください(色付けOK)
H5タグ(見出し5)も自由に使ってください(色付けOK)
H6タグ(見出し6)も自由に使ってください(色付けOK)
■ 文字の装飾見本
ブロッククォート(引用ボタン)
大きな範囲を囲ったり、自然に目立たせたい箇所、レシピや手順など、に適しています。
〇〇のレシピ
【材料】
△△△△△△△△△△
【作り方】
1:△△△△△△△△△△
2:△△△△△△△△△△
3:△△△△△△△△△△
※ 読者さんがスマホで読みやすいように、各手順ごとに「空白改行」を空ける
マーカー系(スタイル→マーカー)
黄色マーカー
赤色マーカー
青色マーカー
黄色アンダーラインマーカー
赤色アンダーラインマーカー
青色アンダーラインマーカー
※記事の肝になる部分などに適しています
※目立つ為、多用しすぎると逆に読みにくくなってしまう為注意
ボックス(アイコン)系(スタイル→ボックスアイコン)
※記事内での補足情報や、ちょっとしたメモ的な内容がある場合に使ってください
ボックス(案内)系(スタイル→ボックス案内)
※ ブロッククォートに近い使い方ができて、少し華やかになります。
※ 色分けできるので割と使い勝手が良いです
ボックス(白抜き)系(スタイル→ボックス白抜き)
※ 各小見出しの要約の箇所だったり、短い文章を囲んで目立たせるのに適しています
タブ(スタイル→タブ)
※ 視覚的のも見やすく項目や配色が豊富にあるので使い勝手が良いです
付箋系(スタイル→ボックス付箋風)
※しっかり目立たせたい箇所に適しています。
※大きな範囲を囲うのには派手になりすぎてしまう為あまり適していません。
バッジ系(スタイル→バッジ)
オレンジ
レッド
ピンク
パープル
ブルー
グリーン
イエロー
ブラウン
グレー
※ 無理して使う必要はないですが、こちらも必要に応じて使って良いです
その他
打ち消し線
文字の下線
番号なしリスト(白丸)
- △△△
- △△△
- △△△
番号付きリスト(デフォルト)
- △△△
- △△△
- △△△
※ これらも無理して使う必要はないですが、必要に応じて使ってください。
リンクについて
内部リンクはURLを貼れば、勝手に以下のようなブログカード形式でリンクができます。
(下書き投稿時にはブレビューして確認)
外部リンクは、今まで通り文字にリンクを埋め込む方法でも良いですし、同じようにURLを貼れば、リンク先のサイトがブログカードに対応して入れば、下記のように表示されます
装飾の目安について
記事の装飾の目安については、スマホの読者さんが視覚的に読みやすいと感じられる事を第一に私が編集長をしている下記のメディアの記事を参考にしてください。