LiBz Tech Blog

LiBの開発者ブログ

【デザイン】アイキャッチ画像を作るアプローチ

こんにちは、LiBのデザイナーのスナダです。 だんだん秋になってきましたね、服はあるのに着る服がないです。

さて、近頃、LIBzCAREER内のコンテンツや 広報・イベントのアイキャッチを作ることが増えてきたので 今回は、アイキャッチ制作する際によく実行するアプローチを紹介します。

「当たり前だろ!」みたいな部分もあると思うのですが、「わかるわ〜」みたいになっていただけると幸いです。それではいってみましょう!

前提

まずはデザインに入る前に事前準備をします。

すり合わせをする

起案者と今回訴求したいポイントや使用シーンやすり合わせて 自分の中に腹落ちさせてイメージを固めていきます。 文言なども、ここで固めます。

キャッチアップ

基本的にターゲットは20~30代女性となるので、 同じターゲット層の雑誌・WEBメディアや 競合サービス・Pinterestなどを見てトレンドやテイストなどをキャッチアップします。

「dマガジン」は月額400円(税抜)でファッション誌、ライフスタイル雑誌、週刊誌、ビジネス雑誌など様々な雑誌を読むことが出来るので、とってもオススメです。 magazine.dmkt-sp.jp

ターゲット層がやや若め(10代)のViViなども 誌面の文字の使い方などがユニークで参考になるので アラサーですがチェックします。

さて、作っていきます。

基本的にアイキャッチ・バナーは、文字を認識してほしい目的のことが多いので文字の視認性が高くなるようなアプローチをすることが多いです。 今回はLiBzCARREER内の魅力的な求人をテーマに合わせて紹介する「求人特集」のアイキャッチを例に、パターンをいくつかご紹介していきます。

文字の強調パターン

01 下地をずらして、強調。

文字の下地をずらして、文字部分を強調します。

02 背景をぼかして、文字を浮かび上がらせる。

背景をぼかすことで、文字を強調し、視認性をアップすることができます。

03 対比する色を使う。

文字及び背景色を、白と黒の対比する色を使ってみています。

飾りで、強調。

細い吹き出し風の飾り線で、キャッチコピーを強調!

枠線で文字部分を強調しています。

配色に迷ったら

配色サンプルを見たり、配色ツールを使ったりします。 coolors.co 「colors」はキーボードのスペースキーを押すたびに、 5色のカラーパレットを自動作成してくれるツールで、固定色を指定できたり微調整もツール上で出来るので便利です。

まとめ

このような感じで、目的やターゲットに合わせて、 事前準備〜実制作を繰り返していきます!

フォントや色の組み合わせや飾りで テイストやバリエーションは無限大となりますね。

何かの制作の参考になれば幸いです!

LiBzCARREERでは魅力的な求人をピックアップした特集も随時更新しているので、ぜひチェックしていただけるとうれしいです。 libinc.jp

それでは、よい秋を!スナダでした。