# MAISON TAKUYA ONLINE STORE｜ECのWebデザイン参考

> モノクロ写真に、朱色の文字だけが灯ってる。レザーブランドMAISON TAKUYAの公式オンラインストアは、グレー地にモノクロのルック写真を大きく置き、ロゴとコピーだけを朱色にして、売り場を誌面のように静かに見せる。

- URL: https://maisontakuya.jp/
- 解説ページ: https://katapick.com/sites/maison-takuya
- カテゴリ: EC / 地域: 国内（JP）/ 業種: レザーブランド・鞄と財布
- テイスト: モノクロ、写真主体、ミニマル、セリフ体、余白、カルーセル
- 公開・リニューアル: 2026-09 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 2/5（目安 18 時間）

## 編集部のひとこと（Leo）
PCのFV、2枚の写真がゆっくり溶け合ってる途中みたいに見えるの！モデルの残像が透けてて、映画のディゾルブそのもの！静かなのに、ずっと見ていられるやつ！

## デザインの見どころ
- FVにはヘッダーもナビも出さず、写真とMTのモノグラムだけ。買い物の前に、まずブランドの佇まいを見せる
- 商品写真はすべて同じグレーの背景で撮る。一覧に並べても、ルック写真とのトーンが途切れない
- コピーはセリフの Sentient、UIはグロテスクの Switzer。書体の切り替えで、語る場所と買う場所を分けている

## 配色
- #dedede Fog Gray（背景）
- #cdcdcd Shelf Gray（商品カードの背景）
- #c2c2c2 Studio Gray（ルック写真の背景）
- #565656 Graphite（写真の中間調）
- #2e2e2e Leather Black（テキスト / 商品の色）
- #da4803 Vermilion（ロゴ・モノグラム・FVのコピー）

## フォント
- ナビ・商品名・価格・本文: Switzer（代替: Inter）
- コピー・セクション見出し: Sentient（代替: Newsreader）

## よくある質問
### MAISON TAKUYAのサイトで使われているフォントは？
UIと本文に Switzer、コピーや見出しにセリフ体の Sentient が使われています。どちらも Fontshare で配布されている書体です。Google Fonts で代替するなら Inter と Newsreader の組み合わせが近い雰囲気になります。

### MAISON TAKUYAのオンラインストアは何で作られている？
Shopify で構築されています。ルック写真とジャーナルを商品一覧の間に挟み、ブランドサイトとECを1つのトップページにまとめています。

### どんな業種の参考になる？
レザーグッズ、アパレル、ジュエリーなど、高価格帯の商品を扱うブランドのオンラインストアで、ブランドの世界観を崩さずに購入導線を置きたい場合の参考になります。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/maison-takuya からダウンロードできます。
出典: Katapick（https://katapick.com）