MAISON TAKUYA ONLINE STORE

1. 01

   ヒーロー

   グレーの背景でバッグを持つモデルのモノクロ写真を全幅で置き、右上に朱色の「MT」モノグラム。下の帯に朱色のセリフ体「Crafted to Transcend Time」と英文のブランドステートメントを置く。

2. 02

   ヘッダー

   スクロール後に現れる固定ヘッダー。左に Brand・Products・Journal・Store、中央に朱色の「MAISON TAKUYA」、右に検索・Login・Cart。

3. 03

   ピックアップ

   トートを持つモデルの写真と、台座に置いたショルダーバッグの写真を2枚並べ、商品名と素材を小さく添える。

4. 04

   New arrivals

   同じグレーの背景で撮った商品写真を4列で並べ、商品名・素材・価格、右端に矢印を置く。

5. 05

   ジャーナル

   「Carry with Presence. Carry with Ease.」のルック写真を横に並べたスライダーと短い英文。

6. 06

   Recommended items

   財布やカードケースを New arrivals と同じ4列のカードで並べる。

7. 07

   About

   革を加工する手元の写真とバッグのディテール写真を並べ、和文の短いブランドメッセージと「About MAISON TAKUYA」へのリンクを置く。

8. 08

   フッター

   Products のカテゴリ、ニュースレター登録、ショッピングガイドやSNS、規約へのリンクを小さな文字で並べる。

• PCのFVキャプチャでは2枚のルック写真が半透明に重なっており、写真がゆっくりクロスフェードするスライドショーと思われる。opacity のトランジションで重ねると再現可能
• ヘッダーはFVでは表示されず、スクロール後に固定で現れる。スクロール量を監視して transform: translateY で出し入れする
• New arrivals と Recommended items は右端に矢印のある横スライダー。scroll-snap か Swiper で再現可能
• stack に Lenis があり、写真の多いページを慣性スクロールで滑らかに見せていると思われる

スクロールのコマ撮りLenis · 400–1000ms

検出された技術:LenisShopifyGoogle Fonts

• 01背景・商品写真・ルック写真をすべて近いグレーに揃え、黒い革だけが浮かぶようにする
• 02差し色は朱色1色に絞り、ロゴ・モノグラム・FVのコピーだけに使う
• 03見出しとコピーはセリフ体、ナビ・商品名・価格はグロテスク体と役割で書体を分ける
• 04FVではヘッダーを隠し、写真とモノグラムだけで始める

1---
2title: "MAISON TAKUYA ONLINE STORE 再現用デザイン仕様書"
3source: https://maisontakuya.jp/
4katapick: https://katapick.com/sites/maison-takuya
5category: EC
6region: 国内 (JP)
7tags: [モノクロ, 写真主体, ミニマル, セリフ体, 余白, カルーセル]
8launched: 2026-09
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 2/5
12estimated_hours: 18
13generator: Katapick
14---
15 
16# MAISON TAKUYA ONLINE STORE — 再現用デザイン仕様書
17 
18> モノクロ写真に、朱色の文字だけが灯ってる。レザーブランドMAISON TAKUYAの公式オンラインストアは、グレー地にモノクロのルック写真を大きく置き、ロゴとコピーだけを朱色にして、売り場を誌面のように静かに見せる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22