i 重要なお知らせ 【臨時システムメンテナンス】2026年3月20日(金)の取扱いについて 2 / 10
01 / COLORS

純黒・純白・蛍光イエローの3色

文字色は 純黒と純白の2色だけ(実測 #000 196 要素 / #fff 95 要素)。グレーの文字が 1 つも出てこない。 蛍光イエローは面を塗る色ではなく、10×10px のマーカーと選択状態の合図として使う。

Black
#000000 / --primary-black
文字・ボタンの面・全ボーダー。可視 196 要素。純黒を使う
White
#ffffff / --primary-white
黒面の上の文字、カード・ボタンの面
Accent
#eeff00 / --accent: #ef0
★可視 20 要素。10px のマーカーと選択中タブのみ。広い面には塗らない
Notice
#DE0000 / --notice
重要なお知らせ・エラー
Background
#f4f4f4 / --light-gray
ページ背景(根拠 body)
Surface Gray
#E5E5E5 / --gray-v3
カードのカテゴリラベル
Gray
#707070 / --gray
トークンには存在するが、可視テキストの色としては 0 件
Gray v4
#4d4d4d / --gray-v4
同上。本文の文字色には使わない

palt を使わず、0.8px 空ける

font-feature-settings は 291 要素すべて normal。約物を詰める代わりに letter-spacing: 0.8px を全面に効かせる(218 要素)。ウェイトは 600 と 300 の 2 極で、 中間の 400 / 500 をほとんど使わない。

Display(欧文)Avenir Next 88px / 700
line-height 1.00 / ls 0.88px
POINT
HeadingHiragino Sans 24px / 600
line-height 1.60 / ls 0.8px
お金を目的別に仕分けてかんたん管理
Label(欧文)Avenir Next 20px / 700
line-height 2.00 / ls 0.8px
Point 01
BodyHiragino Sans 16px / 600
line-height 1.67 / ls 0.8px
高金利なのに出し入れはいつでもすぐに。他行残高も見えるから資産配分をかしこく管理できます。
Body LongHiragino Sans 16px / 300
line-height 1.75 / ls 0.8px
みんなの銀行は、国内最大の地域金融グループが立ち上げたデジタルバンクです。口座開設から入出金、振込、デビットカードの利用までを、すべてスマートフォンのアプリで完結できます。
ButtonHiragino Sans 14px / 600
line-height 1.33 / ls 0.8px
Sticker16px / 300
ls normal / radius 100px

ボックス

レコード

セキュリティ

Tag14px / 400 / ls 0.6px
# すべての方# 要エントリー

letter-spacing を em に読み替えない。16px の本文でも 14px のボタンでも実効値は同じ 0.8px(0.05em / 0.057em)。 em で再宣言すると大きい文字ほど開きすぎる。
Web フォントは全ページで unloaded。macOS ではヒラギノがローカル解決するため、 Noto Sans JP / Roboto は Windows・Android のための保険として配信されている。検証環境の OS で字面が変わる。

03 / BUTTONS

矩形のボタン、pill のステッカー

ボタンは 幅 294px × 高さ 56px / border-radius: 0 / 枠 2px。 Primary にも 2px solid transparent を当てて Secondary と寸法を揃えている。

セキュリティ

pill やボタンの直下にテキストノードを置かない。実サイトはラベルの色を子要素(<p> / <strong>)に当てており、 pill 自身の color は黒のまま。直置きすると黒 pill の上に黒文字が出る。

蛍光イエローは「選択」の合図

選択されていない項目は白。アクセントを広い面に塗らないことで、10px のマーカーと選択状態だけが際立つ。

05 / CARDS

枠 2px、角丸ゼロ、影なし

Cheer Box
【アビスパ福岡】トレーニング環境の改善支援
campaign
募集総額500億円!みんなの銀行5thアニバーサリー
news
貯蓄預金の基準金利改定について

本文は 504px の 1 カラム

--inner-maxWidth: 504px がこのサイトの骨格。デスクトップでも本文は 504px に収まり、 スマホアプリの画面比率をそのまま拡大した構成になっている。

01
FEATURE
最短5分で口座開設
本人確認から口座開設まで、アプリだけで完結します。印鑑も郵送もいりません。※1
App Screen
07 / FORMS

入力欄も高さ 56px・枠 2px

キャッシュカードに印字されるお名前です
電話番号の桁数が正しくありません

影は 3 件だけ。奥行きは 2px の黒罫

Level 0 — none
枠 2px solid #000(ほぼ全要素)
Level 1
0 4px 10px rgba(0,0,0,0.1)
Level 2
0 4px 20px rgba(0,0,0,0.1)
まずはみんなの銀行アプリをダウンロード

ボトムシートだけ border-radius: 60px 60px 0 0 を持つ。

09 / LAYOUT

896px で総取り替え

主ブレークポイントは max-width: 896px(158 ルール)。さらに (hover: hover) を 50 ヶ所で使い、 ホバー効果をポインタデバイスに限定している——スマホ起点のサービスらしい設計。

Wide — max-width 1280px
Section — max-width 1120px
Inner column — 504px(--inner-maxWidth)
Mobile 基準 — 390px

gap の実測分布は 4px(25 ヶ所)/ 16px(21)/ 24px(12)。4px 基準のスケール。