【初心者向け】ここに注目！スマートフォン用バナーを作成しよう

スマートフォンを “持っていない人” 、手を挙げてー！！
……はい、様々なテクノロジーが進んだ現代の、しかもこのページにたどり着いた人で、スマートフォンを”持っていない”人というのは、なかなかに珍しいのではないでしょうか。
（いないような気もしますね…）
というくらい、スマートフォンは広く普及しています。
片手で扱えて、簡単にインターネットに接続できるのが、スマートフォンのいいところです。
そのような環境が整ってきたおかげで、最近はWebサイトの閲覧をパソコンからではなく、スマートフォンから行う人たちも増えてきました。
スマートフォンの画面は、パソコンとは違い、縦長で小さいです。
つまり、情報の見せ方を工夫する必要があります。
例えば、下記のようなバナーがあるとします。

これをそのままスマホサイトにも掲載したとしましょう。
とても見づらいものなってしまうことをご理解いただけるでしょうか。
スマホサイトはパソコンでの表示よりも、横幅がとれません。
パソコンと同じ横幅を使って表現したい！と思っても、どうしてもぎゅっと縮まってしまいます。
上記のバナーでは、下記の問題点が挙げられます。
・さくらさんが持っている看板の文字・ロゴがつぶれて見えなくなる
・バナー内の文字が全体的に小さくなり、読みにくい
・オレンジのボタンの上のメールアイコンがつぶれてしまう
・矢印が点のように見えてしまい、クリックできるのかどうかパッと見ただけではわからない
うーん、思ったよりも問題が山積みです。
見づらいバナーはクリック率を下げます。
サイト自体の回遊率は下がるでしょう。
伝えたい情報が伝わらない、見てほしいページに来てもらえない、ということが考えられます。
そんな状態では、Webサイトが存在する意味が無くなってしまいます。
つまり、画像やバナーを作るときには、パソコン、スマートフォン、それぞれの特徴にきちんと合わせる必要があるということです。
では、どうすると情報がきちんと伝わる画像にできるのでしょうか。
今回は先程のバナーをスマートフォン用にを作りかえることを想定して、考えてみましょう。

サイズを目的に合わせて変更しよう

当たり前ですが、画面のサイズが異なるということは、バナーのサイズも変えなければ、見やすくクリックしやすいバナーにはなりません。
スマホ用の標準的なバナーサイズは300×250px、320×50px、600×600pxなど複数個あります。
それぞれ訴求内容をしっかり入れ込むことができる、広告バナーとして露出させやすい、クリックしやすくインパクトも大きい、という特徴があります。
上記で上げた以外にも様々なサイズがありますので、目的や使いたい場所に応じて選ぶことが重要です。
縦幅が小さすぎると指でタップしにくかったり、縦と横の比率の差が大きすぎるとスマートフォンでは見にくいものになってしまったりするので、注意が必要でしょう。

情報の取捨選択をしよう

パソコン用のバナーと比べて、明らかにサイズの小さくなるスマホ用バナーに、パソコン用と同じだけの情報を詰め込める、とは考えにくいですね。
そこで、バナー内に入れる情報、入れない情報を判断する必要があります。
情報には、必ず「重要度」が存在します。
何が「重要なのか」＝「見てくれる人に伝えたい情報なのか」を間違えずに判断することが必要です。
先程のバナーで考えてみましょう。
一番伝えたい情報は何でしょうか。
このバナーはお問い合わせフォームへの誘導バナーなので、一番伝えたいことは「お問い合わせはこちら」という、フォームへ誘導する内容ですね。
不要な情報は何でしょうか。
さくらさんが持っているボードの内容を入れ込む必要はあるでしょうか。
オレンジのボタンについているアイコンは必要でしょうか。
掲載するサイトの雰囲気に合わせることも考えなければなりませんが、他の内容と比べて比較的重要度が高くない、と考えられるのであれば、思い切って切り捨ててしまいましょう。

言葉を工夫してみよう

文章内の言葉を言い換えたり、削ったりして、文字量を減らすことも可能です。
類義語を調べて言い換える、一単語でも削れそうな部分は削ってみる、など様々工夫ができます。
パソコンでは2行にして表示していたけれど、スマホ向けにも同様のレイアウトにするとなんだか縦幅使っちゃうし、隣に並べたいボタンや言葉が上手く収まらない、なんて思うときは、言葉の区切りがわかる「・」等の記号をあえて付け加えて一行にしてみる、ということもできます。
伝えたい内容が変わってしまわないように十分気を付けて、工夫していきましょう。

あしらいやレイアウトを変更してみよう

例えば、パソコン用のデザインでは文字を丸で囲んで装飾していたとしましょう。
丸って可愛いんですけど、スマホにも使うとなると、意外と縦幅をとってしまって、バナーに入れたい写真や、その他の大切な言葉が上手く収まらない、なんてことがあります。
そんなときは、思い切ってデザインを変えることを考えてみるのも大切です。
今回の例では、横長の四角に変えてみるのはどうでしょうか。
余分な幅を取ることなく、すっきり収まりそうですね。

一番伝えたいことが上手く伝わるように、足し引きを繰り返して試行錯誤しましょう。