UX向上
操作誘導

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

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

情報伝達

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

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

UX向上
世界観の演出

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

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

情報伝達
操作誘導

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

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

世界観の演出
操作誘導

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

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

UX向上
情報伝達

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

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

世界観の演出
情報伝達

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

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

世界観の演出

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

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

世界観の演出

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

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

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

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

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