UX向上
世界観の演出

建築系コーポレートサイトなので、何か建築に紐つくアニメーションを思考。 一枚の引き戸ではなくた多枚数引き戸風にすることにより、ダイナミックかつ目を引くような実装。

途中でホバーをキャンセルすると戸も途中で止まり収納されるような実装。

世界観の演出
操作誘導

建築系コーポレートサイトなので、何か建築に紐つくアニメーションを思考。 文字はあえて扉には追従しないことにより、視認性をわずかながら上げられるよう考慮。

アローアイコンをドアノブに見立て、扉（背景色）が奥に開くように実装。 ボーダーを二重でかけることによって、ドア枠を表現し、よりリアルな扉感を演出。

世界観の演出
情報伝達

動画風にすることによって、画像一枚では伝わりきらない情報をイメージできるように実装しました。

JavaScriptとcssによる画像の切り替えと移動による実装。それぞれが長くならないよう切り替わるタイミングを調整しつつ、変化が伝わりやすくなるように意識して実装しました。

世界観の演出

サイトを訪れた人が一番最初に見るところなので、自然な流れとインパクトを重視しました。

カウントアップをあえて100%までせずに99%で止めて、そのままメインコピーに繋がるように実装。またそれぞれの消失と出現のタイミングを全体のローディングアニメーションの時間から考慮して長くなりすぎないように調整。

世界観の演出

それ自体に機能はない装飾にもこだわりを持ち、音楽というコンセプトに沿った音声波形を作成しました。

規則的でありながら、完全に同じではない波形の動きは、
見ていて飽きない心地よい「リズム」を生み出しています。

世界観の演出
情報伝達
操作誘導

同一セクションの中でそれぞれのコンテンツを読む時に、真ん中の一個にフォーカスを当てることによって、ユーザーが今どこを読んでいるのかを迷わせないようにしています。

フォーカスを当ててスケールをあげるだけではなく、レコードを回して演奏されているような状況を演出しました。

UX向上
世界観の演出
情報伝達
操作誘導

コンセプトが音楽のサイトなので、文字をただ読ませるのではなくApple Music風に文字を出現させることにより音楽を聞いているような体験をしてもらうために実装しました。

一文字ずつ色を付けるだけでなく、色を付けた文字を1px上昇させることによって歌詞を読んでいるという体験をよりリアルにできるようにしました。