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. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  4. AIに求められているものは、実は意外な物だった

関連記事

  1. Web関連

    【web制作】情報を圧倒的にわかりやすくする!インフォグラフィックス

    今、インフォグラフィックスの出番?突然ですが。2015…

  2. Web関連

    モバイルページの超高速化!? AMP(Accelerated Mobile Pages)とは?

    昨年4月のモバイルフレンドリーの導入から、Webサ…

  3. Web関連

    失敗しないWebリニューアルをするためには

    突然ですが皆さんは「Webリニューアル」という言葉を聞いたことがありま…

  4. Web関連

    スパイスの効いたWebサイトをまとめてみた

    夏の暑い⽇に汗をかきながら⾷べるカレーはどうしてこんなにおいしいのでし…

  5. Web関連

    今からでも遅くない!ECサイトについて学ぶ ~ショッピングカート編~

    以前のコラムに続き、ECサイトの基礎的な部分の解説をしていきたいと思い…

  6. SEO関連

    グーグルアルゴリズムとSEO

    先日、「Japan IT Week春」の展示会に参加しました。昨年…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    コラムのチェック方法 ~一次チェック編~
  2. Web関連

    もう火傷なんてしない!ヘアアイロンを上手に使ってきれいになる裏技!
  3. Web関連

    【CMS構築】サーバレンタル~WordPress導入編。
  4. Web関連

    紙媒体のものから電子○○へ
  5. Web関連

    今年のホワイトデーは3Dプリンターが熱い
PAGE TOP