Web関連

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

0

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

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

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

情報の取捨選択をしよう

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

言葉を工夫してみよう

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

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

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

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

0

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    大規模サイトが直面する問題「通信遅延」は解消できる

    大規模に全国展開するBtoCモデルのWebサイトが直面する「通信遅延」…

  2. Web関連

    検証の精度アップ&時間短縮に使える!便利な無料検証ツールまとめ

    Webサイトやドキュメントの検証って、淡々と同じ作業を繰り返したり、細…

  3. Web関連

    LINE ~拡大するコミュニケーション~

    リアルタイムコミュニケーションとは?近年、電話や電子メールに代わる新…

  4. Web関連

    オンライン学習はどこまで進んでいるのか?

    こんにちは。コーダーの須澤です。皆さんはオンラインで学習サービスを使…

  5. Web関連

    Google CardboardでVR体験をしてみた

    皆さんこんにちは。最近屋内と屋外の寒暖差にやられている堀井です。PCを…

  6. Web関連

    究極のパーソナルサービス「コンシェルジュ」

    今、コンシェルジュが存在するのはホテル業界だけではありません。世の…

おすすめ記事

最近の記事

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

アーカイブ

  1. AI関連

    【人工知能(AI)×観光】観光向けサイトで人工知能会話型システムを活用
  2. AI関連

    【人工知能(AI)×災害対策】AIで洪水・防災対策を進める
  3. Web関連

    絵描きさんに知って欲しい!多機能なお絵かきスマホアプリ
  4. AI関連

    改めてキャッシュレス決済を考えてみる
  5. AI関連

    VUIの先にあるもの
PAGE TOP