口座開設 無料診断 ログイン

答えは、
ウェルスナビ

だれでも簡単。はじめやすく、続けやすい資産運用。

【重要】 ウェルスナビを装った詐欺やSNSでの勧誘にご注意ください。 詳しくはこちら
お申し込みは最短3分口座開設 あなたに合った資産運用は?無料診断
01 / Colors

青が 2 色、それが導線の主従

濃紺 #004d94 は「お金を預ける操作」、明るい青 #0984e3 は「試す・見る操作」。同じ 2 色の対がヘッダー・本文中・フッター前で 3 回繰り返される。中間の青を足さない。

Navy(主CTA)
#004d94
★面 8 / 文字 7 要素。口座開設・下層 h1
Blue(副CTA)
#0984e3
★面 6 / 文字 5 要素。無料診断・リンク
Sky(ヒーロー面)
#4eb0f7
ヒーローの地色(高さ 476px)
Text Primary
#333333
★可視 92 / 78 要素。純黒は使わない
Text Strong
#282828
カード見出し(14 / 10 要素)
Text Secondary
#666666
注釈・免責(32 / 15 要素)
Danger
#ee0f3e
詐欺注意(2 要素)。帯にせず文字だけ赤
Accent Warm
#fb8600
属性バッジ「投資経験なし」
Accent Teal
#0cb7b7
属性バッジ「投資経験あり」
Accent Gold
#bca47a
実績ラベル(預かり資産・運用者数)
Surface Blue
#e2f2fd
下層の主要ブロック。可視面積が最大
Surface Gray
#f0f3f5
おすすめコンテンツ・シミュレーション

CSS Custom Properties は 0 個。トークンを持たず、値はすべて CSS に直接書かれている。html を 62.5%(10px)に落としているが rem 設計も無い。

02 / Typography

字間に一切手を入れない

letter-spacing: normal がトップで可視 191 要素中 173 要素、下層(運用パフォーマンス)では 134 要素中 134 要素=全部。さらに font-feature-settings は 0 件で palt を 1 要素も使っておらず、スタックに YakuHanJP のような約物サブセットも無い。Noto Sans JP の既定の字送りをそのまま出す。

Family宣言ウェイトdocument.fonts可視要素判定
Noto Sans JP300 / 400 / 500 / 700 / 900400 / 500 / 700 が loaded183★和文の本体
Noto Sans JP (300)—unloaded0URL に書いてあるが未使用
Noto Sans JP (900)—unloaded0URL に書いてあるが未使用
Roboto500 / 700 / 700 italic500 / 700 が loaded8★数字専用

Google Fonts の旧 css?family= API で 5 ウェイトを読んでいる。さらに css?family=Noto+Sans+JP&display=swap(ウェイト指定なし)がもう 1 本重複して読まれている。実装の取りこぼしなので真似る必要はない。新規実装は 400 / 500 / 700 の 3 本に絞ってよい。

121416 182028 343640
Display(下層 h1)Noto Sans JP / 40px / 700
lh 1.40 / ls normal / #004d94
ウェルスナビの運用パフォーマンス
Heading 1Noto Sans JP / 36px / 700
lh 1.40(1.60 の箇所もある)
ウェルスナビが選ばれる理由
Heading 2Noto Sans JP / 34px / 700
lh 1.40
5つの質問に答えるだけ
Heading 3Noto Sans JP / 28px / 700
lh 1.40 / #282828
リスクを抑えてリターンを最大化
LeadNoto Sans JP / 20px / 400
lh 1.60(32px)
手続きはスマホひとつで。簡単な診断をするだけで、あなたに合った運用プランが分かります。
Body ★Noto Sans JP / 16px / 400
lh 1.60(25.6px)
資産運用の王道「長期・積立・分散」に基づいたサービス設計。相場の変動に一喜一憂せず、続けられます。
UI / Nav ★Noto Sans JP / 14px / 700
lh 1.15 / #004d94(最多 71 要素)
投資初心者の方 サービス おまかせNISA 運用実績 手数料
CaptionNoto Sans JP / 14px / 400
lh 1.60 / #888888
2016年1月19日〜2026年8月末(当初100万円、毎月3万円を積立)
SmallNoto Sans JP / 12px / 400
lh 1.60 / #666666
※ 過去の運用実績であり、将来の運用成果を示唆・保証するものではありません。
NumberRoboto / 45px / 700
ls -1.42px(手詰め)
01

body { line-height: 1.15 } はリセットであって本文の行間ではない。10px / 11.5px として書かれており、行間を書き忘れた要素(ナビ・ボタン・素のリスト)にそのまま残る(可視 70 / 81 要素)。テキストブロックには必ず 1.6 か 1.4 を明示すること。

字間の例外は 2 種類だけ。ヒーローの 1 文字色替え(0.8px・13 要素)と、Roboto の大きい数字の手詰め(-1.42px -1.89px -9.94px 0.63px)。この負の値は「設計」ではなく 1 文字ごとのカーニングで、再利用できる段ではない。

03 / Components

ボタンは全部 pill

border-radius: 100px が実測 10 要素。枠線だけのボタン(outlined)は 1 件も無い。面 2 色 × 寸法 2 種(36px のヘッダー pill / 2 行組の大型 pill)の 4 パターンしかない。

口座開設 無料診断 ログイン 投資経験なし 投資経験あり
リスク許容度1リスク許容度2リスク許容度3

カード(radius 24px・影なし)

リスクを抑えて
リターンを最大化

ノーベル賞受賞者が提唱する理論に基づき、世界約50カ国1万2千銘柄に分散します。

2年以上の利用で
9割以上がプラス

長く続けるほど、相場の変動の影響を受けにくくなります。

はじめての方も
安心のMUFG

三菱UFJフィナンシャル・グループの一員として運営しています。

体験談カード(radius 24px・バッジは 50px)

投資経験なし

NISAを手間なくはじめられました。

年収 300万円〜500万円 / 30代
投資経験あり

ポートフォリオの自動調整が助かります。

年収 500万円〜1,000万円 / 40代

手順カード(radius 8px・数字は Roboto)

01
STEP 1

5つの質問に答えるだけ

かんたんな無料診断で、あなたに合った運用プランが分かります。

02
STEP 2

面倒なことはぜんぶ自動

商品選びから資産配分の見直しまで、すべて自動で行います。

03
STEP 3

NISAももちろんおまかせ

おトクなNISAの活用も自動。積立や難しい枠の使い方もおまかせ。

入力欄(実サイトに存在しないため DESIGN.md の推奨値)

既定の状態
フォーカス(outline 2px solid #0984e3)
西暦8桁で入力してください

実サイトはフォーカスリングを設計していない。a にフォーカスを当てるとブラウザ既定の rgb(0,95,204) auto 1px が出る。新規実装では outline: 2px solid #0984e3; outline-offset: 2px を明示すること。

04 / Layout & Elevation

1024px のコンテナ、影は 1 種類

Full bleed — ヒーロー(高さ 476px / 地色 #4eb0f7)
Wide 1440px(全幅セクションの上限)
Container 1024px ★最多(10 要素)
Column 872px — 説明文のカラム
100px ★ボタン(10)
56px 大型ブロック(4)
50px バッジ
24px カード(3)
8px STEP(3)
4px タブ(2)

Depth & Elevation

Level 0(既定)
box-shadow: none
Level 1(唯一・2 要素)
0 5px 10px rgba(0,0,0,.13)
階層は淡い青の面で
#e2f2fd / #dff1fc / #f0f3f5

影は 1 種類しか無い(グローバルナビのドロップダウン 2 要素)。カードもセクションも影を持たず、階層は淡い面色で表す。filter: drop-shadow() / text-shadow は 0 件で、ヒーローの白文字も地色(#4eb0f7)とのコントラストだけで成立させている。

実績ブロック(radius 56px)

預かり資産
1.4兆円
運用者数
42万人

Responsive

html / body は 4 幅(1440 / 1200 / 834 / 375px)すべてで 10px / line-height: 11.5px / letter-spacing: normal のまま。流体(vw / clamp)も SP での縮小も無い。サイズの切り替えはセクションごとの CSS クラス側で行う。

主分岐は min-width: 1024px(実測 98 件)でモバイルファースト。ほかに max-width: 768px(14 件)、min-width: 828px(13 件)、min-width: 769px(12 件)。max-width: 343px が 8 件あり、小型端末でのはみ出しを個別に潰している。
ヘッダーの pill は高さ 36px で WCAG の 44px を下回るので、新規実装では 44px 以上を確保すること。