WATCHLAND GALLERY
フランクミュラーの正規認定中古時計を販売するECサイト
高級腕時計を販売するECサイト「WATCHLAND GALLERY」の構築プロジェクトです。販売促進とブランドイメージ向上を目的としたサイトリニューアルにおいて、主にアートディレクションとデザインを担当しました。
目的
- Webサイトでの販売促進
- 商品の問い合わせ数増加
- ブランドイメージの向上
施策概要
- ECサイトへのリニューアル
依頼主
ワールド通商株式会社
公開
2016年8月
プロジェクト期間
約6ヶ月（2016年2月〜2016年8月／デザイン工程は約2ヶ月）
対応デバイス
PC, スマートフォン
プロデュース
コロニーインタラクティブ（同社在籍時のプロジェクト）
Role
役割・主に担当したこと
- 情報収集・リサーチ
- Web戦略立案
- 情報設計
- アートディレクション
- デザイン
Challenge
挑戦したこと
- ECサイトとしての「商品検索のしやすさ」と、商品イメージに沿った「高級感の演出」の両立を目指してデザインしました。
- あらかじめECシステムが定まっていたため、システム仕様に合わせて各画面のデザインを進めました。
- コーディングやECシステムの実装は、別会社のエンジニアに依頼することになっていました。そのためエンジニアが実装を進めやすいように、デザインデータに余白の数値などを記載した「コーディング指示書」を作成して、デザインの再現度が高まるように工夫しました。
高級感を伝えるデザイン
WATCHLAND GALLERYで販売されている商品は主に高級な腕時計であるため、商品をじっくりと吟味しながら見比べられるサイトデザインが適していると考えました。
よって黒色を基調として余白を大きくとった、落ち着きのあるデザインに仕上げました。
機能性を高めるために、検索のしやすさや商品詳細情報の見やすさを意識して設計しました。以下は設計の際に特に意識したことです。
設計時に意識したこと
- 商品一覧ページで商品写真を大きく表示する（商品のデザインは優先する訴求ポイントだと考えたため）。
- 商品名や価格、在庫状態などを視認しやすくする。
- 検索条件を組み合わせる場合でも、目的の商品を探しやすくする。
画面領域が狭いスマートフォン用のデザインでは、特に商品検索のUI（ユーザーインターフェイス）を使いやすくするための設計と検証を重ねました。
実装時のデザイン再現度を高める取り組み
本案件ではコーディングおよびECシステムの実装は、別会社のエンジニアに担当していただくことになっていました。
コーディングの際にデザインデータの再現度を高めていただくため、要素間の余白の大きさやフォント指定などを記載した「コーディング指示書」を作成して、エンジニアに共有しました。
以下はデザイン指示書の一例です。
自分がコーディングをする状況を想像しながら、なるべくわかりやすい資料となるように意識して作成しました。
Work
SHIBUYA GAME
eスポーツに特化したメディアサイト・ロゴデザイン
- Logo
- Website
BE@RBRICK SERIES 29
レコード音楽の世界観でベアブリックの魅力を伝えるプロモーションサイト
- Graphic
- Website
BE@RBRICK SERIES 26
アメリカンコミックの世界観でベアブリックの魅力を伝えるプロモーションサイト
- Graphic
- Website
マナビタ！
介護事業者に向けた職員育成のための動画研修サービスサイト
- App
- Website
Quadruple Standard
実験的なロゴデザイン
- Graphic
- Logo
NOTTV
スマートフォン向け放送局のサービスサイト運用・ページ制作
- Graphic
- Website
Square Typography
正方形枠のタイポグラフィ作品
- Graphic
- Logo
Graphic Experiments
実験的グラフィック
- Graphic
BitCash Promotion
ビットキャッシュの新規ユーザー向けプロモーションページ
- Graphic
- Website
WATCHLAND GALLERY
フランクミュラーの正規認定中古時計を販売するECサイト
- Website
Sync.
アーティストのコラボレーション商品を販売するブランドサイト
- Website
About Work
Public
11
Limited
4
Total
15
一般公開可能な実績のみを掲載しています。非公開実績をご覧になりたい場合は、お手数ですがお問い合わせください。