これが最先端!スマホサイトの最新デザイン9選

現在ではPCよりもスマートフォンの方が検索件数が多くなりました。

それにともない、企業もウェブサイトをスマートフォン用に最適化させてきています。

スマートフォンサイトのUI(ユーザインタフェース)作法も日々進化しており、サイト開発者はそれら最新作法を取り入れ、業務を刷新していく必要に迫られています。

本記事ではスマートフォン向けのUI作法を16業界45カテゴリ150サイトから設計の視点、デザインの視点で調査し、まとめました。

調査に使ったスプレッドシート↓

1. 移動ナビゲーション

スマートフォンでは画面に表示できる内容が限られるため、サイト内を移動するナビゲーションにも工夫が見られます。

「ページトップに戻る」ボタンは、ページの一番下に設置されているサイトが42%でした。右下に半透明で固定しているタイプもありますが、コンテンツを隠す要因になるので多くありません。

2. グローバルナビゲーション

要素別の割合

グローバルナビゲーションは、63%のサイトがハンバーガーメニュー(3本線)で作成していました。細かく見ると、ラベルなし3本線が最も多く、次に3本線に「メニュー」と表示しているサイトが多いです。メニューの位置は右上が半数を占め、ドロップダウン形式とドロワー形式が半々でした。

右上には優先したい要素が配置される

右上にハンバーガーメニューを表示していないサイトの場合、右上にはグローバルナビゲーションよりも優先したい要素が配置される傾向にあります。例えば、ログイン、検索、カート、言語選択などです。

スプリングボード形式

グローバルナビゲーションにハンバーガーメニューを使用していないサイトでは、スプリングボードを使っていることが多いです。メニューボタンを押さなくてもメニューが見えるので、使い勝手が向上しています。

アコーディオンと組み合わせる

展開したメニューをさらにアコーディオンと組み合わせることでページを移らなくても目的のページに行けるようにしているサイトも多くみられました。辿りやすく、検索しやすくなっています。

その他

ハンバーガーメニューの3本線に企業のロゴデザインを取り入れたりしてオリジナリティを出しているサイトもありました。

3. ローカルナビゲーション

ローカルナビゲーションはサイトごとに配置がバラバラですが、配置パターンは以下の4パターンが多くみられました。サイトごとにパターンの使い勝手が異なるので、選択は慎重に行う必要があります。

4. パンくずナビゲーション

調査したサイトの中で、61%のサイトはパンくずナビゲーションはありませんでした。スマートフォンは画面が小さいので、現在地よりも表示したい要素を優先していると言えます。

パンくずナビゲーションを配置しているサイトでは、縦積み型やスクロール型にしてスマートフォンで見やすくしたタイプが見られました。

 

5. ボタンの固定

ユーザが一定のアクション(検索など)をする頻度が高いサイトでは、様々なボタンをスクリーンの中に固定していることが多いです。

最終的に商品の購入や問い合わせを目的としているサイトではCTAボタンの固定がされています。

様々なサイトでユーザーにして欲しいアクションに合わせて固定ボタンが表示されています。

6. カルーセル

様々な使い方がされるカルーセル

もともと写真などのビジュアルコンテンツをスライドさせて見せる傾向にあったカルーセルですが、現在では使い方が広がり、検索を補助するような使い方やカテゴリの表示などにも使われています。

Yahoo!ニュースのコメントやGoogleの検索結果をカルーセルで表示させるような使い方もされるようになりました。

カルーセルを使う時の注意点

省スペースで複数のコンテンツを表示できるカルーセルですが、スライドできることが一目で分からないと意味が無くなります。例えば2015年にサービスが開始されたApple MUSICのスマートフォンサイトでは当初はカルーセルが使用されていましたが、分かりにくかったためか2016年からアコーディオンに変更されています。

スライドすることを気付かせるために、アニメーションでスライドしてくるように工夫されているサイトもあります。

 

7. フォーム

検索や入力を楽にするために、検索窓や入力欄にサジェストを表示させたり数字専用のキーボードを表示させる工夫をしているサイトも見られます。スマートフォンはパソコンのキーボードに比べて文字入力に時間がかかるので、このような工夫は使い勝手を向上させる上で必須と言えます。

8. テーブル

スマートフォンでテーブルをいかに見やすく見せるかは大きな課題の一つです。スライドさせたり、ピンチアウトを使用したり、思い切ってユーザーに操作して貰って見せる工夫もいくつかのサイトで見られました。

9. 演出の工夫

心地の良い操作感や閲覧体験を提供するために、細かく精度の高い演出をしているサイトもたくさんあります。アニメーションを使用したり、アプリを操作するような画面遷移を実装したりと様々な演出が試されています。

中にはWebフォントを使ってOSに依存しない文字表記をするサイトや、初回読み込み時にスプラッシュイメージを表示するサイトも見られます。

まとめ

UIデザインに関わるものであれば、サイトを見て何か変化したところはないか、この工夫は本当に効率化されているのか、といった視点で他のサイトを見ることが求められます。その蓄積でよりよいサイトが作られていくのだと思います。