# AI in Design Report 2026｜LPのWebデザイン参考

> 章ごとに背景色が変わるから、迷わない。調査レポートサイト「AI in Design Report 2026」は、Tools・Craft・Teamsの3章をオレンジ・ラベンダー・セージで塗り分け、長い報告書を色で読み分けさせる。

- URL: https://stateofaidesign.com/
- 解説ページ: https://katapick.com/sites/ai-in-design-report-2026
- カテゴリ: LP / 地域: 海外（US）/ 業種: 調査レポート（デザイン×AI）
- テイスト: 大胆なタイポ、スクロール演出、等幅フォント、写真主体、ロングページ
- 公開・リニューアル: 2026-08 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 24 時間）

## 編集部のひとこと（Luna）
見出しも本文もBeausite Classic一本で、太さはRegularとMediumだけ。ケチってるのかと思ったら、サイズの差だけで全部さばいてる。……いいね！！

## デザインの見どころ
- FVは上半分をにじんだ画像のコラージュ、下半分を巨大な題字に。感性と報告書の顔を上下で分けている
- 3章は章番号・要約・目次リスト・黒いCTAを同じ型で反復。変わるのは色だけなので、構造がすぐ飲み込める
- 職種ラベルやクレジットはGeist Monoの等幅。調査データらしい客観性を、小さな文字が引き受けている

## 配色
- #ffffff White（背景）
- #000000 Black（テキスト / CTAボタン / 引用パネル）
- #fe7141 Tangerine（01 Tools 章 / ヘッダーのボタン）
- #cdabfe Lavender（02 Craft 章 / 数値パネル）
- #d1ddd3 Sage（03 Teams 章 / 数値・引用パネル）
- #f0ff1c Electric Yellow（アクセント（抽出データのみ。キャプチャ範囲では表示箇所を確認できず））

## フォント
- 見出し・本文（Regular / Medium）: Beausite Classic（代替: Inter Tight）
- ラベル・クレジット: Geist Mono（代替: Geist Mono）

## よくある質問
### AI in Design Report 2026のサイトで使われているフォントは？
見出しと本文に Beausite Classic（Regular / Medium）、ラベルに Geist Mono が使われています。Geist Mono は Google Fonts で無料、Beausite Classic の代わりには Inter Tight が近い印象です。

### このサイトは何で作られている？
抽出データでは Framer で構築されています。章カードの重なりやスライダーなども Framer の標準機能とスクロール効果で組める範囲の構成です。

### 調査レポートをWebで見せるときの参考になる点は？
章ごとに色を割り当て、各章の冒頭に「この章で扱うこと」のリストと読むボタンを置いている点です。長い調査結果でも全体像を先に見せてから詳細へ誘導できます。

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