タブメニューで情報をまとめる
2023.10.15 : Other Staff
Design
タブメニュー
そもそもタブメニューとは、ウェブサイトやアプリケーション上で情報を分類・整理するためのナビゲーション要素の一つです。
デザイン的に、クリックできる要素であること・リンクボタンとは別の要素であること・選択中のタブとそれ以外のタブは別の状態であることを明確にする必要があります。
最近このタブメニューを用いて制作することが多くなってきたので、紹介していきます。
デザインその1
こちらのサイトのタブは文字だけでシンプルに表現しており、タブに色を付ける+下線で、その他はグレーで区別しています。
![](https://nanasaninc.com/manage/wp-content/uploads/2023/10/1-1024x554.jpg)
https://www.marken.co.jp/
スマホになった時は、デザインはあまり変わらず右にスクロールする形になってます。
![](https://nanasaninc.com/manage/wp-content/uploads/2023/10/株式会社マーケティング研究協会│マーケティングに関する公開セミナー・企業内研修・コンサルティング-474x1024.png)
デザインその2
こちらのサイトのタブはボタン風のデザインで、タブの塗りと、その他は枠ありの反転で区別しています。
![](https://nanasaninc.com/manage/wp-content/uploads/2023/10/2-1024x537.jpg)
https://www.fsuite.co/events
スマホになった時は、横一列に並んでいたのが2カラムになっています。
![](https://nanasaninc.com/manage/wp-content/uploads/2023/10/The-F-Suite-CFO-Conferences-Led-By-Industry-Experts-474x1024.jpg)
デザインその3
こちらのサイトのタブは縦に積んで、タブの塗りと、その他はグレーで区別しています。
![](https://nanasaninc.com/manage/wp-content/uploads/2023/10/3-1024x423.png)
https://recruit.moneyforward.com/
スマホになった時も、縦に積んでアコーディオンパネルになっています。
![](https://nanasaninc.com/manage/wp-content/uploads/2023/10/採用情報-株式会社マネーフォワード-474x1024.png)
まとめ
タブの数やタブのタイトルの長さ、モバイルファーストだったり、タブメニューのデザインだけでも考えることが多く、奥が深いです。
流行もチェックしつつ、良いインターフェース作りを心がけたいです。