Making superior cutting tools since 1926

美を創りだす道具は、それ自身も美しく、
愛情が湧く本物でなければならない。

Colors
01 / 有彩色を1色も持たない
Base — 黒地が既定、白地は部分的な反転
Background
#000000
body に明示指定されたページ地色
Text on Dark
#ffffff
黒地の上のすべての文字
Surface Light
#f2f2f2
白地セクション・ドロップダウン
Chip Dark
#222222
カテゴリ札の面色
Neutral
Divider
#cccccc
白地セクションの区切り罫
Text Muted
#888888
言語切替「JP / EN / 中文」
Text Caption
#999999
商品カードの補足
Text Hover
#333333
白地ナビのホバー時
Scrim — 奥行きは影ではなく黒の濃度でつくる
Herorgba(0,0,0,0.2)
Nav Cardrgba(0,0,0,0.4)
Page Headerrgba(0,0,0,0.5)
Footerrgba(0,0,0,0.7)

Typography
02 / 欧文セリフ・和文明朝・UIゴシックの3系統
English — Libre Baskerville(weight 300 で使う)
Craftsmanship
Libre Baskerville / 36px / 300 / line-height: 1.0 / letter-spacing: 0.1em下層ページの見出し帯。行を詰めて字間を空ける
Nail Nippers
Libre Baskerville / 36px / 300 / line-height: 1.5 / letter-spacing: 0セクション見出し
Making superior cutting tools since 1926
Libre Baskerville / 28px / 300 / line-height: 1.5ヒーローのコピー
Models
Libre Baskerville / 21px / 300 / line-height: 1.5小見出し
Japanese — Noto Serif JP(読ませる文はすべて明朝)
美を創りだす道具は、それ自身も美しく、愛情が湧く本物でなければならない。
Noto Serif JP / 16px / 600 / line-height: 1.8 / letter-spacing: 0.1emヒーローの和文コピー
クラフトマンシップ
Noto Serif JP / 16px / 600 / line-height: 1.4 / letter-spacing: 0.044emページラベル
当社は1926年に、ニッパーの前身とも言える釘の頭を切るための工具づくりから始まりました。以来、刃物の町・三条で刃と向き合い続けています。
Noto Serif JP / 15.4px(= 14 × 1.1)/ 400 / line-height: 2.0 / letter-spacing: 0.045emリード本文
SUWADAのつめ切りは、材料選びから仕上げまで、一貫して自社で行っています。職人の手仕上げによって、刃と刃が隙間なく閉じる精度を出します。
Noto Serif JP / 14px / 400 / line-height: 2.0 / letter-spacing: 0.05em商品説明・工程説明
UI — Source Sans Pro + 游ゴシック / ヒラギノ(欧文優先チェーン)
つめ切り — Product Name
Source Sans Pro 系 / 22px / 600 / line-height: 1.5商品名だけゴシック
SUWADAについて — Navigation
Source Sans Pro 系 / 14px / 400 / line-height: 2.0グローバルナビ
〒959-1114 新潟県三条市高安寺1332番地 — Footer Body
Source Sans Pro 系 / 14px / 400 / line-height: 1.5 / letter-spacing: 0.05emフッター
JP / EN / 中文 — Nav Sub
Source Sans Pro 系 / 12px / 400 / line-height: 2.0 / color: #888888言語切替

— Manufacturing Process —
03 / 写真の下部だけをグラデーションで潰す
1.

つめ切りの原材料は、カスタムナイフにも使われる高級刃物鋼を用います。

7.

ダイヤモンドヤスリを駆使し、左右の刃が隙間なく閉じるよう調整します。

8.

緩くカーブした刃先の形状に合わせ、薄く鋭い刃をつけて行きます。

Products
04 / 下層の本文エリアだけが白地に反転する

美しく仕上げられた刃は、道具としての精度と、手に取ったときの佇まいを両立します。SUWADAのつめ切りは、そのどちらも譲りません。

つめ切り
つめ切り クラシックL

刃と刃が隙間なく閉じる精度。切るのではなく、断つ感触。

ネイルニッパー
キューティクルニッパー

甘皮処理のための細身の刃先。プロの現場で使われる仕様。

盆栽
盆栽鋏

枝を潰さずに断つ。手入れの跡が木に残らない切れ味。

ご購入はこちら 商品カテゴリ一覧へ

Buttons
05 / 角丸は px ではなく 2em。文字サイズに追従する
Outline Pill — 主要CTA。塗らずに枠線1本
SUWADAについて YouTube お問い合わせ

実測: border-radius 30.8px ÷ font-size 15.4px = 2em。24px ÷ 12px、33.88px ÷ 16.94px も同じ比。
左右の padding は 60px と極端に広く取る。

Category Chip — 札だけは角丸ゼロ
つめ切り クラフトマンシップ 工場見学

Layout
06 / Bootstrap 3 系の 15px グリッド
Container1170px / 左右パディング 15px
Spacing Scale10 / 15 / 30 / 60 / 90 / 120px(15px の倍数)
Product Grid3カラム / gutter 30px
Hero100vh の全画面スライドショー。文字は左寄せ・垂直中央
Elevation影は使わない。奥行きはスクリムの濃度(0.2 / 0.4 / 0.5 / 0.7)で表現する
Type Scalefont-size は 1.1em の入れ子(14 → 15.4 → 16.94px)

Forms
07 / 入力欄は角丸ゼロ・罫線1本

通常状態。罫線は #cccccc

フォーカス時は本文色(#000000)まで濃くする

有彩色を持たないため、エラーは破線で示す