KOBITブログ

コンテンツ表示の工夫でUX向上! 海外企業・メディアのサイトデザイン事例

この記事は約 5分 で読めます。

646927

UI/UXについて理解を深め、優れたUI/UXを持ったWebサイトを構築するためにお送りする本連載。
前回記事では、UI/UXに優れた海外事例として、画期的な仕組みとUIで業界に影響を与えたサービス「Uber」「Tinder」の事例を紹介しました。

今回も引き続き、UI/UXに優れた海外事例として、コンテンツの見せ方を工夫した企業サイト・メディアの事例を紹介していきます。

「UI/UXを知り、優れたWebサイトを構築する」連載一覧

1.UI/UXの基本(全三回)

第一回:良いUI/UXとは何か?Amazonと楽天に見るユーザー体験の違い

 

2.UXに優れたサイトを構築するために検討するべき事項(全四回)

第四回:優れたUXを設計するための戦略:ペルソナ法とストーリーボード

 

3.UIの要素や方法論の解説(全二回)

第八回:優れたUI設計のためのレイアウト・配色・フォントの原則

 

4.UI/UXに優れた海外事例の紹介

第十回:カラフルなのにシンプル。UI/UXに優れた海外のWebサービスサイト3選

第十一回:“業界を変えた”UberとTinder 2つの優れたUXデザイン

UI/UXに優れたサイトの海外事例:企業サイト系、メディア系

フォルクスワーゲン:最新デザイン技法を最大限に活用

%e3%83%95%e3%82%a9%e3%83%ab%e3%82%af%e3%82%b9%e3%83%af%e3%83%bc%e3%82%b2%e3%83%b3http://www.vw.com/

ドイツを本拠にする自動車メーカーであるフォルクスワーゲン。排ガス規制問題で話題になりましたが、世界的に有名なブランドです。日本向けのWebサイトは極めてオーソドックスな構成にしているのに対し、海外向けのWebサイトでは最新のデザイン技法を取り入れたUI/UXを採用しています。

Webサイトのレイアウトは縦長で、スクロールするごとに詳細な情報が認識できる構成です。画像や動画が効果的に使われており、自動車の魅力をよく引き出しています。
配色は信頼感を醸し出す青・水色をメインカラーに据え、統一感のある見栄えにまとめました。フラットデザインを採用しシンプルに見えますが、リンクになっている部分には矢印のアイコンを付ける工夫をしており、どこがリンクになっているか分かりやすくなっています。
企業サイトでは珍しくナビゲーションは左側のメニューバーです。さらに、「MORE(詳しく)」をクリックすると、より詳細なメニューが展開される仕組みが隠されています。

自動車の購入を希望するユーザー向けにウィザード形式の商品選択機能「BUILD YOUR OWN」も面白い機能です。色や内装などを選ぶだけで、好みの自動車がWebサイト内で仮想的に閲覧できます。
自宅近くの自動車ディーラーを地図上で検索する機能があるので、購入を希望するユーザーには利便性が高いサイトになっています。

ブルームバーグ:無限スクロールでより多くの記事を回覧

%e3%83%96%e3%83%ab%e3%83%bc%e3%83%a0%e3%83%90%e3%83%bc%e3%82%b0https://www.bloomberg.com/

ブルームバーグは経済・金融情報の配信を行う大手情報サービス企業です。そのWebサイトには最新の経済ニュースやコラムが並んでいます。
メディア企業であるため、より多くの記事が読まれ、記事と共に表示した広告から収入を得るのが、Webサイトの目的になります。そのため、Webサイトではユーザーをより長い時間Webサイトに留まらせる工夫がなされているのです。

ブルームバーグのWebサイトで特徴的なのは「無限スクロール」と呼ばれるUIです。FacebookやTwitterで馴染みのある通り、新しい情報から順に表示され、ユーザーが画面を下に辿る程、古い情報が読み込まれていきます。多くのニュースサイトは1ページに1記事のみを掲載するデザインにしている一方で、ブルームバーグはこの無限スクロールを採用したのです。

無限スクロールは、記事から記事へと自動的に移るため、ユーザーがより多くの記事を閲覧する傾向にあります。さらに、ブルームバーグは人気記事やユーザーの閲覧履歴に基づいて、掲載する順序を変える手法を取り入れていると言われています。

ユーザーの関心を引く無限スクロールですが課題もあります。ユーザーが高速に画面をスクロールさせた場合、広告が閲覧されなくなってしまいます。そのため、ユーザーの画面内にある状態のときだけ広告を表示する、あるいは、画面スクロールによらない固定部分に広告を表示する、といった対策を採用してきました。

まとめ

フォルクスワーゲンとブルームバーグのサイトに共通しているのは、スクロールするごとにユーザーにとって興味深い情報が表示されていく点です。その結果、ユーザーはサイトを利用し続け、サイトの平均滞在時間や離脱率の数値が改善します。

離脱率が高いというのはWebサイトにおいてよくある悩みですが、ユーザーの思考や行動を理解し、それをデザインまで落とし込むことで、離脱率の低い「読まれる」Webサイトを構築することができます。

今回の2つのサイトの例にならってUX・UIを見直せば、あなたのサイトももっと読まれるサイトに変わるかもしれません。


CATEGORY:

さあ、KOBITをスタートしよう。