アイコンとは、ウェブデザイナーの兵器庫の中でも最も多才なツールの一つです。ウェブサイトやアプリ上どこでも、視覚的に人々を魅了するツールとして使用することができます。ユーザー層にフラッシュセールについてお知らせしたり、新しいソーシャルメディア通知を送ったり、メッセージを伝えるためのツールとして役立ちます。
ということは、サイト上のナビゲーションでアイコンを活用することは、自然なことなのです。視覚的にも理にかなっています。しかしその計画には注意が必要です。
アクセシビリティがカギとなる問題であり、アイコンがテキストと一緒でない場合はより細かい工夫が必要になってきます。文脈も極めて重要です。小さな家のアイコンがホームページにつながっているのが明らかだとしても、その他の文脈では簡単に伝わらないことがあるからです。
今日は、アイコンナビゲーションを提供する、8つのユニークなCSSとJavaScriptのコードスニペットを紹介していきます。それと共に、良い意味でも悪い意味でもいくつかの目立った要素に目を向けていきます。
次にスライディング
このナビゲーションは魅力的で、割り当てられたスペースを上手く活用し、アクセシビリティに注意を払っています。アイコンをクリックするだけで、滑らかな“スライド”効果がアイコンを目立たせ、次のテキスト（こちらもスクリーンリーダーで使用可能）を表示します。また、コンテーナーの幅の合計は伸びたり縮んだりしません―美しいほど均一です。
See the Pen
Sliding Icon Menu by Steve Gardner (@ste-vg)
on CodePen.
ドロドロタブ
タブメニュに含まれた“ドロドロ”ナビゲーションは、楽しく直感的です。クリーンなアイコンと記述的なテキスト、そして大胆なカラーと一緒になっていて、携帯電話やウェブのアプリにぴったりです。とは言いますが、小規模で最も効果的だと言えます。より大きなメニュだと少しやり過ぎでベトベトになってしまうでしょう。
See the Pen
TAB Gooey Icon Navigation Menu Concept by Fady Nabil (@fady-nabil)
on CodePen.
スクリーン全体を変えてしまいましょう
前例と少し似ています。しかし各選択ごとに色が変わる背景のおかげで、ドロドロメニューの方が少し勝っているかもしれません。アニメーション化されたアイコンはまた、クリックの際に“描かれ”、ユーザーエクスペリエンスによりエキサイティングな要素を加えています。ここで欠落している唯一のものがアクセシビリティであり、それは少しスクリーンリーダーテキストを使えば解決されるでしょう。
See the Pen
Animated Tab Bar by abxlfazl khxrshidi (@abxlfazl)
on CodePen.
文脈のわかる垂直アイコン
垂直のナビゲーションバーは、スペースを無駄にすることなく高画質なナビゲーションを作成する方法を提供しています。普段だと、何らかの方法でメニューが広がります。この特定のCSS限定例は、メニューアイテムのタイトルを浮かばせ効果を使って表示します。オシャレで洗練した、直感的な見た目です。
See the Pen
[Navigation Menu] Vertical Icons At Left Side by Saxon Chuang (@tooilxui)
on CodePen.
ダークモード開始
ダークなデザインは日ごとに人気を集めているようです。そしてこのアイコンナビゲーションバーがぴったり合います。それらの暗いアイコンを一つクリックすると、赤い下線と共に明るい白に変わります。このメニューは、jQueryを使ってスムーズなアニメーションを作成しています。同じように、自身のアクセシビリティ機能をここでも追加することを推奨します。
See the Pen
Simple Icon Navigation by Ganesh Chikhalikar (@gansoft)
on CodePen.
プッシュボタン
カッコいいアニメーションで出来たとてもシンプルなナビゲーションを探しているなら、こちらがおすすめです。このアイコンベースメニューはキオスク端末のために作られ、あなたもインスピレーションが見えると思います。しかし勤勉なデザイナーであれば、少しテキストをここに追加して、このスニペットをマイクロサイトや着地ページに活用することも可能です。
See the Pen
SVG Kiosk Icon Menu by Chris Gannon (@chrisgannon)
on CodePen.
拡大可能な垂直ナビゲーション
こちらもまた垂直なアイコンベースメニューであり、一切邪魔にならないという特徴があります。しかしより文脈が必要だったら？画面左上のハンバーガーアイコンをクリックかタップして、メニューを拡大すると、検索フィールドが含まれています。個々のメニューアイテムをクリックかホバーを使って広げるような方法など、ここで出来ることはもっとあります。どちらにせよきれいに整理整頓されています。
See the Pen
Google Nexus Menu by Ahmed Elhanony (@A-Elhanony)
on CodePen.
半円をつくる
この円形レイアウトは面白い活用メニューになると思います。限られたスペースを使い、きれいに角にしまうこともできます。例えば、カギとなる数量のアカウント機能にアクセスしたいユーザーにはぴったりです。
See the Pen
Circular Icon Navigation by Mark Little (@hiremarklittle)
on CodePen.
あなたのメニューにもアイコンを選択
上記のスニペットは全ての人に何かを提供できます。それらは、異なるスペース確保、やり取り、そしてシンプルな見た目とは裏腹に強調された複雑さに焦点を当てています。各アイコンは、あなたの特定的なプロジェクトにも合ったぴったりなものになることでしょう。
こちらで表示した様々なスタイルを楽しんでくださいましたか？アイコンベースナビゲーションについてもっと知りたい方は、私たちのCodePen Collectionをチェックしてみてください。
おすすめ新着記事
おすすめタグ