Design System Preview
au.com — 日本語版

DESIGN.md から抽出したデザイントークンのカタログ。カラー、フォント、コンポーネント、スペーシングの全値を可視化。computed style 実測値に基づく。

料金プランを詳しくみる DESIGN.md を読む

01 / Colors

カラーパレット

Brand
au Orange
#eb5505
主要CTA・ブランドカラー
au Red
#e40000
災害情報・アラート
UQ Brand
#e4007f
--webm-brand-uq
Text
Text Dark
#1b1b1b
見出しテキスト
Text Primary
#333333
本文テキスト
Text Light
#676767
補足テキスト
Text Muted
#777777
薄い補足テキスト
Link
#0066aa
テキストリンク
Semantic
Danger / Alert
#ff0800
災害用伝言板ボタン
Info / Service
#0e0d6a
災害時サービス案内
Surface & Border
Background
#ffffff
ページ背景
Surface
#f7f7f7
ナビ・セクション背景
Surface Alt
#f3f3f3
フッター・サブメニュー
Border
#d1d1d1
入力枠線
Border Light
#e5e5e5
--webm-border
Card Shadow
#e6e6e6
カードシャドウ色

02 / Typography — 実測値

タイポグラフィ階層

Display — 暮らしをもっとおもしろく
50px / 400 / line-height: 1.0 / letter-spacing: normalトップページ h2
ページタイトル — Page Title (h1)
30px / 400 / line-height: 1.4 / letter-spacing: normalサブページ
おもしろいほうの未来へ。
24px / 700 / line-height: 2.0 / color: #eb5505タグライン h3
セクション見出し — Section Heading (h2)
24px / 400 / line-height: 1.4 / letter-spacing: normalトップページ
サブセクション見出し — Sub Section (h2)
22px / 700 / line-height: 1.4 / letter-spacing: normalサブページ
小見出し — Heading 3
20px / 400 / line-height: 1.4 / letter-spacing: normal
サブ小見出し — Heading 3 Bold
18px / 700 / line-height: 1.4 / letter-spacing: normal
本文テキスト — au は、KDDIが提供する通信ブランドです。スマートフォン、携帯電話、インターネット回線、でんきなどの各種サービスを通じて、お客さまの暮らしをサポートしています。line-height: 1.7 のゆったりした行間で読みやすさを確保。ABCabc 123
16px / 400 / line-height: 1.7 / letter-spacing: normal本文
グローバルナビ — Global Nav
15px / 700 / line-height: 1.4ナビゲーション
補足テキスト — Small (14px)
14px / 400 / line-height: 1.7 / color: #676767
キャプション / ヘッダーリンク — Caption (12px)
12px / 700 / line-height: 1.4ヘッダー
Banner Font — iPhone 17e 販売中!
Helvetica, "ヒラギノ角ゴ ProN W3", sans-serif / 20px / 700バナー専用

製品ページの組版サンプル

スマートフォン・携帯電話

au では、iPhone、Android スマートフォンをはじめ、さまざまな製品をご用意しています。最新の料金プランと合わせて、お客さまに合った製品をお選びいただけます。

製品を選ぶ

お客さまのご利用状況に合わせて、最適なスマートフォンをお選びいただけます。最新の iPhone シリーズや、Android スマートフォンの人気モデルをラインアップ。

料金プランについて

au バリューリンクプランをはじめ、お客さまのデータ利用量に応じた最適なプランをご提案します。詳しくは料金プラン一覧をご覧ください。

※機種の販売価格は、店舗ごとに異なります。詳しくは各店舗にお問い合わせください。


04 / Buttons

ボタンバリエーション

料金プランを詳しくみる
Primary CTA (Orange)
radius: 0px, weight: 700
料金シミュレーションをみる
Secondary (Outline)
radius: 0px, weight: 400
日本語
Danger Outline
radius: 8px (特殊), weight: 700
au Online Shop
Nav Pill
radius: 25px, weight: 700
製品
Card Nav
radius: 5px, shadow
Android一覧
Outline Small
14px, weight: 400
au IDでログイン
Login CTA
weight: 400

05 / Cards

カードコンポーネント

iPhone 17e

iPhone 17e

最新のiPhoneで、もっと便利に。au ならではのサポートとおトクな料金プランで。

詳しくみる
Galaxy S25

Galaxy S25

高性能カメラとAI機能を搭載。Android スマートフォンの最新モデル。

詳しくみる
料金プラン

auバリューリンクプラン

データ使い放題から少量プランまで、お客さまの利用スタイルに合わせた料金プラン。

プランを比較する

06 / Forms

フォーム要素

デフォルト — border: #d1d1d1, radius: 0px
フォーカス — border: #eb5505 (au Orange)
エラー — border: #e40000 (au Red)
正しいau IDを入力してください。

07 / Elevation

Depth & Elevation

Level 0: Flat
影なし。メインCTAボタン等
Card Shadow
0px 2px 4px #e6e6e6 — カードナビ
Card Hover
0px 4px 12px rgba(0,0,0,0.12) — ホバー時
--webm-shadow
rgb(0 0 0 / 10%) — 汎用

08 / Layout

レイアウト特性

ボタンの角丸ルール
radius: 0px(通常CTA)
radius: 8px(災害情報)
radius: 25px(Nav Pill)
radius: 5px(Card Nav)
テキスト色の階層
見出し #1b1b1b
本文 #333333
補足 #676767
薄い補足 #777777
リンク #0066aa
フォントスタック
メイン: noto-sans-cjk-jp (Adobe Fonts)
代替: "Noto Sans JP", sans-serif (Google Fonts)
バナー: Helvetica, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif
letter-spacing: normal / font-feature-settings: normal(全要素)