LP TONE ATLAS  |  PRODUCT FILM STORYBOARD v2

プロダクト紹介動画 絵コンテ

「AIに言葉が伝わらなくて、作りたいものが作れない」から始めて、絵を選ぶと言葉になる、までを描く10カット。

10カット/70秒/悩み4・図鑑5・締め1
WHO & WHY

誰に刺すか

AIにうまく言葉が伝えられなくて、作りたいサイトが作れない人

クライアントがいる人も、自分のサイトだけ作る人も、ここは同じです。だから対象を絞りません。前回はここを「制作者か、お店の人か」の二択にしてしまい、話が狭くなっていました。

クライアントとのすり合わせに使えるのは、その先にあるプラスアルファです。動画の中では終盤に一言添えるだけにして、主題は取り違えないようにします。

「感覚を共通言語にする」は、自分に対しても相手に対しても同じように働きます。この事実は変わらないので、どちらの人が見ても自分の話として読めます。

WHAT CHANGED

前回の絵コンテが「どういう話なの?」になった理由

図鑑の画面ばかり9枚並べて、肝心の悩みが1枚しかありませんでした。しかもその1枚は机の写真で、何に困っているのか分かりませんでした。素材のカタログにはなっても、話にはなっていませんでした。

前回今回
悩み1カット(机の写真)悩み4カット。AIに何度言い直しても違うものが返ってくる堂々巡りを、実際のチャット画面で見せます
実際の画面が9枚中7枚悩みは作った画面、図鑑は本物の画面。役割で分けます
参照先が別サイト(139本のほう)Tone Composer(89本)の実画面に差し替え済み
0:00 – 0:24言葉が伝わらない
何度言い直しても違う
0:24 – 0:31見せればいい
という気づき
0:31 – 1:10選ぶ → 言葉になる
→ 渡す → できる
STORYBOARD

10カット・70秒

第1幕 伝わらないここで「あるある」と思わせられなければ、あとは何も届きません
CUT 10:00 – 0:06掴み
AIチャットの入力欄に、おしゃれな感じでと打ち込んでいる画面

「おしゃれな感じで」

入力欄に打ち込む手元から始めます。カーソルが点滅している。まだ送信していません。誰もがやったことのある入力です。

作った画面
CUT 20:06 – 0:12最初のズレ
AIが提案を返してきた画面

返ってきたものは、
思っていたものと違う。

AIはちゃんと答えます。悪いのはAIではありません。伝え方の側に何もなかった、という描き方にします。

作った画面
CUT 30:12 – 0:19言い直し
もっと上品な感じでと言い直している画面

「もっと上品な感じで」
「そうじゃなくて…」

言葉を変えるほど遠ざかります。会話が下へ下へ流れていく速度を少し上げて、消耗感を出します。

作った画面
CUT 40:19 – 0:24行き止まり
なんか違う、で会話が止まっている画面

…なんか違う。

ここで動きを止めます。頭の中には「こういうの」があるのに、それを渡す方法がない。この無言の数秒が第1幕の着地です。

作った画面
第2幕 見せればいいコアメッセージ。ここだけ間を長く取ります
CUT 50:24 – 0:31転換/コアメッセージ
89本の作例が並ぶギャラリー

説明できなくても、
選ぶことはできる。

チャット画面が静かに引いて、作例がずらっと現れます。文字で説明しません。見本が並んだだけで答えが分かる作りにします。

実画面
第3幕 選ぶと、言葉になる商品の中身
CUT 60:31 – 0:39絞る
業種で絞り込んだギャラリー

業種で絞って、目で選ぶ。

89本から自分の業種へ。並びが入れ替わる動きをそのまま見せます。

実画面
CUT 70:39 – 0:51山場
選んだ作例の採用方針。配色・書体・構成が文章で出ている

選んだ瞬間、
「なぜそう見えるか」が言葉になる。

配色のカラーコード、見出しと本文の書体名、余白の密度、構成の順番、避けることまで出ます。第1幕で出てこなかった言葉が、選んだだけで全部揃っている。ここが一番長い12秒です。カラーチップと書体見本に順に寄ります。

実画面
CUT 80:51 – 0:58渡す
AIに渡す制作プロンプトのコピーボタン

その言葉を、
まるごとAIに渡す。

ボタンを押してコピー。第1幕のチャット画面に戻って、今度はこれを貼ります。同じ画面が2回出ることで、何が変わったかが分かります。

実画面+作った画面
CUT 90:58 – 1:05結果
思っていたとおりのサイトができた画面

思っていたものが、出てくる。

実際に図鑑から1本建てて、その画面を録画します。ここだけは本物を撮らないと嘘になります。一言だけ「人に見せて決めるときも、同じ画面が使えます」を添えて、すり合わせ用途に触れます。

未撮影・実制作が必要
CUT 101:05 – 1:10締め
整列した見本カード

言葉にできない「これがいい」を、
そのまま形に。

商品名と入手先。余白を大きく取って終わります。

生成画像
NEXT

この先に必要なもの

  • CUT9の実制作。図鑑から実際に1本サイトを建てて、その画面を録画します。
  • チャット画面を動かします。いまは4枚の静止画ですが、文字が打たれて送信される動きまで作ると第1幕がぐっと効きます。
  • 絞り込みと選択の動きを連番で撮って、実際に並びが変わる様子にします。
  • ナレーションを入れるかどうか。無音とテロップだけでも成立する構成にしてあります。