Landing PageOverseas / USPicked 2026.09.26

AI in Design Report 2026

LPのWebデザイン参考 — 調査レポート（デザイン×AI）

出典: stateofaidesign.com

Editor's note — 編集部の視点

章ごとに背景色が変わるから、迷わない。

調査レポートサイト「AI in Design Report 2026」は、Tools・Craft・Teamsの3章をオレンジ・ラベンダー・セージで塗り分け、長い報告書を色で読み分けさせる。

LunaType & Whitespace

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

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

Color

AI in Design Report 2026の配色

Typography

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

見出し・本文（Regular / Medium）

Aa あア

使用: Beausite Classic
代替: Inter Tight

ラベル・クレジット

Aa あア

使用: Geist Mono
代替: Geist Mono

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

特大見出しKatapick 型120px · 0.95 · 500
見出しKatapick 型40px · 1.1 · 500
小見出しKatapick 型20px · 1.2 · 400
本文The quick brown fox — 参考を型にする16px · 1.4 · 400
ボタンKatapick 型12px · — · 400

Structure

ページ構成（上から順）

01
ヘッダー
左端に黒地のロゴ「AiiD26」、続けてオレンジ地の「Read the Report +」、右に About と「Case Studies +」を置く帯状のヘッダー。
02
ヒーロー
上半分は抽象画像の矩形を重ねたコラージュに職種ラベルを添え、下半分は左に小さなリード文、右に2行の巨大な「AI in Design Report 2026」。最下部に等幅のクレジットと「Scroll to read ↓」。
03
パートナー
等幅ラベル「OUR PARTNERS」の下に、Notion・Framer・Linear など7社のロゴを罫線の間に1列で並べる。
04
イントロダクション
「AN INFLECTION POINT」のラベルと大きな一文のステートメント。人物写真の上に「318+」「8+」の数値パネルを重ね、右寄せの本文で調査概要を説明する。
05
引用
黒パネルに小さな顔写真と名前・肩書き、セージ地に大きな引用文を置く2分割のブロック。
06
01 Tools / 02 Craft / 03 Teams
章ごとに背景色を変え、左に大きな章番号と章名、右に章タイトルと要約。下段に画像と「IN THIS CHAPTER, WE'LL COVER:」の罫線付きリスト、全幅に近い黒の「Read the ○○ Chapter →」ボタン。
07
Video Case Studies
「Seven companies. Seven ways of…」の見出しと左右矢印、企業別の動画サムネイルを3列で並べ、下にラベンダーの線。続いて「COMING SOON」の大きな動画プレイヤー。
08
登録・Methodology・フッター
フルページキャプチャは9000pxで切れており、抽出データの見出しから、ケーススタディとMarkdown版レポートの登録導線、調査方法（Methodology）が続くことのみ確認できる。

Interaction

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

3つの章ブロックはフルページキャプチャで次の章が前の章の下端に重なって写っており、position: sticky で章カードを積み重ねていく演出と思われる
ヒーローのコラージュはPC・SP・フルページで写っている画像が異なり、映像または画像の切替アニメーションと思われる。Framer の Video / Ticker コンポーネントか、CSS の animation で矩形ごとに差し替えると再現できる
Video Case Studies は左右矢印で送る横スライダー。Framer の Slideshow か、Swiper の navigation で同等の実装ができる
ヘッダーの「Read the Report +」「Case Studies +」は「+」の付いたボタンで、章や事例の一覧を開くドロップダウンと思われる

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

AI in Design Report 2026をスクロールしたときのフレーム1 — 01

AI in Design Report 2026をスクロールしたときのフレーム2 — 02

AI in Design Report 2026をスクロールしたときのフレーム3 — 03

AI in Design Report 2026をスクロールしたときのフレーム4 — 04

AI in Design Report 2026をスクロールしたときのフレーム5 — 05

AI in Design Report 2026をスクロールしたときのフレーム6 — 06

検出された技術:Framer

Reproduce

再現するときのポイント

01章ごとに1色（#fe7141 / #cdabfe / #d1ddd3）を割り当て、白と黒は共通の地とボタンに使う
02章ブロックを「大きな章番号＋要約＋目次リスト＋黒CTA」の同じテンプレートで繰り返し、長いレポートでも迷わせない
03見出しは字間を詰めた大きなグロテスク体、ラベルとクレジットは小さな等幅体で編集物らしい階層をつくる
04数値は写真の上に色面パネルで重ね、1パネル1数値に絞る

再現MDに含まれるもの

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

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

ai-in-design-report-2026.katapick.md

1---
2title: "AI in Design Report 2026 再現用デザイン仕様書"
3source: https://stateofaidesign.com/
4katapick: https://katapick.com/sites/ai-in-design-report-2026
5category: LP
6region: 海外 (US)
7tags: [大胆なタイポ, スクロール演出, 等幅フォント, 写真主体, ロングページ]
8launched: 2026-08
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 24
13generator: Katapick
14---
15 
16# AI in Design Report 2026 — 再現用デザイン仕様書
17 
18> 章ごとに背景色が変わるから、迷わない。調査レポートサイト「AI in Design Report 2026」は、Tools・Craft・Teamsの3章をオレンジ・ラベンダー・セージで塗り分け、長い報告書を色で読み分けさせる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22