よむよむカラーミー
オンラインショップ運営を、
もっと楽しく。
オンラインショップ運営を、
もっと楽しく。
MENU
気になるワードは?

デザイン初心者さん必見。写真×文字の画像作成でやってはいけない6つのパターン

オンラインショップを作っているとき、困ってしまうのが画像作成。ショップのメインビジュアルやバナー画像など、おしゃれでインパクトのあるデザインを作りたいのに「伝わらない」「目立たない」そんなデザインになってしまう人も多いのではないでしょうか?
画像を作る際、もっとも重要なポイントのひとつが、写真と文字の組み合わせ。自分でバナーを作ったことのある方なら、写真と文字をセンス良く配置することが、かんたんなようでとても難しいことだと実感していることでしょう。
今回は、写真×文字のNGパターンを事例に、覚えておきたい6つのポイントを解説します。

1. 写真と文字のコントラストが弱い

デザインの主な目的は、“伝えたいことを相手に分かりやすく、きちんと伝える”というコミュニケーションです。購入者さまにとって「見づらい」「分からない」と思われてしまっては、せっかく時間をかけて作った画像やサイトに意味がなくなってしまいます。さらに、「不安」や「煩わしさ」を与えてしまうと、ページを離脱してしまうことにも繋がりかねません。

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

コントラストが弱いと、文字が読みづらくなりがち。

コントラストを強くしてデザインの一部を際立たせると、視覚的に訴える力が強まります。結果、購入者さまにパッと見でバナーの内容を理解してもらえたり、不安感を拭うことができます。また、スタイリッシュでまとまりのある画像にしたいのなら、写真の中にある色と文字色を統一する方法もオススメです。

背景と文字の色の明るさに差をつけることでグッと読みやすくなります。

 

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

オンラインショップ作成において、デザインはもちろんのこと、どんな写真を使うかでブランドのイメージが変わってくると言っても過言ではありません。写真と文字のイメージがマッチすれば、コンテンツの内容が伝わったり、ターゲットに刺さるショップになります。

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

イメージ写真のギャップが大きいと、商品の内容がきちんと伝わらないですよね。同じように、文字のイメージが内容に合っているかも重要です。それぞれの文字には、「楽しそう」「エレガント」「カジュアル」「モダン」などの独自の雰囲気があります。その文字のイメージと写真の内容が一致していないと不協和が生まれ、見る人を混乱させ、期待を裏切ることになりかねません。

写真を変えるだけで、一目でイメージが伝わるようになります。

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

 

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

初心者にとって、かんたんなようで難しいのが余白のバランス。「余白があるから、つい何か埋めたくなる…」あなたは、そんなことありませんか? しかし、余白部分を上手に使うと、デザイン全体の構成で特定の場所に注目を集めることができます。

文字をぎっしり埋めてしまいがち…。

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

 

4. 内容を詰めすぎてごちゃごちゃしている

余白と同じく、情報の詰め込みすぎには注意が必要です。ポスターやフライヤーでない限り、バナーやSNSのシェア画像など小さな画像には、たくさんの情報を詰め込みすぎないようにしましょう。

情報が多すぎて、目がちらついてしまいます。

「もっといろんなことを一度に伝えたい!」という気持ちは分かりますが、情報が多いと目立つべきところが目立たなくなり、見ている側が疲れてしまう可能性があります。作業時のプレビュー画面は原寸でないことが多いので、実際の表示サイズを考えながら作りましょう。(オンラインショップやSNSに掲載したときに、「文字が小さすぎて見えない」なんてことも…)

また、フォントやスタイルをあまりに多く組み合わせると、情報量が増えてイメージが散らばってしまいます。きちんと読んでほしい文字は「装飾のないシンプルではっきりとした書体」にしましょう。

 

5. 写真の画質が悪く荒い

実際の商品やオンラインショップ全体のデザインが良くても、写真が悪いと全て台無しです。

解像度が低い画像を使うと、イメージよりも荒さが気になってしまいます。

写真を掲載するのに、SNSやWebサイト上から保存をしたものを使ったことはありませんか? オンラインショップ用だからといって、小さな画像を使うのはNG。あまりに画質が悪いものを使用していると、ブランドや店舗にもずさんなイメージがついてしまいます。せっかく作るオンラインショップですから、お客さまに真心を込めて接するのと同じように、愛情を込めてていねいに作りましょう。

 

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

「かっこいい写真を使いたい!」「商品の画像を載せたい!」という気持ちのあまり、写真の印象が強すぎる…なんてことはありませんか? 大きな余白があったり、ぼかしが入っていたりする、背景として文字の邪魔になる部分のほとんどない写真が、テキストを入れる画像にはぴったりです。あまりにもいろいろなものが写り込んでいる写真を背景に使うと、文字が読みにくく、最悪潰れてしまうこともあります。

もし、バナー用の写真を撮影するのであれば、文字を入れるための十分なスペースがあるかを考えてから撮影してみましょう。どうしても背景が複雑な写真を使用したい場合は、背景を透過させたり、テキストボックスを半透明にしてみましょう。テキストボックスを半透明にすることで、写真の全体を隠すことなくテキストが配置できます。

文字の下に白地を引くことで読みやすくなりました。

 
いかがでしたか?デザイン初心者にとって、0から画像を作るのは難しいもの。しかし、いくつかの基本的なルールさえ分かっていれば、完璧ではなくとも、わかりやすい画像は作れるのです。

初めての画像作成には、無料のデザイン作成ツール「Canva(キャンバ)」がオススメです。プロデザイナーによるテンプレートが豊富に揃っていて、画像や文字を変えるだけであっという間におしゃれなデザインが完成。今回紹介した画像もすべて「Canva」で作成しました。ぜひ、ショップオーナーさまも活用してみてくださいね。