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

by niccy

Embed

Start on current slide

Slide 1

Slide 1 text

Design Harness 2 LP 制作のための熱量ハーネス人の熱量を、AIとの制作につなぐファインディ株式会社デザイナー西川紘平 @niccy

Slide 2

Slide 2 text

Philosophy 経営理念つくる人がもっとかがやけば、世界はきっと豊かになる。 Vision Our Business 事業一覧ビジョン挑戦するエンジニアのプラットフォームをつくる事業開始：2016年7月社員数：478名（2026年1月時点）

Slide 3

Slide 3 text

ファインディ株式会社デザイナー西川紘平カヤック・LINEなどを経て、ファインディにジョイン @niccy

Slide 4

Slide 4 text

ファインディ株式会社デザイナー西川・デザインハーネス・紘平カヤック・LINEなどを経て、ファインディにジョイン先代、弊社の向からデザインハーネスを引き継ぎました。 @niccy

Slide 5

Slide 5 text

登壇に先駆け “ハーネス” 体験してきました

Slide 6

Slide 6 text

ファインディ株式会社デザイナー西川・デザインハーネス・紘平カヤック・LINEを経てファインディにジョイン先代、弊社の向からデザインハーネスを引き継ぎました。 @niccy

Slide 7

Slide 7 text

では、本題

Slide 8

Slide 8 text

今日のテーマは ?

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

LP をつくるためのデザインハーネス

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

今日のお品書き 1 AIでLPは簡単になった 2 AIだけでは熱量が届けられない 3 熱量をつなぐデザインハーネス

Slide 15

Slide 15 text

AI でいろんなものがつくりやすくなりました

Slide 16

Slide 16 text

でもみなさん気づいてますよね ?

Slide 17

Slide 17 text

熱量

Slide 18

Slide 18 text

熱量

Slide 19

Slide 19 text

AI お食事画像もお客さんに出すのこれでいいという判断

Slide 20

Slide 20 text

飲み屋の商品画像もお客さんに出すのこれでいいという判断

Slide 21

Slide 21 text

AI Slop も読み手を意識せずこれくらいで出しちゃえ

Slide 22

Slide 22 text

熱量

Slide 23

Slide 23 text

そして LP も

Slide 24

Slide 24 text

✅️たった 5 分で完成 ✅️もうデザイナーいらない ✅️ポン出しでこのクオリティ

Slide 25

Slide 25 text

そんなわけない！

Slide 26

Slide 26 text

でも

Slide 27

Slide 27 text

つくるを高速化するという時代の流れは止まらない

Slide 28

Slide 28 text

はやくつくる × 熱量を伝える

Slide 29

Slide 29 text

作りました

Slide 30

Slide 30 text

熱量を伝えるデザインハーネス

Slide 31

Slide 31 text

熱量をつなぐ、3つのステップ 1 Brief 熱量をそろえる 2 Story 伝え方を選ぶ 3 Wireframe 熱量を形にする

Slide 32

Slide 32 text

デザインハーネス — 4層モデル 4 3 2 1 制約トークン・コンポーネント・パターン 2 コンテキスト原則・利用者・既存画面 3 検証アクセシビリティ・はみ出し 1 4 デザインハーネスの4層出典：こぎそさん「PdEConf2026 Design Harness」p.18をもとに再構成導線・認知負荷評価・フィードバックレビュー指摘・ルール・チェック

Slide 33

Slide 33 text

4つの働きを、3つの工程で Brief Story Wireframe 制約推測で埋めない確認した目的を守る話の流れを守るコンテキスト依頼内容と人の回答ブリーフ・型・評価知見ストーリー・セクション型検証情報の不足を確認案の違いと根拠を比較配置・強弱・情報量を確認評価・FB 人が補い、確定人が選び、理由を残す人が選び、修正

Slide 34

Slide 34 text

ブリーフで、届けたい熱量をそろえる 1 Brief 熱量をそろえる 2 Story 伝え方を選ぶ 3 Wireframe 熱量を形にする

Slide 35

Slide 35 text

STEP 1 BRIEF まず、何を確かめる？届ける相手誰の何を解決するか訪れた理由何を期待して来るか伝える価値何が得られるかしてほしい行動次にどう動いてほしいか

Slide 36

Slide 36 text

STEP 1 BRIEF 熱量をそろえる、確認項目の一部届ける相手訪れた理由伝える価値してほしい行動 ✅️対象読者 ✅️置かれた状況 ✅️いまの課題 ✅️最大の障壁 ✅️実現したい状態 ✅️流入元 ✅️見た広告・メール ✅️検索した言葉 ✅️期待していること ✅️最初に知りたいこと ✅️解決できること ✅️得られる価値 ✅️他との違い ✅️実績・数値 ✅️事例・顧客の声 ✅️主要なCTA ✅️行動後の流れ ✅️行動に必要な情報 ✅️必ず載せる情報 ✅️表現上のNG・制約全72項目

Slide 37

Slide 37 text

STEP 1 BRIEF 施策のPRDをハーネスに読み込ませると 68 52 24 40 届ける相手訪れた理由伝える価値足りない情報は、依頼者に確認してほしい行動

Slide 38

Slide 38 text

この不足を埋めるのは

Slide 39

Slide 39 text

人の力

Slide 40

Slide 40 text

STEP 1 BRIEF 人に聞いて、ブリーフを完成させる依頼情報＋人のチェック → そしてストーリーへ… 完成したブリーフ

Slide 41

Slide 41 text

ストーリーで、熱量の伝え方を選ぶ 1 Brief 熱量をそろえる 2 Story 伝え方を選ぶ 3 Wireframe 熱量を形にする

Slide 42

Slide 42 text

STEP 2 STORY ストーリーには、型がある AIDA 注意から行動へ PAS BAB 課題から解決へ比較・選定違いから選ぶ変化を見せる証拠先行根拠から伝える課題啓発問題への気づきオファー直結行動の条件から型は、伝える順番の骨格をくれる。

Slide 43

Slide 43 text

LP100 サイトひたすら評価

Slide 44

Slide 44 text

人力で

Slide 45

Slide 45 text

100 サイトを見て得た良し悪しの判断を型に加える

Slide 46

Slide 46 text

STEP 2 STORY 基本的な型に、人の評価を加える基本的な型伝える順番の基本パターン＋人力の評価 100サイトの良し悪しと理由 = 人の評価を加えた型基本パターンに良し悪しの理由を加えるこの型を使って、AIがストーリーを3案つくる

Slide 47

Slide 47 text

STEP 2 STORY ストーリーで、伝え方を選ぶブリーフ × 人の評価を加えた型 AIの人が選び選んだ → ストーリー＋ → 一部を修正ストーリー 3案良し悪しを判断し、必要な部分を組み替える。選んだ理由・修正理由をWFへ。

Slide 48

Slide 48 text

ワイヤーフレームで、熱量を形にする 1 Brief 熱量をそろえる 2 Story 伝え方を選ぶ 3 Wireframe 熱量を形にする

Slide 49

Slide 49 text

AI にゼロから任せると WF はガチャになる

Slide 50

Slide 50 text

AIと人力で

Slide 51

Slide 51 text

熱量の伝え方を型にする LP セクション約 100種

Slide 52

Slide 52 text

STEP 3 WIREFRAME ストーリーを、 WFにするストーリー＋選んだ意図＋約100種のセクション → WF A・B

Slide 53

Slide 53 text

STEP 3 WIREFRAME 2つのWFから、狙いに合う方を選ぶ。 WF A る言葉を中心に見せる WF B 情報を並べて見せる

Slide 54

Slide 54 text

まとめ｜人の判断を、次へ渡す。 1 Brief 足りない情報を人に聞く完成したブリーフ確認した情報 2 Story 伝え方を選ぶ選んだストーリー＋理由 Wireframe 3 選んだ理由熱量を形にする WF+修正理由熱量は、人の判断として制作につながる

Slide 55

Slide 55 text

熱量ハーネスには人の力が不可欠だった

Slide 56

Slide 56 text

そう

Slide 57

Slide 57 text

オレが、ハーネスだ!!

Slide 58

Slide 58 text

AI には、馬力🐴がある（乗馬経験者だからわかる）人には、熱量🔥がある

Slide 59

Slide 59 text

あなたの熱量もハーネスに込めましょう

Slide 60

Slide 60 text

オレもハーネスあなたもハーネス

Slide 61

Slide 61 text

登壇のために乗馬これも熱量🔥

Slide 62

Slide 62 text

ファインディ株式会社デザイナー西川・デザインハーネス・紘平先代、弊社の向からデザインハーネスを引き継ぎました。 1日警察署長のようなものなので今日だけです。 @niccy

Slide 63

Slide 63 text

ご清聴ありがとうございました