新しいiOS 7のウェブデザインのための3つのポイント

本記事は、アップルの製品に最適化する上で注目すべき、iOS 7のSafariにおいて3つの重要なUX/UIへの変更点を、カナダのMobify社のマイク・アバソヴと、(株)ドーモの大賀匠竜からレポートします。

世界中の全モバイルページビューの内56.5%を生み出しているのがiOSです。その新バージョンには、さまざまな素晴らしい機能やデザインの向上が用意されています。最も大きな変更点は、「モバイルSafari」です。これらの変更点は、単にフラットデザインを採用しただけではなく、ユーザビリティに大きく影響が出る機能面での重要な変更があります。

1. フリックの扱いを慎重にする

　これまでのSafariでは、スクリーンの上端から下に向かってスワイプすることでNotification Centreを引き出すことができました。しかし、iOS 7ではデバイスの4辺がすべてが活用されます。

iOS 7では、ジェスチャ機能が組み込まれ、左から右へとスワイプすることでブラウザの履歴を一つ戻ることができ、右から左へとスワイプすることで一つ進むことができます。また画面下から上へとスワイプすることでControl Centerへアクセスができます。

サイトへの影響

　もしスライドアウト-ナビゲーション(画面端からスワイプして引き出すナビゲーションメニュー)の使用を考えていた場合は、実装を考えなおす必要があります。ユーザーエクスペリエンスを壊さないように、今後のナビゲーションは、端からのスワイプではなくタップで呼び出すようにすべきです。

　次に、カルーセル（フリックスライド）のデザイン方法も考え直す必要があります。いままでのように、カルーセルが画面端いっぱいにあり、その両端でパディングする場合、iOS７ では「戻る/進む」のジェスチャが実行されてしまいます。カルーセルをスクロールしようとすると、別の画面をスワイプを始めてしまいます。既存サイトのカルーセルには、修正が多く発生しそうです。

　また、PCサイトを表示の場合は、ピンチインで拡大することが多いのですが、その際に横スクロールをするとページ遷移が発生したりします。ユーザーのストレスを抑えるためには、モバイルに最適化するようんして不要な横スクロールがないようにしましょう。

左: iOS 6でのSkinny Ties: カルーセルは想定どおりに動く
右: iOS 7でのSkinny Ties: カルーセルをスワイプしようとしてページを戻ってしまう

 2. 分かりやすいナビゲーションが重要

　新しいSafariでは、スクロールに合わせてSafariのインターフェイスが縮小されるようになっています。

　URLバーは最小化され、ナビゲーションバーが非表示になる事で、有効なスクリーン領域は大きくなりました(iOSのGoogle Chromeと似ています)。ブラウザのページ遷移機能が不慣れな人には分かりにくくなったので、WEBサイト側で使いやすいナビゲーションを用意してあげるようにしましょう。

サイトへの影響

　新しいUIは、分かりやすくデザインされたサイトには非常にいいエクスペリエンスを提供できますが、逆にナビゲーションの分かりにくいサイトだと、「戻る/進む」ボタンが自動で隠される中でページを前後しなければなりません。

　固定型のヘッダーフッターを用意すると、サイト内はいつでも自由に移動できるようになります。一部のAndroidでは固定の要素がうまく動かないこともあるので、心配な場合はiOSのみで固定するようにしましょう(大賀)

3. より広くなったスクリーンと、これまでとは違う表示範囲

　新しいSafariではインターフェイスが縮小され、フルスクリーンに近くなります。ページの表示範囲も変わってきます。これも考慮すべき点です。

　例えば、下のMobifyのページのスクリーンショットでは、iOS 7とiOS 6ではカスタマーロゴの見え方が異なっていることが分かると思います。

企業にとっては、ブランド表記は重要なことの一つです。ロゴがどのようなデバイス、スクリーンサイズでも表示されるようレイアウトの再考が必要です。

サイトに与える影響

　モバイルサイトの構築の上で、テストしなければならない環境がまた一つ増えました。もしページの表示範囲がユーザーエキスペリエンスにとって重要なことなら、そのサイトがiOS 7でどのように映るかを可能な限り早く確認してみるべきです。

　URLバーに表示される情報はドメインのみになりました。（www.example.comなど）

現在のページをURLで知るには、URLバーをタップしてアドレスの編集モードにする必要があります。パンくずリストなど、サイト内での現在地を示す情報を置くようにしましょう。

　また、ドメイン名が常に表示されることになるので(隠せません)、サブドメインを含めてドメイン表記まで気を遣いましょう。「m.example.com」のように別のサブドメインで展開するよりは、PCサイトもモバイルサイトも同じ「www.example.com」で表示されるほうがサイトの統一感が高まります。

iOS7デビューにおいて

　iOS 7、モバイルSafariの新バージョンがいよいよ市場に出回ります。ジョナサン・アイブのチームが下した新しいアプローチは、今後のアプリやウェブ、インターフェイスをどのように変えていくか、とても楽しみです。ウェブ開発者やデザイナーは、ぜひこの新OS上でのサイトがどのように表示されるか確認してみてください。

　そのためiOS 7の搭載された実機にいち早く手に入れるか、Xcode 5をダウンロードすることをおすすめします。