主にスマホでウェブサイトを閲覧した際に表示される「ドロワーメニュー」ですが、デザインのバリエーションは非常に豊富です。ブランディングやサイト構造によって、さまざまな種類が存在します。
そこで今回は、中でもイケてるドロワーメニューだけを厳選してシェアします。サイト制作時などに参考になれば幸いです。
ドロワーメニューとは
ドロワーメニューとは、タップやクリックで展開されるメニューを指します。
最も身近なものは「≡（ハンバーガーボタン）」を押して、展開するスマホのドロワーメニューでしょう。サイトによってはPCで閲覧時にも表示されます。
TCD公式（当サイト）のドロワーメニュー
今回はスマホのドロワーメニューに絞って、どのようなタイプがあるのかを見ていきます。
スマホのドロワーメニューデザイン事例
スマホのドロワーメニューにも色々なタイプがあります。よくあるベーシックなものから独創的なものまで、以下でチェックしてみてください。
コンパクト型
まずは画面の一部に展開するコンパクトなドロワーメニューです。
右上にコンパクトに表示されます。ページ遷移に合わせた動きが気持ちいいです。
上からスライドインしてくるシンプルなタイプ。汎用的でどんなサイトでも使えそうです。
フルスクリーン型
続いては、フルスクリーン（全画面）で表示されるドロワーメニューです。背景に画像を配置すると、サイトの世界観を表現しやすくなります。
背景にブラー（ぼかし）がかかるタイプ。レストラン、ホテル、企業サイトでも使えそうです。
ドロワー展開時の動きがダイナミックです。エフェクト盛りだくさんなサイトです。
機能拡張型
独自機能を追加したり、情報整理がひと工夫されているドロワーメニューです。
階層化されたサブメニューで画面が切り替わります。ECなどでは商品を探しやすそうです。
メルマガ登録のCTAや、アイコン付きのサブメニューが表示されているタイプです。
体験重視型
エフェクトやアニメーションを重視した、触っていて楽しいドロワーメニューです。心地いいユーザー体験が特徴です。
ドロワーの開閉エフェクトが美しく、滑らかな動きによって軽快に感じられます。
ドロワーメニューの見せ方が特徴的です。スクロールするまで表示されないタイプです。
アイデア型
他とは一味違う独創的なアイデアが光るドロワーメニューです。いずれも世界観が強く、ドロワーメニューもそれに合わせた設計になっています。
まとめ
一見同じに見えるドロワーメニューも、細かく見ていくと、コンパクトなものから全画面タイプまで幅があります。どこから展開するのか、何がどのように表示されるのか実にさまざまです。
情報の見せ方や配置・細かいエフェクトひとつで、ドロワーの印象は大きく変わります。サイトの目的や世界観によって適した形があるわけですね。
今回ご紹介した事例も参考にしながら、あなたのサイトに合うドロワーメニューを検討してみてください。
あわせて読みたいデザインアーカイブ
お洒落なファッション系からインテリア、カルチャー、ローカルメディアなど色々あるWebマガジン。 今回は数あるマガジンの中でもWebデザインがカッコよく、見ているだけでも素敵なサイトをまとめました。どれもWebデザインの参考になるものばかりです。 【PR】イケてるWebマガジンをつくれるW...
日本旅館・民宿のWebデザインで洗練されたWebサイトをまとめました。見ているだけでも旅に出たくなる、素晴らしいWebサイトばかりです。 縦書きテキストを取り入れた和風デザイン、あるいは和洋折衷のバランスに長けたサイトを作る際に参考になりそうです。 【PR】旅館・宿のWebサイトを制作す...
日本（和風）のデザインのホームページといえば、まずは「神社」が思い浮かぶのではないでしょうか。 神社は日本国内に88000社以上あると言われ、今でも有人の神社は2万ほどあると言われています。その中でも今回は有名な神社や凝ったデザインのWebサイトの神社をピックアップしました。 【PR】神...
東京五輪を控えている日本。昨今のインバウンド需要の高まりを受けて、訪日外国人観光客に向けたメディアがどんどん誕生しています。WEBメディアやアプリ、本、フリーペーパーなど、そのタイプも多種多様です。どの国に向けて発信しているかによって、その媒体がフォローしている言語の数も変わってきます。 当記...
Webサイトのデザインは次々に新しいものが出てきます。日進月歩の業界のトレンドや技術面の進歩から常に影響を受けるからですね。 参考にしたくなる美しいデザインのサイトは世界中にたくさんありますが、今回はその中でも横スクロールデザインのWebサイトだけを厳選して集めてみました。 異なる言語圏...
WordPressテーマ集
コメント