こんにちは！ASUE株式会社広報のN村です。

さて、本日はこれまで2回にわたってお送りしてきたバナー制作講座の第3回「レイアウト・素材選びのコツ バナーのリサイズ編」をお送りします！

これまでのあらすじ

広報のN村は社内のデザイナー・デザキとWebデザインスキルを得るための契約にサインしたのだった。

そろそろ冒頭がネタ切れなんだよな……

本講座は、弊社Webデザイナー・デザキが社内の広告運用者を始めとする非デザイナー向けに実施している、バナーデザインのポイントやそれに伴う作業（ex.写真の切り抜き）などを実践的に学べる講座です！詳しい講座の概要については、シリーズ初回のブログをご覧ください。

今回は、特にWeb広告の運用などでよく必要になる「バナーのリサイズ」をもとにレイアウトのコツなどを学びました。例によって、わたし広報のN村が契約書にサインして（してない）参加中なので参加レポートをおとどけします！

記事の後半はデザキの解説をもとに書いた、リサイズやレイアウトのコツをご紹介しているので、そこだけでも知りたい！って方は後半をご覧くださいませ！！

今回の課題：前回制作したバナーのリサイズに挑戦しよう！

Web広告運用の現場や、そうでなくても「このバナーをここにも使いたいけどサイズが合わない…」のような場面でも必要になるのがバナーのサイズ変更。ちょっとサイズが変わっただけでも、意外と細かい調整が必要になってきたり、上手くハマらなかったり……と問題がでてくることも。

今回は前回制作した300x250のバナーを、縦長の160x600・横長の720x90・正方形の300x300にリサイズすることに挑戦しました！

300x300なんてそんなに変わらない……と思っていたけど、意外とアレ？となってしまったり……。

ということで、実際にわたしの制作物とデザキからもらったフィードバックをご紹介します！

既に広告では使われてないバナーサイズもありますが、練習用として採用しています。

初回提出

元のデザインがあるしレイアウトくらいちょちょいのちょい（言い回しが古い？）でしょ！と思っていたわたしをこの辺りで5回ブン殴りました。痛かったな。（殴ってません）

メインコピーの緑が大きくなってしまうのは気にしたのに、ピンクの吹き出しが大きくなっていることはスルーしてしまいました。なんで。あとは「テイストを保つ」ってどういうことだ？と思ってしまって変えすぎたのも×。

また、縦型のバナーのときにどうしても目立たせたい商品画像が小さくなってしまうことが気になって、カゴ+前輪の前半分でトリミングして使用しましたが、今回の場合だと「電動自転車」であることがわかりにくいため、全体の画像を使うことに。

モーターまで入れば、「電動自転車」ということはわかるのでデザイン的にはOKですが、クライアント側から「全体を使ってほしい」という指摘が入る場合もあるので、商品画像を利用する際にはここも気をつけたいポイントですね！

2回目提出

3回目提出

最終提出物

元々のデザイン（300x250）を踏襲しつつ、どのサイズでもいい感じになりました。ちなみに今回、調整の時間のほとんどを紙吹雪の調整に費やしました……。

レイアウトの調整の場合は、細かい微調整がより重要ですね……。
脳内BGMはミュージカル「パレード」でした、気になる方はググってみよう。

ということで、ここからはお待ちかね！解説パートです。

リサイズのコツは「レイアウト」と「素材の選び方」

今回の課題のポイントは主に以下の2点でした。

まずはレイアウトのコツから、ご紹介します。

今日から使える！？レイアウトのコツ〜「画面三分割法」と「グリッドシステム」

レイアウトは無限のパターンがあるものですが、慣れていない・まだインプット量が不足している状態であれば、とっつきやすくて再現性が高い手法に倣うといい感じのレイアウトが組みやすくなります。

今回の解説ではそのとっつきやすくて再現性が高い手法として「画面三分割法」と「グリッドシステム」をご紹介します！

画面三分割法

描画エリアをそれぞれ縦横三分割するようなガイド線を引き、それに合わせて要素を配置する手法です。元々は写真や絵画のレイアウト法として確立しているものですが、バナーにも流用できます。

今回の自転車のバナーだったらたとえば……。

ガイド線の上に要素を置いたりガイドとガイドの間のマス目に合わせて要素を配置すれば、レイアウトが組みやすくなります。この手法だと、ガイド線のルールが縦横三分割なので、どんなサイズの場合でも対応できますね！

クリームソーダが飲みたいです。（美味しいお店を教えてください）

お家でクリームソーダを作る時は、氷の上にアイスを乗せないと、モコモコの何かになるらしいですよ。

（私も飲みたい）

グリッドシステム

次にグリッドシステムのご紹介です。Webや印刷で使われている手法で、規則性のあるグリッドを描画エリア内に作成して、そのガイドに従ってレイアウトを行います。規則正しいグリッドの秩序に従うことで、きれいなレイアウトが組みやすくなります。

似た言葉で、「グリッドデザイン」という言葉を聞いたことがあるかもしれません。（共存させることは可能ですが、）グリッド状のガイドに沿ってデザインするグリッドシステムと、矩形の要素をグリッド状に並べたグリッドデザインでは意味合いが違ってしまうので、混同しないように要注意です。

今回ご紹介した方法は扱いやすくて再現性が高いものでありますが、レイアウトを組むためのいち手法でしかありません。しっかりいろんなデザインに触れてインプットして、自分でやってみて、試行錯誤を重ねるうちに「これだ！」と思えるしっくりくる感覚が出てくることがあります。

感覚的な話で恐縮なんですが、紹介したノウハウなどを使って「これだ！」と思えるものが作れる、つまり「自分が納得できるものを自分で作れる自信」が出てくると、デザインの上達がグッッと近付くし楽しいと思います！

デザインはすっっっっっごく自由です！

か、かっこいい……！

素材選びのコツは理想の80%・テイスト・最終的には総当たり戦も！？

さて、今回わたしは課題をやる際、新しい素材の追加は行いませんでした。が、デザインによってはサイズ変更によって不自然な空きを埋める必要が出てきたりと素材を追加する必要があります。ということで、ここからは素材選びのコツをご紹介していきます！

追加する場合に関わらず、デザイン制作時には必ずついて回る「素材探し」。やったことある方にはわかると思うんですが、素材サイトから既存のものを探すので、理想の素材を見つけることはなかなか難しい……！

ということで、素材を選ぶときの第一のコツが「理想の100%を求めず、80%くらいの素材を探す！」です。

単純なものでも探すと理想形では見つけられないの、あるあるですよね……

そして素材を探すの、結構楽しくて時間が溶けるので要注意……！

理想に重きを置きすぎずに、「大体」でいきましょう！

デザインと素材のテイストを合わせよう

もやっとした背景に対して、Aの素材ははっきりとしたフラットなイラスト（そして色もビビッド）、Bの素材は水彩っぽい雰囲気、Cの素材は鳥獣戯画です。

Aの素材を使ったときは、背景から浮いてちぐはぐな感じですね。

ということで、素材を追加したり、デザイン時に素材を選ぶ場合は「テイストを合わせる」と変な方向にいってしまうことが避けられます。

フラットなデザインならフラットな素材、写真を使ったデザインなら写真を上手く使う、グラデーションや水彩のようなふわっとしたテイストならふわっとした素材を追加する……などなど、それぞれデザインのテイストに合った素材を選びましょう！

ちなみに、理想の80%で探してもいい感じの写真が見つからなかったので見本が死んでます。ごめん。

やっぱり上手く選べない！そんなときは「しっくりくるまで素材をはめる」総当たり戦へ

いくら頑張って探してみても、「コレだ！」と思ってはめてみた素材がぴったり合った！ということはデザイン業をウン年（※本人談）続けている弊社Webデザイナーのデザキでも30%程度だそうで……。経験を積んでも、これか？あれか？どれだ？やっぱりそれ？……などなど、悩むことが多いんだとか。

況やデザイン初心者をや。

デザイン初心者であるわたしがいくら効率的に素材を！入れるぞ！と思ったところで、上手くいくはずないですね……。それっぽい素材を総当たり的にダウンロードしまくってどんどんデザインに当てはめてみるのがいいそうです。非効率にも聞こえるけど、逆に早く済むこともあるんだとか！！

いろんな素材を見ることは、探す練習にもなりますよね！

まとめ：リサイズをあなどるべからず……

さて、リサイズなんて元のデザインあるから楽勝じゃん！！！！！！！と思った方も多いかもしれません。わたしです。

実際に3サイズ分を新たに作成してみて、そして解説を読んで、少しレイアウトを変えるだけでいろいろ調整が必要なんだな……！と改めて感じました。

ご紹介したレイアウトの手法や素材の選び方などを上手く活用していきたいと思います！

次回はちょっと趣向が変わって、「写真の切り抜き」に挑戦します！苦手なPhotoshopだ！
ちなみに現時点で課題を終えてますが、初めて出会った方法もあって目から鱗の連続でした。お楽しみに！

続きが気になる！写真の切り抜きが苦手！という方は、ASUE株式会社のメールマガジン「ほぼ週刊ASUE通信」にて更新のお知らせをしているので、ぜひチェックしてみてくださいね！

メルマガではブログの更新以外にも、Webマーケティングに関する気になる記事や最新情報などもゆる〜くおとどけしています！