こんにちは!
CB部クリエイティブディレクターの竹市です。

先日から、非デザイナーの方向けにブログや動画で役立つ「サムネイルの作り方」の記事の連載をはじめました!
これからPRするすべての人に役立つノウハウを、何記事かにわけて連載していこうと思います。

前回は初心者向けの「サムネイルの作り方」で、写真と文字のレイアウトについて気をつけるべきことを書きました。

今回はさらにもう一歩!文字の取り扱い方のコツをお伝えしようと思います〜

文字を置くだけなら、一見かんたんそうに思えますが作ってみるとなんかパッとしない・・・なんてことは多いはず。
考え方を少しプラスするだけで見違えるポイントをお話します。

ポイント① タイトルを全て画像に入れなくてもOK!

こちらは文字で構成するサムネの場合。

記事を書き終え、画像を作るぞー!となったとき、タイトルをそのまま画像に打ち込んでいませんか?
本当に読む人の事を考えるなら、まずはここから考えねばなりません!

ただでさえサムネイル画像の最小表示サイズは小さいのに、こんなに文字を詰め込んでは読む気もなくなってしまいます。

目指すのは「0.5秒でなんの記事か分かるサムネイル」。

”これさえ読めれば伝わる”というワードを洗い出し、それを見せる構成にしてみましょう。
必ずしもタイトルから引っ張ってくる必要は無いですし、きちんと文章になっている必要もありません。

“記事の内容を画像にする”のではなく、”クリックしてもらうための画像をつくる”ということを意識すると良いと思います。
だいたい10文字以内で表現できるよう練習してみましょう!

ポイント② マージン(空白)を意識してみよう

レイアウトにおけるマージンとは余白のことです。
マージンを多く取ると洗練されたイメージになり、マージンが無いほどがやがやとしたイメージになります。(スーパーのチラシなど)

また、文字の周りにマージンが無いとパッと見の視認性が低く、読むのにストレスを感じるレイアウトになってしまいます。

余白をとるといってもただ空ければいいというものではありません。
・上下左右は同じだけとること
・取り扱う情報によって余白の大きさを変えること
・行間は字間より大きくとること

これを守るだけで、画面に規律性が生まれ、安定したサムネイル画像になります!

ポイント③ ガイドラインとメリハリを意識してみよう

こちらは私がよく使う方法で、「まとまり」と「メリハリ」を同時に叶えるテクニック!

文字を打って改行すると、行によって文字数が違うことが多く、がたがたした状態になりますよね。
これを逆手に取って大事なワードを目立たせることができます。

一番長い文字数の行を基準に、縦にガイドラインを想像します。
足りない文字数の部分をガイドライン幅までサイズアップする、または字間を開けることで文字幅をすべて揃えます。

大きい文字、周りに余裕のある文字は必然的に目に入るので、自然とメリハリが生まれます!

注意するべきなのは、このとき目立たせたいワードを短い行で改行すること!
どこで改行するかを考えて作らねばならないということですね。

これが出来れば、もし文字が多くても自然と読ませたいワードに視線を誘導することが出来るので、まとまりを生み出しつつもメリハリある文字列を作ることができます!

まとめ

ここまで紹介したテクニックをまとめると…

・画像に入れる文字は必要なワードだけ!
・適度なマージンを取る
・見えないラインに文字を揃えるとまとまる
・優先度によって文字サイズを変える

 

今回はあともう一歩気にするだけで、周りの記事と差をつけるレイアウト術でした。

簡単なことに思えますが、作ってみると意外とやってしまいがちな読めないサムネイル
少しのことを気をつけるだけでPV数が上がるなら損はないので、ぜひチャレンジしてみてください!

わたしのこれまで作成したサムネイルはこちらの記事一覧から見れるので、ぜひ参考にしてみてください。

次回は、配色についてのお話をします。乞うご期待!

WRITER
竹市 綾香
竹市綾香
オルトプラスのインハウスデザイナー/クリエイティブディレクターです。 デザインの力で企業文化を明確化していくことをミッションとしています。 好きなものは映画とアメコミと横丁。