Blog スタッフブログ

こんにちは、Webデザイナーのそいです。

今回はWEBサイトで必ずといっていいほど使われているナビゲーション、ハンバーガーメニューについて印象に残るアイデアでデザインされているものをピックアップして紹介したいと思います。

サイトの世界観にあわせて「なるほど！」と思わせられる素晴らしいサイトを厳選して紹介していますので、いつものナビゲーションと違うデザインを作ってみたい！という方はぜひ参考にしてみてくださいね。

ハンバーガーメニューって何？という方はこちらをご覧ください

ドラえもん未来デパート

みんな大好きドラえもん！ドラえもんのオフィシャルショップ「ドラえもん未来デパート」のショッピングサイトです。スマホの画面ではハンバーガーメニューがどら焼きの形になっています。ドラえもんのコンセプトにあったモチーフで、とてもかわいいですね。

ちなみに左上の部分は時間によって、ドラえもんがメッセージを残してくれるんです。ネットショップという機能だけでなく細かなアイデアが嬉しく感じますね。

展開時のメニューはベーシックなレイアウトとなっていました。

ドラえもん未来デパート

おまかせクルマ取引

次にメルカリが提供する「おまかせクルマ取引」という個人同士での車取引をサポートする代行サービスサイトです。ナビゲーションのデザインは一風変わっておりタイヤのモチーフが使われていますね。

展開後も全画面で表示されるのではなく一部がメニュー画面となって表示されるパターンです。最近このレイアウトを見かけることもありますので、トレンドが取り入れられていることがわかりますね。

今回はナビゲーションにピンポイントを当てていますがサイトもイラストメインで凝ったデザインになっていますのでぜひサイト全体を見てもらいたいです。

メルカリ｜おまかせクルマ取引

びっくりドンキー

最近キャンペーンサイトまとめでよく紹介させてもらっているびっくりドンキーのサイトです。

メニューのデザインは三本線のベーシックなハンバーガーメニューですが、色が緑・赤・黄色とロゴの色合いにあわせて作られています。

展開後は×ボタンも色が分けられていたりブランドコンセプトにあわせたこだわりを感じました。

また、展開後のナビゲーションもページコンテンツが多いなか文字の大きさや色を変えたりして見やすいデザインになっているのがポイントです。

びっくりドンキー

河馬印本舗

老舗の傘ブランド「河馬印本舗」の公式サイトです。このサイトは横スクロールで閲覧するタイプになっているのですが、使いやすさに影響がでないようメニューも縦書きになっておりUIが一風変わったデザインとなっていました。サイトは風情が溢れておりおしゃれな作りになっているので和風なデザインをつくりたい方はアイデアの一つとして参考にしてみてはいかがでしょうか。

河馬印本舗

愛の結晶 らぶいーず

TikTok発！Z世代を中心に人気を集めているキャラクター「らぶいーず」のサイトです。

ナビゲーションはキャラクターのようなモチーフでデザインされておりかわいらしいですね。展開した時のメニューもポップなつくりになっており、すもっぴがメニューを支えてくれています。全体的にキャッチーでかわいいサイトでありながらキャラクターの情報が詰まっているのでぜひ訪問してみてはいかがでしょうか。

愛の結晶「らぶいーず」

北海道奈井江町のゲストハウス「泊まれる音楽室」

最後に北海道奈井江町のゲストハウス「泊まれる音楽室」のサイトです。

イラストがふんだんに使われているほっこり温かみのあるサイトです。メインビジュアルでは俯瞰で楽器を演奏している人やそれを鑑賞している人たちで賑わう様子が描かれています。

メニューのデザインは楽譜をイメージさせるモチーフになっています。ハンバーガーメニューのベーシックな線のデザイン×音楽を掛け合わせて楽譜のデザインにされているのだと思いますがアイデアが面白いと思いました。展開した時のメニューもまるで1枚のキービジュアルのように作られており全体的に世界観がおしゃれに表現されていますね。

北海道奈井江町のゲストハウス｜泊まれる音楽室

まとめ

いかがでしょうか。今回はハンバーガーメニューの一風変わったデザインを6サイトピックアップして紹介しました。表現手法はサイトによってさまざまでしたが、ブランドやキャラクターのコンセプトにあったモチーフやカラーを取り入れられておりアイデアとしていろいろヒントが得られたのではないでしょうか。今回もご一読いただきありがとうございました！