Web関連

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

0

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

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

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

情報の取捨選択をしよう

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

言葉を工夫してみよう

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

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

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

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

0

AIと共に切り開く!ジェンダーレス社会でのAIの新たな可能性について考えてみた前のページ

人間拡張って聞いたことがありますか?デジタル化が背中を押してくれる!次のページ

ピックアップ記事

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

関連記事

  1. Web関連

    今年こそ痩せよう!選りすぐりダイエットアプリ3選

    この季節は、お花見や歓迎会など様々なイベントがあり、食べ過ぎてしまった…

  2. Web関連

    仕事の取り組み方を変える!「ダイバーシティ」について

    昨今では「日本人の生産性は低い」とニュースなどで取り上げていることが多…

  3. Web関連

    web制作会社が紹介するW3Cチェック(validator)の使い方

    Webに関わる方ならご存知の人が多いと思いますが、W3CというWebに…

  4. Web関連

    苦情対応はWebサイトでもできる!クレームを活かす対応方法!

    こんにちは。ISO10002取得のお手伝いを少しだけしていた真野です。…

  5. Web関連

    ホームページ制作会社が紹介するHTML5の動画のメリット

    皆さんは使ったことはありますか?きっとありますよね、Youtubeです…

  6. Web関連

    バレンタイン? なにそれ、美味しいの?

    ついに、今年もこのイベントがやってきましたね。「2月14日」そうです、…

おすすめ記事

最近の記事

  1. 持つべきなのか?運転免許証+マイナンバーカード
  2. RPAから始める業務効の自動化 働き方改革への選択肢の一つに…
  3. 【3分で解説】これから始まる自動車教習所のオンライン学科教習…
  4. 約1年間のウィズコロナ生活で大きく変わったもの
  5. スマートストアにより、小売業は激変する

アーカイブ

「いいね」を押された記事

  1. Web関連

    スマートフォンアプリ広告で新たな利益獲得!
  2. Web関連

    Web制作会社に働く担当者のつぶやき。フルスピードで仕事をするには・・・。
  3. Web関連

    これぞクールジャパン!アニメビジネスの成功例をまとめてみた!
  4. Web関連

    ホームページ制作会社が紹介するグローバルナビゲーションの情報分類4パターン
  5. Web関連

    これさえあればバッチリ!人気のニュース&まとめアプリを徹底比較
PAGE TOP