UX向上
操作誘導

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

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

情報伝達
操作誘導

ホバー対象へ視線を強く集中させるため、他の同じ要素ををブラー処理することにより強調されるよう実装。 ホバーされていない要素のブラー処理で、文字がギリギリ可読できるかつホバー対象が強調されるギリギリを調整。

下線の動きも付け加えることによりさらにフォーカス感が増すように実装。 動きの強弱も強くなりすぎず、さりげない程度に抑えることによって違和感を与えすぎないよう意識。

世界観の演出
操作誘導

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

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

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

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

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

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

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

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