# BlueBank株式会社（コーポレートサイト）｜コーポレートのWebデザイン参考

> FVの主役は、ぼかした青い球体ひとつ。経営者向け会員制プラットフォームを運営するBlueBank株式会社のサイトは、濃紺へ沈むグラデーションの球に細いセリフ体の英字を重ね、社名の「Blue」を色そのもので名乗る。

- URL: https://bluebank.co.jp/
- 解説ページ: https://katapick.com/sites/bluebank
- カテゴリ: コーポレート / 地域: 国内（JP）/ 業種: 経営者向け会員制プラットフォーム（金融・経営支援）
- テイスト: ブルー基調、セリフ体、スクロール演出、ライト、固定ナビ
- 公開・リニューアル: 2026-06 / Katapick掲載: 2026-09-30 / 最終確認: 2026-10-30
- 再現難易度: 3/5

## 編集部のひとこと（Bruno）
宣言文のすぐ後にニュースを挟んでるんだよね。顧問就任やメディア掲載、独自の調査が、サービス紹介より先に目に入る。約束を語った直後に、動いている証拠を置く順番。信用の積み方として筋がいい。

## デザインの見どころ
- 足元の巨大ロゴは、球に重なる部分だけ青く沈む。文字が背景に溶け、ロゴまで風景の一部になる
- 宣言文は読み進めた行からグレーが黒に変わる。長いステートメントを、スクロールの速さで1行ずつ読ませる
- サービス紹介だけ黒い地に切り替え、すりガラスのボタンを9つ並べる。アプリの機能一覧のように触れたくなる

## 配色
- #f1f2f6 Pale Blue Gray（背景）
- #00016d Deep Navy（球体の中心（スクショから採色））
- #81c1e5 Sky（球体のハイライト（スクショから採色））
- #8c8ef3 Periwinkle（コピー「経営者を解き放つ」/ お問い合わせ帯のグロー（スクショから採色））
- #000000 Black（テキスト / ボタン / サービスセクションの地）
- #2c2d32 Charcoal（フッター背景）

## フォント
- 英字コピー・ナビの英字・日付・ラベル: Marcellus（代替: Marcellus（Google Fonts で無料））
- 和文の見出し・本文・ナビ: Noto Sans JP（代替: Noto Sans JP（Google Fonts で無料））

## よくある質問
### BlueBankのサイトで使われているフォントは？
英字のコピーや日付に Marcellus、和文の見出しと本文に Noto Sans JP が使われています。どちらも Google Fonts で無料で使えます。

### BlueBankのようなぼかした球体のグラデーションはどう作る？
円形の要素に水色から濃紺への radial-gradient を指定し、filter: blur でふちをぼかします。複数の円を重ねて位置をゆっくりアニメーションさせると、形が揺らぐように見えます。

### BlueBankのデザインはどんなサイトの参考になる？
金融、経営支援、会員制サービスなど、信頼感と新しさを同時に見せたいBtoB企業のコーポレートサイトや、ブランドカラーを1色に絞って印象づけたいサイトの参考になります。

### BlueBankのサイトの写真やロゴは使っていい？
ロゴ、アプリ画面、社員や役員の写真、パートナー企業のロゴは、BlueBank株式会社および各権利者に帰属します。参考にできるのは配色や構成などの考え方までで、素材そのものは流用できません。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「デザイン分析MD」は https://katapick.com/sites/bluebank からダウンロードできます。
出典: Katapick（https://katapick.com）