Re:sound ミュージックスクール（自主制作）

きたしょーさんの練習用デザインカンプをベースに、「音楽を仕事にするまで伴走するスクール」というコンセプトで作り直した架空のサイトです。カンプのレイアウトをそのまま写すのではなく、ファーストビュー・コンセプト・選ばれる理由・ご利用の流れは、伝えたいことに合わせて構成と文言から組み直しました。

Point 01　色を変えても画像を作り直さないブランドカラー設計

ブランドカラーを4つのトークンで管理し、ロゴや装飾は CSS の mask で塗る構成にしました。配色を変えても画像を作り直す必要がありません。

Point 02　対応ブラウザを問わず動く、二段構えのアニメーション

動きは CSS のスクロール駆動アニメーション（animation-timeline）を第一候補にして、対応していないブラウザだけ JavaScript の監視に降ろす二段構えにしました。prefers-reduced-motion が有効な環境では、すべての動きが止まります。

Point 03　View Transitions でページ遷移をつなぐ

一覧から詳細へ移るときは View Transitions で画像をつなぎ、ヘッダー・フッターはちらつかせない指定にしました。ページが切り替わったことが視覚的に伝わります。

Point 04　内容が主役になる写真選び

写真は「顔が大きく写らない」構図で統一し、モデルの見た目に引っ張られずに内容が伝わるようにしました。

※ スクールおよび掲載している数値・お客様の声はすべて架空です。デザインはきたしょーさんの練習用デザインカンプをベースにアレンジしています。写真は Pexels / Unsplash。