Web業界のはしくれのものになるために、ページを見る目を養うwebサイトレビュー。
第8回目は大阪府吹田市の万博公園の中にある体験型展示施設「ニフレル」のホームページ。
開放感があって透明感のあるグラデーションが綺麗だと感じたサイトでした。
大阪の万博公園で会える「生きているミュージアム ニフレル」。
配色
白ベースに、水族館ぽい水色がメイン。
光のイメージ(?)である黄色と、陸のものもいるので(?)緑色がアクセントカラーになっています。
全部青みよりの色なので、親しみやすさがありつつも涼しげな光に溢れる印象です。
ベース:#ffffff
メイン:#0a9929(背景には不透明度を下げて使用), #2ac7ee
アクセント:#e8f049(黄色), #49c89a(明るい青緑)
テキスト:#000000
フォント
本文はゴシック体です。
游ゴシック体”, YuGothic, “游ゴシック Medium”, “Yu Gothic Medium”, “游ゴシック”, “Yu Gothic”,
“ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, “ヒラギノ角ゴ Pro”,
“メイリオ”, “Meiryo”
sans-serif
英字には以下のフォントが使われています(全てimg配置):
メインビジュアル Freestyle Script Regular(ラフな雰囲気のスクリプト)
セクションタイトル Noyh Bold(サンセリフ)
レイアウト
PCファーストで記述されています。
ブレイクポイント:768px
line-height
body;1.5
@media screen and (max-width:768px)限定で4.6vw指定されている箇所があるんだけれど、この意図がまだ私にはわからない(未熟)
内部コンテンツ幅: 1180px
セクション間空き:100px
ファーストビュー

No.008 NIFREL -ニフレル
Swiperによるフェードスライドショーでメインビジュアルが表示されます。
そのときピックアップされている動物の紹介や、キャンペーンのビジュアルが流れます。
“Meets! NIFREL”の文字がおしゃれ。
菱形のオブジェクトに、営業時間とチケットの待ち時間が表示されます。
あるあるだけど、どうやって表示しているんだろうか。
館内の窓が全て菱形であるらしく、それを取り入れた形状だと思われます。この形はいろんなところでモチーフとして使われています。
導線
PCサイズの場合
左上にNIFRELロゴ(トップページリンク)が追従
右上にハンバーガーメニュー、サイト内検索、SNSリンク、言語選択が一緒になったものが追従。
ハンバーガーメニュー内はアコーディオンパネルで下層ページが折り畳まれている。
フォトウェディングの案内バナーとオンラインショップのバナー、SNSリンクもある。
SPサイズの場合
ファーストビューではヘッダーバーとして各種ナビゲーションがある。
少しスクロールするとフッターバーとして出現して各種ナビゲーションが追従する。
あとフッターナビゲーションもある。
コンテンツ

トップページより、「CURATOR’S BLOG」セクション。
カードをずらして表示している
コンテンツ背景はbackground-imageで配置しています。
いろんな色を使っていますが、このサイトのテーマであるグラデーションに落とし込まれていたり、不透明度を下げてあったりするので煩くありません。
グラシンペーパーを重ねたみたいな表現(適切な言葉がわからない)。
このアイテムがずれている感じと、背景のボックスがずれている感じ、いいなあと思います。
flex-wrapをかけて、nth-child(3)番目のアイテムにmargin-leftを設定してあるだけでした。コードとしてはお手軽だけどおしゃれ。
その他下層コンテンツ
各コンテンツにトップページが用意してあって、より詳しい下層コンテンツページへと誘導される形式です。
トップページを経由せずにハンバーガーメニューから直接飛ぶこともできるようです。
結構使いやすい。

「いきもの図鑑」のページより。
例えばここに表示してある「いきもの図鑑」のページは、ハンバーガーメニューから「いきもの図鑑」で直接飛ぶこともできますし、「館内のご案内TOP」から「コンセプトと各ゾーンの紹介」を見て、「みずべにふれる」ゾーンの紹介ページからたどり着くこともできます。
コメントを残す