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

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

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

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

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

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

1. 移動ナビゲーション

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

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

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

要素別の割合

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

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

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

スプリングボード形式

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

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

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

その他

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

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

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

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

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

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

 

5. ボタンの固定

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

1 2