Dimplex Product Site

Credit

Client
Ad Agency
Type of Business
生活家電・暖房器・雑貨及び食品などの輸入および販売事業
Role
  • Motion Design
  • Web Design
  • Web Development
Visit
Site

Overview

オイルフリーヒーターや電気暖炉のメーカー「Dimplex」の製品サイト

オイルフリーヒーターや電気暖炉などのメーカーである「Dimplex」の製品サイトを制作しました。各製品の特徴や製品一覧、選び方ガイド、よくある質問、取り扱い店舗の掲載など、多くの情報を製品種別ごとに構造化して導線を整理。オイルフリーヒーターについては、製品の特徴が視覚的にも伝わるよう、映像やスクロールアニメーションを使用しています。
























































































































































































































■White#FFFFFF255/255/255
■Red#A91B27169/27/39
■Gray#F5F5F5245/245/245
■Black#26262638/38/38











































Client





Ad Agency





Team





Creative Direction





Fumito Abe





Web Direction





Hitomi Natsui





Design





Fuyuna Taguchi / Seina Kon / Koyuki Nakagawa / 
Hitomi Natsui / Fumito Abe





Motion Design





Fuyuna Taguchi





Interaction Design





Yoshinobu Suto / Fumito Abe





Illustration





Seina Kon





Development





Yoshinobu Suto / Mizuki Watanabe / Fumito Abe





Contact





お仕事のご依頼は、お問い合わせからご連絡ください。


Share







Web Design





クリーンで暖かい温度感のあるデザイン





暮らしに寄り添う製品をつくり続けるDimplexのサイト。心地よさ、暖かさ、クリーン、上質さをデザインのコンセプトとして設定しました。
製品の特徴である「インテリアとしても楽しめるデザイン性の高さ」を伝えられるよう、余白や書体などに配慮して制作しました。









Motion Design





製品の特徴をイメージしやすい動画を作り、コンテンツと合わせて活用





オイルフリーヒーターについてのページでは、イメージ動画を作ってスクロールアニメーションと一緒に表示することで、製品の特徴をより伝わりやすくしています。空気の動きや室内の温度が徐々に変化するイメージを表現できるよう意識し動画を制作しました。









Web Development





Nuxt.jsと既存のブログであったMovable Typeを組み合わせてフロントエンドを再構築





フロントエンドの実装には、JSフレームワークであるVue.jsのプログレッシブフレームワークのNuxt.jsを使いました。おしらせにはMovable Typeが使われていたため、そのままフロントエンドで組み合わせて再構築。オイルフリーヒーターについてのページでは、GSAPを使用してスクロールアニメーションを実装しました。










Next
Project
All Projects