12Diviの垂直ナビゲーションの例

ウェブサイトを作成するとき、考慮すべき多くの異なることがあります。 それは通常、Webサイトの全体的なレイアウトをどのように見せたいかから始まります。 送信しようとしているメッセージを強化するために、Webサイトのコンテンツと一致させる必要があります。

Webサイトが訪問者の行動にどのように影響するかで主要な役割を果たす要因の1つは、プライマリメニューです。 Diviを使用すると、Webサイトの他の部分と一致する美しい方法でメニューのスタイルを設定し、Webサイトを通じて訪問者をガイドするのに役立つ可能性がたくさんあります。

それらの可能性の1つは、トップメニューの代わりに垂直ナビゲーションを使用することです。 垂直方向のナビゲーションが頻繁に使用されていることはありませんが、それはよく考え抜かだ場合、それは見事な結果を提供することができますし、それはあなたのウェブサイトの残りの部分と一致した場合。 トップメニューと同様に、垂直メニューは、Webサイトでの滞在中ずっと訪問者をフォローします。

インスピレーションを得るために、垂直ナビゲーションを使用して、訪問者がWebサイト全体をナビゲートする方法を改善することにより、訪問者のエクスペリエンスを最適化する12のWebサイトを選択しました。

1.マスターエンディセノデインテリア

Master en Diseno de Interioresは、インテリアデザインに関する素晴らしいウェブサイトです。 上の画像では、彼らがどのように垂直メニューを使用して、彼らのWebサイトにその素晴らしい追加のタッチを与えたかを見ることができます。

ウェブサイトで使用されている色は非常にニュートラルであり、ウェブサイトだけでなく、問題の会社やブランドにもモダンなタッチと感触を与えます。

垂直ナビゲーションも例外ではありません。 使用されている色は非常に微妙で、読書中に目を煩わせることはありません。

2.モデルを上に

Model On Topは、モデル管理Webサイトです。 Diviで作成されたこのウェブサイトは、特定の調和が集まり、彼らが会社にリンクしたい専門性と専門知識を示すことを可能にしました。

ロゴ、ページ、検索バーなどの必要な要素をすべて含む非常に優れた垂直ナビゲーションに加えて、Webサイトの冒頭でビデオの背景を使用して、そのエンゲージメントを作成しました。

垂直ナビゲーションは多くの特別なデザインを必要としませんでした、彼らはむしろそれをきれいに保ち、ページの残り全体のビジュアルに仕事をさせることに決めました。

3. Art-On-The-RunFilmschoolベルリン

Art-On-The-Run Filmschool Berlinは、映画学校が必要とする芸術的な側面をWebサイトで完全に表現しました。 垂直ナビゲーションは、全体像の中で特別な目的を持っています。

彼らは意図的に垂直ナビゲーションを使用して、メニューを一種の「リスト」のように見せることの利点を享受しました。 彼らはウェブサイトが何であるかと一致する番号付けを使用しました。 番号付けは、ページに加えて、シナリオまたはエピソードとして簡単に解釈することもできます。

表示されているページとロゴの組み合わせは、特定のシンプルさと構造の感覚を与えます。 彼らは、彼らのウェブサイトが何であるかと完全に一致するビジュアルも表現することに失敗しませんでした。

4.アレックスブランド

Alexブランドは、子供向けにあらゆる種類のものを販売するDivieコマースWebサイトです。 アート＆クラフトから家具やゲームまで。 ウェブサイトはすぐに彼らが表現したい種類の感情を示します。 遊び心があり、魅力的です。

この場合、垂直ナビゲーションも非常に慎重に選択されました。 さまざまなページがたくさんあります。トップメニューを選択すると、構造が失われ、十分なスペースがなくなります。

5.デブリンの写真

Delvin Photosは、おそらくこの投稿で言及されているすべてのWebサイトの中で最もエレガントなWebサイトです。 Delvin Photosは、自社のWebサイトを使用して、すべての作品を独創的で魅力的な方法で表示し、提供するサービスの新規顧客を引き付けています。

彼らは垂直ナビゲーションを使用して、Webサイトの他の部分全体で使用している優雅さを強調し、プライマリメニューにソーシャルメディアアイコンを含めました。 また、人々がWebサイトに滞在している間はいつでもソーシャルメディアチャネルにアクセスできるようにします。

6.ソワレメイク

Soiree Makeupは、メイクを中心に展開するウェブサイトです。 このウェブサイトは、メイクアップアーティストのメイクアップサービスを提供するために特別に作成されています。 ウェブサイトはすぐにすべてのメイクアップアーティストに期待されるシンプルさとエレガンスを示しています。 あまり贅沢ではありませんが、見るのはきれいです。

一般に、Webサイトは画面全体を占めるわけではないため、コンテンツがより集中します。 垂直ナビゲーションでは、ほとんどの注意がロゴと連絡先ボックスに向けられます。

垂直ナビゲーション内にコンタクトボックスを含めることで、メイクアップアーティストはウェブサイトの最も重要な目的を強調することができます。 新しいリード、新しい顧客、新しい予約を取得します。

7.ネイサンウェルトン写真

Nathan Welton Photographyは、この投稿のために選択した2番目の写真ウェブサイトです。 写真のWebサイトに垂直ナビゲーションを使用することは、他のWebサイトよりもはるかに一般的です。 それは通常、ウェブサイト上の写真がそれ自体を物語っているからです。

写真のウェブサイトのウェブサイトの所有者は、使いやすく、気を散らさないメニューを用意することで、シンプルな垂直ナビゲーションを使用して画像に焦点を合わせ続けます。

ネイサンウェルトンが彼のウェブサイトで使用した画像はまさにそれです。 彼らは冒険に満ちていて、彼ら自身の物語を語っています。 垂直ナビゲーションは実用的な目的のためだけにあり、トップメニューのようにページを中断することはありません。

8.リリー写真

リリーフォトグラフィーは、この投稿のために私たちが選んだ最後の写真ウェブサイトです。 このウェブサイトの素晴らしいところは、ホームページのギャラリーを使用していることです。

ギャラリーには、ある種の体験を生み出すために過去に行われた作品が展示されています。 結局のところ、 人々は彼らが期待するものに沿った写真を撮る写真家を探しています。

垂直ナビゲーションは、NathanWeltonが使用する垂直ナビゲーションに似ています。 単純ですが、仕事を成し遂げます。

9.フィルムピッツバーグ

Film Pittsburghは、映画を上映する組織です。 彼らが行った素晴らしいことの1つは、訪問者が実用的な情報を入手できるように、ページの上部に2番目のメニューを作成することです。

それどころか、垂直ナビゲーションはかなり有益ですが、訪問者が適切なページに誘導することで、ストーリーと使命を理解するのに役立ちます。 実用的なページとナレーション付きのページを互いに分割することで、プライマリメニューでのストーリーテリングが強化されます。

Film Pittsburghは、垂直ナビゲーションを使用するだけでなく、画面全体のサイズを使用しなかったため、関連する背景画像でデザインを強化するためのスペースが残されていました。

10. BlendLove

BlendLoveはオーストラリアにあるフードショップです。 彼らは彼らが知る必要があるすべての実用的な情報について彼らの顧客に知らせるためにウェブサイトを構築しました。

彼らが彼らのウェブサイトで提供する素晴らしいエキストラの1つは彼らが作る健康食品でいっぱいの電子ブックを買う機会です。 これは、顧客と関わり、顧客が誰であるかを知り、さらには利益を上げるための優れた方法です。

ウェブサイト自体は、彼らが持っているロゴとの素晴らしいコントラストを作成する暗いトーンのカラーパレットを持っています。 彼らは、垂直方向のナビゲーションでも、Webサイト全体で色が一貫していることを確認しました。 垂直ナビゲーションは画面の比較的大きな部分を占めるのに対し、トップメニューは通常それほど目立たないため、一貫性があることを確認することが重要です。

11.ボナペティ

Bon Appetitは、多くのフレーバーと香りを含むワークショップを提供することに焦点を当てたベルギーのWebサイトです。 前の例とこの例は確かに1つの点で異なります。 Bon AppetitのWebサイトは、視覚性よりも、提供する書かれたコンテンツに重点を置いています。

縦型メニューは3種類に分かれています。 ロゴ、ページ、およびカスタマーサービスや配送などの追加サービス。 ページと追加のサービスのスタイルの違いにより、Webサイトに特別な整理感とタッチが与えられます。

12.タイ料理店を食べる

Eat Thai Restaurantは、この投稿の最後の例です。 地元で所有されているモバイルレストランです。 彼らのウェブサイトには複数のページがありません。 彼らはむしろ1ページを取り、最も重要なことに焦点を合わせました。 食べ物。 このサイトは、注文したい人を注文Webサイトにリダイレクトするために使用されます。

この例で使用されている垂直ナビゲーションの良いところは、実際にはナビゲートするためのものではなく、情報を提供するためのものであるということです。 垂直ナビゲーションは、訪問者がWebサイトに滞在している間ずっと追跡します。つまり、情報も追跡します。 彼らは、ソーシャルアイコンと「今すぐ注文」CTAとともに、メニュー内のすべての関連情報を提供しました。

最終的な考え

この投稿が、現在のWebサイトまたは将来作成するWebサイトの優れた概念を考えるのに役立つたくさんのインスピレーションを与えてくれることを願っています。 何か提案やコメントがあれば; 下のコメント欄にコメントを残してください！ そして、あなたがそこにいる間に、私たちに知らせてください。 垂直ナビゲーションをどのようなウェブサイトに使用しますか？

大きなお知らせ、役立つヒント、Diviの景品を見逃さないように、必ずメールマガジンとYouTubeチャンネルを購読してください。

LuckyDesigner /shutterstock.comによる注目の画像