プロダクトイメージを重視しJS演出を駆使したサイト制作事例

お悩み

プロダクトイメージを強く訴求できるサイトを作りたい。

デザインカンプはIllustratorで持ち込みだが、Web上でそのまま再現するには難しい部分が多かった。

JSによる動きを多用しつつ、全体のバランスを保ちながら仕上げたい。

解決したこと

Illustrator持ち込みカンプをベースに、Webに適した形へアレンジしながら再現。 CSSとJSで細部まで調整し、動きのあるUIを実装。

アニメーションはこちらで設計し、全体のバランスを壊さずに演出を加えることで、プロダクトの世界観を強調。

IllustratorカンプをWeb向けにアレンジ

持ち込みカンプはそのままではWeb再現が難しい部分もありましたが、イメージを損なわないように調整。 文字サイズや余白などを最適化し、Web上で見やすく操作しやすい形に仕上げました。

JSによる動きの実装

プロダクトイメージを強調するため、スクロールやホバーに応じたアニメーションを多数実装。 動きのタイミングや速度を細かく調整し、訪問者が直感的にブランドの世界観を感じられるよう設計しました。

アニメーション設計へのこだわり

アニメーションは依頼を受けてこちらで設計。 全体のバランスを壊さないように配慮しつつ、動きによって製品の魅力を引き立てる演出を加えました。 静的なデザインに動きを加えることで、ブランドのこだわりを体験として伝えるサイトに仕上げました。