CorporateOverseas / USPicked 2026.09.26

Aspen Search

コーポレートのWebデザイン参考 — エグゼクティブサーチ（クオンツ金融・テック人材）

出典: aspensearch.com

Editor's note — 編集部の視点

罫線と網点だけで組んで、ちゃんと硬派でかっこいい。

クオンツ・テック人材に特化したサーチ会社Aspen Searchのサイトは、田の字の画面割りに巨大な社名と網点を収め、数字で考える顧客向けの硬質さを組み上げる。

BrunoStructure & IA

Testimonialsの右下に「01 - 09」って枚数を出してるんだよね。全部で何件あって、いまどこか、送る前にわかる。カルーセルって迷子になりがちだから、これはうまい。

1FVは田の字のグリッドに巨大な「Aspen」と網点の図像。装飾を削った硬さが、専門特化の姿勢を示す
2実績は「500+」「$1M-5M」「19+」の数字だけ。説明を足さない潔さが、かえって説得力になる
3ヘッダーの隅にLA／NYCの現在時刻を等幅で。計器のような細部が、精度へのこだわりを伝える

Color

Aspen Searchの配色

Typography

使用フォントと無料の代替

見出し・本文・ナビ

Aa あア

使用: Suisse Intl
代替: Inter Tight

ラベル・ボタン・時刻

Aa あア

使用: Suisse Intl Mono
代替: JetBrains Mono

実測タイプスケール1440px幅 · 2026-09-26 計測

特大見出しKatapick 型180.7px · 1 · 450
見出しKatapick 型16px · 1.3 · 450
小見出しKatapick 型37.9px · 1.1 · 450
本文The quick brown fox — 参考を型にする12px · 1.1 · 400
ボタンKatapick 型16px · 1.3 · 450

Structure

ページ構成（上から順）

01
固定ヘッダー
左端に黒い正方形のロゴマーク、隣に「10:49 AM LA」の時刻表示。右半分に About / Clients / Testimonials / Team のナビ、テーマ切替トグル、黒地の Contact ボタンを並べる。
02
ヒーロー
画面を田の字に区切り、左上に巨大な「Aspen」、右上と左下に網点のグラフィック、右下に黒パネルの紹介文とミントのパネル（採用実績企業のロゴ列）を置く。スクロールで「Search」「PLACING WINNERS.」の大見出しが続く。
03
About
等幅の小ラベル「ABOUT ASPEN」と、右側に大きめの本文で創業の考え方を1段落で述べるテキストブロック。
04
実績数値
「500+」「$1M-5M」「19+」の3つの数字を、黒・ミント・グレーの矩形に分けて段差をつけて配置する。
05
サービス領域
右寄せの大見出し「CONNECTING TOP-TIER TALENT」の横に、Quantitative Research など4領域を番号付きの黒パネルで積む。各パネルに線画の円形グラフィックと等幅の箇条書き、「TALK TO A PARTNER」ボタン。
06
Clients
巨大な「Clients」見出しと網点画像。下にクライアント名を罫線区切りのリストで並べ、右に業種ラベル。クライアントのブランドカラー（Headlands Tech の青など）の面が添えられる。
07
Testimonials
大きな引用文を中央に、左に矢印ボタンと抽象的なアバター図形、右の黒パネルに Position / Company を等幅で表示。右下に「01 - 09」の枚数表示。
08
Team
巨大な「Team」と「Small team. High Signal.」の見出し。モノクロの人物写真カードを4列で並べ、下端にミントの名前帯、右上に役職ラベルを付ける。
09
後続セクション・フッター
フルページキャプチャは9000pxで切れており、Team 以降のセクションとフッターは未確認（抽出データでは見出しのないセクションとフッターが続く）。

Interaction

アニメーション・インタラクション

網点のグラフィックは抽出データにある Three.js / WebGL のシェーダーで描画していると思われる。画像の輝度をドットの大きさに変換するハーフトーンシェーダーで再現でき、カーソル位置で濃度を揺らすと近い体験になる
ヘッダーの時刻はキャプチャ位置によって LA と NYC が切り替わっており、Intl.DateTimeFormat の timeZone 指定で2都市を交互に表示していると思われる
テーマ切替トグルは CSS カスタムプロパティ（--bg / --fg）を data-theme 属性で入れ替える方式で実装できる
ヒーローの採用実績ロゴは右端で見切れており、横に流れるマーキーと思われる。Testimonials と Team は左右矢印で送るカルーセル
Lenis による慣性スクロール。ロゴマークはキャプチャごとに形が変わって写っており、回転などのアニメーションがあると思われる

スクロールのコマ撮りLenis · 200–12800ms

検出された技術:Three.jsLenisNext.jsWebGL

Reproduce

再現するときのポイント

011px の罫線で区切った2〜4分割のタイルグリッドを全セクション共通の骨格にする
02色は白・#e0e0e0・#232323 の3段階に絞り、ミント #a1ffcb だけを数値や名前帯など見せたい面に使う
03見出しは字間を詰めた極大のグロテスク体、ラベル・ボタン・時刻は小さな等幅体に役割を分ける
04写真はモノクロに統一し、グラフィックは網点化して色数を増やさない

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全9セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

aspen-search.katapick.md

1---
2title: "Aspen Search 再現用デザイン仕様書"
3source: https://www.aspensearch.com/
4katapick: https://katapick.com/sites/aspen-search
5category: コーポレート
6region: 海外 (US)
7tags: [大胆なタイポ, グリッド, モノクロ, 3D/WebGL, 固定ナビ]
8launched: 2026-09
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 32
13generator: Katapick
14---
15 
16# Aspen Search — 再現用デザイン仕様書
17 
18> 罫線と網点だけで組んで、ちゃんと硬派でかっこいい。クオンツ・テック人材に特化したサーチ会社Aspen Searchのサイトは、田の字の画面割りに巨大な社名と網点を収め、数字で考える顧客向けの硬質さを組み上げる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22