WordPressの記事を、もう少しおしゃれにしたい。
見出しに色を付ける。
マーカーを引く。
BOXで囲む。
アイコンを入れる。
ボタンを目立たせる。
少し装飾するだけでも、何もしていない記事とはかなり印象が変わります。
でも、いろいろできるようになると今度は、
「もっと装飾した方がいいのかな？」
となりませんか？
せっかくなら見出しもかわいくしたい。
大事なところにはマーカー。
POINTはBOX。
画像も入れたい。
背景も変えたい。
どんどん足していく。
ところが、
装飾を増やしたのに、前より読みにくい。
そんなこともあります。
AIちいちゃんクローゼットでは、WordPressの記事を「コーデ」として着せ替えるデザインを作っています。
その中で分かってきたのが、
記事装飾は多ければ多いほどいいわけではない
ということでした。
今回は、WordPressの記事を読みやすくしながら装飾するときに、どこまでデザインすればいいのかを考えてみます。
ブログ記事の装飾にはちゃんと意味がある
最初に、
装飾しない方が読みやすい
という話ではありません。
装飾には、ちゃんと役割があります。
たとえば見出し。
長い文章の中にH2やH3があることで、
「ここから別の話が始まる」
と分かります。
マーカーなら、
「ここは少し覚えておいてほしい」
を伝えられます。
POINTのBOXなら、
普通の本文とは違う重要な情報だと分かる。
Q&Aなら、
質問と回答を一瞬で見分けられる。
つまり装飾は、
文章を派手にするためだけのものではありません。
読者へ、
「ここはこういう情報ですよ」
と伝えるための目印でもあります。
全部を目立たせると、何も目立たなくなる
問題はここです。
大事だから赤。
ここも大事だから黄色マーカー。
こっちはBOX。
次は太字。
その次は背景色。
さらにアイコン。
全部目立たせていくと、どうなるでしょう。
全部が大事に見えます。
すると逆に、
どこを見ればいいのか分からなくなります。
たとえば普通の文章の中に、一か所だけ黄色いマーカーがあれば目に入りますよね。
でも一つの段落に、
黄色。
赤。
青。
太字。
BOX。
と入っていたら、マーカーの意味が弱くなってしまいます。
装飾そのものが悪いのではなく、
装飾にも強弱が必要
ということです。
見出しは全部同じ強さにしない
WordPressの記事では、H2・H3・H4などの見出しを使います。
ここも全部を豪華にすると、記事の構造が分かりにくくなります。
たとえば、
H2も大きなカード。
H3も大きなカード。
H4も大きなカード。
全部同じくらい目立つ。
これでは、
どれが大きな話題なの？
となります。
そこでAIちいちゃんクローゼットのコーデでは、
H2を一番強くする。
H3は少し控えめ。
H4以下はさらにシンプル。
という考え方を使っています。
見出しの重要度が下がるほど、装飾も少しずつ弱くする。
これだけでも、記事をスクロールしたときに話の階層が分かりやすくなります。
クリスマスコーデでも最初は足しすぎました（笑）
このことをかなり実感したのが、クリスマスコーデを作ったときです。
クリスマスなんだから、
赤。
緑。
リース。
ヒイラギ。
ツリー。
オーナメント。
プレゼント。
雪。
入れれば入れるほどクリスマスになる。
……と思いますよね。
実際、最初はそんな感じで作っていました。
ところが。
なんか違う。
クリスマス素材はある。
色もクリスマス。
でも一つのデザインとして見ると、まとまっていない。
普通のWeb見出しの横にクリスマス画像が置いてあるだけだったり、素材同士の雰囲気が違ったり。
そこで、
何を追加するか
ではなく、
何を残して、何を減らすか
も考えるようになりました。
イラストは主役ではなくアクセントにする
季節デザインだと、どうしてもイラストをたくさん使いたくなります。
でもブログ記事の主役は、
文章です。
H2にクリスマスツリーがある。
かわいい。
でもツリーが大きすぎて文字が小さくなった。
これでは本末転倒です（笑）。
だから、
見出し文字が一番。
次にデザイン全体。
イラストはその雰囲気を作るアクセント。
この順番。
特にスマホでは横幅が狭いので、PCでちょうどいい装飾でも文字へ重なることがあります。
PCのデザインをそのまま縮小するのではなく、
スマホではイラストを小さくする。
数を減らす。
必要なら一部を表示しない。
それくらいでもいいと思います。
背景も濃ければいいわけではない
記事の背景も同じでした。
背景まで変えると、記事全体の雰囲気はかなり変わります。
見出し。
Q&A。
箇条書き。
BOX。
それぞれが同じ世界の中にあるように見える。
だから背景はコーデを作るうえでかなり重要でした。
でも、
背景まで目立たせると今度は文章が読みにくい。
ツリー。
雪。
プレゼント。
サンタ。
全部はっきり見える背景にすると、
背景を見せるページ
になってしまいます。
そこでクリスマスコーデでは、かなり薄くしました。
よく見るとクリスマス。
普通に文章を読んでいるときは邪魔しない。
このくらいです。
背景は、
目立つためではなく、全体をつなぐため
に使う。
この考え方にすると、かなり落ち着きました。
BOXも使い分けないと全部同じに見える
POINT。
注意。
Q&A。
購入者限定特典。
こうしたBOXにも、それぞれ役割があります。
全部同じデザインにして、
中の文字だけ、
「POINT」
「注意」
「特典」
と変えても、少し分かりにくいですよね。
逆に全部をまったく違うデザインにすると、記事全体がバラバラになります。
ここで必要なのが、
世界観は同じ。でも役割は見分けられる。
という状態。
たとえば、
共通する配色。
同じような丸み。
似たライン。
素材のテイストはそろえる。
その中で、
POINTは少し軽く。
特典BOXは特別感を強く。
Q&Aは質問と回答が一瞬で分かる。
こんなふうに役割を分けます。
余白も装飾の一部
装飾というと、
色。
線。
イラスト。
BOX。
など「見えるもの」を考えやすいですが、
余白もデザインです。
見出しの上下。
文章とBOXの間。
画像と文字の間。
全部がギュッと詰まっていると、装飾が少なくてもゴチャゴチャして見えます。
反対に、
少し余白を入れるだけで同じデザインでも落ち着いて見えます。
おしゃれな記事にしたくて、
「何か足そう」
と思ったとき。
もしかすると必要なのは、
新しい装飾ではなく、ちょっとした余白
かもしれません。
色も増やしすぎない
かわいい記事を作ろうとすると、
このBOXはピンク。
次はブルー。
ここは黄色。
見出しは紫。
ボタンは緑。
と、色も増えやすくなります。
でも記事全体で使う色が多くなるほど、統一感を作るのが難しくなります。
そこで、
メインカラー。
アクセントカラー。
ベースカラー。
くらいを最初に決めておく。
その中で濃淡を変える。
こうすると、違うパーツでも同じ記事の中になじみやすくなります。
クリスマスなら、
赤。
深緑。
アイボリー。
必要なら少量のゴールド。
色そのものはクリスマスらしくても、全部を同じ面積で使う必要はありません。
読みやすい装飾かどうかは「消してみる」と分かりやすい
デザインを作っていると、
せっかく追加したものを消したくなくなります。
でも、
「これ必要かな？」
と思ったら、一度消してみるのも方法です。
マーカーを外す。
イラストを一個減らす。
BOXの影を弱くする。
背景を薄くする。
それで読みやすくなったなら、
なくてもよかった装飾
だったのかもしれません。
逆に消したら、
「どこが大事か分からなくなった」
なら、その装飾にはちゃんと役割があります。
装飾は、
ある方がかわいいか
だけではなく、
あることで何が分かりやすくなったか
で判断すると整理しやすくなります。
ブログ記事の主役はデザインではない
AIちいちゃんクローゼットは、
WordPressの記事を着せ替えて楽しむ場所です。
だからデザインは大事です。
でも、コーデを作るときに一番大切にしたいのは、
記事を読めること。
です。
どれだけかわいいH2でも、文字が読みにくかったら困ります。
どれだけ豪華な背景でも、本文が読みにくかったら困ります。
どれだけたくさん装飾できても、全部使う必要はありません。
記事の内容があって、
それを分かりやすくするためにデザインがある。
この順番は変えたくありません。
WordPressの記事装飾は「どれだけ使ったか」ではなく「どう使ったか」
ブログ記事の装飾は、やりすぎると読みにくくなることがあります。
でも、
装飾を使わない方がいいわけではありません。
見出しは話を分ける。
POINTは大事なところを伝える。
Q&Aは質問と回答を分ける。
ボタンは次に進んでもらう。
背景は全体をつなぐ。
それぞれの役割が分かっていれば、装飾はとても便利です。
だから、
装飾の数を増やすことを目的にしない。
何を目立たせたいのか。
読者に何を伝えたいのか。
記事全体でどう見えるのか。
そこから決める。
AIちいちゃんクローゼットでも、
かわいい。
だけではなく、
ちゃんと読める。
この両方を満たせるコーデを増やしていきたいと思っています。
服だってそうですよね。
アクセサリー。
帽子。
バッグ。
全部お気に入りだからって、全部付ければいいとは限りません（笑）。
記事のコーデも同じです。
ちょっと足して、ちょっと引く。
そのくらいが、意外とちょうどいいのかもしれません。