はじめまして。今年の四月に入社しました、新人のエンドウ豆です。
あっという間に一年が終わり新年を迎え、
なんだか少しあっけにとられたような気がします。
現在私は、LMS用のe-ラーニング教材制作（例：smartQUTE3）やWebデザインに
携わらせていただいております。
入社するまでWebデザイン系のことにまったく触れてこなかったので、
先輩方からさまざまなことを教わりながら、日々業務をおこなっています。
少し前のことなのですが、バナー画像の作成に取り組ませていただきました！
一見簡単そうにも思えるバナー画像ですが、これが意外と難しいのです…！
そこで、私がはじめてバナー画像を作った際に学んだポイントを３つ、
ご紹介させていただきます。
今回は、主にPhotoshopを使用して作る場合を想定しています。
ひよっこ視点からのご紹介になりますが、参考となりましたら幸いです。
では、よろしくお願いいたします！
バナー画像作成の３つポイント
１．ロゴや文字などの距離感
２．文字同士の間隔
３．「ひとめでわかる」ことの大切さ
１．ロゴや文字などの距離感
バナー画像に限らず「宣伝用の画像をつくるぞ！」となったとき
そこには必ず、取り入れる商品名やキャッチフレーズ、画像などがあると思います。
もっと良い表現があるのかもしれませんが、
その取り入れるロゴやキャッチフレーズ、画像などを
ここでは「要素」と呼ばせていただきます。
「距離感」とは、文字通り要素ごとの距離（＝近さや遠さ）のことです。
つまり、要素たちをそれぞれどのくらい近づけて、どれくらい離すのか
を意識すると良い感じのバナー画像が作れる…！ということになります。
今回は「商品名」、「ロゴ」、「画像」、「キャッチフレーズ二行」
を入れてみようと思います。
①
②
③
上の①～③を見てみてください。
入っている要素はすべて同じなのですが、①は要素同士が全体的に近すぎています。
②は反対に、要素がバラバラになってしまっています。
がんばって③のような程よい距離感を目指していきます。
２．文字同士の間隔
「文字同士の間隔」って、何のことをいいたいの？
はい、そう思うと思います。下の画像をご覧ください。
商品名やロゴ、キャッチフレーズに具体的な内容を入れてみました。
ここで注目していただきたいのは、キャッチフレーズの部分です。
デフォルトだと文字同士の間隔は自動設定されたものとなっています。
このままでも良いのですが、少し横に広がって間延びしている印象がありませんか？
これを、設定から「オプティカル」か「メトリクス」というものに変更します。
【After】
一見地味な取り組みにも思えますが、
これを行うことで文字がかなりすっきりして見えます！
３．「ひとめでわかる」ことの大切さ
唐突ですが、皆さまは「広告画像を何秒見ているか」を
意識されたことはありますか？
私は正直に言ってしまうとほとんどないです。
電車の中づり広告などはざーっと流し見る程度ですし、インターネットサイトの広告画像もほんの数秒見るか見ないか、くらいです。
私と似たような見方で広告を見る方は、少なくないのではないでしょうか？
バナー画像も同様です。
一瞬しか見られないものなので、一瞬でどんな内容なのかわかること
がとっても重要になります。
さて、今の状態ではすこし味気ないので
今回は教室の黒板をイメージして背景に色を追加してみます。
色はイメージ通りになりましたが、このままでは文字がとても見えづらいです。
これでは「ひとめでわかる」とは到底言えないので
すこし工夫する必要があります。
【After】
文字を白で縁取ってみました！
先ほどよりも見やすいのではないでしょうか？
学習で利用できる教材を紹介している、ということがひとめでわかるようになりました。
最後に
ごくごく簡単なご紹介ではありましたが
バナーだけでなく、広告やお知らせの画像をつくるときにも活用できるかと思います。
３つのポイント
１．ロゴや文字などの距離感
２．文字同士の間隔
３．「ひとめでわかる」ことの大切さ
が、少しでもお役に立てましたら幸いです！
さて、最後になりますが、本年もSATTをどうぞよろしくお願いいたします。
