智之 荒砂

2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今のスマートフォンサイトで取り入れられているUIのルールや手法、共通点などを改めて探るべく、多種多様な業界（16業界45カテゴリ）のスマートフォンサイト（150サイト）を設計の視点、デザインの視点で調査してみました。調査対象は、その業界の中でも特に多くの年代に知名度の高い企業をセレクトして調査しています。 調べるにあたって作成したスプレッドシートはこちらからご覧いただけます。 1. グローバルナビゲーション 2. ローカルナビゲーション 3. パンくずナビゲーション 4. 移動ナビゲーション 5. ボタンの固定 6. カルーセル 7. ミニドロップダウン 8. フォーム 9. テーブル 10. 演出の工夫 01）グローバルナビゲーション 1-1）要素別の割合 まずは調査の結果をグラフにまとめてみました。63％のサイトにハンバーガーメニューが設置されています。様々な業界の多くのスマートフォンサイトで、ハンバーガーアイコンから開くメニューは表示方法として定着していると言えます。ラベルの有無やアイコンの形についてしばしば議論になることがありますが、今回調べた中ではラベル無しの3本線アイコンが最も多いことが分かります。およそ予想通りという結果ですが、3本線のラインだけではメニューであることが分からないユーザのために「メニュー」という言葉とセットで表示しているサイトが次いで多いことにも注目すべきと言えるでしょう。位置としては右上が半数を占めています。展開方法はドロップダウン形式とドロワー形式が半々といったところでした。 1-2）右上は優先要素の配置位置 ハンバーガーメニューの表示位置は右上が過半数でしたが、逆に左上にある場合、右上にはグローバルナビゲーションよりも優先したい要素を配置している傾向があることが分かります。優先している要素はサイトによて違いがあり、ログイン、検索、カート、言語選択、サービスサイトへのリンク、番組表などがありました。 1-3）スプリングボード形式でのメニュー表示 中にはハンバーガーボタンがないサイトもありました。そういったサイトでは、利用頻度の高いメニューをスプリングボードで露出させているケースが該当します。メニューボタンを押す一手間を省き、使い勝手を向上させていると言えます。 1-4）アコーディオンとの組み合わせで検索性を向上 ドロワーやドロップダウンで展開したメニューの中で、さらにアコーディオン形式の開閉メニューを組み合わせたサイトが多く見られました。ページを遷移せずに目的へと次々辿れるところが検索しやすさを向上させていると言えます。 1-5）その他 表現の変わりダネとしては、3本線のアイコンにその企業のロゴのディティールをエッセンスとして加えてオリジナリティを出しているサイトや、更新されていることが分かるバッチをつけたサイトも見られました。 02）ローカルナビゲーション グローバルナビゲーションほど設置位置が固定されていない印象のローカルナビゲーションですが、配置パターンとしては以下の4種類ほどがあります。使い勝手を考慮した上で決定する必要がありますが、H1下で横スライドは調べた中でもサントリーのもの1つだけでした。別のモジュールでも後述しますが、横スライドはスライドできることに気が付かない可能性がありますので、この方式を採用するのは十分な注意が必要です。 03）パンくずナビゲーション 調査した中ではパンくずナビゲーションは61％のサイトが「なし」という結果でした。PCと違って小さなスクリーンの中では、現在地がどこかを表示するよりも、他の要素の表示を優先している傾向が強いと言えます。 表現の部分では、PCサイトは通常左から右へと階層を横並びで表現するのが一般的ですが、スマートフォンサイトでは要素を縦に積んだり、スクロールできるようにしたりと、面積の狭さをうまく解消するよう工夫した表現が見られました。 04）移動ナビゲーション スマートフォンはPCと比較してスクリーンが小さく、1スクリーン内に掲載できる要素が限らるため、目的に応じてコンテンツ間の移動を補助するためのナビゲーションが多く採用されています。 定番の「ページトップに戻る」ボタンは、最下部に設置してあるパターンが42％でした。右下に半透明固定で置く方法もありますが、ページの先頭に戻ることは大きな目的ではないこと、コンテンツエリアを隠してしまうことから不採用としているのではないかと、私は推測しています。 05）ボタンの固定 ユーザが目的とするアクションをいつでも実行することができるよう、様々なボタンをスクリーンの中に固定で表示させるサイトが多く見かけられます。まず多くの並列情報群から目的の一つを探し出すタイプのサイトでは、検索ボタンの固定が見られました。 そして最終的に購入やお問い合わせなどのアクションを起こす詳細ページにたどり着いた際には、CTAボタン自体を固定表示させる造りが多く見られました。 その他にも様々なサイトで、そのページを閲覧している際、次に何をしてほしいのか？を考慮して、様々なボタンを固定表示させています。 06）カルーセル 6-1）使われ方の幅が広がったカルーセル 狭いエリアに複数のコンテンツを効率的に見せる上で便利なカルーセル表示は、元々写真などのビジュアル要素を含むコンテンツをスライドさせて見せる傾向が強い印象でしたが、最近ではその使われ方の幅が広がりつつあるように見受けられます。まずはカテゴリをスライド式で見せる方法や、検索を補助するキーワードを複数表示するために用いられている例がありました。 また、Yahoo!ニュースのコメントやGoogleの検索結果に表示されるAMPのように、テキストを主体としたコンテンツにも最近はカルーセル表示を取り入れている事例も多々あります。 6-2）カルーセル使用時の注意点 ...