Web関連

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

0

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

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

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

情報の取捨選択をしよう

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

言葉を工夫してみよう

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

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

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

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

0

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

人が対応するのが正しいの?DX(デジタルトランスフォーメーション)へ移行しないと業務が回らなくなる未来はすぐそこ次のページ

ピックアップ記事

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

関連記事

  1. Web関連

    短時間でクオリティが上がる、Webデザインのテクニック

    こんにちは。育児に家事に大忙しのディレクター、望月です。W…

  2. Web関連

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

    こんにちは!ティファナのオタク代表こと真野です!ティファナには意外…

  3. Web関連

    調べていて気になったマッチングアプリの紹介

    こんにちはシステムエンジニアの小森です。今回はマッチングアプリについて…

  4. Web関連

    スマホはアプリ?サイト?どっちがいいの?

    タブレットを買ってからスマートフォンが持っているだけになっています。…

  5. Web関連

    なぜコスプレをするのか、ハロウィンが終わってから冷静になって考えてみる

    皆さんも一度は見たことある「コスプレイヤー」が、「コスプレを始めよう!…

  6. Web関連

    Webサイトと未来をつなぐ「VR」

    PS4といえば、去年SONYから発表された「PlayStation V…

自治体向けDX推進サービス

AIさくらさん for 自治体DX

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    売り上げ(コンバージョン・問い合わせ数)を上げたい
  2. Web関連

    【必見!】時短に便利なブックマークレットまとめ
  3. Web関連

    動画コンテンツ。成功の秘訣はストーリーとシナリオにある
  4. AI関連

    現在のAI活用のトレンドとは?どのような分野で活かせるのか
  5. Web関連

    コピーライトに込められた思い。尾形真理子から学ぶ言葉の作り方
PAGE TOP