スマホひとつで
かんたんにお支払いはPayPayで

おサイフを持ち歩かなくても、スマホひとつで簡単・スマートにお支払いができる、新しい決済サービスです。

SCROLL
Colors

カラーパレット

Brand
PayPay Blue
#3895FF
プライマリ CTA・リンク
Blue Visited
#214DD2
visited link 等
PayPay Red
#F24F4F
強調テキスト・SCROLL
Red Accent
#FD5C5C
主催ラベル等
Text
Text Primary
#242323
本文・見出し(純黒ではない)
Text Sub
#606060
キャプション・日付
Page Bg
#FFFFFF
ページ背景
Bg Subtle
#EEEEEE
薄背景・サブセクション

Tag System

タグカラー体系

PayPay 特有のタグカラー体系。背景色付き(濃い同系色文字)と白背景(ブランドカラー文字)の二パターンで運用。

きせかえ
bg: #D9B0EC
color: #7921A3
キャンペーン
bg: #BBCFF2
color: #002970
外部主催
bg: #FFFFFF
color: #3895FF
PayPay主催
bg: #FFFFFF
color: #FD5C5C

Typography

タイポグラフィ階層

スマホひとつでかんたんに
Noto Sans JP / 55px / 700 / lh: 88px (×1.6)Hero H1
PayPayってどんなサービス?
Noto Sans JP / 42px / 700 / lh: 67.2px (×1.6)H2 Major
本人確認でPayPayをもっと便利に!
Noto Sans JP / 36px / 700 / lh: 57.6px (×1.6)H2 Section
登録ユーザー ついに7,300万人到達!
Noto Sans JP / 35px / 700 / lh: 56px / color: #F24F4FH3 Highlight (Red)
おサイフを持ち歩かなくても、スマホひとつで簡単・スマートにお支払いができる、新しい決済サービスです。
Noto Sans JP / 20px / 400 / lh: 32px (×1.6)Body Large
PayPayは、QRコードや バーコードを使ってお支払いができる決済サービスです。本文は line-height ×1.4 (22.4 / 16) とタイト目に組まれています。
Hiragino ProN / 16px / 400 / lh: 22.4px (×1.4)Body
2026/4/24 10:00 〜 2026/5/31 23:59
Hiragino ProN / 12px / 400 / lh: 16.8px (×1.4) / color: #606060Caption
SCROLL
Futura / 16px / 700 / color: #F24F4FDisplay EN

Highlight

数字の強調

登録ユーザー ついに
7,300万人到達!

Campaigns

キャンペーン

CAMPAIGN
PayPay主催 キャンペーン
最大10%戻ってくる!スーパーポイント祭り
2026/4/24 10:00 〜 2026/5/31 23:59
KISEKAE
きせかえ
『崩壊:スターレイル』カードきせかえ
2026/4/24 10:00 〜 限定配布
EXTERNAL
外部主催
マクドナルドでPayPay利用で 5%戻ってくる
2026/4/15 〜 5/15
EVENT
PayPay主催
本人確認完了で500ポイントプレゼント
2026/4/1 〜 6/30

Buttons

ボタン

Primary CTA
bg #3895FF / radius 6px / 16px 700
Inline Link
color #3895FF / 下線なし

FAQ アコーディオン


Layout

レイアウト原則

HERO: 大型グラデーション + Noto Sans JP 55px 700 / lh ×1.6 / 中央寄せ
FONT SWITCHING: body は Hiragino ProN、見出しは Noto Sans JP に切り替える二段構成
BUTTON RADIUS: 6px が PayPay 共通(UNIQLO の 0、Nintendo の 6 とは異なる中間値)
HEADING WEIGHT: 全見出し 700 統一 / サイズと色(黒 vs 赤)でメリハリ
LH RATIO: 見出し ×1.6 / 本文 ×1.4 / リード ×1.6〜2.0

Font Note

フォントの注記

PayPay は和文の本文に 「Hiragino Kaku Gothic ProN」(ProN — JIS90 字形) を最先頭に置きます。UNIQLO・Apple Japan の Pro(JIS78 字形)とは別物で、字形の好みが異なります。

主要見出し(H1〜H3)では Noto Sans JP に切り替え、ヒラギノを後段に置く二段構成。見出しウェイトは 全 700 統一で、サイズとカラー(黒 #242323 vs 赤 #F24F4F)でメリハリを付けます。

"SCROLL" 等の Display 用英字に Futura が指定されているのも特徴的です。

PayPay 独自の CSS Custom Properties は事実上存在しません:root に観測される 47 個の --wp--preset-* は WordPress Gutenberg のデフォルト値であり、PayPay のデザイントークンではない点に注意。デザイントークンは BEM 形式の class 名(mainButton__button, campaign__title 等)に直接エンコードされています。