はじめに
突然ですが皆さん、イメージを人に伝えるって中々難しいですよね。
特に仕事では職種が違ったり
それぞれのバックグラウンドが異なるのでお互い分かったつもりでいても
別のものをそれぞれイメージしてたり。
私はPdMなのですが、
プロダクト・システム開発の際にUIやデザインイメージを伝える(または共有)ことが多々あります。
「ここをこうして」、「あれをこうしたい」など
前述の通り、頭の中のイメージを完全に言葉だけで共有するのは難しく、
今まではパワーポイントやgoogle slideを駆使し(スクショなど)でイメージを伝えるということを淡々と行っていました。
この作業は地味に時間がかかりますよね。
イメージを自然言語でパパッと具体化してくれるサービスがあれば作業時間の短縮に繋がりますよね。
そこで今回、私が最近業務で利用しているUIやデザインイメージを簡単に作成できる生成AIベースのツール（ノーコードツール）をご紹介します。
ご紹介するのはVercelの”v0”というサービスです。
用意するもの
１、公式サイトからv0のアカウント作成〜登録
２、（必要に応じて）加工したいベースイメージ画像
１、公式サイトからv0のアカウント作成〜登録
無料版、有料版がありますが、まずは無料版でいいと思います。
アカウント作成を行いログインをしましょう。
２、（必要に応じて）ベースイメージの画像など
v0はテキストだけではなく画像による指示も可能(マルチモーダル対応)
またfigmaから読み込みすることも可能
利用方法
テキストBoxにプロンプト（出力したいイメージ）を入力する
という利用方法が最もポピュラーかと思います。
また画像データをアップロードし、その画像にベースにプロンプトを入力することも可能です。
添付の例では”青を基調とした、シンプルでモダンなデザイン例を提示して〜”とプロンプトを入力した結果です。
するとこのようなデザインが提示されました。
では次にこの画像を用いて、”薄緑を基調としたモダンなデザインに変更して”とプロンプト入力してみます。結果としてはこうなりました。
ゼロベースでイメージを生成したいか、既存のサイトデザインやシステムイメージを元に改修イメージを生成したいか次第で利用方法を使い分けるという感じです。
こういう使い方してます
現時点では明確にイメージがないが
v0側からいくつかイメージを提案してほしいみたいなユースケースがあると思います。
そういった場合プロンプトで”これと違う出力イメージを出したいがどんな形式がありますか？”や
”それぞれの形式におけるメリット、デメリットは？”とか”こういう目的がある場合オススメの表示形式は？”などv0をコンシェルジュのように扱い、自分のイメージを近づけていく（またはイメージパターンを広げる）という使い方をよくしています。
フロントやデザインなどの表現知識が少ない場合、こういったラリーをv0で複数回行うだけで
自分の知識を深めることにもなりますし、
イメージも膨らむので今後のビジネスのアイデアにも活かすことも出来そうです。
例えばこんな感じ
ユーザー向けである自社のLMS(Learning Manegement System)の改修イメージを共有したいというユースケースです。
とあるページのコースの表記を変更したい とします。
今回は現在のテキスト（ハイパーリンク）での表記をカード形式に変更したいとします。
既に自社LMSの画像はあるのでまずはこれを読み込ませます
次にプロンプトでその画像についてどのような改修をしたいか希望を入力する
ここではコースの表示形式をカード形式に変更したいとします
出来ました
この出力イメージをデザインチームや関係者に共有し頭の中のイメージを一致させます。
処理にそこまで時間を要しないのでMTG中に画面共有を行い、その場でイメージを擦り合わせるみたいな利用方法もいいですね。
とこんな感じに
ベースイメージから徐々にビルドアップしていくという利用方法がオススメです。
最後に
今回は無料版を紹介しましたが、有料版は言わずもがな、よりリッチな機能があります。
無料版は1日あたりのプロンプト上限回数もあるので注意が必要です。
慣れてくれば少ないプロンプト数で自分のイメージに近いものを出力することも可能です。
私はPdMとしてv0を利用していますが、
非エンジニア、システムフロント担当やデザイン担当とコミュニケーションをとる方など、
このサービスを享受できる対象の職種の幅は広いのではないかなと感じています。
v0を使って業務効率を上げてみてはいかがでしょうか。
Discussion