E-commerceOverseas / ITPicked 2026.09.26

Unimatic

ECのWebデザイン参考 — 腕時計ブランド（D2C）

出典: unimaticwatches.com

Editor's note — 編集部の視点

時計の通販なのに、画面がまるで計器盤。

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

LunaType & Whitespace

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

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

Color

Unimaticの配色

Typography

使用フォントと無料の代替

見出し・本文

Aa あア

使用: Helvetica Neue
代替: Inter

ナビ・ラベル・メタ情報

Aa あア

使用: JetBrains Mono
代替: JetBrains Mono

実測タイプスケール1440px幅 · 2026-09-26 計測

特大見出しKatapick 型24px · 1.22 · 700
見出しKatapick 型16px · 1.22 · 700
小見出しKatapick 型20px · 1.2 · 700
本文The quick brown fox — 参考を型にする12px · 1.22 · 400
ボタンKatapick 型12px · 1.32 · 400
注釈The quick brown fox — 参考を型にする10px · — · 400

Structure

ページ構成（上から順）

01
ヘッダー
左にロゴ、中央左にグレーの角丸パネルに入った等幅のナビ（NEW IN / WATCHES / ACCESSORIES…）、右に SEARCH / ACCOUNT / WISHLIST / CART（緑のドット）。
02
ヒーロー
文字盤の接写を全面に敷き、左下に英文のステートメントとミラノの時刻・天気、右にニュースレター登録と「CAPSULE」のパネルを重ねる。
03
New arrivals
グレーのカードに商品写真と仕様ラベルを載せ、モデル名・価格・エディション数を添えて横に並べる。
04
コレクション
Classic / Toolwatches / Collaborations / Limited Edition を2×2の大判写真タイルで見せる。
05
モデル詳細
左にモデル名のリスト、中央に商品写真、右に CASE / DIAL / DURABILITY などの仕様を並べる。
06
品質の約束
Waterproof checked / Accuracy regulated & tested / Quality checked and certified の3枚の写真カード。
07
クローズアップ・フッター
文字盤の接写を挟み、Watches / Brand / Service / Social の4カラムと、時刻・天気・決済アイコンを並べたフッターで締める。

Interaction

アニメーション・インタラクション

ヘッダーとニュースレターのパネルは固定表示で、写真の上に半透明のグレーパネルとして重なる（backdrop-filter: blur で再現可能）
ミラノの時刻表示はキャプチャごとに秒が進んでおり、JavaScript で更新するライブクロック（Date + setInterval で再現可能）
ボタンは左端の丸（塗り / 白抜き）で種類を示す。プライマリは黒地、セカンダリは白地
モデル詳細は左のモデル名リストの選択に合わせて、中央の写真と右の仕様を切り替える構成と思われる（Shopify のバリエーション切替で実装可能）

スクロールのコマ撮り220–1000ms

検出された技術:ShopifyGoogle Fonts

Reproduce

再現するときのポイント

01色は白・グレー・黒の無彩色に限り、差し色はカートの蛍光グリーン #afff00 の点1つだけにする
02英文は Helvetica Neue（代替 Inter）、ナビ・ラベル・時刻などのメタ情報は JetBrains Mono に分ける
03UIは小さな角丸のグレーパネルにまとめ、写真の上に“取り付けた計器”のように重ねる
04商品カードは径・ムーブメントを左上のラベル、エディション数を下段に置き、スペックで比較できるようにする

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全7セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

unimatic.katapick.md

1---
2title: "Unimatic 再現用デザイン仕様書"
3source: https://www.unimaticwatches.com/
4katapick: https://katapick.com/sites/unimatic
5category: EC
6region: 海外 (IT)
7tags: [モノクロ, 写真主体, 等幅フォント, グリッド, ミニマル, 固定ナビ]
8launched: 2026-09
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 32
13generator: Katapick
14---
15 
16# Unimatic — 再現用デザイン仕様書
17 
18> 時計の通販なのに、画面がまるで計器盤。イタリアの時計ブランドUNIMATICの公式ストアは、文字盤の超接写とグレーのUIパネル、等幅フォントのラベルで、ツールウォッチの機能美を売り場ごと組み立てている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22