MOTH — site main view

Year

2026

Role

Brand / Design / Build

Stack

Next.js · Shopify Hydrogen-ish

Status

Self project

— Overview

商品ページ読み物を、ひと続きに

ミリタリー古着は、背景の物語個体差がそのまま価格になるカテゴリ。 そのため EC の商品一覧と、ブランドが書いている読み物を、別ページとして切り離さず、 サイト全体を一つの編集媒体として扱う設計にしました。

一覧では "製造年・部隊・状態" を一目で読み取れるレイアウト、 詳細では商品写真と背景の文章が交互に立ち上がる流れ。商品が変われば文章も変わる、 手の入った百貨店カタログのような肌触りを目指しました。

色はオリーブとブラウンと深い藍。軍装の色そのものを背景色に置き、 UI 要素はあえて極力黒で統一して、写真の色味を邪魔しない構成にしています。

— Outcome

ヴィンテージの湿度を、UI で潰さない

EC の効率化を進めると、商品ページは均質化に向かいがち。MOTH ではむしろ "バラつき" を残す方向で、 グリッドのリズムや余白を商品ごとに少しずつ変え、写真の入りどころを揃えすぎないようにしました。

「服を買う前に、その服のことを知る」体験を、ブランドサイトと EC の境目を消すことで実装した一本。 自主プロジェクトとして、LoHeartStudio がブランディングを内側から書き起こす方法論の練習でもありました。

No.04 — Let's begin

Let's craft
something

Opening Price · ¥78,000〜