はじめに

先日また社内Slackに「こんに知財！」と投稿したら、ついにリアクションが2つつきました...
って言いたかったんですが、そもそもそんなことをやる度胸がありませんでした。

こんにちは。Cotobox CPOの長島です。
今回は気を取り直して、要件定義を視覚化するために導入した生成AIツール「v0」についてお話します。ただし、今回は私の直面した「失敗談」が中心です。

なぜv0を選んだのか？

2023年だったと思います。
確認のためググると...わからん。見つからん。v0とかよくよく考えると割と一般用語ですよね（エンジニアリング的に、です。）
で、こういうときは軽くDeep Research。便利、便利。

やはり2023年の9月でした。
その頃はめちゃめちゃ優秀なエンジニアに囲まれて仕事をしており、「助けてド＄えもん！」とふわっと要件を言うだけで、３日と経たず（含週末）動くUIが実装されてしまう非常に恵まれた環境におりました。

そんな状況だったので、v0が出てきたときは、正直なんかおもしろいものが出てきたなーくらいにしか思いませんでした。
Figmaで大概のことは表現できてはいましたし。

そうはいっても新しいことを追うのは大事大事と、Waiting listには速攻登録しました。
（が、けっこう早かったと思うんですが実際に使えたのは１ヶ月待ちでした）

同じく登録してくれていたエンジニアに動きを早速見せてもらい、まぁ、こんなことできるのもあるんだな、くらいでした、正直最初は。

さて、Figmaで大概ことはできていたとは言いましたが、どちらかというとAdobe XD派だった期間が長かった私は、それほどFigmaが得意だったわけではなく。
なんかこう、もっとスマートに編集したいよな、という欲求はありました。

単純に「当時画期的だったから」というミーハーな理由もありますが、Figmaの操作ではデザイナーに負ける状況、他にも限界を感じていたので、「AIが簡単に視覚化してくれるなら最高だ」と飛びついたわけです。

v0を使い始めたとき、まずぶつかった壁はプロンプトの難しさでした。

最初に私が試したプロンプトはこんな感じです。
...

と思ったのですが最初のプロンプトはもう消してしまっていました。

最初の頃に試行錯誤していたプロンプトはありましたが、ChatGPT他ほど自然には処理できず、少々クセがありました。

慣れてきた頃にぶち当たったのは、修正の難しさでした。
全体のトンマナを直したかったのですが、なぜか一部しか変わらない。

都度修正箇所を直していくと、気がつくと他のところが崩れる...
いたちごっこでした。

という散々な状態でした。

思わず「v0よ、これは何の試練だ」と呟きました。
（プロンプトエンジニアリングやってると、なんか独り言、増えますよね）

その後、「もっと構造的に伝えれば良いのでは？」と思い、mermaid記法でプロンプトを食わせてみました。
結果はというと、これがまた絶妙にダメでした。

v0はmermaidの「論理構造」を画面構成に変換するのが苦手なのか、「メールアドレス入力」や「パスワード入力」が画面に配置されず、「ログイン画面」という文字がなぜかボタンになって表示されてしまいました。

（最近のv0はそんなことはありません。ログイン画面、というだけで必要な要素をセットで用意してくれるくらいの進化しています。）

ただ、全部をmermaidでやるのはやっぱりまだダメですね。

ちなみに、今回の主旨とは離れますが、要件をChatGPTにMermaidで出させるのは非常に相性がいいです。
ただ、Mermaidの書き方って、自由度があるせいか（私が独学だからなのかもですが）形式はあっていても、思った形にはなかなか出してくれませんね。

「もしかして『ログイン画面』で商標出願しても拒絶されるのと同じくらい、mermaidでUIを作るのは無理がある？」などと、また月並みな知財絡みのネタが頭をよぎりました。

結局、v0で作った最初のモックはほぼ全面的に作り直し。AIに頼りすぎて痛い目を見たという苦い経験です。

今回の失敗を通してわかったことは、

という基本的ながら忘れがちな事実でした。

ところで「画期的」という言葉は商標登録できません。理由は「識別力がない」からだそうです。

AIツールに飛びついた自分も、結局は「画期的」という曖昧な言葉に踊らされていただけなのかもしれませんね。

今回は失敗談ばかりでしたが、次回は「v0で本当にうまくいったプロンプトの工夫と実践事例」を具体的にお届けします。

失敗を乗り越えて得たノウハウをぜひお楽しみに。

それではまた