No. ＃001 カワスイ アクア＆アニマルスクール
URL https://school.kawa-sui.com/
制作会社 株式会社ユニオンネット（https://www.unionnet.jp/works/school-kawasui/）
第一印象
動きがあり、スクロールしたくなる。一瞬遊ぶ施設かな？という印象があったが、読み進めるうちに対象年齢が高校生以上となっているので、すこし落ち着いた感じもある。
画像の重なりと動きを出すことで、生き物が本当に動いているように錯覚する
水の透明感やブクブク感が表現されている
遊び過ぎず、硬すぎず良い塩梅。
とにかく見てて楽しい！
お魚や動物が動いたりするので、いろんな工夫が隠されているのかな？と何度も見てしまう。
ターゲット、目的
水族館が運営する専門学校。ターゲットは高校生～社会人。自分のライフスタイルにあった通学スタイルを選べる。
サイト分析
使用フォント
メイン…Helvetica Neue, Arial, sans-serif
日本語…Noto Sans JP, Hiragino Sans, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, 游ゴシック, YuGothic, 游ゴシック体, BIZ UDPGothic, Meiryo,
配色
❶ ベースカラー：白（#FFFFFF）
❷ メインカラー：エメラルドグリーン（#F7F7F7）
❸ アクセントカラー：なし
❹ フォントカラー：黒（#505050）、白（#FFFFFF）
サイト構成
トップページ構成
メインビジュアル
コンセプト
コースリスト
生き物紹介
インスタフィード（フルサイズ）
SNSボタン2つ並び（X,LINE)
写真ギャラリー
デザインポイント
- メインビジュアル
アニメーション使用
- ヘッダー、フッター
全体的に丸みをもたせて柔らかい印象。色遣いは水族館を連想させるブルー基調。わかめの方もターゲットなので、元気な色黄色、オレンジ、黄緑など、同系色になるような色が使われている
- ハンバーガーメニュー
- その他
実装ポイント
スクロールで動くアニメーション、背景の色が変わる
背景だけ動く
カーソルを合わすと色が変わるホバー
追従ボタン
見出しがフェードで消えていく、追加される