情報伝達

増加していく過程を見せることで数字の大きさや価値を直感的に伝えることを意図。 単なる数値ではなく、企業の成長や積み重ねてきた実績を印象付ける演出として実装。

一定速度で増加させるのではなく、終盤にかけて徐々に減速することで、実際に数字が到達したような余韻を演出。

情報伝達
操作誘導

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

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

UX向上
情報伝達

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

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

世界観の演出
情報伝達

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

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

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

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

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

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

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

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