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

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

制作概要

商品詳細ページ新規作成

制作期間

1ヶ月半

人員構成

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

担当業務

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

デザインコンセプトなど

"インテリア"フィギュアというコンセプトであることと、ベッドルームに飾ることを想定した商品シリーズであったため、「室内」「夜」を連想させるデザインにしました。

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

ページ中央あたりには、

・ライトのイラストアイコンをクリックすることにより画像の切り替わり（明るい部屋/暗い部屋）

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

・各モーダルなどに隠されたキーワードを集めて入力することにより出現するモーダル

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

このギミックは、「蓄光し、暗いお部屋の中でぽわっと発光すること」をより伝えたいというプロモーションの意図を汲み取ったものです。

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

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