だれでも簡単。はじめやすく、続けやすい資産運用。
濃紺 #004d94 は「お金を預ける操作」、明るい青 #0984e3 は「試す・見る操作」。同じ 2 色の対がヘッダー・本文中・フッター前で 3 回繰り返される。中間の青を足さない。
CSS Custom Properties は 0 個。トークンを持たず、値はすべて CSS に直接書かれている。html を 62.5%(10px)に落としているが rem 設計も無い。
letter-spacing: normal がトップで可視 191 要素中 173 要素、下層(運用パフォーマンス)では 134 要素中 134 要素=全部。さらに font-feature-settings は 0 件で palt を 1 要素も使っておらず、スタックに YakuHanJP のような約物サブセットも無い。Noto Sans JP の既定の字送りをそのまま出す。
| Family | 宣言ウェイト | document.fonts | 可視要素 | 判定 |
|---|---|---|---|---|
| Noto Sans JP | 300 / 400 / 500 / 700 / 900 | 400 / 500 / 700 が loaded | 183 | ★和文の本体 |
| Noto Sans JP (300) | — | unloaded | 0 | URL に書いてあるが未使用 |
| Noto Sans JP (900) | — | unloaded | 0 | URL に書いてあるが未使用 |
| Roboto | 500 / 700 / 700 italic | 500 / 700 が loaded | 8 | ★数字専用 |
Google Fonts の旧 css?family= API で 5 ウェイトを読んでいる。さらに css?family=Noto+Sans+JP&display=swap(ウェイト指定なし)がもう 1 本重複して読まれている。実装の取りこぼしなので真似る必要はない。新規実装は 400 / 500 / 700 の 3 本に絞ってよい。
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 文字ごとのカーニングで、再利用できる段ではない。
border-radius: 100px が実測 10 要素。枠線だけのボタン(outlined)は 1 件も無い。面 2 色 × 寸法 2 種(36px のヘッダー pill / 2 行組の大型 pill)の 4 パターンしかない。
ノーベル賞受賞者が提唱する理論に基づき、世界約50カ国1万2千銘柄に分散します。
長く続けるほど、相場の変動の影響を受けにくくなります。
三菱UFJフィナンシャル・グループの一員として運営しています。
NISAを手間なくはじめられました。
ポートフォリオの自動調整が助かります。
かんたんな無料診断で、あなたに合った運用プランが分かります。
商品選びから資産配分の見直しまで、すべて自動で行います。
おトクなNISAの活用も自動。積立や難しい枠の使い方もおまかせ。
実サイトはフォーカスリングを設計していない。a にフォーカスを当てるとブラウザ既定の rgb(0,95,204) auto 1px が出る。新規実装では outline: 2px solid #0984e3; outline-offset: 2px を明示すること。
影は 1 種類しか無い(グローバルナビのドロップダウン 2 要素)。カードもセクションも影を持たず、階層は淡い面色で表す。filter: drop-shadow() / text-shadow は 0 件で、ヒーローの白文字も地色(#4eb0f7)とのコントラストだけで成立させている。
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 以上を確保すること。