ドロワー

定義

ドロワーは、画面の端から内側へすっとスライドして現れるパネルです。名前のとおり引き出しのように 左・右・下から滑り出し、用が済むと同じ方向へ滑って消えていきます。中には、サイト全体を移動する ナビゲーションメニュー、一覧を絞り込むフィルター、項目一つの詳細情報など、ふだんはたたんでおいて 必要なときだけ開きたい内容を入れます。モバイルでハンバーガーボタンを押したときに横から滑り出て くるメニューが、いちばんよく見かけるドロワーです。画面そのものを切り替えなくても、補助的な画面を ちょっと呼び出してまたたためる、という点が肝心です。広く開いた本文はそのまま残したまま、端の一列 だけを借りて使うイメージです。

なぜ重要か

ドロワーの強みは、現れる位置にあります。モーダルが画面の真ん中に飛び出して視線を強く引きつけるのに 対し、ドロワーは端から静かに出てくるので、いま見ていた内容をあまり隠さず、文脈も途切れにくくなります。 ユーザーは後ろにある画面を横目で意識したまま、ちょっと引き出しを開いてメニューを選んだりフィルターを 調整したりして、また元の作業へ戻れます。とくに画面の狭いモバイルで役立ちます。ふだんはコンテンツに しっかり場所をゆずり、必要な瞬間だけメニューやフィルターのために場所を借りてくるからです。それでいて 開いているあいだは背景をスクリムで覆い、いまはドロワーに集中すればいいという合図をはっきり伝えます。 だから軽さと集中を同時に両立できるパターンで、画面の中央を空けておきながら、いま何を扱えばいいのかを ぼやけさせずに示してくれます。

よくある間違い

• ドロワーを開いたまま、背景をスクリムで覆わないことです。後ろの画面がそのまま明るく見えていると、 ユーザーはいまドロワーが開いている状態なのか迷い、どこを押せば閉じるのかも見当がつきにくく なります。
• 外側を押しても、スワイプしても閉じないようにしてしまうことです。とくにモバイルでは端から払って 閉じる動作が体にしみついているので、この方法がふさがれていると、もどかしく感じてしまいます。
• あまりに多くの内容を、ドロワー一つに詰め込むことです。引き出しの中が深いスクロールで埋まると、 気軽に開いてたためるという長所が消え、いっそ別ページにしたほうがよかった、という状況になります。

実務のヒント

• ドロワーはモーダルと違い、端から出てきて文脈を途切れさせにくいという良さがあります。それを活かして、 モバイルメニューやフィルターパネルのように、ちょっと開いてたたむ内容に使いましょう。開いたときは 背景をスクリムで覆い、外側のクリックとスワイプで自然に閉じられるようにすると、ユーザーの期待に 沿います。
• ドロワーが出てくる方向と、中身の性格をそろえましょう。ナビゲーションはふつう左から、フィルターや 詳細は右や下から開く、というように位置に一貫した意味を持たせると、ユーザーはすぐに慣れていきます。
• 開閉のスライドの動きには、短くなめらかな遷移をつけつつ、動きを控えたいユーザーのために過剰な アニメーションは避けましょう。どちらの方向から来たかを目で追える程度で十分です。

関連概念