BlueBank株式会社（コーポレートサイト）

1. 01

   ヘッダー

   左にロゴ、中央にすりガラス風の角丸ピルでニュース・サービス・会社情報・パートナー紹介・採用情報の5項目、右に「Contact」の角丸ボタン。スクロール中も上部に固定。

2. 02

   ヒーロー

   淡いグレーの地に、水色から濃紺へのグラデーションをかけたぼかしの球体と細い円弧の線。中央に Marcellus の「Owners Empowerment」と「経営者を解き放つ」、下端に画面幅いっぱいの「BlueBank」ロゴ。

3. 03

   ステートメント

   「社会を前に進めてきたのは、いつだって経営者でした。」から始まる宣言文を、太めのゴシックで段落ごとに左寄せで積む。背後にぼけた球体が残る。

4. 04

   最新情報

   左に「[ News ]」のラベルと見出し、黒い「一覧を見る」ボタン。右に日付・カテゴリ・タイトルを角丸の帯で3件並べる。

5. 05

   サービス

   「[ Service ]」のラベル、ロゴ、「経営者を解き放つ、ここだけの会員制プラットフォーム」の見出しと、アプリ画面を映したスマートフォンの写真。続いて黒い地に切り替わり、法人口座・ビジネスカード・請求書あと払いなど9つの機能をアイコン付きの角丸ボタンで3列に並べる。

6. 06

   会社情報

   「BlueBank株式会社とは」の見出しと、代表メッセージ、ミッション・ビジョン・バリュー、役員・社員紹介、会社概要の4枚のカード。各カードはサムネイル、一文、矢印。

7. 07

   パートナー

   辻・本郷グループと GMOあおぞらネット銀行の2社を、説明文とロゴ入りのカードで紹介。

8. 08

   採用

   中央揃えの見出しと「採用情報を見る」ボタン。「Join our team!」の英字を繰り返した帯の手前に、社員の立ち姿の写真を横一列に並べる。

9. 09

   お問い合わせ・フッター

   青紫のグラデーションに縦縞の光が入った帯に見出しと「お問い合わせはこちら」。フッターは濃いグレーに4列のリンクと、アプリ画面入りの「About BlueBank」カード。

• ヒーローは position: fixed で固定され、次のセクションがその上に被さってくる。球体は撮影のたびに位置と形が違っており、ゆっくり動くアニメーションがかかっていると思われる
• ヒーローのロゴと英字ラベルに mix-blend-mode: overlay がかかり、球体と重なる部分だけ色が沈んで見える
• ステートメントはスクロール位置に応じて行の色がグレーから黒へ変わるテキストフィル演出と思われる
• ナビやサービスのボタンは backdrop-filter: blur(12px) saturate(1.2) のすりガラス表現。背景が黒に切り替わる区間でも同じ部品を使い回している
• 採用の「Join our team!」は途切れず繰り返されており、横に流れるマーキーと思われる

スクロールのコマ撮り300–240000ms

検出された技術:WordPressGoogle Fonts

• 01球体は radial-gradient で水色から濃紺へ塗り、filter: blur で輪郭をぼかす。ノイズを薄く重ねると質感が出る
• 02英字コピーは Marcellus の細いセリフ体、和文は Noto Sans JP で、見出しの重さを英字と和文で分ける
• 03巨大ロゴと英字に mix-blend-mode を指定し、背景の明暗で色が変わる状態をつくる
• 04色は青のグラデーションだけに集め、他のセクションは淡いグレーと黒の2色で面を切り替える

1---
2title: "BlueBank株式会社（コーポレートサイト） デザイン分析書"
3source: https://bluebank.co.jp/
4katapick: https://katapick.com/sites/bluebank
5category: コーポレート
6region: 国内 (JP)
7tags: [ブルー基調, セリフ体, スクロール演出, ライト, 固定ナビ]
8launched: 2026-06
9verified: 2026-10-30
10measured: 2026-09-30 (Chromium 1440x900)
11difficulty: 3/5
12generator: Katapick
13---
14 
15# BlueBank株式会社（コーポレートサイト） — デザイン分析書
16 
17> FVの主役は、ぼかした青い球体ひとつ。経営者向け会員制プラットフォームを運営するBlueBank株式会社のサイトは、濃紺へ沈むグラデーションの球に細いセリフ体の英字を重ね、社名の「Blue」を色そのもので名乗る。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-30 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22