読者です 読者をやめる 読者になる 読者になる

よなかのはなし

http://www.hiroseyonaka.com/

デザインの参考に!おしゃれなタブメニューを導入しているサイトまとめ

f:id:hiroseyonaka:20170406034220j:plain

省スペースでモバイルユーザーへのストレスも少ないことから、現在多くのサイトに導入されているタブメニュー。今回はタブメニューを導入したけどデザインが決まらない……という時、参考になるサイトをまとめました。

 

1、吹き出し系

まずは、オーソドックスな吹き出し風デザインのタブメニューから。吹き出し風は当サイトでも一時期採用しており、はてなブログでの導入方法は以下の記事にまとめています。

 

▼参考記事

サイドバーに吹き出し風のタブメニューを作る

 

 なんばパークス

f:id:hiroseyonaka:20170406021055j:plain

http://www.nambaparks.com/

 

吹き出しのツノが特徴的な、なんばパークスのタブメニュー。オーソドックスなデザインですが、細部を変えることでオリジナリティを出しています。

 

ポカリスエット公式サイト

f:id:hiroseyonaka:20170406022501j:plain

http://pocarisweat.jp/

 

ポカリブルー色のタブメニューが目を引くサイト。ブルーと白のコントラストが綺麗です。

 

MATERIAL

f:id:hiroseyonaka:20170406022728j:plain

https://mtrl.net/

 

こちらもブルーを使ったタブメニューを採用しています。落ち着いたトーンとシンプルなフォントの組み合わせがオシャレですね。

 

デジタルハリウッド大学

f:id:hiroseyonaka:20170405220619j:plain

http://gs.dhw.ac.jp/

 

フラットな吹き出し風のタブメニューを採用しているデジタルハリウッド大学。アイコンが最高にポップ。

 

 任天堂

f:id:hiroseyonaka:20170405225816j:plain

https://www.nintendo.co.jp/software/wiiu/index.html#vc

 

任天堂は、3Dの吹き出しを使ったタブメニューを使用しています。フラットですがコントラストがはっきりしているので見やすい。

 

本の話Web

f:id:hiroseyonaka:20170405024023j:plain

 http://hon.bunshun.jp/category/column

 

文藝春秋が運営する「本の話Web」では、サイドバーに吹き出しデザインのタブメニューが採用されています。サイト自体の更新はすでに終了しているようですが、バックナンバーが閲覧可能です。

 

株式会社アーティス

f:id:hiroseyonaka:20170405024455j:plain

http://www.asobou.co.jp/blog/

 

株式会社アーティスのブログページでは、カテゴリ別記事のデザインにフラットな吹き出しを採用。

 

株式会社R-NET

f:id:hiroseyonaka:20170405220220j:plain

https://www.rnt.co.jp/

 

不動産会社のR-NETも、ナビメニューとして吹き出し風タブメニューを採用しています。アクティブタブが鮮やかな黄色で、視覚的に分かりやすいデザイン。

 

株式会社エイチーム引越し侍

f:id:hiroseyonaka:20170406020046j:plain

http://hikkoshi.a-tm.co.jp/

 

ニュース・プレスリリースなどをタブメニューで切り替えています。アクティブなタブに赤い吹き出しをつけているので、分かりやすさ抜群。

 

 拓殖大学

f:id:hiroseyonaka:20170405024617j:plain

http://www.takushoku-u.ac.jp/

 

拓殖大学のサイトでは、ニューストピックス部分に吹き出し風のタブメニューが使われています。

 

芦屋大学

f:id:hiroseyonaka:20170405230150j:plain

http://www.ashiya-u.ac.jp/#newsContents2

 

下線にツノをつけたデザインが面白い芦屋大学のサイト。ただの下線より、かなり見やすくなっています。

 

名古屋外国語大学

f:id:hiroseyonaka:20170405024737j:plain

 

名古屋大学のサイトでも、ニューストピックスの部分に吹き出し吹き出し風ダブメニューが使われています。テーブルを吹き出し風にデザインしているのがオシャレ。

 

神奈川大学

f:id:hiroseyonaka:20170405224205j:plain

http://www.kanagawa-u.ac.jp/

 

ニュース情報をタブメニューにしている神奈川大学のサイト。ツノが小さいので一見分かりにくいですが、よく見るとアクティブタブがブルーの吹き出しになっています。

 

DW  Minion

f:id:hiroseyonaka:20170405025117j:plain

https://www.designwall.com/wordpress/themes/dw-minion/

 

WordPressテーマの「DW Minion」のサイドバーにも、吹き出し風のタブメニューが採用されています。

 

2、インデックス風デザイン

吹き出しの次に多く見かけるのが、インデックス風のタブメニュー。はてなブログでの導入方法については、以下の記事をご覧ください。

 

▼参考記事

タブメニューをインデックス風デザインにする

 

株式会社アカツキ

f:id:hiroseyonaka:20170405221511j:plain

https://aktsk.jp/

 

シンプルなインデックスデザインですが、一部ボーダーの色を変えています。

 

WORKSIGHT

f:id:hiroseyonaka:20170405025806j:plain

http://www.worksight.jp/

 

白黒のタブデザインを採用しているWORKSIGHT。

 

武蔵野美術大学

f:id:hiroseyonaka:20170406020801j:plain

http://www.musabi.ac.jp/#tab-topic-genre_all

 

武蔵野美術大学のサイトでは、ニュースやトピックス情報の切り替えにタブメニューが使われています。点線のみで作られた、スタイリッシュなインデックス風デザインが印象的。

 

IRORIO

f:id:hiroseyonaka:20170408223305j:plain

https://irorio.jp/

 

人気記事などをインデックス風タブメニューにしているIRORIO。インデックス部分が浮いているように見えてオシャレですね。

 

ナショナルジオグラフィック

f:id:hiroseyonaka:20170405025847j:plain

http://natgeo.nikkeibp.co.jp/

 

サイドバーにタブメニューを導入し、アクセスランキングを表示しているナショナルジオグラフィック。すっきりしていて見やすいデザイン。

 

野村不動産株式会社

f:id:hiroseyonaka:20170405224850j:plain

http://www.nomura-re.co.jp/

 

サイトのメインビジュアルにインデックス風のタブメニューを被せています。ビジュアルを引き立てる、フラットな見た目。

 

ITOKI

f:id:hiroseyonaka:20170406021446j:plain

https://www.itoki.jp/

 

ブルー系でまとめたシックなタブメニュー。落ち着いたトーンがおしゃれです。

 

EPSON

f:id:hiroseyonaka:20170405225022j:plain

http://www.epson.jp/

 

サイトの配色に合わせた白・青のタブメニュー。すっきりしていて見やすいデザインですね。

 

National Clinical Database

f:id:hiroseyonaka:20170406021808j:plain

http://www.ncd.or.jp/

 

サイドバーにタブメニューを導入し、メンテナンス情報などを3つのタブで切り替えています。下線のアニメーションがあるため、アクティブなタブが分かりやすい。

 

東急電鉄

f:id:hiroseyonaka:20170405225557j:plain

http://www.tokyu.co.jp/

 

東急電鉄はインフォメーション部分にタブメニューを採用しています。グレーと白を使い、フラットな印象。

 

さいたま市

f:id:hiroseyonaka:20170406020529j:plain

http://www.city.saitama.jp/

 

さいたま市のホームページでも、白とグレーのタブメニューが採用されています。

 

Bshop ONLINE STORE

f:id:hiroseyonaka:20170406022257j:plain

http://store.bshop-inc.com/

 

WOMAN・MANなどの項目をタブで切り替えています。サイトにマッチしたミニマルなデザインがおしゃれ。応用のきくデザインなので、ブログでも真似できそうですね。

 

ビオフェルミン製薬

f:id:hiroseyonaka:20170405030037j:plain

http://www.biofermin.co.jp/

 

ビオフェルミン製薬の公式サイトでは、ニューストピックスとIR情報の部分にタブメニューが採用されています。タブをクリックすると上にピョコン!と動くアニメーション付き。

 

装苑

f:id:hiroseyonaka:20170405030307j:plain

http://soen.tokyo/

 

アクティブなタブは白、他のタブはグレーアウトさせている装苑のタブメニュー。背景がストライプで個性的。

 

東京エレクトロン株式会社

f:id:hiroseyonaka:20170405215752j:plain

http://www.tel.co.jp/

 

東京エレクトロン株式会社は、最新情報や企業情報にインデックス風デザインのタブメニューを採用しています。シンプルでかっちりした印象のサイトにマッチしてますね。

 

3、背景色系

タブに背景色をつけたデザインです。シンプルなのでミニマル・フラットデザインのサイトでよく見かけます。

 

KITTE

f:id:hiroseyonaka:20170405220428j:plain

http://jptower-kitte.jp/

 

グレーと赤の2色使いが印象的なKITTEのサイト。タブメニューもこの2色でまとめています。

 

椿山荘

f:id:hiroseyonaka:20170405220859j:plain

https://hotel-chinzanso-tokyo.jp/

 

おすすめ情報の部分をタブメニューにしている椿山荘のサイト。グレーでまとめ、シックな配色に。

 

アーツカウンシル東京

f:id:hiroseyonaka:20170405221035j:plain

https://www.artscouncil-tokyo.jp/ja/

 

更新情報の項目を3つのタブにして切り替えています。非常にコンパクトでサイトの邪魔にならないデザインですね。

 

神戸学院大学

f:id:hiroseyonaka:20170405221241j:plain

http://www.kobegakuin.ac.jp/

 

イベント情報などをタブメニューにしている神戸学院大学。サイトに合わせたシンプルなデザインです。

 

大阪電気通信大学

f:id:hiroseyonaka:20170406020354j:plain

http://www.osakac.ac.jp/

 

新着情報の部分で項目がタブメニュー化されています。アクティブなタブには背景色を、その他のタブにはホバーで下線が出てくるアニメーション付き。

 

株式会社サックスバー

f:id:hiroseyonaka:20170406021951j:plain

http://www.sacs-bar.co.jp/

 

アクティブタブにブルーの背景色が付いています。落ち着いた色味が、シンプルかつオーソドックスなデザインを引き立てています。

 

株式会社ライフク

f:id:hiroseyonaka:20170405225314j:plain

http://lyfuk.co.jp/

 

サイトの雰囲気にマッチした、カッチリとした印象のタブメニューです。

 

藤井大丸

f:id:hiroseyonaka:20170405221737j:plain

https://ec.fujiidaimaru.co.jp/ladies

 

ボーダーと背景色を組み合わせたタブメニューデザイン。シンプルなデザインなので、ブログにも使えそうですね。

 

SoftBank

f:id:hiroseyonaka:20170405223926j:plain

http://www.softbank.jp/

 

こちらもボーダーと背景色を組み合わせたタブメニュー。ニュースやプレスリリース情報をタブで切り替えています。

 

4、ボーダー系

シンプルなボーダーを使ったタブメニューは、海外サイトでよく見かけるデザインです。高級感や洗練された印象を与えたいときは、ボーダーでタブメニューをデザインすると良いかも。

 

EUROSPORT

f:id:hiroseyonaka:20170405030700j:plain

http://www.eurosport.fr/

 

サイドバーのタブメニューをシンプルなボーダーだけで装飾しているEUROSPORTの公式サイト。とても洗練された印象。

 

OPENERS

f:id:hiroseyonaka:20170405030815j:plain

 

高級感あふれるタブメニューデザインのOPENERS。実はOPENERSのタブメニュー、以前当ブログでもデザインを真似てみたことがあります。そのときのキャプチャがこれ。

 

f:id:hiroseyonaka:20170406030626p:plain

 

このタブメニューの導入方法は以下の記事をご覧ください。

 

▼参考記事

グリッドデザイン風のタブメニューを設置する

 

Anew

f:id:hiroseyonaka:20170406022934j:plain

 https://justfreethemes.com/anew-free-wordpress-theme/

 

WordPressテンプレートの「Anew」はサイドバーにタブメニューを採用しています。アクティブなタブにはオレンジの下線が表示され、項目もアイコン表示にするなどポップな雰囲気。

 

まとめ

当ブログもサイドバーにもタブメニューを導入していますが、配色やデザインが思いのほか難しく四苦八苦しております。オシャレなタブメニューを見つけ次第、この記事も随時更新していきたいと思いますのでご期待下さい!