月: 2022年12月

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

第8回目は大阪府吹田市の万博公園にある大型複合施設「EXPOCITY」のホームページ。

前回投稿した「NIFREL -ニフレル」はこのEXPOCITYの中にある施設です。流れからそのまま持ってきました（笑）。

普段ダウナー系のものが好きでそればっかり見ていて、自分の感性にはない賑やかなサイトだなと思ったのでレビューすることにしました。

https://www.expocity-mf.com/expo/

エキスポシティは、さまざまなエンターテインメントが楽しめる日本最大級の大型複合施設です。見て、触れて、感じて、遊んで、学んで…心がよろこぶ出会いや体験が待っています。

ターゲット

大阪に旅行しようとしているファミリー層、カップル。

配色

ノイズのかかったベージュがベース。工作紙みたい。
メインはロゴやファーストビュー、フッターにも使われている赤。
あとはセクションごとにテーマカラーがあります。

ベース：#e8e8e8

メイン：#c1332c

アクセント：#ea5939, #2a73c8, #489636, #eb6fa4
オレンジ、青、緑（黄み）、ピンク

テキスト：#000000

フォント

英数字がサンセリフ体、本文が丸ゴシック。

英数字：Legend Giga（あまりシュッとしてない、親しみの持てる書体だなと思った）

本文：Zen Maru Gothic, sans-serif

レイアウト

PCファーストで記述されています。
レジャー施設なので、大阪旅行の計画を練っている時にPCで見ることを想定しているのだろうか。
ブレイクポイント：768px

line-height: 1.6~1.7くらい

内部コンテンツ幅： 最大1000px
セクション間空き：12~17rem（≒120px）

ファーストビュー

No.009　EXPOCITY

写真やオブジェクトがポコポコと下から出てきます。

色とりどりのオブジェクトはGIFアニメでスライドしたり、回転したり、左右に揺れてアピールしてきたり、とにかく賑やかな印象。

写真の形のモチーフが扉なのか窓なのかはわかりませんが、あっちこっち楽しそうなところを覗いてる印象です。

導線

トップページをスクロールすると、下層コンテンツへのリンクが現れます。

ハンバーガーメニューと、駐車場混雑状況のページに飛べるボタンが追従。

コンテンツ

トップページより、施設紹介。

イラストが使われていて親しみやすい印象。
あと「気になる施設をクリック」みたいなちょっとした文章って大事だなって思った。

「施設紹介」より、「気になる施設をクリック」してみたところ。
モーダルウィンドウで施設の詳細が表示される。

イラスト中の吹き出しをクリックすると、モーダルウィンドウで施設の詳細を見ることができます。

「EXPOCITYの楽しみ方」より。

写真だと伝わらないですが、ここのイラストの上にマウスホバーするとワイワイしている風に動きます（a:hover時にkeyframeアニメーション指定）。

こういうちょっとしたアニメーションでも楽しげな雰囲気や、親しみやすさって伝わるものなのですね。

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

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

第8回目は大阪府吹田市の万博公園の中にある体験型展示施設「ニフレル」のホームページ。

開放感があって透明感のあるグラデーションが綺麗だと感じたサイトでした。

https://www.nifrel.jp/

大阪の万博公園で会える「生きているミュージアム ニフレル」。

配色

白ベースに、水族館ぽい水色がメイン。
光のイメージ（？）である黄色と、陸のものもいるので（？）緑色がアクセントカラーになっています。
全部青みよりの色なので、親しみやすさがありつつも涼しげな光に溢れる印象です。

ベース：#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」から「コンセプトと各ゾーンの紹介」を見て、「みずべにふれる」ゾーンの紹介ページからたどり着くこともできます。

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