# QuSS - 量子サイエンススクール（理化学研究所）｜LPのWebデザイン参考

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

- URL: https://quss.riken.jp/
- 解説ページ: https://katapick.com/sites/quss
- カテゴリ: LP / 地域: 国内（JP）/ 業種: 研究機関・教育プログラム
- テイスト: モノクロ、セリフ体、大胆なタイポ、余白、ミニマル、マーキー
- 公開・リニューアル: 2026-07 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 2/5（目安 16 時間）

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

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

## 配色
- #f0f0ee Paper Gray（背景）
- #000000 Black（テキスト・ロゴ・罫線）
- #303030 Graphite（ニュースティッカーの地（スクショから採色））
- #ffffff White（ティッカー・ボタンの文字）
- #e6e6e6 Mist Gray（背景のグラデーション（スクショから採色））

## フォント
- ロゴ・英字見出し: Imbue（代替: Imbue）
- 和文見出し・本文: BIZ UDPMincho（代替: BIZ UDPMincho）
- 英字の補助テキスト: Noto Sans（代替: Noto Sans）

## よくある質問
### QuSSのサイトで使われているフォントは？
ロゴと英字見出しに Imbue、和文に BIZ UDPMincho、英字の補助に Noto Sans が使われています。3書体とも Google Fonts で無料で利用できます。

### 研究機関らしい知的な印象を出すには？
色をモノクロに絞り、セリフ体と明朝体で組み、装飾は細い罫線や円弧だけにする方法が参考になります。写真を最小限にしてタイポグラフィで見せると、エディトリアルな印象になります。

### QuSSのデザインはどんな業種の参考になる？
大学・研究機関の教育プログラム、学会やシンポジウム、スクールの募集サイトなど、情報量はそれほど多くないが信頼感と格調を出したいサイトの参考になります。

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