No.003　東京都庭園美術館

Web業界のはしくれのものになるために、ページを見る目を養うwebサイトレビュー。

第３回目は東京都庭園美術館のホームページ。

現在開催中の展覧会のイメージをトップに据え、サイトそのものはごくシンプルに作られていた。
美術館という特性上じっくり見せたいコンテンツ（作品など）が多く、そのような場所にモーダルウィンドウを使うのだという気づきになった。

https://www.teien-art-museum.ne.jp/

東京都庭園美術館は、1933年に建設されたアール・デコ様式の旧朝香宮邸とその空間をいかした展覧会、緑豊かな庭園を楽しめる美術館です。

配色

ベース：#ffffff

テキスト：#333333

フォント

“ヒラギノ角ゴ Pro W3”
“Hiragino Kaku Gothic Pro”
“メイリオ”,
Meiryo
Osaka
“ＭＳ Ｐゴシック”
“MS PGothic”
sans-serif

ファーストビュー

現在開催中の展覧会のメインビジュアルが据えられている（執筆当時は「旅と想像 / 創造展」）。
アクセスした瞬間に開催中の展覧会がわかり非常に便利。
このファーストビューはパララックス効果で作られており、スクロールしていくと下からコンテンツがかぶさっていく。

加えて美術館を訪れる客に絶対にみておいて欲しいのであろう、「ご来館にあたって」のボタンがあり、感染症対策関連のページへ飛ぶようになっている。
個人的には事前予約が必要なのかどうか知りたいとき、大体感染症対策のページを見るのでファーストビューにおいてあるのはありがたいと思った。

導線

ヘッダーナビゲーション、「チケットの購入・日時指定」ボタン、フッターナビゲーション。

ヘッダーナビゲーション：スクロールすると出現する。ドロップダウン式のメニュー。

チケットの購入・日時指定ボタン；トップページと「開催中の展覧会」のページのみに出現する。

トップページのコンテンツ

NEWS、PROGRAM、iframeによる公式twitter埋め込み、カレンダー、来館者向けのコンテンツ。

「開催中の展覧会」ページのコンテンツ

「展覧会概要」「本展の見どころ」「チケット情報」「関連プログラム」「ギャラリートーク」「出品作家」のコンテンツがページ内リンクでみられるようになっている。

出品作品は、jqueryプラグインlightboxを用いたモーダルウィンドウで拡大してみることができる。

出品作家はタブを切り替えてみることができる。
bxsliderが使われており、出品作家の名前リストにclass=”bx-pager”をつけてタブっぽくカスタムしているようだ（これ今度から使いたい）。
タブ（っぽく見えるページャー）がアクティブになるとclass=”active”が付いて、border-bottomの色がなくなる。

「開催中の展覧会」ページより、出品作家のエリア。

梢のあみめ | Webサイト100選