CASE STUDY 01
自主制作
Shopify ECサイト
SHOPIFY

BLUE COLLAR

企画・デザイン・Shopify構築

https://blue-collar-vintage.myshopify.com/

BLUE COLLARのPC・スマートフォンモックアップ — DESKTOP / MOBILESHOPIFY

PROJECT DETAILSCASE STUDY 01 / BLUE COLLAR

BLUE COLLAR / CASE STUDY

43°03′N / 141°21′E

商品の質感から、設計を始める。

SURFACE

世界観をつくる商品体験

ブラックと生成りを基調に、デニムやレザーの質感が引き立つビジュアル設計にしました。

PATH

迷わない購入導線

新着・カテゴリ・商品一覧を整理し、興味を持った商品へ短い動線で到達できる構成です。

SYSTEM

運用を見据えたShopify構築

商品追加や在庫更新を継続しやすいShopifyの管理性を活かし、レスポンシブにも対応しました。

TYPE自主制作 / Individual project
ROLE企画・デザイン・Shopify構築
TEAM1 person / 全工程を担当
STACKShopify / Liquid / HTML / CSS / JavaScript / Responsive
DEVICEResponsive

VIEW LIVE SITE ↗

IMPLEMENTATION NOTE

実装・検証内容

ShopifyテーマをLiquid・HTML・CSS・JavaScriptで構築
商品一覧から商品詳細までの導線をレスポンシブで設計
商品・在庫更新を想定し、運用側で差し替えやすい構成に整理
PC・スマートフォンの主要幅でレイアウトと操作を確認

BLUE COLLARのPC版全体デザイン — 01DESKTOP1440px VIEW

BLUE COLLARのスマートフォン版全体デザイン — 02MOBILE390px VIEW