Web関連

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

スマートフォンを “持っていない人” 、手を挙げてー!!
……はい、様々なテクノロジーが進んだ現代の、しかもこのページにたどり着いた人で、スマートフォンを”持っていない”人というのは、なかなかに珍しいのではないでしょうか。
(いないような気もしますね…)
というくらい、スマートフォンは広く普及しています。
片手で扱えて、簡単にインターネットに接続できるのが、スマートフォンのいいところです。
そのような環境が整ってきたおかげで、最近はWebサイトの閲覧をパソコンからではなく、スマートフォンから行う人たちも増えてきました。
スマートフォンの画面は、パソコンとは違い、縦長で小さいです。
つまり、情報の見せ方を工夫する必要があります。
例えば、下記のようなバナーがあるとします。
yashiki05_02_1.png
これをそのままスマホサイトにも掲載したとしましょう。
とても見づらいものなってしまうことをご理解いただけるでしょうか。
スマホサイトはパソコンでの表示よりも、横幅がとれません。
パソコンと同じ横幅を使って表現したい!と思っても、どうしてもぎゅっと縮まってしまいます。
上記のバナーでは、下記の問題点が挙げられます。
・さくらさんが持っている看板の文字・ロゴがつぶれて見えなくなる
・バナー内の文字が全体的に小さくなり、読みにくい
・オレンジのボタンの上のメールアイコンがつぶれてしまう
・矢印が点のように見えてしまい、クリックできるのかどうかパッと見ただけではわからない
うーん、思ったよりも問題が山積みです。
見づらいバナーはクリック率を下げます。
サイト自体の回遊率は下がるでしょう。
伝えたい情報が伝わらない、見てほしいページに来てもらえない、ということが考えられます。
そんな状態では、Webサイトが存在する意味が無くなってしまいます。
つまり、画像やバナーを作るときには、パソコン、スマートフォン、それぞれの特徴にきちんと合わせる必要があるということです。
では、どうすると情報がきちんと伝わる画像にできるのでしょうか。
今回は先程のバナーをスマートフォン用にを作りかえることを想定して、考えてみましょう。

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

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

情報の取捨選択をしよう

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

言葉を工夫してみよう

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

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

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

スマートフォンは画面が小さいので、一目で伝えられる情報に限りがあります。
それを理解してデザイン作成をすることで、より良いものが出来上がることでしょう。
「伝わる」ことが大事なデザイン、頑張って作っていきましょう…!

非接触がこれからの常識。ウィズコロナ・アフターコロナはIoTを活用したタッチレス世界前のページ

テレワークだけでは足りない?デジタルシフトなど、アフターコロナに向けて本当に考えなければならないこと次のページ

ピックアップ記事

  1. 新しい販売形態であるDtoCについて考えてみる
  2. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  3. AIに求められているものは、実は意外な物だった
  4. 新型コロナウイルスで日本の働き方改革が起こる

関連記事

  1. Web関連

    売り上げの上がるECサイトを作りたい

    売上をアップさせるショッピングサイトを制作します「どのように売上を…

  2. Web関連

    正しいcanonical属性活用でGoogle評価を最適化!

    みなさんはcanonical属性というものをご存知でしょうか?…

  3. Web関連

    JavaScriptについて思うこと

    こんにちは、システムエンジニアの小森です。今回はJavaScrip…

  4. Web関連

    進化するソーシャルメディア!ソーシャルギフト編

    いきなりですが、みなさんはSNSサービスをよくお使いになるでしょうか?…

  5. Web関連

    今や主流?モバイル・ファーストのメリットとは?

    皆さん、「モバイル・ファースト」という言葉をご存知ですか?「モバイ…

  6. Web関連

    最近流行のゴーグルみたいなアイツ

    知っている人は知っている最近、こんなのが流行っていますが、皆さんご存…

おすすめ記事

最近の記事

  1. デジタル化が旅行・観光業を救う!?ウィズコロナ・アフターコロ…
  2. 人が対応するのが正しいの?DX(デジタルトランスフォーメーシ…
  3. 人間拡張って聞いたことがありますか?デジタル化が背中を押して…
  4. テレワークだけでは足りない?デジタルシフトなど、アフターコロ…
  5. 【初心者向け】ここに注目!スマートフォン用バナーを作成しよう…

アーカイブ

  1. Web関連

    納得!心地よくブログを読んでもらえる2つの工夫
  2. Web関連

    知っているようでよく知らない、著作権
  3. AI関連

    オムニチャネルを統合するAIは、新しい価値を創出する
  4. Web関連

    新しい腕時計が欲しい。何を買うか迷っています。
  5. Web関連

    就活解禁前に知っておきたい、面接の4つの心得!
PAGE TOP