Web関連

情報設計する上で押さえるべきポイント ~重要な情報はどこに?編~

0

Web制作をするとき、どんなデザインにするのか、どんなコンテンツを提供するのか悩みますよね。
Webサイトの見せ方一つで、ユーザーの滞在率は大きく変わります。
自己満足のWebサイトだと、来てくれてもすぐに帰ってしまいます。
では、どのように見せればいいのか、最初はわからず他のWebサイトを真似して作る人も多いのではないのでしょうか?
しかし、そのまま真似しても、不要なコンテンツが出たり、伝えたい情報が伝わらなかったり、
あまりいいWebサイトとは言えない出来になるかもしれません。
(なにより、そのまま真似するということは盗作になってしまいます…)
参考はあくまで参考。そこから自分なりに手を加え、かつコンバージョンを上げるにはどうするべきか。

Web制作において、どんなことを意識したら良いのか。
押さえるべきポイントはいくつかありますが、今回はその1つをご紹介します!

ユーザーにとって重要な情報をページの上部に載せる

ユーザーにとって重要な情報を上部に載せる…
「意味はわかるけど、なんで?」と思う人もいるのではないでしょうか。
1番重要な情報を最後に持って来た方が、ユーザーは色々な情報を見てくれるのではないか。
Webサイトを運営する側は、ついこう考えてしまいがちです。
小説とか物語なら、クライマックスは最後に持ってきて正解です。
ところが、Webサイトの場合はそうはいきません。
ユーザーはそんなに優しくないのです。

直帰率・離脱率を下げる

ユーザーは数秒間でWebサイトを判断し、良くないと判断した場合、
数秒でそのWebサイトから立ち去ってしまうそうです。
これが所謂、直帰率・離脱率と言われるものです。
たしかに、自分がユーザー側でWebサイトを見ているとき、
全部のコンテンツを読んでから「ここは違う」と判断したりしないですよね。
パッと見て「ここは自分の探しているものがある」と認識した場合は滞在時間も長くなるとは思いますが、そうではないWebサイトをじっくり読む人はいないと思います。
つまり、パッと見た時に「ここには自分の求める情報がありそう!」と思わせる必要があります。
そうしないと、「ここは違う」と判断されてすぐに離脱されてしまいます。
せっかくいい情報があるのに、「クライマックスは最後に…」と思ってしまうとそこまでユーザーは辿り着いてくれません。

そのため、まずページの上部、Webサイトに訪れてすぐ見える場所でユーザーに
「あなたの探している、価値のあるものがあります!」ということを伝えなくてはなりません。

直帰率・離脱率を下げる画面設計で、AdidasのWebサイトはとても参考になると思います。
メイン画像の動画が最も目立つ場所に配置されていてインパクトがあり、つい動画が終わるまで見てしまいます。
ページを下に読み進めていくと、商品の詳細ページへ促すバナーがあり、商品購入までの道筋ができています。
また、道都大学のWebサイトも参考になると思います。
メイン画像が大きく目立ち、すぐそばにオープンキャンパスのページへ促すバナーがあります。
さらに、SNSの共有を促すボタンが設置されているので、情報の拡散を狙う設計になっています。

■adidas:http://www.adidas.com/us/soccer
■道都大学:http://www.dohto.ac.jp/

ユーザーの閲覧時間の割合

基本的にユーザーは80%の時間をページの上半分に割り当てているそうです。
ページの下に向かえば向かうほど、閲覧時間は短くなっています。
言われてみると私も下に行くにつれ流し見をしている気がします…
正直、最初から最後まで一言一句見落とさないようにWebサイトを見たりしないですよね。
「最初にどれだけ引き込まれるか」がカギになると思います。
ページの下に行くに連れ、注目度はどんどん下がっていきます。
つまり、読もうという意欲が薄れていってしまうのです。

ページの下に行くと興味が薄れる、しかしそれは逆を取れば
ページの上部に有益な情報を載せるとユーザーはWebサイトを見てくれるということになりますね!
どんな情報をユーザーは有益としているのか、求めているのはどんな情報なのか、
それをしっかりと分析し、ページの上部に載せればユーザーは見てくれるというわけです。

utagawa_1507052.jpg

まとめ

何がユーザーにとって必要で、不必要なのか。
分析し、必要な情報を適切なかたちでまとめあげることが重要です。
情報設計をする上で押さえておくべきポイントとして今回は1つだけ取り上げましたが、
このほかにも大事なポイントは沢山あります。
私もまだまだ勉強中の身なので今回のことを踏まえて情報設計をして、
ほかの大事なポイントもどんどん見つけていきたいと思います!
ということで、情報設計勉強中のデザイナー歌川でした。

関連するサービス

ホームページ制作

0

末恐ろしい。小学生が開発したスマホアプリ前のページ

Webマーケティングの概念が変わる?MCNとは次のページ

ピックアップ記事

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

関連記事

  1. Web関連

    システム化されたサイトとリッチスニペットの相性が良い理由

    こんにちは、晩酌は竹鶴ハイボール一択 SEの岸沢です。竹鶴ハイ…

  2. Web関連

    音楽業界に定額制のWEBサービスを導入

    最近あるニュースが入りましたね。アップルが定額制の音楽配信サービスをス…

  3. Web関連

    マーケターの常識!?プライベートDMPとオープンDMPの違い

    マーケティングに関わるようになり、「プライベートDMP」、「オープンD…

  4. Web関連

    Googleアナリティクスの新機能「ユーザーエクスプローラ」とは?

    「ユーザーエクスプローラ」という新しい機能が2016年4月にリリースさ…

  5. Web関連

    サイトの骨格、ワイヤーフレームとは

    みなさんはWebサイトを作るとき、どのようなデザインにしたいと考えます…

  6. Web関連

    ポケモンGo!田舎でやってみた!

    何かと話題のポケモンGoですが、正直私はポケモン世代でもなければ、興味…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    キャッシュレスの時代に備えて、キャッシュレス決済について知ろう!
  2. Web関連

    One to Oneマーケティングへの道(3)~データマイニング~
  3. DX関連

    非接触がこれからの常識。ウィズコロナ・アフターコロナはIoTを活用したタッチレス…
  4. AI関連

    着るコンピューター? ウェアラブルデバイス×人工知能(AI)で出来ること
  5. Web関連

    あなたは分かってる?面接時に心がけておきたい3つのマナー
PAGE TOP