⒈WEB SITE

さかなクンと秘密のラボinサンシャイン水族館

⒉概要

期間限定で行われたサンシャイン水族館のギャラリーイベントの特設ページをレビュー。

今回は「 Web Design Gallery」で目に付いたサイトにしてみました。

選んだ理由は、今までシンプルな配色のサイトをレビューすることが多かったので、今回はカラフルな配色のサイトをやってみようと思ったからです。

それと個人的にサンシャイン水族館の年間パスポートを持っていたことがあったので、ぜひこのページをレビューしたいと思って選びました。

⒊ターゲット

・水族館に行くか迷っている人

・水族館に興味がある人

・ギャラリーイベントの詳細を知りたい人

・さかなクンから興味を持ってきた人

⒋目的

・水族館に来たいと思ってもらう。

・このギャラリーイベントについて知ってもらう。

⒌構成と印象

全体的に海・水をイメージさせる青系の色が使われている。

アクセントカラーとして反対の補色である黄色を使用。

写真と可愛らしいイラストが多く、視覚的にわかりやすい印象。

泡をイメージさせる円がページ全体の下から上にアニメーションする仕様で、まるで海の中にいるかのようなサイト。

【メニューバー】

・固定でスクロールしてもついてくる。

・マウスをのせると、下線と泡をイメージさせる円が上に出てくる演出で、細部までこだわりが感じられる。

・SNSアイコンもサイトに合うように青色で、ここも円で囲われている。

・バックグラウンドには画用紙のような画像が埋め込まれており、絵を彷彿とさせるようなデザイン。

・それぞれの項目をクリックすると、その項目の説明箇所までスクロールしてくれる。

【メインビジュアル】

・背景の上にさかなクンの写真やイラスト、文字が重ねられて立体感が演出されている。

・写真の部分はマウスを動かすと、マウスと一緒に写真も動くようにすることで、さらに立体感が生まれている。

・魚たちのイラストが常に上下に揺れていて、泳いでいるかのように見える。

・イベントタイトル部分は、青と補色の黄色を背景に使うことによって目立たせている。

・タイトルの文字の中にも所々に円を入れることによって、泡を表現している。

・来場者特典の部分は、クリックできることがわかりやすいように、マウスをのせると大きくなるようにしてある。

【コンセプト】

・タイトル部分の文字を一文字ずつ上下にずらすことによって、躍動感がある。

・背景はメニューバー同様、画用紙のような質感の画像

・下にスライドしていくと、水槽の中のイラストが、ゴーグル型に切り抜かれた形になっていて、海の中を覗き込んでいるような印象を与える。

【みどころ】

・タイトルからスポットライトを当てているような背景で、タイトル下のコンテンツを強調している。

・タイトルの囲み、写真、コンテンツ背景を合わせて全て角を２つ落とすことで、一体感がある。

【フォトギャラリー】

・タイトルからスポットライトを当てているような背景を黄色にすることで、上のみどころコンテンツと差別化。

・写真をクリックするとインスタグラムに飛べるようになっている。

【開催概要・アクセス、チケット】

・表にしてわかりやすく。

【お知らせ】

・日付とお知らせで新しい順に上に積み上がっていく。

・コンテンツ最後のお知らせは、スポットライト背景が上から下に当たって、最後は魚のイラストが海の中にいる様子で締め括られている。

【ヘッダー】

・サンシャイン水族館のロゴとコピーライト。

・手書きのコピーライトでさかなクンらしさも表現されている。

⒍色

背景色：コンテンツ部分 #eef7ff （light blue）、表部分 #deefff （light blue）・#ffffff（white）

文字：#0056a8（blue） #333333 （black）

ベースカラー：背景画像のgray
メインカラー：blue（#0056a8）
アクセントカラー：yellow

さかなクンの帽子の色をベースに配色を決めたのかな？ギョギョッ🐠

⒎フォント

・FOT-筑紫A丸ゴシック （fot-tsukuardgothic-std）

丸みを帯びた書体で、親やすく穏やかな印象。

・游ゴシック

柔らかい印象のゴシック体で、読みやすくもデザインの印象は崩さないように。

⒏レスポンシブ

・メニューバーがメニューボタンになり、二本線で白い手書き風の円で囲われていて、泡と同化してデザインを崩さない。

・メインビジュアルは縦長のポスターのようになる。

・写真と文字が横並びになっていたコンテンツは縦並びに。

・表も横並びから縦並びに。

⒐学び

・海、水族館、イラスト、さかなクンといったイメージを、配色や図形、フォントなど様々なデザインで表現されていた。

・画像を何枚も重ねることによって立体感を演出できる。

・メニューバーにマウスをのせると上に円が出てくるところなど、細部まで水を想像させる演出がされている。

・フォントでも印象がだいぶ変わる。

⒑おわりに

今回は好きな水族館のサイトをレビューしたのでけっこう楽しかったです。

前回までのコーポレートサイトとは異なる種類のウェブサイトだったので、新たに発見できたことも多くありました。

そして今まではコンテンツがどんな風になっているかを記すだけでしたが、今回はなぜそうしたかを考えながらレビューするようにしました。

よろしければ「こうした方がいいよ！」などのアドバイスがありましたら、コメントいただけると幸いです。

最後まで読んでいただきありがとうございました。