UI Skillbook
2

Design systems set in ヒラギノ角ゴ Pro W3

Brands and apps whose DESIGN.md names ヒラギノ角ゴ Pro W3 as a typeface, including Calpis, CAPCOM (カプコン) and Creema. Each file also lists the sizes, weights and colors that go with it, so your coding agent can match the whole style.

15 files

Files

Calpis

Japan · ヒラギノ角ゴ Pro W3

カルピス（https://www.calpis.info/）のデザイン仕様書。 実サイトの CSS computed style に基づく。アサヒ飲料が展開する1919年創業の国民的乳酸菌飲料ブランドのブランドサイト。

CAPCOM (カプコン)

Japan · ヒラギノ角ゴ Pro W3

CAPCOM（https://www.capcom.co.jp/）のデザイン仕様書。 1983年設立の大手ゲームメーカー。ストリートファイター、バイオハザード、モンスターハンター、デビルメイクライ等を擁する。 コーポレートサイトはゲーム情報・IR・プレスリリースのポータル。 実サイトの computed style 実測（2026-06 取得）に基づく。

Creema

Japan · ヒラギノ角ゴ Pro W3

Creema（https://www.creema.jp/）のデザイン仕様書。 日本最大のハンドメイド・クラフト作品マーケットプレイス。 Puppeteer による computed style 実測値（2026-06-12 取得）に基づく。

Epson

Japan · Arial

Epson（https://www.epson.jp/）のデザイン仕様書。 実サイトのCSS computed style に基づく。CSS Custom Properties は使用されていない（レガシーな静的CSS構成）。

GANZO

Japan · Rokkitt

GANZO 公式サイト（https://www.ganzo.ne.jp/）のデザイン仕様書。 日本最高峰のレザーブランド。コードバン、ブライドルレザーなど最上級の素材を、熟練の職人が仕立てる。 「一切の妥協を許さないものづくり」を掲げ、財布・鞄・革小物を展開。 実サイトの computed style 実測（2026-05-22 取得）に基づく。

ICHIRAN (一蘭)

Japan · ヒラギノ角ゴ Pro W3

一蘭（https://ichiran.com/）のデザイン仕様書。 福岡発の天然とんこつラーメン専門店。「味集中カウンター」で知られる日本を代表するラーメンブランド。 Puppeteer による computed style 実測値（2026-06-10 取得）に基づく。

Kalita (カリタ)

Japan · Questrial

Kalita 公式サイト (https://www.kalita.co.jp/) のデザイン仕様書。 1958年創業、横浜発のコーヒー機器総合メーカー。三つ穴ドリッパーに代表される「カリタ式」で知られる。 グレー #999999 のページ背景、シャープな直角コンポーネント、ゴーストボタンが特徴的な工業的デザイン。実サイトの computed style に基づいて記述。

KING JIM（キングジム）

Japan · Hiragino

KING JIM（https://www.kingjim.co.jp/）のデザイン仕様書。 「ファイル」と「テプラ」で知られるオフィス・文具メーカー。ラベルライター、デジタル文具、ファイリング用品、デスク周辺用品、防災用品など幅広い事務用品を展開。 実サイトの computed style 実測（2026-06-20 取得）に基づく。

LOFT（ロフト）

Japan · YuGothic

LOFT（https://www.loft.co.jp/）のデザイン仕様書。 文房具・雑貨・コスメ・インテリアを扱うライフスタイルストア。セブン＆アイグループ。 実サイトの computed style 実測（2026-05-09 取得）に基づく。

NTT docomo

Japan · ヒラギノ角ゴ Pro W3

NTT docomo（https://www.docomo.ne.jp/）のデザイン仕様書。 実サイトの CSS computed style に基づく。日本最大の携帯キャリアのコーポレートサイト。

Oisix ra daichi

Japan · Arial W01 Narrow Bold

Oisix ra daichi（https://www.oisixradaichi.co.jp/）のデザイン仕様書。 食品宅配大手（Oisix、らでぃっしゅぼーや、大地を守る会の親会社）のコーポレートサイト。 Morisawa 明朝体の見出し + ヒラギノ角ゴシックの本文という、セリフ×サンセリフの混植が特徴。

STARFLYER（スターフライヤー）

Japan · ヒラギノ角ゴ Pro W3

北九州を拠点とする航空会社スターフライヤーの公式サイト（https://www.starflyer.jp/）のデザイン仕様書。 黒い機体・黒い革シート・黒い機内という「黒のエアライン」をそのまま Web に持ち込んだ、日本の航空会社では唯一の黒地サイト。 最大の特徴は 2 つのデザインシステムが 1 つのドメインに同居していること。予約・運賃を扱う実務サイトは OS 搭載のヒラギノ角ゴ Pro で組んだ黒枠 × 白面、ブランドサイト（…

Suntory（サントリー）

Japan · ヒラギノ角ゴ W3

サントリーホールディングス公式コーポレートサイト（https://www.suntory.co.jp/）のデザイン仕様書。 「水と生きる」をコーポレートメッセージに掲げる総合飲料・食品・健康・サービス企業。 実サイトの computed style に基づいて記述。

tokyobike

Japan · ヒラギノ角ゴ Pro W3

tokyobike（https://tokyobike.com/）のデザイン仕様書。 WordPress ベースのサイト。システムフォント（ヒラギノ角ゴ Pro W3）とミュートなグレー系配色による、温かみのあるライフスタイルブランドのデザイン。 実サイトの computed style に基づく（2026-05 取得）。

国立新美術館（The National Art Center, Tokyo）

Japan · ヒラギノ角ゴ Pro W3

国立新美術館（https://www.nact.jp/）のデザイン仕様書。 2007 年開館、六本木。黒川紀章設計の波打つガラスカーテンウォールで知られる、コレクションを持たない「アートセンター」型の美術館。シンボルマークは佐藤可士和による「新」の一字で、縦画・横画を切り離した幾何学的な構成が館のアイデンティティになっている。 Web の最大の特徴は、赤 #d7322d と墨 #222222 の二色だけで組む禁欲的な設計と、borde…

Other fonts