本当にやっているバナーやメインビジュアル制作の工程
こんにちは。サービスデザイン部の出井です。
私はグラフィックデザイナー（制作系）→ ウェブデザイナー（インハウスサービスデザイナー）として、19年くらいデザイナーとしてやってきたのですが、ここで一旦基本に立ち返った記事を書いてみます。
「バナーやメインビジュアル制作時のチェックポイント、及び大事にしていること」についてです。
世の中に似たようなノウハウはいっぱいあるのですが、これもその一つです。 ニュアンスの違いを楽しんで（？）頂ければと思います。
この記事の特徴としては、制作のTIPSよりも前半の理解の工程に重きを置いて書いてみました。
また、途中に癒し要素として、「丸顔の野良猫画像」を差し込んでおきます。
ふぅ...
Index
バナーやメインビジュアルの役割
前提理解（最重要）
レイアウト（もうここで8割完成）
色彩計画、装飾（インプットが大事）
調整
1.バナーやメインビジュアルの役割
バナーやメインビジュアルの役割はこんなところでしょうか。
ターゲットに能動的にアクションしてもらう為に、商品・サービスの魅力を伝えるもの。
その為にアレコレ考える訳ですね。
例えば1：単語選び、文言の組み合わせ、意味の塊、強弱と距離感、レイアウトなどで端的に理解してもらう
例えば2：背景、フォント、文字詰め、装飾などで良い品質（体験）を想像させテンションを上げてもらう
2.前提理解（最重要）
さて、いきなり最重要パートです。 そうなのです、バナーやメインビジュアルがしっかりとその役割を果たせるかどうか、それは、
最初の「前提理解」という「土台」があるかどうかが肝要となります。
（言い切ってしまった）
UX5段階モデルで言うところの「戦略と要件」です。
まずこの辺りを依頼者にヒアリングしよう
なぜそれをつくるのか？目標数値は？
それがサービスにどんな影響を及ぼすのか？
どんな経緯でつくることになったのか？
関係する会社、相関関係、利益の流れはどんな感じか？
マーケットと競合はどんな感じか？
いきなり最初から詳細まで詰める必要はないかもしれないですが、
後から五月雨でヒアリングするよりも初期で理解を深めておくとお互い楽です。
そして、この工程は自分がこの後スムーズに仕事できるかどうかに大きく関わります。
大事なことをしっかりヒアリングしておかないと、
目的が達成できない意味のないものができます。それは検証にもならないです。
「そういうことじゃないんだよなー」って言われます。手戻りと自己嫌悪で悲しみまみれになります。
「目的と目標、それを実現するために考えている要件」を念入りにヒアリングしたら、 必要に応じて、要件の変更や追加などを提案しましょう！
ここで大事なことは、
「持ち込まれた要件を満たすことがビジネスゴールに最適な答えなのか？」 この疑問を持つことです。
「依頼者の考えも一つの案でしかないよね？」
ということで、そのまま飲み込まないことです。
（依頼を受けた時点であなたも運命共同体です）
違和感があればここで正さないと最後までいってしまう可能性があります。
（到着したよ！え？ここどこ？みたいなことにならないように）
設定した「目的と目標」を達成できない限り、自分を含め、関わる人たちはハッピーになれません。
ちなみに、制作のモチベーションは、「つくる楽しさ」ではなく、
「（将来的な可能性も含めた）利益と良い影響を獲得すること」 に置けると良いと思います。
🤔メモ：その場の人間関係に気を遣うよりも、多少対立してでもビジネスゴールを真剣に考えて意見する人の方が、結果的にはずっと感謝・信頼されます。
何事も上位工程の理解が大事な訳ですが、その理解を助けるのが、業界知識、他業種のノウハウ、時事ネタ、一般常識になります。日常的なインプット（新聞的読み物）は意外と役に立っているということですね。
ひと休み...
3.レイアウト（もうここで8割完成）
さて、前提理解のセクションが長くなりましたが、ここからが制作時のノウハウになります。
タイトルで「8割完成」と言ってますが、すいませんちょっと盛りました。
全制作時間の8割ではなく、この工程で8割程度の完成がイメージできてるはずだ！という意味になります。
最初にこの辺りから埋めていこう
ターゲットはどんな人？
どんなストーリーでこの制作物を見るの？
一番伝えたいことはなにか？二番目は？
情報が足りない場合、前工程の「前提理解」が足りないことになりますので、再度ヒアリングしてください。
文言が決まったら入れていこう
文字のサイズを優先順位通りになるようにしよう
ジャンプ率をしっかりとってメリハリをつけよう
字詰め（カーニング）もここでやっておこう
注意：色はまだ入れないよ！
さて、ここで前工程の内容が表現されていれば、もう大失敗はない！と言っていいです。（はず）
不安があればこの段階で依頼者に確認しよう。
そして、この後の工程で悩んだらこの工程まで戻って「伝えたかったことは何だったか？」を再確認すると良いですね。
レイアウトはパターンを基本にしよう
カチッとハマりやすいレイアウトパターンを知っていると、レイアウトで悩むことはとても少なくなります。
経験上なんとなく並べてもなかなか決まらないので、やめた方が良いです。
（たまたまとか再現性の低いことはノウハウにもなりません）
1.縦割り・横割りなどの分割レイアウト
文字のジャンプ率と同じく、レイアウトもメリハリ（強弱を曖昧にしないこと）が大事です。
「メイン・サブ（7:3、8:2）」「並列（5:5）」「メイン・付加情報（9:1）」など関係が直感でわかるように。
注意：人間の目は錯覚があるのでそこを含めたバランスで柔軟に考えよう。
メイン・サブ（7:3、8:2）的な例
並列（5:5）的な例
メイン・付加情報（9:1）的な例
2.イメージを全面に出したり、余白を大きくとる
写真やイラストのメインビジュアルにパワーがあるとき、その力を最大限利用するために使います。
塗りや線で区切らない方が空間に広がりが出るので仕上がりは美しくなります。
3.三分割法、黄金比、白銀比を使う
比率のメリハリという意味では、上に出した縦割り横割りと考え方は近いです。
三分割がガイド引かなくても、脳内で処理しやすいので便利です。
（三分割は、本来は、クロスしたポイントに重心を置くような手法だと思いますが、単純に縦横を三分割するとまとまりやすいです。）
🤔メモ：ちなみに日本人の好みの比率は、白銀比、正方形、黄金比の順番だそうです。 おそらく自然界と文化に由来する人間の本能なのでしょう。
次工程の色の持つ印象も含め、脳には逆らえないので従うのみです！
4.色彩計画、装飾（インプットが大事）
さて、ここまではロジックで組んできたのですが、ここからは個性や感性もミックスされてきます。
デザイナーとしてこだわれる工程でありながら、3年相当以上の実務経験がないと沼にハマりやすいところです。
細かいテクニックは色々ありますが、大事なことはシンプルです。 「ターゲットが能動的に行動を起こしたくなるような印象」になるように意識することです。
前工程では「メッセージ部分の訴え」をつくり、ここではそれに「印象部分の訴え」を足していく、そんな作業になります。
しかし、この工程が前工程でのメッセージを弱めてしまうこともあります。
なぜかというと、この工程の装飾はノイズになりやすく、やりすぎると失敗します。 装飾を足すときは、取捨選択を慎重に行っていきましょう。
特に捨てる勇気が大事です。（自分の努力に対して冷徹になりましょう）
沼にハマった時の解決方法について
そもそも沼にハマる理由は、
完成イメージが頭に浮かんでないのに無理やりつくろうとする → ほーらしっくりこない😫
このループ、さらに焦りでループが加速し、さらに視野も狭くなっていくという状態だと思います。
人間「インプットしてないものは取り出せない」です。
ないもんはないので、、、
詰まったら、深呼吸をして、画面から顔を離して、狭まった視野を広げよう。
決まらないそのアイデアは、固執せず一回横にどけておこう。
そして、躊躇せずに世の中からヒントを探そう。
https://www.pinterest.jp/
https://1guu.jp/
https://bookma.torch.blue/
https://muuuuu.org/
https://bm.s5-style.com/
この3つを意識して作業するとまとまるのが早い
色に関してはロジックがあるので、この理解を深めておくと答えが出しやすくなります。
アクセントカラーとベースカラーを設定する（メインビジュアルやロゴから展開することが多い）
目立たせたい要素以外は類似色で抑え、目立たせたい要素に補色を使う
目立たせたい要素とそれ以外に明度差や彩度差をつける
全体ではある程度トーンを揃えて統一感を出す
🤔メモ：デザイナーの職業病は「日常的にデザインを意識して追ってしまうこと」だと言われますね。
デザイン表現の広さ、深さ、トレンド察知力をつくるのは「良質」なインプットの量で決まると思います。なので良いデザイナーほどそのクセが抜けないのかもしれないですね。
5.調整
前工程の3と4、レイアウトと色彩計画を「否定して再度つくりなおす」ようなイメージです。
入りづらい文言を書き換えたり、レイアウトを別のパターンにしたり、背景を入れ替えたり、メインカラーを変えたり。
指先を動かすような小さな変更ではその悩みは解決しないかもしれません。
大胆に変える方が完成が早いことが多いです。
前工程で述べた「沼にハマった時の解決方法」と同じです。
まず手を止めて下さい。
自分でつくったものの弱点と解決方法をじっくり考えましょう。
詰まったらすぐに近そうなアイデアを検索して、頭の中で当てはめてみましょう。 とにかく考えましょう。
頭の中で良さそうなものが描けたら、そこでようやく手を動かしましょう。
（脳内をすぐに再現できるので手描きはおすすめです）
考えると当たり前のことなんですが、
「頭の中で描けないものは手元でも描けない」
ということを覚えておくといいかもしれません。
最後に、自分のアウトプットは世の中とターゲットに認められる品質に到達しているかどうか。
客観的に評価してみよう。
品質へのこだわりはデザイナーの存在意義の一つ。
（デザイナーがこだわらなかったら誰がこだわるんだ！？ そしてこだわりには際限がないため、デザイナーは比較的残業が多い職種です… 涙）
🤔メモ：「デザイナーだからセンス良いね」ってコメントありますが、センスは「良質なインプットの蓄積」によって成されます。
なので「センスが良い」＝「能動的に良質なインプットをたくさんしている」＝「好き（または努力している）」
と言えそうです。わかりやすい例だとファッションですね。
また、水野学さんの言う「センスは真ん中がわかるということ」これも納得です。 お笑いの例だと「おもしろいとつまらないの真ん中がわかっているから、狙ってスベれる」ということになります。
デザインでも、ちょっとハズして印象には残したい、けど空気読んで嫌われないように、というのは似てると思います。
最後に
デザイナーの特殊スキルは、外からは「イメージを再現する小手先のスキル」と見られがちです。（言い方悪い）
ですが、本当の特殊スキルは「相手を見定めて、その人に合った良質なデザインを提供するスキル」だと思います。
そこにビジネスゴールの実現をセットにして考え、提案することができるのが、プロフェッショナルなデザイナー、ということだと考えています。
