見事すぎてずっと見ていたいWEB サイトです。

FVに使用されている画像動画のコンテンツから、対象としているターゲットが見えてきます

カップル、水槽、スカイツリー、子供、くらげ、美術品、熱帯魚、ペンギン、母子、
姉妹、家族、カップルの飲食、カップル、くらげ、スタッフとカップル、家族、子供、子供、子供とスタッフ、ペンギンまでの動画のループになっています。

約20点の動画が混在していて、子供の関連する動画が7本、家族4、カップル4、館内の生物4がくらげが2回でアザラシペンギンなどの人気哺乳類はランダムでループに追加されています。
メインターゲットが家族という事で良いと思います。

家族の休日の過ごし方、カップルで訪れたいデートスポットとして私も認知していて、いってみたい水族館NO1です。
館内のしずけさ、環境のよさ、清潔感が伝わってきます。

サイトのカラー

白を基調に#003366の暗いグリーン寄りのブルーで、メニューの帯やボーダーに使われています。

似た色はみずほ銀行様などの、官公庁や信用が第一の会社などで良く使われていて。
このサイトでもその効果は発揮されていると思います。

ファーストビュー（以下FV)の高さは、100VHの窓いっぱいにせず、キービジュアルの下部に次のコンテンツメニューが見えるようにした上で、
下にコンテンツがある下矢印のfontawesomeのアイコンが大きめに表示されています

驚いたのが下のH1の書き方で画像をh1にしてそのALTのすみだ水族館としているところです。

あまりにも大きなサイトなので同じように実現できるのかわかりませんが、検索時の表記はすみだ水族館

長すぎるディスクリプションは表示されず省略されています

<h1><img src=”https://www.sumida-aquarium.com/img/top/logo_top.svg” width=”240” height=”300” alt=”すみだ水族館“></h1>

また、右上のハンバーガーメニューは世界共通であることを利用したテクニックなのでしょうが
クリックすると、、、

この大きな画面全体をカバーするメニュー群が表示されたうえで。
この右上の位置にLanguage 切り替えがあるのが素晴らしいです。

 

アクセスはgoogleMapはもちろん、わかりやすいイラストMAPまであります。

年間パスポートやチケットなどの販売ページも、文章が多い場所で効果的に赤い文字でWEBチケットのご購入といった具合にみやすい表示があります。

思った事

ホバー時のイメージのアクションは流行している、画像がちょっとアップする物にアイコンのバックグラウンドが白に変わるものですが、せっかくの素敵な画像がブラインドされてしまい、若干残念な気がしました。

公式ツイッターとフェイスブックのボタンですが、掲載ルールを曲げずにこのように目立つ表記をするのはとても参考になりました。

TOPのキービジュアルがmp4ファイルのスライダーなのですがheightを固定値881pxにしたdivでビデオタグを囲い object-fit: containではみ出さない、画像比率は維持

<video class=”v” src=”https://www.sumida-aquarium.com/img/top/video.mp4″ width=”100%” height=”100%” autoplay=”” loop=”” muted=”” playsinline=”” style=”width: 1566.22px; height: 881px; left: -282.611px; top: 0px;”></video>

このようにかなり緻密に書いてあり、こうしないとvideoのmp4がはみ出してしまう難しい処理をなんなくしているのが凄いなと思いましたし、参考にブックマークしました。

この凄いエンジニアさん達の技術をもってしても、MP4をVideoタグで扱った場合のRWDは完璧にならず

position:fixedならvideoファイルは横幅は維持したまま、メインの横幅からはみ出さないようにできるのですが、absoludeにして縦方向への移動をメインにコーディングした結果、横方向へのはみだしに対応できない状態になっていました。サイトTOPではfixed、縦方向の移動時にはabsolude　になるという記述を書けば、RWD対応かつ、縦方向への移動による動画のずれを消せるのになあと少し思いました。

実際に検証モードでfixedにしてみます

元々このエンジニアさん達は素晴らしいので、記述をかえただけで簡単に横幅が動画でもきちっと収まります、縦方向に移動すると付いてきてしまいますので、そこにはひと工夫必要です（私は動画ファイルの扱いで相当苦しんだので出来ます）

ポートフォリオのTOP最下部で同じことをRWDでしています

HOME

Webサイト100選