UX向上
情報伝達

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

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

世界観の演出
情報伝達

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

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

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

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

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