humbulls

MODULE · WEBSITE

ホームページ制作実演

雑に作るパターンと、Research→Plan→Goalで作るパターンを比較する

別資料として本編に接続する実務モジュール

GOAL

このモジュールで体感する差

Pattern A

材料を一気に入れる

自分情報だけで、とりあえず作らせる。

Pattern B

下準備して作る

調査・ヒアリング・設計後に作る。

Compare

違いを見る

見た目、説得力、修正しやすさを比較する。

TWO PATTERNS

同じAIでも入れ方で変わる

適当に作る

自分の情報を雑に渡す

いきなりホームページ作成

それっぽいが、浅くなりやすい

工程で作る

調査・ヒアリングで材料を整理

ページごとに資料化

ワイヤーとデザインシステム後に実装

比較することで、受講者は“AIが悪い”ではなく材料と手順が足りないと理解できます。

GYUDON

牛丼もWeb制作も下準備で変わる

材料を全部まとめて鍋に入れても、牛丼っぽいものはできます。

でも肉は固く、玉ねぎは溶け、味付けはぼやける。

AI制作も同じ。材料と順番を整えないと、見た目だけになります。

下準備をすると、プロっぽい仕上がりに近づきます。

PRO WORKFLOW

プロっぽいWeb制作の順番

01

調査

競合・参考サイト・相場

02

ヒアリング

強み・顧客・目的

03

資料化

ページごとの原稿

04

設計

ワイヤー・デザインシステム

05

実装

制作・検証・修正

RESEARCH

Deep Researchで先に調べる

同業のホームページを10〜20件見る。

トップページ、サービス、料金、実績、FAQの構成を抜き出す。

参考URLとスクリーンショットを保存する。

価格帯・CTA・問い合わせ導線も見る。

INTERVIEW

AIに自分をヒアリングさせる

誰に売るのか。

自分の強みは何か。

相手は何に困っているのか。

問い合わせ前に何を信じてもらう必要があるか。

PAGE NOTES

ページごとにテキスト資料を作る

docs/page-notes/top.md ファーストビュー / ベネフィット / CTA docs/page-notes/service.md サービス内容 / 流れ / 料金 / よくある不安 docs/page-notes/profile.md 自己紹介 / 実績 / 信頼材料 docs/page-notes/faq.md よくある質問 / 回答方針

テキストが弱いままデザインに入ると、見た目だけになります。

WIREFRAME

デザイン前にワイヤーフレーム

どの順番で伝えるかを先に決める。

スマホの読み順を優先する。

CTAの位置を明確にする。

視線の流れと余白を確認する。

REFERENCE DESIGN

参考サイトはURLと画像で渡す

URLだけでなく、良いと思った理由も添える。

スクリーンショットを添付して、具体的に示す。

色・余白・写真・見出しのトーンを分けて見る。

丸パクリではなく、要素を分解して取り入れる。

DESIGN SYSTEM

デザインシステムを先に固める

色: メイン、サブ、背景、注意色。

文字: 見出し、本文、ボタン、余白。

部品: ボタン、カード、FAQ、CTA。

ルール: 角丸、影、画像の使い方。

IMPLEMENT GOAL

実装Goalは小さく渡す

まずトップページのファーストビューだけ。

次にCTA、サービス説明、FAQ。

PC/スマホ表示を都度確認。

差分を見てから次のGoalへ。

RESULT

出来上がりの違い

雑に作った版

雰囲気はある

誰向けか曖昧

修正指示が出しにくい

工程で作った版

訴求が明確

ページごとに根拠がある

修正しても崩れにくい

CWD / THREAD

Web制作CWDの分け方

`~/dev/my-website/` をCWDにする。

Research Thread: 調査と資料化。

Design Thread: 構成・ワイヤー・デザインシステム。

Build Thread: 実装・確認・修正。

同じCWDでも、目的が変わったらThreadを分けます。受け渡しはファイルで。

COMPACT

Compactに備えて復帰資料を残す

`task_plan.md` に現在地を書く。

`handoff.md` に次の作業を書く。

参考画像・URLを `docs/references/` に残す。

新Threadでは最初にそれらを読ませる。

PROMPT

実演用プロンプト

このCWDでホームページを作ります。いきなり実装しないでください。 1. まず競合・参考サイト調査に必要な観点を出す 2. 次に私へヒアリングする質問を出す 3. 回答後、docs/page-notes/ にページ別資料を作る 4. ワイヤーフレームとデザインシステムを提案する 5. 承認後に、最初の実装Goalだけ進める

humbulls Codex

材料を整えてから作ると、仕上がりが変わります。

栗田一輝 / Kazuki Kurita
[email protected]