こんにちは。UXデザイナーのおかたくです。
今回はMidjourneyとChatGPTを使ってストーリーボードを作る方法をご紹介します。01でアイディアやそのストーリーを生み出す工程については本記事の対象外で、既に考えられた体験の流れの可視化が主となりますので予めご了承ください。

作業環境

• ChatGPT

• Midjourney(Discordのアプリ版)

作成手順

1.  主人公の準備

まず初めに、ストーリーボードの主人公となるキャラクターを準備します。事前に元となるキャラクターを作成し、それを各シーンで参照するとキャラクターのブレが少ないためおすすめです。

以下の型をベースにプロンプトを作成し、Midjourneyの /imagineコマンドで画像を生成します。人物の見た目だけでなく、様々な角度から数パターン描画されている画像を選びます。

▼ プロンプト例
A Japanese woman in her 20s, short brown hair, photography close up, character sheet, multiple expressions and poses  --ar 16:9

次に出力された画像を保存し、切り抜きと背景透過処理をします。これは、各シーンで主人公の画像を参照する際に、余計な情報を反映させないようにするためです。背景透過はMacの場合、「プレビュー > ツール > 背景を削除」を使うのがおすすめです。

複数視点からの背景透過画像が準備できたら、MidjourneyのDiscordに画像をアップロードし、枚数分のリンクをコピーしておきます。これで主人公の準備は完了です。

2.  画像生成プロンプトの準備

ChatGPTにMidjourneyで画像生成するプロンプトを作成してもらいます。プロンプトは型に沿って作成し、シーンごとに修正を加えることで、変える箇所・変えない箇所が明確になります。これにより、画像を並べたときに一連の体験をイメージしやすくなります。

Midjourneyへの画像出力のプロンプトは以下の型に沿って作成します。「ストーリーボードのタイプ」を変えることで同じシーンでもガラッと印象が変わります。

型に沿ったプロンプトをChatGPTに出力してもらうため、型を学ばせます。学ばせると言っても以下のプロンプトをChatGPTに入力するだけです。

プロンプトを入力すると、型の各項目に対して質問を投げかけてくれるので、最初のシーンの情報を入力します。「スキップ」や一度入力したものの訂正も可能です。全ての項目の質問に答えるとプロンプトが出力されます。

3. 1シーン目の画像を生成

下記例のように「2. 画像生成プロンプトの準備」で出力したプロンプトの冒頭に、「1. 主人公の準備」で準備した複数視点の透過画像のリンクを加えます。

プロンプトが準備できたら/imagineコマンドで生成します。プロンプトを修正しながら理想に近づけます。
採用する画像が決まったら、Upscaleボタン(U1:左上,U2:右上,U3:左下,U4:右下)で画像を拡大し、メールマーク(envelope)のリアクションを付けます。これにより、MidjourneyBotから画像のseed値などが送られます。seed値は後ほど使うのでコピーして保管しておきます。

4. 2シーン目以降の画像を生成

続いて2シーン目の画像を生成します。「2. 画像生成プロンプトの準備」でプロンプトを作成したChatGPTで「新しいプロンプトを開始する」と入力し、2シーン目の画像条件を項目に沿って入力していきます。前のシーンとの変更箇所が少ない場合は、続きから修正を指示してプロンプトを生成することもできます。

また、2シーン目以降は前のシーンの人物を参照することで、より一貫性を持たせることができます。1シーン目で採用した画像に対して、切り抜きと背景透過処理をします。

背景透過した画像はDiscordにアップロードし、リンクを取得します。取得したリンクは以下のプロンプトのように冒頭に追加します。また、プロンプトの末尾には「3. 1シーン目の画像を生成」で取得したシード値を追加します。記述の仕方は「--seed シード値」です。

以下が2シーン目の画像です。1シーン目の画像が参照され、髪型や顔立ちに一貫性があるのが分かります。

3シーン目以降も同じ手順です。ChatGPTでプロンプトを変更し、前シーンの画像の透過画像を参照してプロンプトを作っていきます。

3シーン目以降は前シーンの画像を参照せずとも一貫性は見えるので、出力画像を見ながら判断するようにします。

当然人が登場しないシーンでは、前シーンの人画像を参照する必要はありません。ただし、全体の画に一貫性を持たせるため、[ストーリーボードのタイプ]などは理由がない限り変えないようにします。

最後のシーンでは返却のポストのようなモノが欲しかったため、先頭に記述しています。肌感ですがプロンプトが長くなる場合、優先したい指示は初めの方に書いた方が反映されやすいです。

5. 完成

一連の体験を表現する6枚の画像が出力できました。少々雑ですが、体験の説明を加えて完成したストーリーボードがこちらです 。今回は海外旅行用のレンタルWifiを例としてストーリーボードを作成しました。

まとめ

いかがだったでしょうか。なかなか思い通りにいかないこともあったのではないかと思います。自分も正直苦労しました。ただ、今回ご紹介した生成の仕方をベースに、とにかく画像を生成しまくると徐々に勝手が分かってきたような気がします。皆さんもぜひ色々と試して理想のストーリーボードを作ってみて下さい！