ESTABLISHED 1958
KANEKO OPTICAL
ESTABLISHED 1958
VIEW MORE
SCROLL
01 — COLORS

COLORS

彩度を持つ色は本文リンクのティール #1890ad だけ。ほかはすべて黒・濃灰・グレーの無彩色で、色は製品写真(べっ甲・金無垢・セルロイド)が担当する。地色はセクションごとに黒からペールグレーへ降りていく。

Ink Black
#000000
トップの地色・ヘッダー・フッター
Off Black
#151515
STORY など下層ページの地色
Charcoal
#1f2529
PHILOSOPHY ブロック
Deep Slate
#242b2f
NEWS ブロック
Slate
#545e64
ブランドカード(最頻出の面色)
Gray Slate
#74787a
BRAND セクション
Mid Gray
#8a8a8a
関連記事ブロック
Pale Blue Gray
#d7dcde
CULTURE 記事ページの地色
Surface Gray
#f0f0f0
記事タグの面
Muted
#c2c7cb
SCROLL・補助テキスト
Link Teal
#1890ad
本文リンク。サイト唯一の有彩色
Gray 500
#525252
SHOP バッジの面
02 — TYPOGRAPHY

TYPOGRAPHY

ナビと大見出しはセリフ/明朝、本文と記事はサンセリフ/ゴシック。書体の系統そのものが役割の境界になる。letter-spacing は本文 0.06em → ナビ 0.09em → ボタン 0.1em → 大見出し 0.18em と段階的に開き、palt は使わない。

STORY
Page Title · Adobe Garamond Pro · 30px · weight 400 · lh normal · ls 0.18em (5.4px)
PHILOSOPHY
Section Head · Adobe Garamond Pro · 18px · weight 600 · ls 0.09em (1.62px)
FEATURE STORY FACTORY BRAND 金子眼鏡
Nav Item · Adobe Garamond Pro + 筑紫Aオールド明朝 · 14px · weight 600 · ls 0.09em (1.26px)
金子眼鏡と 仕事と 人と
Article Title · Lato + 中ゴシックBBB · 24px · weight 700 · lh 1.8 (43.2px) · ls 0.06em
軽いノリで始めた眼鏡店の仕事
Article Sub · Lato + 中ゴシックBBB · 18px · weight 700 · lh 1.8 (32.4px) · ls 0.06em
本文 — 私たちは、アイウェアを通して、掛ける人の暮らしに寄り添いたいと考えています。鯖江の工房で、職人がひとつずつ手をかけてつくる眼鏡です。
Body · Lato + 中ゴシックBBB · 14px · weight 400 · lh 2.0 (28px) · ls 0.06em (0.84px)
UI テキスト — 当センターのウェブサイトは、ユーザーの皆様の利便性向上を目的に Cookie を使用しております。
Body (UI) · 14px · weight 400 · lh 1.5 (21px) · ls 0.06em
SCROLL
Micro · 12px · weight 400 · ls 0.1em (1.2px) · #c2c7cb
© KANEKO OPTICAL CO., LTD. ALL RIGHTS RESERVED.
Copyright · Adobe Garamond Pro · 10px · weight 600 · ls 0.09em (0.9px) — 小さい文字でも字間を緩めない
03 — ARTICLE

CULTURE

読み物だけが明るい面(#d7dcde)に置かれる。本文はゴシック 14px・行間 2.0・字間 0.06em。タグは #f0f0f0 の面に角丸 4px で、名前の先頭に # を付ける。

金子眼鏡と 仕事と 人と

軽いノリで始めた眼鏡店の仕事

眼鏡の仕事に就いたきっかけは、そう大きな理由ではありませんでした。学生の頃から人と話すのが好きで、接客の仕事なら続けられるだろうと思っていた程度です。

けれど働きはじめて驚いたのは、眼鏡が「顔の一部になる道具」だということでした。フレームを 1mm 変えるだけで、その人の印象がまるごと変わる。鯖江の工房で職人がどこまで手をかけているのかを知ってから、売り場での言葉が変わったように思います。

使い込んで、育てる

セルロイドは磨けば艶が戻り、金無垢は使うほどに角が丸くなります。買って終わりではなく、直しながら長く使う。それを前提につくられているのが、この会社の眼鏡です。

04 — BUTTONS & BADGES

BUTTONS

塗りつぶしの主要 CTA が存在しない。1px の細い罫線と広い字間(0.1em)だけでボタンを成立させる。ベタ塗りは Cookie 同意ボタンの #eaeaea のみ。角丸は 0 が基本で、タグ 4px / Cookie 3px / バッジ 2px という極小値だけが例外。

05 — CARDS

BRAND

カード面は濃灰の明度階段(#1f2529 → #242b2f → #545e64 → #74787a)。角丸も影も持たず、明度差だけでセクションを区切る。見出しは英語のセリフ、説明は和文ゴシック。

KANEKO OPTICAL
金子眼鏡 ― 職人の手仕事を、日常の道具として
SPIVVY
スピビー ― 遊びのある造形と色
PHILOSOPHY
職人シリーズ ― 名を刻む眼鏡
FACTORY
鯖江の自社工房と、そこで働く人たち
06 — FORMS

FORMS

デフォルト / フォーカス / エラーの3状態。角丸 0px、枠は #cccccc、フォーカスはティール #1890ad。エラーは面ではなく文字と 1px 罫で示す。

正しい電話番号を入力してください。
SUBMIT
07 — ELEVATION

ELEVATION

実測ではすべての要素が box-shadow: none。奥行きは純黒からペールグレーまでの 8 段の明度階段で表現し、ボタン・入力欄は影の代わりに 1px の罫線で輪郭を与える。

#000000
Ink Black
#151515
Off Black
#1f2529
Charcoal
#545e64
Slate
#74787a
Gray Slate
#8a8a8a
Mid Gray
#d7dcde
Pale Blue Gray
#ffffff
White
08 — LAYOUT

SPACING

4 / 9 / 21 / 40 / 80 / 120px。実測のパディングは 7px 21px・0 9px・11px 10px に集中し、セクション間は 80〜120px の大きな余白を取る。記事カラムは 680px 前後。

XS 4
S 9
M 21
L 40
XL 80
XXL 120

⚠ 当センターのウェブサイトは、ユーザーの皆様の利便性向上、ウェブサイトの改善等を目的に、Cookie を使用しております。詳しくはCookieポリシーをご覧ください。

✓ 同意する