ミニマルWebデザインにぴったりの”コーナーナビゲーション”とは？事例8選

ナビゲーションの位置やデザインにも、トレンドがあります。

すこし前から流行しだした「コーナーナビゲーション（画面四隅に配置されるナビゲーション）」も、現在のトレンドのひとつです。最近は以前に比べて、デザインがよりミニマルに、かつエレガントな傾向があります。

コーナーナビゲーションは画面の角に配置されるため、ヒーローエリアの内容を邪魔しません。デザインに大きな制限はなく、さまざまなスタイルと組み合わせられるところも魅力です。

今回は、そんなコーナーナビゲーションを取り入れたWebサイト8選をご紹介します。

1. Alpha Blue Ocean

はじめにご紹介するのは、現代的なデザインのヒーローエリアにぴったりのコーナーナビゲーション。こまかなギミックがデザインのアクセントになっています。

ナビゲーションの役割は、あくまで副次的なものです。しかし十分なホワイトスペース（余白）と、青と白のはっきりしたコントラストによって、自然に目をひくようにデザインされています。

パッと見ではナビゲーションは角に限定されているように思えますが、操作すると右側にはロゴタイプやハンバーガーメニュー、左側にはWebページ内のナビゲーションが展開されています。ヒーローエリアの内容を邪魔しないように工夫されたデザインです。

Alpha Blue Ocean

2. Playermaker

背景の映像を際立たせるために、コーナーナビゲーションが採用されています。画面の四隅に配置されているのは、CTA、ロゴタイプ、グローバルナビゲーション、ソーシャルメディアへのリンクなど。

従来型のグローバルナビゲーションは画面の左下に配置されています。左下という配置はめずらしく、新鮮な印象です。なお画面をスクロールすると、グローバルナビゲーションは左上に移動します。

配置ひとつでデザインにひねりを加えられることがわかりますね。

Playermaker

3. Neundlinger

縦書きのメニューを取り入れたコーナーナビゲーションのデザイン例。

左上に配置されたロゴタイプを中心にナビゲーションが配置されており、左側と上側がフレームのようになっています。

Webページの中央に配置されたスライダーを、ナビゲーションで縁取るようなデザインです。スライダーは右下の矢印で操作できます。

Neundlinger

4. Hot2Be

いままでご紹介した例と同様、コーナーナビゲーションによって角のスペースを有効活用したデザインです。

左下にはソーシャルメディアのアイコン、右下にはミュージックプレーヤーが配置されています。ロゴタイプと言語の切り替えボタンの位置は、それぞれ左上と右上にあります。

画面の下部よりも上部にボリュームが集中していますが、不自然なデザインにはなっていません。ナビゲーションを目立たせすぎず、かつスタイリッシュで効果的な配置を実現しています。

Hot2Be

5. Wolf and Whale

四隅だけでなく、左右のスペースにもエレメントを配置しています。

画面全体をナビゲーションが囲うようなデザインですが、圧迫感はなく、むしろ広々とした印象ですね。

訪問者はまず、青文字で書かれた「design」という文字に注目するはず。次に「View our work（仕事事例紹介）」へと誘導し、最終的に右下のCTAボタン（お問い合わせボタン）にたどり着くように設計されています。

調和と秩序を感じる、すっきりしたスマートなデザインです。

Wolf and Whale

6. Neal Ymar

「箱型」が意識された、ユニークなデザイン例。正方形や長方形で構成されているにもかかわらず、ヒーローエリアはとても洗練された印象です。

コーナーナビゲーションがデザインと調和しており、その美しい仕上がりに一役買っています。

Neal Ymar

7. Oropress

コーナーナビゲーションを取り入れたうえでWebサイトをミニマルに仕上げたいなら、このデザインが参考になるはず。ヒーローエリアはとても広々としており、すっきりとした印象です。

エレメントは最小限ですが、視差効果を取り入れたロゴタイプが使われており、退屈なデザインにならないよう配慮されています。

左上、右上、右下の角に配置されたコーナーナビゲーションも、デザインに自然に溶け込んでいますね。

Oropress

8. Romain Avalle

最後にご紹介するこちらも、とてもミニマルな仕上がり。モノクロのクラシックな配色、そして広々としたヒーローエリアが特徴です。

このWebサイトは個人のポートフォリオで、アーティストのイニシャルである「R.A.」にはマウスの動きに応じて文字が動くインタラクティブなエフェクトがつけられています。

コーナーナビゲーションの内容は、「WORK（作品）」と「CONTACT（連絡先）」の二点のみ。Webサイトの一部として、完璧に調和しています。

Romain Avalle

おわりに

今回ご紹介した例からもわかるように、コーナーナビゲーションはさまざまなデザインのWebサイトに活用できます。クラシックなデザインにも、現代的なデザインにも溶け込んでくれる、万能のナビゲーションです。

目立ちすぎず、かつ整頓されているエレガントなコーナーナビゲーションは、Webサイトにとってまさに理想のパートナーだといえるでしょう。

（原文：Nataly Birch　翻訳：Nakajima Asuka）

こちらもおすすめ！▼