デザイン

デザイン

必見!クリエイティブなドロップダウンメニュー20選

LINE25

Line25 was built in March 2009 as a place to share web design ideas and inspiration through articles, tutorials and examples of stunning site designs.

本記事は、20 Websites With Creative Drop Down Menu Designs
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

284 views

読了時間 : 約4分33秒

ここでは、クリエイティブなドロップダウンメニューデザインとクールなレイアウトを持つ20のウェブサイトをご紹介します。 このページでは、ドロップダウンメニューのデザインがどのようになっているかは見られませんので、ウェブサイトに直接アクセスして、デザイン全体をチェックしてみてください!

 

非常に才能のあるDribbbleのデザイナーが作成したプロトタイプドロップダウンメニューデザインも、5つ後半にご紹介します。

 

ドロップダウンメニューのコードを学びたいなら、通常jQueryを使って行われることを知っておきましょう。 最初のステップは、Photoshopでコンセプトを固め、次に基本的なHTML要素をレイアウト、CSSで全てを整えて、最後にjQueryでアクセスしやすいメニューデザインを作成します。

 

今日ご紹介するサイトを見れば、きっと触発されて、あなたも素晴らしいメニューを作り出すでしょう。ドロップダウンメニューのデザインの中には非常にシンプルですっきりしたものもあれば、ユニークな要素を持っていて複雑なものもあります。

 

どれが一番好きですか?それはなぜ?コメント欄で是非教えてください。

 

Ben Sherman

 

ミニマリストデザインが好きなら、Ben Shermanのメニューバーがきっと役に立つでしょう。いろいろなウェブ作成に使えるミニマリストなシンプルでわかりやすいドロップダウンメニューです。

 

American Eagle

 

American Eagleのドロップダウンメニューも、ミニマリストなシンプルなデザインですが、Ben Shermanのものよりもはるかに複雑になっているため、より多くのカテゴリーが表示されます。 これは、ショップにも使用することができます。また、全ての商品が、小さなカテゴリーに分けられているという例は、非常に役に立つでしょう。

 

Mayflower Brewing

 

これは赤いドロップダウンメニューバーです。 Mayflower Brewing社のサイトのメニューは6つのカテゴリーのシンプルなものです。 マウスをそれぞれの上に置くと、メニューと同じ書体で濃い赤のサブカテゴリーが出てきます。

 

Hampton Bays

 

これは、複雑ですが整理されたメニューバーの一例です。 このドロップダウンメニューには角度のあるグラフィックも使用されているため、訪問者にとってユニークで目を引きます。 すべてがメニューバーにうまく収められているので、閲覧しやすく、必要なものを見つけやすいです。

 

Redbrickhealth

 

これは、いろいろなウェブサイトに合う清潔感のあるドロップダウンメニューです。 簡単に閲覧でき、必要なものがすぐ見つかります。

 

Carreras con Futuro

 

これはカラフルなドロップダウンメニューバーです。 各カテゴリーには、それぞれフラットアイコンがあり、カテゴリーにカーソルを合わせると、色がピンクに変わります。 これはメニューバーの非常にクリエイティブな例です

 

Callaway Golf

 

このサイトには、エレガントなドロップダウンメニューバーがあります。 シンプルでクリーンなデザインで、ロゴの横に配置されています。 清潔でミニマリストなデザインにぴったり合います。

 

Bon Look

 

Bon Look はクリエイティブなドロップダウンメニューのウェブサイトの一例です。各サブカテゴリーはプレビューイメージがついていて、買い手の必要としているものを探す手助けをしてくれます。間接的に取扱商品の宣伝をするいい方法でもあります。

 

Converse

 

コンバースのサイトには、非常にカラフルな商品のスライドショーがあります。 メニューバーはシンプルに黒の細い横線に白文字です。各カテゴリーには、Eコマースウェブサイトで非常に役立つサブカテゴリがいくつかあります。

 

Guernsey Water

 

これも、クリエイティブなドロップダウンメニューバーの例です。 細い横線に、各カテゴリーのアイコンとグレーのドロップダウンメニューのサブカテゴリがあります。

 

Kualoa Field School

 

Kualoa Field Schoolのメニューもきれいでモダンなデザインです。 このウェブサイトでは、大きな文字とロゴが書かれた画像がヘッダーにあり、ドロップダウンメニューバーをそのヘッダーに使用しています。

 

Puma

 

Pumaは、クールなドロップダウンメニューバーがある、よく整理されたウェブサイトの一例です。 注目、新着などの各サブカテゴリーが表示されているのは同じですが、コレクション、セールまた特別商品などは別にリンクつき画像で示されているのが、他の例とは異なるところです。ファッション業界での大きなウェブサイトに最適なドロップダウンメニューデザインです。

 

Reaching Quiet

 

Reaching Quietは、一番上のドロップダウンメニューバーからページの下部まで、完全なミニマリストデザインです。各サブカテゴリーは、このウェブサイトのデザインコンセプトに合った黒枠で白地のボックスに表示されています。 全てがエレガントデザインで、白黒のレイアウトであるという印象を持つかもしれませんが、実際には非常にカラフルであることがわかります

 

Helmy-Bern

 

Helmy-Bernのウェブサイトには、ダークな色合いできちんとまとまったドロップダウンメニューがあります。 モダンで機能的なデザインで、あらゆる種類のウェブプロジェクトに合わせやすいです。 このメニューは非常にできているので、新しいデザインを考えるきっかけなるかもしれません。 このデザインを、ダークなドロップダウンメニューのお手本にしましょう!

 

Santa Cruz

Santa Cruzのドロップダウンメニューも非常に独創的で、サイト訪問者がこのショップの取り扱っているものをぱっと見られるようになっています。 規模の大小を問わず、オンラインショップに最適です。

 

Submenu with dropdown

 

このドロップダウンメニューは、青い斜めの画像を基にしたユニークなデザインです。 サブメニューの各カテゴリーは、白い文字に背景はグラデーションを使用しています。 全体として、見栄えがよく、とてもクリエイティブです。

 

Choose your Final Galactic Destination

 

このドロップダウンメニューも、クリエイティブな例のひとつです。 このメニューは、他のものより透過率が高く、背景にとても合っています。ウェブサイトとアプリの両方で見栄えがします。

 

BH Winery

BHはエレガントなドロップダウンメニューで、ワインショップに最適です。 同じようなプロジェクトに取り組んでいるのであれば、この例はとても役に立つでしょう。

 

Equip

 

このドロップダウンメニューも透過率が高いです。濃い色の背景で、白文字と大きなアイコンが使用されています。オンラインショップのウェブサイトに最適です。

 

Shopping Cart Menu

 

このドロップダウンメニューは、ファッションEコマースウェブサイト用にデザインされています。 ショッピングカートメニューは、とても面白いもので、参考にするといいでしょう。また、ページを離れることなく、カートに追加した商品をいつでも確認できます。 各製品には、それぞれのサムネイル写真、名前、および価格が表示されます。

おすすめ新着記事

おすすめタグ