写真×文字のバナー作成でやってはいけないパターンと注意点

ECショップやWEBサイトを作っているとき、困ってしまうのが画像作成。
ショップのキービジュアルやバナーなど、綺麗でおしゃれなデザインを作りたいのに「伝わらない」「目立たない」などなど…そんなデザインになってしまう人も多いのではないでしょうか？
画像制作の際、一番重要なポイントのひとつが、”写真＋文字の組み合わせ”。バナー制作の経験がある方なら、写真＋文字をセンス良く配置することが、簡単なようでとても難しいことだと実感していると思います。
今回の記事では写真×文字のNGパターンを例に挙げ、覚えておきたいポイントをいくつか紹介したいと思います。

写真、文字のコントラストが弱い

デザインにおける一番の目的は、“伝えたいことを相手に明確に、きちんと伝える”というコミュニケーション。読み手やユーザーにとって「なんか見づらいな…」「よく分からない…」と思われてしまっては、せっかく時間をかけて作った画像やサイトが勿体ないですよね。さらに、それに加えて「不安」や「煩わしさ」といった印象を与えてしまうと、ページを離脱してしまうことも…。

写真×文字の組み合わせでよくある失敗としてあげられるのは”写真と文字のコントラストが弱すぎる”ことです。そんなときは、写真に対して文字のコントラストを強くしてみましょう。
また、逆に写真自体の明るさを調整したり、フィルターや透過効果を使うことでコントラストを強くすることもできます。

コントラストを強調してデザインの一部分を際立たせると、視覚的に訴えるデザインの力が強まります。その結果、購入者さまに初見のパッと見で訴求内容を理解してもらえたり、不安感を拭うことができます。

写真と文字のイメージが合ってない

どんな写真を使うかでブランドのイメージが変わってくると言っても過言ではありません。使用している写真と文字のイメージや雰囲気がマッチすれば、コンテンツの内容がダイレクトに伝わったり、ターゲットに刺さるコンテンツになります。

たとえば、下のバナーは、海をイメージした商品なのに、都会的なビルの写真を組み合わせています。

イメージ写真と文字のギャップが大きいと、伝えたい内容が伝りません。
同じように、文字のイメージが内容に合っているかも重要です。それぞれの文字には、「カジュアル」「モダン」などの独自の雰囲気があります。

あなたも普段、何気なく目にする広告などで、無意識に写真や文字のイメージで印象を判断していると思います。自分で作っていて分からなくなってしまった場合は、客観的に見てもらえる周りの人に聞いてみるのも良いでしょう。

余白を余ったスペースと思い埋めてしまう

一見簡単なようでとても難しいのが余白のバランス。
「スペースがあるから、つい何か埋めたくなる…」あなたは、そんなことありませんか？ しかし、余白部分を有効利用すると、デザイン全体の構成で特定の場所に注目を集めることができます。

空いているスペースを勿体ない！と文字やイラストなどで埋めてしまわず、思い切って言いたいことを絞るとぐっと洗練されたイメージを与えることができます。

また、フォントやスタイルをあまりに多く組み合わせせてしまうと、複雑になり情報量が増えて視認性が悪くなります。
しっかりと読ませたい文字は「シンプルではっきりとした書体」にしましょう。

写真が強すぎて文字が目立っていない

「クールな写真を使いたい！」「画像を載せたい！」という気持ちのあまり、写真のインパクトが強すぎる…なんてことはありませんか？
余分な大きな余白があったり、無駄な装飾が多い、背景として文字の邪魔になる部分のほとんどない写真が、テキストを入れる画像にはぴったりです。情報が多すぎる写真写真を背景に使うと、文字が読みにくく、最悪の場合全く読めない状態になることもあります。

もし、あなたがバナー用の写真を撮影するのであれば、文字や少しの装飾を入れるための十分な余白を確保できるかを考えてから撮影に挑みましょう。背景が複雑な写真を使用したい場合は、文字下にボックスを置いたり、背景を透過してみましょう。文字下のテキストボックスを透過にすることで、写真に影響を及ぼすことなく文字を配置できます。

いかがでしたか？デザイナーにとって、０から画像を作るのは難しいものです。
しかし、いくつかの基本的な最低限のルールさえ認識していれば、完璧ではなくとも、見る人にとって分かりやすい画像は作れるのです。