Web関連

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

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つだけ取り上げましたが、
このほかにも大事なポイントは沢山あります。
私もまだまだ勉強中の身なので今回のことを踏まえて情報設計をして、
ほかの大事なポイントもどんどん見つけていきたいと思います!
ということで、情報設計勉強中のデザイナー歌川でした。

関連するサービス

ホームページ制作

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    ドメイン管理~あなたの仕事が会社を守る~

    こんにちは、SEの千明です。入社してもう1年が過ぎました。1年も経つと…

  2. Web関連

    【Web制作】Googleが推奨するレスポンシブはホントにいいの?「レスポンシブに適するサイト/適さ…

    食事を健康的な物に切り替えて、最近少し痩せてきた吉田です。今回はW…

  3. Web関連

    webサイトにおけるアクセシビリティの考え方

    Webサイトでは「ユーザビリティ」という考え方が非常に重要視されていま…

  4. Web関連

    意外と知らない!?レスポンシブデザインにある落とし穴(Media Query編)

    私の隣にはデザイナーがいます。しかもかなり若いです。19歳。若過ぎる!…

  5. Web関連

    これだけは覚えておいてほしい、地味に使えるExcelの時短ワザ3選。

    こんにちは!ティファナコラム編集部 担当の秋田です。今回のテーマは「…

  6. Web関連

    Webサイト売上げアップに使える”行動心理学” その3

    さて今回も、「良いUI、特に良いUXを提供しようと考えると、当然利用す…

おすすめ記事

最近の記事

  1. DX(デジタルトランスフォーメーション)・デジタルシフトへの…
  2. テレワークだけでは足りない?デジタルシフトなど、アフターコロ…
  3. デジタル化が旅行・観光業を救う!?ウィズコロナ・アフターコロ…
  4. 非接触がこれからの常識。ウィズコロナ・アフターコロナはIoT…
  5. キャッシュレス決済はウィズコロナでのウイルス対策に繋がってい…

アーカイブ

  1. Web関連

    【アプリ開発】あなたのソシャゲ問題はどこから?3つのソシャゲ問題!
  2. AI関連

    家で学ぼう
  3. Web関連

    音楽業界に定額制のWEBサービスを導入
  4. Web関連

    なるほどね!タスク管理と時間管理は深い関係性をもっていた!
  5. Web関連

    javascriptの流行りの紹介
PAGE TOP