UX向上
情報伝達

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

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

世界観の演出
情報伝達

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

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

世界観の演出

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

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

世界観の演出

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

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

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

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

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

UX向上
世界観の演出

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

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