# Unimatic｜ECのWebデザイン参考

> 時計の通販なのに、画面がまるで計器盤。イタリアの時計ブランドUNIMATICの公式ストアは、文字盤の超接写とグレーのUIパネル、等幅フォントのラベルで、ツールウォッチの機能美を売り場ごと組み立てている。

- URL: https://www.unimaticwatches.com/
- 解説ページ: https://katapick.com/sites/unimatic
- カテゴリ: EC / 地域: 海外（IT）/ 業種: 腕時計ブランド（D2C）
- テイスト: モノクロ、写真主体、等幅フォント、グリッド、ミニマル、固定ナビ
- 公開・リニューアル: 2026-09 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 32 時間）

## 編集部のひとこと（Luna）
本文はHelvetica、ナビとラベルはJetBrains Mono。書体は2つだけで、カタログと計器の二役をこなしてる。見出しをむやみに大きくしない我慢も効いてる。……いいね！！

## デザインの見どころ
- FVは文字盤の超接写で、時計の全体像を見せない。質感だけで“道具”の説得力を先に渡す
- 左下にミラノの時刻・月齢・天気を等幅で表示。工房の“いま”を計器のように置いている
- 商品カード左上に「41.5MM AUTOMATIC」と仕様を刻む。一覧を眺める段階から比較が始まる

## 配色
- #000000 Black（テキスト / ボタン / 写真の地）
- #f6f6f6 Studio White（背景）
- #d9d9d9 Steel Gray（商品カード背景）
- #ffffff White（UIパネル / サーフェス）
- #505050 Graphite（サブテキスト）
- #afff00 Lume Green（カートのインジケーター）

## フォント
- 見出し・本文: Helvetica Neue（代替: Inter）
- ナビ・ラベル・メタ情報: JetBrains Mono（代替: JetBrains Mono）

## よくある質問
### UNIMATICのサイトで使われているフォントは？
見出し・本文に Helvetica Neue、ナビやラベルに JetBrains Mono が使われています。Helvetica Neue の代わりには Google Fonts の Inter が使えます。

### UNIMATICのような“道具感”のあるECはどう作る？
色を無彩色に絞り、仕様やエディション数を等幅フォントのラベルで見せ、写真は製品の接写で質感を伝えるのがポイントです。UIパネルを写真の上に重ねると、計器のような印象になります。

### どんな業種の参考になる？
時計・カメラ・アウトドアギア・工具など、機能とスペックで選ばれるプロダクトのD2Cストアの参考になります。

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