Smartphone スマホ

 
スマホ

主要ポータルサイトのトップページから考察するUI・デザインのポイント

タイトル画像
先週5月20日、スマホ版のYahoo! JAPANのトップページがリニューアルされました。新しくなったトップページでは、画像やアイコンを充実させたものに変更し、TwitterやFacebookのようなタイムライン型のデザインを採用することで、縦スクロールでの情報展開ができるようになり、より一層便利になりました。

キャプチャ1

新しくなったヤフーのスマホサイトの特徴や機能はここでは割愛するとして、これを機に、他のポータルサイトのトップページを、デザイン・UIの観点から比較してみたいと思います。

Yahoo! JAPAN

https://m.yahoo.co.jp

主なポータルサイトのトップページ

goo

ヤフー同様、様々なサービスを提供している「goo」。「メール」「天気」など主要となるサービスのアイコンがファーストビューに飛び込んできます。

キャプチャ2

実はこのサービスのアイコンは横スライドで切り替えることができるのですが、パッと見てそれがやや分かり辛いですね。左右に矢印マークがあると、なお分かりやすい気がします。
ちなみに、カテゴリーを並べる際、通常であれば人気のものを上から順に並べていくものと思いますが、なぜか「占い」が左から3番目に配置されていますね。gooの占いは当たると評判なのでしょうか…?

goo

https://www.goo.ne.jp

MSN

マイクロソフトが運営するポータルサイト「MSN」は、「Outlook.com」や「Bing」でお馴染みですね。こちらのデザインは縦スクロールのタイムライン型。馴染みのあるUIで使い勝手が良いです。

キャプチャ3

また、検索メニューやドロワーが配置されているヘッダには、スティッキーヘッダーが採用されていて、上部に固定表示されているおかげでスクロールを進めていってもすぐに検索ができたりメニューを探せるのが便利です(※これは新しくなったヤフーも同様)。

キャプチャ4

検索メニューの直下には、各カテゴリーの代表的な写真をスライドショーで展開していて、全体的には、ポータルサイトというよりキュレーションサイトのような印象があります。

MSN

https://www.msn.com/ja-jp

excite

翻訳機能を使っている方も多い「excite」。こちらもファーストビューに、主要サービスがアイコン化されていますが、やはり人気のある翻訳サービスが一番最初に配置されています。ヤフーと比較すると、アイコンやナビゲーションの背景が黒で統一されており、視覚的に見やすいデザインとなっています。

キャプチャ5

ヘッダの検索メニューやサービス一覧のプルダウンが固定されていないので、残念ながらスクロールしていくとこれらは見えなくなってしまうのですが、右下にページ上部に戻るアンカーリンクボタンが追従してくれるので、こういった設計は親切で嬉しいですね。

キャプチャ6

excite

https://a.excite.co.jp

Infoseek

楽天が運営するポータルサイト「Infoseek」。楽天にはトラベル、ショッピング、オークション…といった様々なサービスがあります。このように数多くのカテゴリーページがある場合は、ドロワーメニューにそのリンク先をまとめてしまうのが一般的です。Infoseekにも、もちろん右上に存在しています。

キャプチャ7

ここで重要なのが、「ドロワーメニューには、各種サービスへの遷移先が詰まっている」ということを、ユーザーが一目で認識できるかどうかです。ドロワーメニューを開いてみたら、期待していたリンク先が出てこなかった…という経験をされた方も多いと思います。
その点、Infoseekのドロワーメニューにはアイコンの下に、「サービス」という文言が入っていて、楽天のサービスページのリンクがあることが一目瞭然になっています。

これに対し、ヤフーの右上にも同じようにドロワーメニューがありますが、このドロワーニューを開くと下の写真のようなコンフィグの画面が表示れます。

キャプチャ8

各サービスの一覧ページには、検索メニューの下にあるサービスアイコン群の右下にある「すべて」を押すと遷移できますが、初めて訪れた人の中には右上のドロワーメニューに、色々なサービスページへのリンクが含まれていると思って押してしまう人もいるかもしれません。

Infoseek

https://www.infoseek.co.jp

@nifty

プロバイダが提供するポータルサイトも見てみましょう。代表的な例として、ここではniftyが提供している「@nifty」を取り上げます。
@niftyも他のポータルサイトと同様、ファーストビューに主要サービスのアイコンがナビゲーション的に配置されています。ここで注目すべきは、このナビゲーション部分の左右にグラデがかかっていて、視覚的・直感的に「スライドできる」と認識できる点です。

キャプチャ9

実は、この「パッと見でナビがスライドできる」というUIを実装しているポータルサイトはなかなかないもので、さきほど取り上げたInfoseekが、ニュースのカテゴリのナビゲーション上の左右に、透過の矢印ボタンを入れているくらい。こういった細かい部分のUIも考慮していきたいですね。

@nifty

https://www.nifty.com/smp/?top

ポータルサイトにはデザイン・UIのヒントが満載

主要なポータルサイトのトップページを見てみると、それぞれのサイトで細かい部分の使い勝手に良し悪しがあるように思います。
とはいえ、ポータルサイトは年齢・性別関係なく多くのユーザーが閲覧しているので、あらゆる点を考慮してデザインやUIが設計されていて、サイト制作のヒントがたくさん詰まっています。
普段利用しているポータルサイトを改めてじっくり観察するのも勉強になりますし、また、新規でスマホサイトを制作する際、ふとデザインやUIで迷うことがあったら、慣れ親しんだポータルサイトを覗いてみるのもいいかもしれません。

タグ

記事mobifyロゴ
Mobify(モビファイ)とは

Googleが認定しているマルチスクリーン対応のための最適化サービス。
デバイスに応じ、専用にデザインされたサイトを表示することができます。
ページの表示を高速化させる仕組みも持ち合せており、ユーザーの離脱を防ぐことが可能です。

▸Mobify(モビファイ)についてさらに詳しく

 最新記事