【WEB制作】雑貨メーカー | 商品ページ

URL : https://smiski.com/p2019/yoga/

制作概要

商品詳細ページ新規作成

制作期間

1ヶ月

人員構成

デザイナー・コーダー1名（本人）

担当業務

プロモーション担当からの企画概要を元に、ワイヤーフレーム作成、デザイン作成、レスポンシブコーディングを担当。2言語分のページを作成（日本語・英語）

デザインコンセプトなど

"インテリア"フィギュア、ヨガというコンセプトをもとに、「室内」「太陽」「あたたかいイメージ」を連想させるデザインにしました。

また商品自体のコンセプトに沿うよう、シンプルなテイストにまとめました。

ページ中央あたりには、

・画像内に散りばめられた商品単体をクリックすることにより、商品の詳細案内モーダルの表示（蓄光する商品のため、クリックで明るい状態/暗い状態の画像切り替え）

・上記箇所をクリックすることによりゲージがたまり、フルになると特典画像がDLできる

等のギミックを実装しました。

このギミックは、「蓄光し、暗いお部屋の中でぽわっと発光すること」をより伝えたい、軽いゲーム性で楽しんで商品のコンセプトや詳細を知ってほしいというプロモーションの意図を汲み取ったものです。

使用技術やツール、サービスなど

• HTML
• Sass
• jQuery
• Sketch（デザイン作成）
• Photoshop（画像編集）
• Git
• gulp