読者です 読者をやめる 読者になる 読者になる

世界が変わったのだから、自分も変わらなくてはならない。

エンジニア兼デザイナーのナカモリのブログです。

スマホサイトやアプリのサイドドロワーについて考える

Webデザイン UI

スマホサイトやアプリを作成するときに画面の表示領域を考慮し、ナビゲーションを一時的に表示させるパターンを用いる場合があります。そのパターンの1つとしてサイドドロワー(またはナビゲーションドロワー)があります。
サイドドロワーを使うといっても、使い方はいろいろあります。そこで、どのような使われ方があるのかをいくつか検討します。

1.ナビゲーションが動く(ナビゲージョンが上層)パターン

f:id:takahironakamori:20160113205610p:plain

Yahoo! Japan(スマホサイト)

「メニューを表示する」ボタンをタップすると、ナビゲーションが動くことでナビゲーションを表示させるパターンです。ナビゲーションに目を向かせるため、コンテンツにマスクをかけているように演出しています。また、ナビゲーションは縦にスクロールしますが、コンテンツはスクロールしません。任天堂のスマホサイトやGoogle Map(マテリアルデザイン)も同じようなパターンになっています。

f:id:takahironakamori:20160113205828p:plain

任天堂(スマホサイト)

f:id:takahironakamori:20160113205735p:plain

Google Map(iOSアプリ)

ユニクロ(スマホサイト)では、ナビゲーション部分の横幅が画面の横幅と同じになっています。

f:id:takahironakamori:20160113210048p:plain

ユニクロ(スマホサイト)

 

2.コンテンツが動く(コンテンツが上層)パターン

f:id:takahironakamori:20160113205623p:plain

Gmail(iOSアプリ)

「メニューを表示する」ボタンをタップすると、コンテンツが動くことでナビゲーションを表示させるパターンです。コンテンツも全く見えないところまで動くのではなく、少し残しています。Disney(スマホサイト)も同じようなパターンです。少し気になる点は、ナビゲーションを表示させるための「メニューを表示する」ボタンが、ナビゲーション表示後は「メニューを非表示にする」ボタンに役割が変わるのですが、アイコンは変化しないという点です。上記のユニクロのようにアイコンが変わるような演出があってもいいのでは?と思います。また、ナビゲーションをスクロールしたときにコンテンツもスクロールしないよう工夫がいると思います。

f:id:takahironakamori:20160113205858p:plain

Disney(スマホサイト)

 

3.コンテンツとナビゲージョンの両方が動くパターン

f:id:takahironakamori:20160113210023p:plain

All About(スマホサイト)

「メニューを表示する」ボタンをタップすると、コンテンツとナビゲーションの両方が動くパターンです。上記1.2.より実装が難しく、動作が重たくなる可能性があるので、実装方法に工夫がいる方法ではないかと思います。また、ナビゲーションをスクロールさせるとコンテンツもスクロールするケースがあります。コンテンツとナビゲーションが同じ層にあるかのような動きなので、動きとしてはまちがっていないかもしれませんが、ナビゲーションからメインコンテンツに戻ったときの配慮も必要かと思います。

 

4.「サイドドロワーがありますよ」とユーザーに伝える手段は?

Theresa Neil著、深津貴之監訳、牧野聡訳「モバイルデザインパターン(第2版)」(オライリージャパン)でもサイドドロワーの存在を知らせる方法を検討していますが、上記のサイト、アプリでは同著に記載されている「初回利用時にドロワーを開いた状態にしておく」または「初回利用時にドロワーが飛び出すような表示を行う」などのサイドドロワーの存在を知らせる演出はありません。存在を知らせるための演出をつけるのが難しい場合は、数本の横線だけで「ここをタップするとメニューが表示されます」というのもいささか乱暴な気がしますので、せめて「メニュー(Menu)」という表記はつけて叩ける感を表現した方がいいのではと思います。

 

モバイルデザインパターン 第2版 ―ユーザーインタフェースのためのパターン集

モバイルデザインパターン 第2版 ―ユーザーインタフェースのためのパターン集