UX向上
操作誘導

強調したいコンテンツ部分なので少しアクセントのあるフェードインになるようを実装。 スクロールによるユーザーの視線移動に合わせて要素を段階的に表示することで、コンテンツへの自然な視線誘導を目的とした実装。

要素ごとに表示タイミングや移動量を細かく調整し、自然な動きなになるように意識。 フェードインだけではなく、要素間の余白も同時に操作することにより、他の部分のフェードインとは違うアクセントになるよう実装。

UX向上
世界観の演出

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

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

UX向上
情報伝達

各セクションが白黒を行き来するため、色を固定せずどのセクションにいてもヘッダーとページトップボタンが視認しやすいようにすため実装しました。

機械的にパッと色が変わるのではなく、背景とヘッダー・ページトップボタンがじんわりと溶け込むように変化させることで、生き物が呼吸をするような自然な変化をもたらせるように実装しました。

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

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

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