Landing PageJapanPicked 2026.09.26

QuSS - 量子サイエンススクール（理化学研究所）

LPのWebデザイン参考 — 研究機関・教育プログラム

出典: quss.riken.jp

Editor's note — 編集部の視点

色を使わず、文字と細い円弧だけで組んでる。

理化学研究所が運営する量子科学の教育プログラム「QuSS（量子サイエンススクール）」のサイトは、縦長のセリフ体と明朝、細い円弧だけで組み、学術の緊張感を紙面のように伝える。

LunaType & Whitespace

About QuSSの英字見出し、90度寝かせて左に立ててる。右の明朝の本文は長めに素直に組むだけ。やってることは地味。でも、この左右の振り分けは……いいね！！

1幅の狭いセリフ体の「QuSS」を、FVの左半分ほどの大きさで。ロゴ自体が表紙の図版として立つ
2各コンテンツを左右の細い円弧で括弧のように囲む。端に添えた点まで含めて、学術図版のような精度が宿る
3写真は開催地を円形に切り抜いた2点だけ。グレーと黒白の画面で、その2点に自然と目が止まる

Color

QuSS - 量子サイエンススクール（理化学研究所）の配色

Typography

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

ロゴ・英字見出し

Aa あア

使用: Imbue
代替: Imbue

和文見出し・本文

Aa あア

使用: BIZ UDPMincho
代替: BIZ UDPMincho

英字の補助テキスト

Aa あア

使用: Noto Sans
代替: Noto Sans

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

特大見出しKatapick 型14px · 1.6 · 400
見出しKatapick 型14px · 1 · 400
小見出しKatapick 型14px · 1 · 400
本文The quick brown fox — 参考を型にする14px · 1.6 · 400
ボタンKatapick 型14px · 1.6 · 400

Structure

ページ構成（上から順）

01
ヘッダー
左に小さなロゴと4項目のテキストナビ、右に両端に点の付いた3本線のメニューボタン。
02
ファーストビュー
左上に大きな「QuSS」ロゴと英字・和文の名称、右下に下線付きの明朝体コピー2行、左下に英文の補足。下部に黒いピル型のニュースティッカー、右端に縦書きの「SCROLL DOWN」。
03
事業の説明
左右の円弧で囲んだ枠に、助成事業である旨の説明と運営団体のロゴを置く。
04
About QuSS
90度回転した縦向きの英字見出しを左に置き、右に明朝体の説明文を長めに組む。
05
Summer School
大きなセリフ体の見出しと説明文の下に、今年の開催概要（日程・場所・対象・参加費）を罫線なしの表で並べ、開催地の写真を円形に切り抜いて右に置く。過去回は Archive として小さく並べる。
06
海外サマースクール参加支援
明朝体の大見出しと説明文、円弧で囲んだ募集情報と黒いピル型の「more」ボタン。
07
卒業生交流会
明朝体の大見出しと説明文。下に円弧で囲んだ「COMING SOON...」の枠を置く。
08
フッター
画面幅いっぱいの特大ロゴ「QuSS」と英字名称、ナビ、問い合わせ先、運営団体のロゴとコピーライト。

Interaction

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

ファーストビュー下部のニュースは、黒いピルの中を横に流れるティッカー。CSS の @keyframes で translateX をループさせて再現できる
ロゴや見出しはスクロールで表示される演出がある可能性がある（静止画からは断定できない）。抽出データに JS ライブラリの検出はなく、あっても CSS や自前の IntersectionObserver 程度と思われる
3本線のメニューボタンは、端の点を含めて線を SVG で描き、開閉時に線を交差させるアニメーションにすると再現しやすい

スクロールのコマ撮り100–6000ms

QuSS - 量子サイエンススクール（理化学研究所）をスクロールしたときのフレーム1 — 01

QuSS - 量子サイエンススクール（理化学研究所）をスクロールしたときのフレーム2 — 02

QuSS - 量子サイエンススクール（理化学研究所）をスクロールしたときのフレーム3 — 03

QuSS - 量子サイエンススクール（理化学研究所）をスクロールしたときのフレーム4 — 04

QuSS - 量子サイエンススクール（理化学研究所）をスクロールしたときのフレーム5 — 05

QuSS - 量子サイエンススクール（理化学研究所）をスクロールしたときのフレーム6 — 06

検出された技術:Google Fonts

Reproduce

再現するときのポイント

01ロゴと英字見出しは Imbue のような幅の狭いディドーン系セリフ体を使い、ロゴは画面幅の4割程度まで大きくする
02和文は BIZ UDPMincho に揃え、FVのコピーには細い下線を引いて論文の強調のように見せる
03装飾は細い罫線・円弧・小さな点だけに限定し、色は背景のグレー・黒・白の3色に絞る
04セクション間の余白を大きくとり、1画面に1つの見出しを置くリズムで構成する

再現MDに含まれるもの

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

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

quss.katapick.md

1---
2title: "QuSS - 量子サイエンススクール（理化学研究所） 再現用デザイン仕様書"
3source: https://quss.riken.jp/
4katapick: https://katapick.com/sites/quss
5category: LP
6region: 国内 (JP)
7tags: [モノクロ, セリフ体, 大胆なタイポ, 余白, ミニマル, マーキー]
8launched: 2026-07
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 2/5
12estimated_hours: 16
13generator: Katapick
14---
15 
16# QuSS - 量子サイエンススクール（理化学研究所） — 再現用デザイン仕様書
17 
18> 色を使わず、文字と細い円弧だけで組んでる。理化学研究所が運営する量子科学の教育プログラム「QuSS（量子サイエンススクール）」のサイトは、縦長のセリフ体と明朝、細い円弧だけで組み、学術の緊張感を紙面のように伝える。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22