Personal Notes / センスではなく、構造でサイトを作る方法(AI利用) 2026年3月28日 著者プロフィール
Site Design — Structural Thinking

センスではなく、構造で
サイトを作る方法(AI利用)

感覚や職人技に依存していたWebサイト制作を、
構造化されたパラメータの組み合わせとして再設計する。
抽象化・分解・再合成によって、任意のサイトが生成できる。

6 分解できるデザイン要素
Step1 デザインを構造として扱う
Step2 ターゲット設計を掛け合わせる
— Core Statement

「良いサイトはセンスで作るものではない。 デザインの文法に分解でき、ターゲット設計と掛け合わせれば、 最適化されたサイトを即時ローンチできる。」

属人的な職人芸から、
再利用可能なデザインの設計資産へ。

それがこの発想の本質。

Core Insight

気づきの核心

まずデザインを構造として捉えられるようになる。その上にターゲット設計を乗せることで、初めて「機能するサイト」が生まれる。

デザインは分解・
抽象化・再合成できる

優れたサイトの見た目は6要素に分解できる。それをパラメータとして抽象化すれば、任意のトーン・色・構造を自由に再合成できる。感覚ではなく、扱える構造になる。

そこにターゲット設計を
掛け合わせる

デザインの抽象化だけでは「きれいなサイト」止まり。「誰に届けるか」の訴求軸を加えることで、見た目が初めて「刺さる設計」に変わる。この順番が重要。

個々人が欲しいサイトを
即時ローンチできる

2つが揃えば、どんなターゲット・訴求にも対応した最適なサイトをスピーディーに構築し、即日公開できる手法が完成する。これが発想の核心。

Decomposable Design Elements

デザインを構成する
6つの要素

他サイトからこの6要素を抽出・抽象化することで、自由に組み合わせて再構成できる。

01

トーン&ムード

サイト全体の空気感・感情的印象

例
高級親しみ専門的遊び心ミニマル
02

カラーパレット

ブランドの色彩体系・配色設計

例
60:30:10 の法則で設計
03

タイポグラフィ

フォント・サイズ体系・行間設計

例
Cormorant + DM Mono — 高級・知性系 見出し + 本文 和文は Noto / BIZ UDP 等
04

レイアウト構造

グリッド・カラム数・余白体系

例
1col / 2col / 3col の使い分け
05

サイト構成

ページ数・階層・ナビ設計

例
TOP
AboutWorksBlog
Detail
06

UIパーツ

ボタン・カード・フォーム等

例
お問い合わせ →
✦ 導線カード
本文テキスト
The 2-Stage Structure

2段構造で
考える

まず「デザインを構造として扱えるようにする」。その土台の上に「ターゲット設計」を乗せる。この順番が崩れると機能しない。

STAGE 01 — 土台

デザインを
構造として
扱えるようにする

他サイトの見た目を観察し、6要素に分解・抽象化してパラメータとして記述する。これにより「センス」が「定義可能な語彙」になり、自由に組み合わせて任意のデザインを再合成できるようになる。この段階だけでも、見た目の自由度は大きく広がる。

トーン&ムードカラーパレットタイポグラフィレイアウト構造サイト構成UIパーツ
+ 上乗せ
STAGE 02 — 上乗せ

ターゲット設計と
訴求軸を
掛け合わせる

「誰に・何を・どう届けるか」を定義し、Stage 01のデザイン設計に重ねる。この段階で初めて、見た目が「刺さる訴求力」に変わる。きれいなだけでなく、届く設計になる。

ペルソナ設計訴求軸の定義ゴール設計
OUTPUT

個々人が欲しいサイトを
即時ローンチ

2段が揃えば、どんなターゲット・訴求にも対応した最適なサイトを、スピーディーに構築し即日公開できる手法が完成する。再現性があり、何度でも使える。

高速構築即時ローンチ再現性あり
Before — 旧来のアプローチ

感覚・職人芸による
個別制作

制作者のセンスと経験に依存。再現性がない。

毎回ゼロから設計。時間コストが高い。

「なぜこのデザインか」の根拠が言語化されない。

デザインとターゲット設計が分離したまま議論される。

他サイトを参考にしても、何を取り出せばいいかわからない。

「見た目が良ければOK」という感覚頼りの評価。
なぜこのデザインなのか、根拠を言葉にできない。
After — 設計資産モデル

設計の言語化による
再利用と再合成

6要素に分解することで、デザインが語彙として扱える。

抽象化した設計資産を組み合わせて、高速に再構成できる。

「このデザインはこの訴求軸から導かれた」と説明できる。

デザイン設計とターゲット設計を分けて、順番に積み上げられる。

他サイトを観察するだけで、設計資産として取り出せる。

デザインとターゲットを順番に積み上げるため、方向性がブレない。

「その人に合う訴求と見た目を持ったサイトを
即時ローンチできる」手法への転換。
How It Works — Abstraction Flow

抽象化から
即時ローンチまでの流れ

(Step 1〜2)デザインを構造として扱えるようにする。
(Step 3)その後にターゲット設計を重ねる。

この順番が崩れると機能しない。

Step 01

参照サイト
の観察

気に入ったサイトを「センス」として終わらせず、「何が良いのか」を6要素の視点で言語化する起点にする。

例:Apple.com
→ 黒背景・ゴシック大・
 余白多・1カラム
Step 02

6要素への
分解・抽象化

観察した見た目を6要素に分解し、再利用可能なパラメータとして記述する。ここで「センスの言語化」が設計資産になる。

→ トーン:高級・クール
→ カラー:#000 / #fff
→ タイポ:San Francisco系
Step 03 — ここで初めて上乗せ

ターゲット設計
との統合

デザイン構造が確立した後で「誰に届けるか」を定義し重ねる。この順番が重要で、先に訴求を決めてもデザインに反映できない。

例:BtoBサービス
→ ペルソナ:40代経営者
→ 訴求軸:実績・信頼・ROI
→ ダークトーン × セリフ体
Step 04 — 完成

即時
ローンチ

定義済みの設計パラメータをもとに実装し、即日公開する。個々人が欲しいサイトが、この手法で手に入る。

例:Webサービス LP
→ 設計書をAIに渡し初稿生成
→ 人間が調整・確定
→ Netlify / Vercel で即日公開
— Part 1 Review —
デザインは感覚ではなく、構造として扱える。
6要素に分解し、パラメータ化し、自由に再合成できる。

そこにターゲット設計を重ねるだけで、
見た目が初めて「届く訴求力」を持つ。

では、この設計システムに
AIを組み込むと何が起きるか。
Part 2 では、2段構造 × AI活用によって
制作フローがどう変わるかを具体的に見ていく。
Site Design × AI — New Layer

AIを加えることで、
設計資産の活用が
さらに加速する。

6要素への分解・抽象化・再合成というフローは、AIとの協働によって劇的に高速化できる。人間の設計意図 × AIの出力速度で、即日ローンチが現実になる。

分析AIが6要素を即時抽出
生成プロンプトでデザイン再合成
検証訴求軸をAIで最適化
— Core Statement

「AIは設計を代替しない。設計の語彙を持った人間がAIを使うとき、初めて真価が発揮される。」

構造化された思考 × AI出力速度。
その掛け合わせが、即時ローンチを
誰でも再現できるものにする。

AI × Decomposable Design

AIで6要素を
即時抽出する

参照サイトをAIに渡すだけで6要素を言語化できる。センスで感じていたものが再利用可能なパラメータになる。

01

トーン&ムード

「このサイトの空気感を3語で表現して」

→ 高級感 / ミニマル / 信頼性

02

カラーパレット

「主要カラーを60:30:10で抽出して」

→ #1a1a1a / #2d5986 / #f8f7f5

03

タイポグラフィ

「フォント構成と印象の組み合わせを分析して」

→ Serif見出し + Sans本文 / 知性系

04

レイアウト構造

「グリッドと余白体系を言語化して」

→ 2カラム / 余白大 / 左揃え

05

サイト構成

「ページ構成と導線パターンを抽出して」

→ LP型 / FV→課題→解決→CTA

06

UIパーツ

「ボタンとカードの設計パターンを抽出して」

→ 角丸なし / 枠線細め / hover有

AI × 2-Stage Structure

2段構造に
AIを組み込む

各ステージでAIをどう使うかを明確にする。AIは設計の代替でなく、出力速度を上げるツール。

STAGE 01 — 土台

デザインを
構造として
扱えるようにする

参照サイトをAIに渡し、6要素を即時抽出・言語化する。センスで感じていたものがAIとの対話によって再利用可能なパラメータに変換される。従来数時間かかった分析が数分で完了する。

AI Prompt

「このサイトをトーン・カラー・タイポグラフィ・レイアウト・構成・UIパーツの6要素で分析し、再利用可能なパラメータとして箇条書きで出力してください」

+ 上乗せ
STAGE 02 — 上乗せ

ターゲット設計を
掛け合わせる

抽出した6要素パラメータにターゲット像・訴求軸を加え、AIに「刺さるデザイン設計」を生成させる。「誰に届けるか」という人間の判断をインプットに変え、AIが出力精度を上げる。

AI Prompt

「上記の設計資産を使い、40代中小企業経営者・BtoB・信頼重視のターゲットに最適なデザイン方針・配色・キャッチコピーの方向性を提案してください」

OUTPUT

即時ローンチ
できる設計

AIが出力した設計方針・コピー・構成案を元に、人間が最終判断してコーディング・公開。設計の意思決定はすべて人間が担い、AIは出力速度を劇的に高める役割に徹する。

Before — AI活用前

感覚と経験に
依存する制作

参照サイトを「なんとなく良い」で終わらせ、何を取り出すかわからない。

デザインの言語化に時間がかかり、クライアントへの説明も感覚頼り。

毎回ゼロから設計するため、類似案件でも再利用できない。

コピー・構成・デザインの整合性を取るのに複数回の修正が必要。

ターゲット設計とデザインが分離したまま議論され、方向性がブレる。

「時間をかけたのに、なぜ刺さらないのか理由が説明できない。」
After — AI活用後

構造化された設計
× AI出力速度

参照サイトをAIに渡すだけで6要素を即時言語化・パラメータ化できる。

設計の根拠が言語化されているため、クライアントへの説明が論理的になる。

抽出した設計資産を蓄積・再利用することで、類似案件のスピードが上がる。

コピー・構成・デザインをAIが整合性を保ちながら一括提案できる。

ターゲット設計をインプットにAIが最適なデザイン方針を出力する。

2段構造でターゲットとデザインが一貫するため、方向性のブレが起きない。

「なぜこのデザインかを説明できる。だから修正も最小限になる。」
AI-Integrated Flow

AIを組み込んだ
制作フロー

各ステップにAIを組み込むことで制作フローが短縮される。ただし設計の判断は人間が行う。

Step 01

参照サイトの観察

気に入ったサイトをAIに渡し、6要素の視点で言語化する起点にする。

AI: URLやSSから6要素を即時分析
Step 02

6要素の分解・抽象化

AIが抽出した要素を人間が精査・調整し、再利用可能な設計資産として定義する。

AI: パラメータ化・命名・整理を補助
Step 03 — 人間の判断

ターゲット設計の入力

誰に届けるか・訴求軸を人間が定義し、AIへのインプットとして与える。設計意図の決定は人間が担う。

Step 04

設計の再合成・提案

6要素 × ターゲット設計をAIが組み合わせ、デザイン方針・コピー・構成案を生成する。

AI: デザイン仕様・コピー・構成を生成
Step 05

人間が判断・確定

AIの出力を人間が評価・選択・調整して確定する。設計の最終判断は常に人間が行う。

AI: 複数案を提示 / 人間が選択
Step 06

即時ローンチ

確定した設計をもとにコーディング・公開。AIを使った実装補助でさらに短縮できる。

AI: コード生成・実装補助
AI-Assisted Target Design

ターゲット設計を
AIで深掘りする

Step 03「ターゲット設計」の具体的な進め方。Deep Researchとの壁打ちで、ペルソナからサイト構成まで一気に定義できる。

Step A — 市場理解

業界情報を
Deep Researchで収集

ターゲットの業界・市場動向・競合サイトをAIで一括調査。「どんな人が・何に困っていて・何を求めているか」の土台データを集める。

AI: Deep Research で業界レポート生成
→ 市場概況・ユーザー課題・競合訴求パターン
Step B — ターゲット定義

AIと壁打ちして
ターゲット像を絞る

「誰に売りたいか」をAIに話しかけながら対話的に定義する。自分の思い込みをAIが整理し、具体的なターゲット像に収束させる。

AI: ChatGPT / Claude と対話形式で壁打ち
→ ターゲット属性・課題・価値観・行動パターン
Step C — ペルソナ作成

ペルソナを
AIで一気に生成

Step Bの定義をもとにAIがペルソナを生成。名前・年齢・職業・悩み・情報収集行動まで具体化することで、設計判断の軸ができる。

AI: ペルソナシートを自動生成
→ 詳細ペルソナ(悩み・行動・求めること)
Step D — 導線設計

カスタマージャーニーで
サイト構成を決める

ペルソナがサイトに辿り着いてから行動するまでの道筋をAIで設計。どのページが必要で、どう誘導するかが自然に決まる。

AI: CJMをもとにページ構成・導線を提案
→ ページ一覧・CTA設計・情報構造
OUTPUT

ターゲット設計の
完成セット

この4ステップで得た「ペルソナ・課題・導線・ページ構成」をStep 04の設計再合成に渡す。AIが6要素と掛け合わせ、ターゲットに最適化されたデザイン方針を一気に生成できる。

ペルソナ確定 訴求軸定義 ページ構成 CTA設計
AI Utilization — Points & Cautions

AI活用の
ポイントと注意点

設計資産の考え方を持った上でAIを使うことで、出力の質が格段に上がる。

Point 01 — 有効な使い方

構造化された指示が
AIの出力質を決める

「良い感じのサイトを作って」ではなく、「6要素のパラメータとターゲット設計を渡した上で最適なデザイン方針を提案して」のように構造化されたインプットを与えることでAIの出力精度が劇的に上がる。設計語彙を持つ人間だけがAIを正しく使いこなせる。

Point 02 — 蓄積の価値

設計資産ライブラリが
競争優位になる

AIで抽出・言語化した6要素パラメータを蓄積していくことで、独自の設計資産ライブラリが育つ。例えば「医療×信頼×ネイビー×明朝体」「EC×親しみ×オレンジ×サンセリフ」のようにテンプレートが蓄積され、新規案件への初動が劇的に速くなる。

Caution 01 — やってはいけないこと

設計意図なしに
AIに丸投げしない

「ターゲットも設計資産も定義せず、AIにすべて任せる」のは最悪のアプローチ。AIは設計の語彙がないと平均的なアウトプットしか出せない。土台となる構造化思考なしにAIを使うと、「なぜこのデザインか」が説明できない状態に逆戻りする。

Caution 02 — 判断の所在

最終判断は
必ず人間が行う

AIは高速な提案ツールであり、設計の意思決定者ではない。「誰に届けるか」という本質的な判断は人間が担う。AIの出力を鵜呑みにせず、設計原則に照らして人間が評価・選択・調整する姿勢が最終的な品質を保証する。

— AI × Structural Thinking —

設計の語彙を持った人間が、
AIを使うとき、本当の加速が起きる。

6要素に分解し、ターゲット設計を定義し、
AIに構造化された指示を与える。

それが、誰でも再現できる
即時ローンチの設計システムになる。

センスを言語化し、AIと組み合わせる。
6要素の設計資産 × AI出力速度。
この掛け合わせが、あなたのサイト制作を
再現可能なシステムへと変える。

01 / 15
Site Design — Structural Thinking

センスではなく、構造で
サイトを作る方法。

感覚や職人技に依存していたWebサイト制作を、
構造化されたパラメータの組み合わせとして再設計する。
抽象化・分解・再合成によって、任意のサイトが生成できる。

6 分解できるデザイン要素
Step1 デザインを構造として扱う
Step2 ターゲット設計を掛け合わせる
— Core Statement

「良いサイトはセンスで作るものではない。 デザインの文法に分解でき、ターゲット設計と掛け合わせれば、 最適化されたサイトを即時ローンチできる。」

属人的な職人芸から、
再利用可能なデザインの設計資産へ。

それがこの発想の本質。

01
Core Insight

気づきの核心

まずデザインを構造として捉えられるようになる。その上にターゲット設計を乗せることで、初めて「機能するサイト」が生まれる。

デザインは分解・
抽象化・再合成できる

優れたサイトの見た目は6要素に分解できる。それをパラメータとして抽象化すれば、任意のトーン・色・構造を自由に再合成できる。感覚ではなく、扱える構造になる。

そこにターゲット設計を
掛け合わせる

デザインの抽象化だけでは「きれいなサイト」止まり。「誰に届けるか」の訴求軸を加えることで、見た目が初めて「刺さる設計」に変わる。この順番が重要。

個々人が欲しいサイトを
即時ローンチできる

2つが揃えば、どんなターゲット・訴求にも対応した最適なサイトをスピーディーに構築し、即日公開できる手法が完成する。これが発想の核心。

02
Decomposable Design Elements

デザインを構成する
6つの要素

他サイトからこの6要素を抽出・抽象化することで、自由に組み合わせて再構成できる。

01

トーン&ムード

サイト全体の空気感・感情的印象

例
高級親しみ専門的遊び心ミニマル
02

カラーパレット

ブランドの色彩体系・配色設計

例
60:30:10 の法則で設計
03

タイポグラフィ

フォント・サイズ体系・行間設計

例
Cormorant + DM Mono — 高級・知性系 見出し + 本文 和文は Noto / BIZ UDP 等
04

レイアウト構造

グリッド・カラム数・余白体系

例
1col / 2col / 3col の使い分け
05

サイト構成

ページ数・階層・ナビ設計

例
TOP
AboutWorksBlog
Detail
06

UIパーツ

ボタン・カード・フォーム等

例
お問い合わせ →
✦ 導線カード
本文テキスト
03
The 2-Stage Structure

2段構造で
考える

まず「デザインを構造として扱えるようにする」。その土台の上に「ターゲット設計」を乗せる。この順番が崩れると機能しない。

STAGE 01 — 土台

デザインを
構造として
扱えるようにする

他サイトの見た目を観察し、6要素に分解・抽象化してパラメータとして記述する。これにより「センス」が「定義可能な語彙」になり、自由に組み合わせて任意のデザインを再合成できるようになる。この段階だけでも、見た目の自由度は大きく広がる。

トーン&ムードカラーパレットタイポグラフィレイアウト構造サイト構成UIパーツ
+ 上乗せ
STAGE 02 — 上乗せ

ターゲット設計と
訴求軸を
掛け合わせる

「誰に・何を・どう届けるか」を定義し、Stage 01のデザイン設計に重ねる。この段階で初めて、見た目が「刺さる訴求力」に変わる。きれいなだけでなく、届く設計になる。

ペルソナ設計訴求軸の定義ゴール設計
OUTPUT

個々人が欲しいサイトを
即時ローンチ

2段が揃えば、どんなターゲット・訴求にも対応した最適なサイトを、スピーディーに構築し即日公開できる手法が完成する。再現性があり、何度でも使える。

高速構築即時ローンチ再現性あり
04
Before — 旧来のアプローチ

感覚・職人芸による
個別制作

制作者のセンスと経験に依存。再現性がない。

毎回ゼロから設計。時間コストが高い。

「なぜこのデザインか」の根拠が言語化されない。

デザインとターゲット設計が分離したまま議論される。

他サイトを参考にしても、何を取り出せばいいかわからない。

「見た目が良ければOK」という感覚頼りの評価。
なぜこのデザインなのか、根拠を言葉にできない。
After — 設計資産モデル

設計の言語化による
再利用と再合成

6要素に分解することで、デザインが語彙として扱える。

抽象化した設計資産を組み合わせて、高速に再構成できる。

「このデザインはこの訴求軸から導かれた」と説明できる。

デザイン設計とターゲット設計を分けて、順番に積み上げられる。

他サイトを観察するだけで、設計資産として取り出せる。

デザインとターゲットを順番に積み上げるため、方向性がブレない。

「その人に合う訴求と見た目を持ったサイトを
即時ローンチできる」手法への転換。
05
How It Works — Abstraction Flow

抽象化から
即時ローンチまでの流れ

(Step 1〜2)デザインを構造として扱えるようにする。
(Step 3)その後にターゲット設計を重ねる。

この順番が崩れると機能しない。

Step 01

参照サイト
の観察

気に入ったサイトを「センス」として終わらせず、「何が良いのか」を6要素の視点で言語化する起点にする。

例:Apple.com
→ 黒背景・ゴシック大・
 余白多・1カラム
Step 02

6要素への
分解・抽象化

観察した見た目を6要素に分解し、再利用可能なパラメータとして記述する。ここで「センスの言語化」が設計資産になる。

→ トーン:高級・クール
→ カラー:#000 / #fff
→ タイポ:San Francisco系
Step 03 — ここで初めて上乗せ

ターゲット設計
との統合

デザイン構造が確立した後で「誰に届けるか」を定義し重ねる。この順番が重要で、先に訴求を決めてもデザインに反映できない。

例:BtoBサービス
→ ペルソナ:40代経営者
→ 訴求軸:実績・信頼・ROI
→ ダークトーン × セリフ体
Step 04 — 完成

即時
ローンチ

定義済みの設計パラメータをもとに実装し、即日公開する。個々人が欲しいサイトが、この手法で手に入る。

例:Webサービス LP
→ 設計書をAIに渡し初稿生成
→ 人間が調整・確定
→ Netlify / Vercel で即日公開
06
— Part 1 Review —
デザインは感覚ではなく、構造として扱える。
6要素に分解し、パラメータ化し、自由に再合成できる。

そこにターゲット設計を重ねるだけで、
見た目が初めて「届く訴求力」を持つ。

では、この設計システムに
AIを組み込むと何が起きるか。
Part 2 では、2段構造 × AI活用によって
制作フローがどう変わるかを具体的に見ていく。
07
Site Design × AI — New Layer

AIを加えることで、
設計資産の活用が
さらに加速する。

6要素への分解・抽象化・再合成というフローは、AIとの協働によって劇的に高速化できる。人間の設計意図 × AIの出力速度で、即日ローンチが現実になる。

分析AIが6要素を即時抽出
生成プロンプトでデザイン再合成
検証訴求軸をAIで最適化
— Core Statement

「AIは設計を代替しない。設計の語彙を持った人間がAIを使うとき、初めて真価が発揮される。」

構造化された思考 × AI出力速度。
その掛け合わせが、即時ローンチを
誰でも再現できるものにする。

08
AI × Decomposable Design

AIで6要素を
即時抽出する

参照サイトをAIに渡すだけで6要素を言語化できる。センスで感じていたものが再利用可能なパラメータになる。

01

トーン&ムード

「このサイトの空気感を3語で表現して」

→ 高級感 / ミニマル / 信頼性

02

カラーパレット

「主要カラーを60:30:10で抽出して」

→ #1a1a1a / #2d5986 / #f8f7f5

03

タイポグラフィ

「フォント構成と印象の組み合わせを分析して」

→ Serif見出し + Sans本文 / 知性系

04

レイアウト構造

「グリッドと余白体系を言語化して」

→ 2カラム / 余白大 / 左揃え

05

サイト構成

「ページ構成と導線パターンを抽出して」

→ LP型 / FV→課題→解決→CTA

06

UIパーツ

「ボタンとカードの設計パターンを抽出して」

→ 角丸なし / 枠線細め / hover有

09
AI × 2-Stage Structure

2段構造に
AIを組み込む

各ステージでAIをどう使うかを明確にする。AIは設計の代替でなく、出力速度を上げるツール。

STAGE 01 — 土台

デザインを
構造として
扱えるようにする

参照サイトをAIに渡し、6要素を即時抽出・言語化する。センスで感じていたものがAIとの対話によって再利用可能なパラメータに変換される。従来数時間かかった分析が数分で完了する。

AI Prompt

「このサイトをトーン・カラー・タイポグラフィ・レイアウト・構成・UIパーツの6要素で分析し、再利用可能なパラメータとして箇条書きで出力してください」

+ 上乗せ
STAGE 02 — 上乗せ

ターゲット設計を
掛け合わせる

抽出した6要素パラメータにターゲット像・訴求軸を加え、AIに「刺さるデザイン設計」を生成させる。「誰に届けるか」という人間の判断をインプットに変え、AIが出力精度を上げる。

AI Prompt

「上記の設計資産を使い、40代中小企業経営者・BtoB・信頼重視のターゲットに最適なデザイン方針・配色・キャッチコピーの方向性を提案してください」

OUTPUT

即時ローンチ
できる設計

AIが出力した設計方針・コピー・構成案を元に、人間が最終判断してコーディング・公開。設計の意思決定はすべて人間が担い、AIは出力速度を劇的に高める役割に徹する。

10
Before — AI活用前

感覚と経験に
依存する制作

参照サイトを「なんとなく良い」で終わらせ、何を取り出すかわからない。

デザインの言語化に時間がかかり、クライアントへの説明も感覚頼り。

毎回ゼロから設計するため、類似案件でも再利用できない。

コピー・構成・デザインの整合性を取るのに複数回の修正が必要。

ターゲット設計とデザインが分離したまま議論され、方向性がブレる。

「時間をかけたのに、なぜ刺さらないのか理由が説明できない。」
After — AI活用後

構造化された設計
× AI出力速度

参照サイトをAIに渡すだけで6要素を即時言語化・パラメータ化できる。

設計の根拠が言語化されているため、クライアントへの説明が論理的になる。

抽出した設計資産を蓄積・再利用することで、類似案件のスピードが上がる。

コピー・構成・デザインをAIが整合性を保ちながら一括提案できる。

ターゲット設計をインプットにAIが最適なデザイン方針を出力する。

2段構造でターゲットとデザインが一貫するため、方向性のブレが起きない。

「なぜこのデザインかを説明できる。だから修正も最小限になる。」
11
AI-Integrated Flow

AIを組み込んだ
制作フロー

各ステップにAIを組み込むことで制作フローが短縮される。ただし設計の判断は人間が行う。

Step 01

参照サイトの観察

気に入ったサイトをAIに渡し、6要素の視点で言語化する起点にする。

AI: URLやSSから6要素を即時分析
Step 02

6要素の分解・抽象化

AIが抽出した要素を人間が精査・調整し、再利用可能な設計資産として定義する。

AI: パラメータ化・命名・整理を補助
Step 03 — 人間の判断

ターゲット設計の入力

誰に届けるか・訴求軸を人間が定義し、AIへのインプットとして与える。設計意図の決定は人間が担う。

Step 04

設計の再合成・提案

6要素 × ターゲット設計をAIが組み合わせ、デザイン方針・コピー・構成案を生成する。

AI: デザイン仕様・コピー・構成を生成
Step 05

人間が判断・確定

AIの出力を人間が評価・選択・調整して確定する。設計の最終判断は常に人間が行う。

AI: 複数案を提示 / 人間が選択
Step 06

即時ローンチ

確定した設計をもとにコーディング・公開。AIを使った実装補助でさらに短縮できる。

AI: コード生成・実装補助
12
AI-Assisted Target Design

ターゲット設計を
AIで深掘りする

Step 03「ターゲット設計」の具体的な進め方。Deep Researchとの壁打ちで、ペルソナからサイト構成まで一気に定義できる。

Step A — 市場理解

業界情報を
Deep Researchで収集

ターゲットの業界・市場動向・競合サイトをAIで一括調査。「どんな人が・何に困っていて・何を求めているか」の土台データを集める。

AI: Deep Research で業界レポート生成
→ 市場概況・ユーザー課題・競合訴求パターン
Step B — ターゲット定義

AIと壁打ちして
ターゲット像を絞る

「誰に売りたいか」をAIに話しかけながら対話的に定義する。自分の思い込みをAIが整理し、具体的なターゲット像に収束させる。

AI: ChatGPT / Claude と対話形式で壁打ち
→ ターゲット属性・課題・価値観・行動パターン
Step C — ペルソナ作成

ペルソナを
AIで一気に生成

Step Bの定義をもとにAIがペルソナを生成。名前・年齢・職業・悩み・情報収集行動まで具体化することで、設計判断の軸ができる。

AI: ペルソナシートを自動生成
→ 詳細ペルソナ(悩み・行動・求めること)
Step D — 導線設計

カスタマージャーニーで
サイト構成を決める

ペルソナがサイトに辿り着いてから行動するまでの道筋をAIで設計。どのページが必要で、どう誘導するかが自然に決まる。

AI: CJMをもとにページ構成・導線を提案
→ ページ一覧・CTA設計・情報構造
OUTPUT

ターゲット設計の
完成セット

この4ステップで得た「ペルソナ・課題・導線・ページ構成」をStep 04の設計再合成に渡す。AIが6要素と掛け合わせ、ターゲットに最適化されたデザイン方針を一気に生成できる。

ペルソナ確定 訴求軸定義 ページ構成 CTA設計
13
AI Utilization — Points & Cautions

AI活用の
ポイントと注意点

設計資産の考え方を持った上でAIを使うことで、出力の質が格段に上がる。

Point 01 — 有効な使い方

構造化された指示が
AIの出力質を決める

「良い感じのサイトを作って」ではなく、「6要素のパラメータとターゲット設計を渡した上で最適なデザイン方針を提案して」のように構造化されたインプットを与えることでAIの出力精度が劇的に上がる。設計語彙を持つ人間だけがAIを正しく使いこなせる。

Point 02 — 蓄積の価値

設計資産ライブラリが
競争優位になる

AIで抽出・言語化した6要素パラメータを蓄積していくことで、独自の設計資産ライブラリが育つ。例えば「医療×信頼×ネイビー×明朝体」「EC×親しみ×オレンジ×サンセリフ」のようにテンプレートが蓄積され、新規案件への初動が劇的に速くなる。

Caution 01 — やってはいけないこと

設計意図なしに
AIに丸投げしない

「ターゲットも設計資産も定義せず、AIにすべて任せる」のは最悪のアプローチ。AIは設計の語彙がないと平均的なアウトプットしか出せない。土台となる構造化思考なしにAIを使うと、「なぜこのデザインか」が説明できない状態に逆戻りする。

Caution 02 — 判断の所在

最終判断は
必ず人間が行う

AIは高速な提案ツールであり、設計の意思決定者ではない。「誰に届けるか」という本質的な判断は人間が担う。AIの出力を鵜呑みにせず、設計原則に照らして人間が評価・選択・調整する姿勢が最終的な品質を保証する。

14
— AI × Structural Thinking —

設計の語彙を持った人間が、
AIを使うとき、本当の加速が起きる。

6要素に分解し、ターゲット設計を定義し、
AIに構造化された指示を与える。

それが、誰でも再現できる
即時ローンチの設計システムになる。

センスを言語化し、AIと組み合わせる。
6要素の設計資産 × AI出力速度。
この掛け合わせが、あなたのサイト制作を
再現可能なシステムへと変える。

15