記事コンテンツの装飾見本

記事の配色や装飾の見本です

読者さんに視覚的に読みやすいと感じてもらえるように、上手に以下の装飾を使ってコンテンツ作成を行ないましょう。

※ 読者さんの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:△△△△△△△△△△

※ 読者さんがスマホで読みやすいように、各手順ごとに「空白改行」を空ける

 

 

 

マーカー系(スタイル→マーカー)

黄色マーカー

赤色マーカー

青色マーカー

黄色アンダーラインマーカー

赤色アンダーラインマーカー

青色アンダーラインマーカー

※記事の肝になる部分などに適しています

※目立つ為、多用しすぎると逆に読みにくくなってしまう為注意

 

ボックス(アイコン)系(スタイル→ボックスアイコン)

補足情報(!)
補足情報(?)
補足情報(!)
補足情報(メモ)
補足情報(コメント)

※記事内での補足情報や、ちょっとしたメモ的な内容がある場合に使ってください

 

ボックス(案内)系(スタイル→ボックス案内)

プライマリー(濃い青色)
サクセス(薄い緑色)
インフォ(薄い青色)
ワーニング(薄い黄色)
デンジャー(薄い赤色)

※ ブロッククォートに近い使い方ができて、少し華やかになります。

※ 色分けできるので割と使い勝手が良いです

ボックス(白抜き)系(スタイル→ボックス白抜き)

灰色
黄色
薄い赤
薄い青

※ 各小見出しの要約の箇所だったり、短い文章を囲んで目立たせるのに適しています

 

タブ(スタイル→タブ)

チェック(灰色)
チェック(黄色)
チェック(赤色)
チェック(青色)
コメント(灰色)
コメント(黄色)
コメント(赤色)
コメント(青色)
ポイント(灰色)
ポイント(黄色)
ポイント(赤色)
ポイント(青色)
ティップス(灰色)
ティップス(黄色)
ティップス(赤色)
ティップス(青色)
ヒント(灰色)
ヒント(黄色)
ヒント(赤色)
ヒント(青色)
ピックアップ(灰色)
ピックアップ(黄色)
ピックアップ(赤色)
ピックアップ(青色)
ブックマーク(灰色)
ブックマーク(黄色)
ブックマーク(赤色)
ブックマーク(青色)
メモ(灰色)
メモ(黄色)
メモ(赤色)
メモ(青色)

※ 視覚的のも見やすく項目や配色が豊富にあるので使い勝手が良いです

 

付箋系(スタイル→ボックス付箋風)

灰色
黄色

※しっかり目立たせたい箇所に適しています。

※大きな範囲を囲うのには派手になりすぎてしまう為あまり適していません。

バッジ系(スタイル→バッジ)

オレンジ

レッド

ピンク

パープル

ブルー

グリーン

イエロー

ブラウン

グレー

※ 無理して使う必要はないですが、こちらも必要に応じて使って良いです

その他

打ち消し線

文字の下線

番号なしリスト(白丸)

  • △△△
  • △△△
  • △△△

番号付きリスト(デフォルト)

  1. △△△
  2. △△△
  3. △△△

※ これらも無理して使う必要はないですが、必要に応じて使ってください。

リンクについて

内部リンクはURLを貼れば、勝手に以下のようなブログカード形式でリンクができます。
(下書き投稿時にはブレビューして確認)

昇格試験の面接で必ず受かる人に共通する7つの考え
...

外部リンクは、今まで通り文字にリンクを埋め込む方法でも良いですし、同じようにURLを貼れば、リンク先のサイトがブログカードに対応して入れば、下記のように表示されます

【徒歩で125 km】廃線になった三江線の全駅を死にそうになりながら記録してきた
廃止となったJR三江線を、ライターのpatoが再び訪問!2018年3月末までの営業をもって惜しまれながらも廃線となったJR三江線の全駅を、patoが歩いて巡ります。島根県江津市・江津駅から広島県三次市・三次駅までの35駅、総歩行距離125km以上の道のりを、旅の記録にアプリ「駅メモ! - ステーションメモリーズ!-」と...
Yahoo! JAPAN
あなたの毎日をアップデートする情報ポータル。検索、ニュース、天気、スポーツ、メール、ショッピング、オークションなど便利なサービスを展開しています。

装飾の目安について

記事の装飾の目安については、スマホの読者さんが視覚的に読みやすいと感じられる事を第一に私が編集長をしている下記のメディアの記事を参考にしてください。

AIZINE(エーアイジン)
AI(人工知能)についてもっと知りたくなるメディア
タイトルとURLをコピーしました