2021年01月13日 2021年11月25日

ノンデザイナーが、アイキャッチ画像をデザインしたいとき読む記事

ざっと書いたので、ちょっとずつ画像を付け足してます。デザインの基礎知識は別記事に書き足そうかな?

ノンデザイナーがオウンドメディアやSNSの運用担当になったら

  • アイキャッチ画像を作りたい
  • OGP画像を作りたい
  • SNSの通常投稿に使う画像を作りたい

のような要望が出てくるのではないでしょうか。

この記事では

「キミ、Twitterやってるでしょ? SNS運用担当ね!」突然アサインされた。

「インハウスライターなんだし、オウンドメディアの運営丸っとやってみよっか!」領域広げる系の指示が来た。

そんなお悩みにお答えすべく、アイキャッチ画像(SNSの通常投稿画像)を自在につくれるようになるために、覚えておいたらハッピーなことをまとめてみました。

作り方の流れ

アイキャッチ画像はカンバスサイズが小さく、デザインが破綻しづらい特徴があり、ノンデザイナーでも手をつけやすいといえます。

作り方の流れもシンプル。

アイキャッチのサイズ、ターゲット、掲載要素と優先順位を確認し、サムネイルを書いて(デザイン案のたたき台)、デザインソフトを整形したら完成。

最後に、デザインの意味づけができてるか? 予定通りの優先順位で視線の誘導ができてるか? 確認したら完成です。

どんなデザインソフトを使うの?

お写真を使う予定があるなら、写真の加工もできるPhotoshopがオススメです。

Adobeソフトはサブスク制ですが、個人向けフォトプランは980円でPhotoshopと 写真現像アプリのLightroom、20GBのAdobeストレージを利用することができます。

もちろん、Canvaのような無料アプリを使っても大丈夫ですよ!

アイキャッチのサイズ

掲載する媒体の画像サイズを確認しましょう。

一例

  • Twitter 静止画 16:9
  • インスタ 1:1
  • ブログサムネイル:ブログテーマによる
  • OGP:16:9

載せたい要素を決める

伝えたい要素を考えます。複数ある場合は優先順位をつけることを忘れずに。

一例

  • タイトル
  • リードコピー
  • サブコピー
  • 日程
  • 写真

ターゲットを決める

どのようなターゲットの目に止まったら嬉しいか、想像します。

一例

  • 企業のウェブ担当になったばかりの人
  • 20代男女
  • まだ、業界用語もあやしいレベル
  • やる気に満ち溢れている

デザイントーン(ふんいき)を決める

ターゲットが好みそうなデザインを考えます。決めづらい時は、ターゲットが読んでいそうな雑誌やメディアを思い浮かべてくださいね。

一例

  • 入門編っぽさ。難易度低め。
  • ビジネス感、信頼感は担保。

サムネイルを書く

サムネイルとは、親指の爪くらい小さなラフのことをいいます。要素のレイアウトをざっと書いて検証します。

サムネイルは、iPadのコンセプトというアプリか、手描きで紙に書いています。使うツールに決まりはありませんが、枠の比率を制作物と合わせておいた方が制作時に困りません。

手を動かす(実制作)

サムネイルを考えた後に、アプリケーションで制作します。

まずは、福笑いみたいにアートボードに要素を全て並べてください。並べた要素をサムネイルを見ながらレイアウトし、違和感のあるところは調整していきます。

ひとことアドバイス
レイアウト作成時点ではグレイスケール(白・黒・グレー)でレイアウトすることで、色に引っ張られずレイアウトを検証することができますよ。

レイアウト

レイアウトする上で意識したいポイントはこちら。レイアウトひとつで情報が伝わらなくなってしまうため、サムネイルレベルで検討しておくと仕上がりが早くなるはずです。

  • 視線の流れ:望んだ通りの順序で情報を読んでくださいそうか?
  • 情報のグルーピング:同じ扱いの情報はグルーピングできているか?
  • レイアウトの意味が成り立っているか?:優先順位に沿った位置、サイズになっているか?
  • 余白の整理:余白は美しいか? 整っているか?

フォント

書体選びも大切な世界観づくりの一端を担います。
書体以外にも、文字詰め、行間、ジャンプ率などでかなり印象が変わります。

  • 書体:明朝体、ゴシック体、筆記体
  • 文字詰め
  • ジャンプ率
  • 可読性

書体

書体に関しては、複数の書体を同時につかってしまうと読みづらくなるため、見出しはこの書体、英字はこの書体、リードはこの書体、のように、決め打ちした方がまとまります。

また、半角英数字は、英字書体を使うと美しいです。日本語フォントよりも少し小さく見えるため、フォントサイズを少々大きくすると良いでしょう。

文字詰め

文字詰め(カーニング/余白の調整)は、文章を読むリズムを整えるための作業です。

参考までに、ベタ打ちの文字列と、少し調整した文字列のアニメーションをご覧ください。たとえば「ト」は、必ず大きな隙間が開きます。一定のテンポで音読するつもりで、余白を整えてあげてくださいね。

文字のジャンプ率

配色

色がしめる印象はとても大きいと言えます。色数が増えると難易度があがるため、慣れるまでの間は色数を絞るといいでしょう。最大3色程度ですとまとめやすいです。

  • 明度差
  • 視認性
  • 色の持つ意味

テクスチャ

  • 質感

などに注意しましょう。

理由づけ

どうしてそのカタチ、色、書体、質感を選んだのか? 説明できればかんぺきです!

どの程度制作時間がかかるの?

要素の多さやオリジナル素材の使用率に応じて、かかる時間が変わってきます。

写真一枚にさらっと手描き文字を載せる程度でしたら、複数位置を検討しても20分程度かと思います。

4人の登壇者がいるセミナー告知の場合は、選んだレイアウトにもよりますが2時間半程度見ておいた方が安心です。

また、フレームワークのような抽象的な題材を扱うデザインの場合は、モチーフから考える必要が出てきます(しかも、共通認識が取りづらく、リテイクになりやすいとも言える)。4時間程度見ておいた方が安心です。

つまり、制作内容によっては自分で作るより外注した方が費用対効果が良くなるケースがあるため、どのラインまで自分で担当するか決めておいた方が良いと思います。

おわりに

久しぶりにアイキャッチを作っていて、難しいなぁと感じたのは、ターゲットに与えたい印象が矛盾しているケースでした。自身で全てのコンセプトを考えられるときは、なるだけ矛盾でないように設定すると作りやすいかもしれません。

複数の要望がある場合は、要望Aに寄せた案、要望Bに寄せた案、折衷案のように複数トーンをつくり、検証すると良さそうです。

また、作っているうちによくわからなくなってしまうことがあります。そのような時は、一度時間をおいて見返したり、離れて見てみたり、実際の投稿画面に当てはめて確認すると、判断しやすくなりますよ。

それでは、楽しいデザインライフを。

発注者目線の記事はこちら

いろんな方の素敵まとめ

同じカテゴリーの記事5件