タブメニューで情報をまとめる

タブメニュー

そもそもタブメニューとは、ウェブサイトやアプリケーション上で情報を分類・整理するためのナビゲーション要素の一つです。
デザイン的に、クリックできる要素であること・リンクボタンとは別の要素であること・選択中のタブとそれ以外のタブは別の状態であることを明確にする必要があります。
最近このタブメニューを用いて制作することが多くなってきたので、紹介していきます。

デザインその１

こちらのサイトのタブは文字だけでシンプルに表現しており、タブに色を付ける＋下線で、その他はグレーで区別しています。

スマホになった時は、デザインはあまり変わらず右にスクロールする形になってます。

デザインその２

こちらのサイトのタブはボタン風のデザインで、タブの塗りと、その他は枠ありの反転で区別しています。

スマホになった時は、横一列に並んでいたのが2カラムになっています。

デザインその３

こちらのサイトのタブは縦に積んで、タブの塗りと、その他はグレーで区別しています。

スマホになった時も、縦に積んでアコーディオンパネルになっています。

まとめ

タブの数やタブのタイトルの長さ、モバイルファーストだったり、タブメニューのデザインだけでも考えることが多く、奥が深いです。
流行もチェックしつつ、良いインターフェース作りを心がけたいです。