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

関連記事

  1. SNS関連

    次にくるのはこれだ!巷で噂のSNS

    2014年はSNSの勢いは留まるどころか益々勢いを増した1年でしたね~…

  2. SEO関連

    「ページの表示速度が遅いとSEO順位が落ちる?」第2回 ここがヘンだよSEO対策!?

    さまざまなSEO対策に関する情報のウソ?ホント?をお教えします。ホ…

  3. Web関連

    時間を忘れて楽しめる!無料診断サイトまとめ

    エブリディSNSライフマンこと、歌川です!先日Twitterで友人が誕…

  4. Web関連

    段取りで大変な大掃除も負担軽減できる

    年末準備には大掃除・年賀状の準備・御節の準備などがありますね。特に大変…

  5. Web関連

    SNSを活用せよ。SNSを使った成功事例

    皆さんの会社ではSNSは使っていますでしょうか。昔はただ友人や知り合い…

  6. Web関連

    数字で見るあれこれ。身近な数字をインフォグラフィック化してみました。

    最近、ティファナの採用サイトにて「数字で見るティフ…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

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

    そうそうコレコレ!複数人でちゃんとデザインの方向性を認識統一できる「ムードボード…
  3. Web関連

    ビッグデータの活用事例 ~売上アップに貢献した事例~
  4. Web関連

    ホームページ制作会社が教えるインフォグラフィックの基礎、ピクトグラムの作り方
  5. AIさくらさん

    【人工知能(AI)×社内システム】人工知能(AI)で大きく進む社内業務効率化
PAGE TOP