LP制作のための熱量ハーネス -人の熱量を、AIとの制作につなぐ-

「Design Harness 2」の登壇資料

AIの馬力に人の熱量をつなぐ。LP制作を題材に、デザイナーだけに閉じないデザインハーネスを紹介します。

Transcript

1. Design Harness 2 LP 制作のための 熱量ハーネス 人の熱量を、AIとの制作につなぐ ファインディ株式会社 デザイナー 西川 紘平 @niccy
2. Philosophy 経営理念 つくる人がもっとかがやけば、 世界はきっと豊かになる。 Vision Our Business 事業一覧 ビジョン 挑戦するエンジニアの プラットフォームをつくる 事業開始：2016年7月 社員数：478名（2026年1月時点）
3. ファインディ株式会社 デザイナー 西川 紘平 カヤック・LINEなどを経て、ファインディにジョイン @niccy
4. ファインディ株式会社 デザイナー 西川・デザインハーネス・紘平 カヤック・LINEなどを経て、ファインディにジョイン 先代、弊社の向からデザインハーネスを引き継ぎました。 @niccy
5. 登壇に先駆け “ハーネス” 体験してきました
6. ファインディ株式会社 デザイナー 西川・デザインハーネス・紘平 カヤック・LINEを経てファインディにジョイン 先代、弊社の向からデザインハーネスを引き継ぎました。 @niccy
7. では、本題
8. 今日のテーマは ?
12. LP をつくるための デザインハーネス
14. 今日のお品書き 1 AIでLPは簡単になった 2 AIだけでは熱量が届けられない 3 熱量をつなぐデザインハーネス
15. AI でいろんなものが つくりやすくなりました
16. でもみなさん気づいてますよね ?
17. 熱量
18. 熱量
19. AI お食事画像も お客さんに出すのこれでいいという判断
20. 飲み屋の商品画像も お客さんに出すのこれでいいという判断
21. AI Slop も 読み手を意識せずこれくらいで出しちゃえ
22. 熱量
23. そして LP も
24. ✅️たった 5 分で完成 ✅️もうデザイナーいらない ✅️ポン出しでこのクオリティ
25. そんなわけない！
26. でも
27. つくるを高速化するという 時代の流れは止まらない
28. はやくつくる × 熱量を伝える
29. 作りました
30. 熱量を伝える デザインハーネス
31. 熱量をつなぐ、3つのステップ 1 Brief 熱量をそろえる 2 Story 伝え方を選ぶ 3 Wireframe 熱量を形にする
32. デザインハーネス — 4層モデル 4 3 2 1 制約 トークン・コンポーネント・パターン 2 コンテキスト 原則・利用者・既存画面 3 検証 アクセシビリティ・はみ出し 1 4 デザインハーネスの4層 出典：こぎそさん「PdEConf2026 Design Harness」p.18をもとに再構成 導線・認知負荷 評価・フィードバック レビュー指摘・ルール・チェック
33. 4つの働きを、3つの工程で Brief Story Wireframe 制約 推測で埋めない 確認した目的を守る 話の流れを守る コンテキスト 依頼内容と人の回答 ブリーフ・型・評価知見 ストーリー・セクション型 検証 情報の不足を確認 案の違いと根拠を比較 配置・強弱・情報量を確認 評価・FB 人が補い、確定 人が選び、理由を残す 人が選び、修正
34. ブリーフで、届けたい熱量をそろえる 1 Brief 熱量をそろえる 2 Story 伝え方を選ぶ 3 Wireframe 熱量を形にする
35. STEP 1 BRIEF まず、何を確かめる？ 届ける相手 誰の何を解決するか 訪れた理由 何を期待して来るか 伝える価値 何が得られるか してほしい行動 次にどう動いてほしいか
36. STEP 1 BRIEF 熱量をそろえる、確認項目の一部 届ける相手 訪れた理由 伝える価値 してほしい行動 ✅️対象読者 ✅️置かれた状況 ✅️いまの課題 ✅️最大の障壁 ✅️実現したい状態 ✅️流入元 ✅️見た広告・メール ✅️検索した言葉 ✅️期待していること ✅️最初に知りたいこと ✅️解決できること ✅️得られる価値 ✅️他との違い ✅️実績・数値 ✅️事例・顧客の声 ✅️主要なCTA ✅️行動後の流れ ✅️行動に必要な情報 ✅️必ず載せる情報 ✅️表現上のNG・制約 全72項目
37. STEP 1 BRIEF 施策のPRDをハーネスに読み込ませると 68 52 24 40 届ける相手 訪れた理由 伝える価値 足りない情報は、依頼者に確認 してほしい行動
38. この不足を埋めるのは
39. 人の力
40. STEP 1 BRIEF 人に聞いて、ブリーフを完成させる 依頼情報 ＋ 人の チェック → そしてストーリーへ… 完成した ブリーフ
41. ストーリーで、熱量の伝え方を選ぶ 1 Brief 熱量をそろえる 2 Story 伝え方を選ぶ 3 Wireframe 熱量を形にする
42. STEP 2 STORY ストーリーには、型がある AIDA 注意から行動へ PAS BAB 課題から解決へ 比較・選定 違いから選ぶ 変化を見せる 証拠先行 根拠から伝える 課題啓発 問題への気づき オファー直結 行動の条件から 型は、伝える順番の骨格をくれる。
43. LP100 サイト ひたすら評価
44. 人力で
45. 100 サイトを見て得た 良し悪しの判断を 型に加える
46. STEP 2 STORY 基本的な型に、人の評価を加える 基本的な型 伝える順番の 基本パターン ＋ 人力の評価 100サイトの 良し悪しと理由 = 人の評価を 加えた型 基本パターンに 良し悪しの理由を加える この型を使って、AIがストーリーを3案つくる
47. STEP 2 STORY ストーリーで、伝え方を選ぶ ブリーフ × 人の評価を 加えた型 AIの 人が選び 選んだ → ストーリー ＋ → 一部を修正 ストーリー 3案 良し悪しを判断し、必要な部分を組み替える。 選んだ理由・修正理由をWFへ。
48. ワイヤーフレームで、熱量を形にする 1 Brief 熱量をそろえる 2 Story 伝え方を選ぶ 3 Wireframe 熱量を形にする
49. AI にゼロから任せると WF はガチャになる
50. AIと人力で
51. 熱量の伝え方を型にする LP セクション約 100種
52. STEP 3 WIREFRAME ストーリーを、 WFにする ストーリー ＋ 選んだ意図 ＋ 約100種の セクション → WF A・B
53. STEP 3 WIREFRAME 2つのWFから、狙いに合う方を選ぶ。 WF A る 言葉を中心に見せる WF B 情報を並べて見せる
54. まとめ｜人の判断を、次へ渡す。 1 Brief 足りない情報を 人に聞く 完成したブリーフ 確認した情報 2 Story 伝え方を選ぶ 選んだストーリー＋理由 Wireframe 3 選んだ理由 熱量を形にする WF+修正理由 熱量は、人の判断として制作につながる
55. 熱量ハーネスには 人の力が不可欠だった
56. そう
57. オレが、ハーネスだ!!
58. AI には、馬力🐴がある （乗馬経験者だからわかる） 人には、熱量🔥がある
59. あなたの熱量も ハーネスに込めましょう
60. オレもハーネス あなたもハーネス
61. 登壇のために乗馬 これも熱量🔥
62. ファインディ株式会社 デザイナー 西川・デザインハーネス・紘平 先代、弊社の向からデザインハーネスを引き継ぎました。 1日警察署長のようなものなので今日だけです。 @niccy
63. ご清聴ありがとうございました