お問い合わせ お申し込み

デザイン
システム

  • Noto Sans JP ＋ 游ゴシックの 2 本立て
  • 有彩色はオレンジのグラデ 1 系統だけ
  • 影はボタンにしか落とさない
資料ダウンロード お申し込み
hero visual

computed style 実測値にもとづくプレビュー

* 2026-08-24 取得。LP トップ ＋ /lp/function/
01 / COLORS

白と黒の 2 極 ＋ オレンジ 1 点

Brand — グラデーションでしか使わない
UPSIDER Orange
linear-gradient(90deg, #f5833e 0%, #fead48 100%)
主 CTA の面。background-image で塗る（background-color は透明のまま）
Grad Start
#f5833e
グラデーション開始
Grad End
#fead48
グラデーション終了
Ink — 黒は 3 段階
Ink
#1f1f1f
body の既定色・見出し・フッターの面
Ink Link
#1f2937
ナビリンク・白ボタンのラベル
Ink Button
#27272a
追従 CTA の白ボタンラベル
Black
#000000
斜め分割セクションの片側
Gray Dark
#373737
アクティブなドット
Gray & Surface
Gray Chip
#6b6b6b
特徴チップの面（白文字）
Gray Mid
#9c9c9c
注釈テキスト・非アクティブなドット
Surface
#f3f3f3
比較セクションの面
Background
#ffffff
ページ地色
Border
rgba(0,0,0,0.12)
アウトラインボタンの罫
Shadow
rgb(203,203,203)
不透明な灰の影。rgba ではない
Dark Section — ベタ塗りにしない
同系色の黒 2 枚を 108.58 度で切り替える
linear-gradient(108.58deg, #000 0 49.99%, #1f1f1f 49.99% 100%)
02 / TYPOGRAPHY

見出しは Noto Sans JP、本文は游ゴシック

上場のための
法人カード
64px / 700 / line-height: 83.2px (1.3) / letter-spacing: 2.56px (0.04em) ／ "Noto Sans JP"h1 — 字間を当てるのはここだけ
従来の法人カードの課題
48px / 700 / line-height: 72px (1.5) / letter-spacing: normal ／ "Noto Sans JP", sans-serifh2
貴社の組織体制に合わせたカード運用
36px / 700 / line-height: 54px (1.5)h2（黒セクション）
日本最高レベルの利用先限定機能
36px / 400 / line-height: 54px (1.5) ／ 游ゴシック — 太らせずにサイズだけ上げるh3
最大10億円の利用限度額
30px / 400 / line-height: 67.5px (2.25) — 1 行の見出しを縦に浮かせるh3
10万社を超す企業様が導入しています*
30px / 700 / line-height: 45px (1.5)リード
お申し込みから最短当日にご利用いただけます。
24px / 700 / line-height: 36px (1.5)リード（小）
Web でご利用のお申し込み、支払い口座のご登録をいただくだけで審査を開始します。電子帳簿保存法・インボイス制度にも対応しており、証憑の保管や仕訳の作業を一連の流れの中で完結できます。
16px / 400 / line-height: 28px (1.75) ／ 游ゴシックスタック本文
導入事例 ／ お役立ち資料 ／ お役立ち記事 ／ セミナー
14.4px / 400 / line-height: 21.6px (1.5) / color: #1f2937ヘッダーナビ
STEP01
14px / 700 / line-height: 21px (1.5) ／ Inter, sans-serif英字ラベル専用
* 当社が提供する全サービスのリリースからの登録企業数の合計
12px / 400 / line-height: 18px (1.5) / color: #9c9c9c注釈
font-family（実測）
対象指定
ヒーロー見出し h1"Noto Sans JP" ← generic family を持たない。再現時は , sans-serif を必ず足す
セクション見出し・CTA"Noto Sans JP", sans-serif
本文・2次見出し游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, メイリオ, Meiryo, sans-serif
英字ラベルInter, sans-serif

※ Noto Sans JP と Inter は実サイトと同一の書体で、Google Fonts から読み込んでいる。本文の游ゴシックは OS フォントに任せるため、環境により表示が異なる。
※ font-feature-settings は全要素 normal。palt を使わない（「最大10億円」など数字と和文の混植が多く、詰めると桁が読みにくくなるため）。

UPSIDERカードで
不正利用の発生可能性をほぼゼロに

半数以上の企業が過去 3 年間に何らかの不正を経験している

利用先を限定できるカードを 1 枚ずつ発行し、限度額と用途を組織単位で管理する。証憑の提出漏れは自動で検知し、月末の締め作業を待たずに気づける状態をつくる。

お申し込み
04 / BUTTONS

radius は場所ごとに違うが、すべてピル

お申し込み
Primary（ヘッダー）
radius 20px / 16px / shadow なし
お申し込み
Primary（ヒーロー）
radius 30px / 20px
0 5px 15px rgb(203,203,203)
お申し込み
Primary（追従）
radius 100px / 24px
0 0 24px rgb(0,0,0)
お問い合わせ
Secondary
白 ＋ 1px solid rgba(0,0,0,.12)
radius 20px / 文字 #1f2937
資料ダウンロード
Tertiary
白・罫なし ＋ 影のみ
radius 30px / 20px
もっと見る
More
radius 100px / 16px
0 4px 24px rgb(203,203,203)
Chips ＆ Dots
高い限度額 対応スピード 不正利用の抑止 #6b6b6b / 白文字 12px / radius 100px / padding 4px 16px
active #373737 ／ 非アクティブ #9c9c9c ／ radius 50%
CTA Bar（追従）
まずはサービスを知りたい方 資料ダウンロード お申し込み
05 / CARDS

課題と解決 — カードには影を落とさない

課題

部署ごとに 1 枚のカードを共有しているため、誰がいつ何に使ったのかが月末まで分からない。限度額の引き上げにも申請から数週間かかる。

UPSIDER なら

用途ごとにカードを即時発行し、限度額を 1 枚単位で設定できる。利用は発生した時点で明細に載り、証憑の提出も同じ画面で完結する。

Steps
STEP01

お申し込み

Web でご利用のお申し込みと支払い口座のご登録をいただきます。

STEP02

審査

最短当日で審査結果をご連絡します。決算書のご提出は不要です。

STEP03

ご利用開始

バーチャルカードはその場で発行され、すぐにご利用いただけます。

Case

株式会社SODA

代表 内山さん

限度額の相談に即座に応じてもらえるので、広告出稿の意思決定を止めずに済むようになりました。月末の精算に費やしていた時間も、実質ゼロに近づいています。

すべて見る
06 / FORMS

入力欄は枠を持たない

Default — border なし / 下線 1px rgba(0,0,0,.12) / padding 12.5px 16px 12.5px 0 / radius 0
Focus — 下線を #f5833e に
必須項目です。
Error — 下線 #f5833e ＋ 淡いオレンジの面
07 / ELEVATION

影はボタンだけに落とす

Level 0
none — カード・セクション
Level 1
0 5px 15px rgb(203,203,203)
Level 2
0 4px 24px rgb(203,203,203)
Level 3
0 0 24px rgb(0,0,0)

影の色は 不透明な灰 rgb(203,203,203)（rgba ではない）。追従 CTA だけ黒の全周影。カードやセクションには一切落とさない。

08 / LAYOUT

Spacing ／ Radius ／ Container

Spacing Scale
XS 4
S 16
M 24
L 64
XL 120
XXL 160
Radius
値用途
0pxカード、入力欄、セクション
20pxヘッダーのボタン（Primary / Secondary）
30pxヒーローのボタン
50%カルーセルのドット
100px追従 CTA、チップ、「もっと見る」
Container / Grid / Breakpoints
項目値
Max Width1200px / padding-x 16px
ヒーロー左テキスト / 右ビジュアルの 2 分割
黒セクション上下 padding 160px
Mobile≤ 767px — 1 カラム。ナビはドロワー
Tablet768–1023px — ヒーローを縦積みに
Desktop≥ 1024px — ヒーロー 2 分割 ＋ ナビ展開