CASE STUDY
CASE 01
新商品のプロダクトページ制作
- CLIENT
- オーデリック株式会社
- AGENCY
- 株式会社DNPコミュニケーションデザイン
- インタラクション設計
- Webデザイン
- コーディング(HTML/CSS/JavaScript)
EPISODE プロジェクトエピソード
大手照明器具メーカーの新製品の商品案内サイトを限られた期間で、先行して制作されたカタログや映像の世界観をもとにWebサイトならではのデジタルにしかできない表現としたいというご要望にてスタートしました。
プロジェクトでは、構成のイメージを預かり、それらをもとにデザインレイアウトを再構成し、触ると動くというインタラクションを設計しました。インタラクションは、レガシーブラウザも要件に含まれており、コーディングに要する事ができる時間が限られている中で、実現を担保する設計、仕様としました。また、同時並行で3サイトの制作が必要な為、工期を短縮すべく、制作したデザインデータの即時連携する手法として、円滑なコミュニケーションによるスムーズな合意形成を図る工夫をさせて頂きました。
ISSUES
クライアントの課題- DIRECTION
Webサイトとしての
最適な表現 - INTERACTION
デジタルにしか
できない動き - PROGRESS
新製品リリースまでの
限られた制作期間
FLOW 制作ワークフロー
01 デザイン
オリエンテーションの情報、預かった構成案をもとにベースデザインを制作。デザイン案をもとに、レガシーブラウザでも対応可能なアニメーションの設計をリサーチの上で実施。軽量なソースコードかつシンプルな動きの中で製品をアピールすべく、新旧製品の差異とシチュエーションの2つの観点によるデザイン・アニメーションを設計。
02 制作進行
リリースまで限られた制作時間の中でテレワーク下における制作の為、共有ツールを用いてデザインを制作。クライアントには、アニメーションの動きの意図の説明、詳細を調整する為、対面にてのお打合せを実施。共有ツールにてデザイン制作の時間を短縮する工夫により、アニメーションの調整、確認の時間を担保し、クライアントの納得いく品質を実現。
03 複数サイトの制作
メインのサイトと並行して二つの製品サイトの制作も担当。パラレルでの制作進行の為、綿密なプロジェクトのプランを策定。クライアントへの提示やその他、制作業務において遅延ない進行となりました。公開間近の対応においても、タイトスケジュールでありながら、直前の慌ただしさ無しに、要望を反映した納得の品質にての公開を実現。
RESULT 成果
レガシーブラウザの制約、ツールの活用によるコミュニケーションにより、様々なリクエストをクリア。ターゲットのリテラシーを考慮したUIや直感的なアニメーションは、クライントの納得のいく品質のWebサイトを提供する事ができました。エージェントとの協働により、既存のトーンアンドマナーとは異なり、欲されていた新しいWebサイトの表現を実現しました。
Webサイトにしかできない納得の表現を実現、
納期、品質の様々な要望を充足
TEAM
- PRODUCER：KENTAROH HORI
- ART DIRECTION：HIDEYUKI KUROSAKA
- DESIGNER：SAKI SAKAMOTO / YUMIKO HOSHI
- CODER：anon
CONTACT
サービスや、案件のご相談など、
お気軽にお問い合わせください。