電気暖房器ブランド「Dimplex」製品サイト

Credit

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

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を使用してスクロールアニメーションを実装しました。