こんにちは、スマートバンクでデザイナーをしているゆっきー（yuki930）です！
B/43では先日、結婚を迎えられたおふたりを祝福する「ジューンブライド結婚祝いキャンペーン」を実施しました。
キャンペーンについてはこちらのchikaさんのブログもぜひお読みください！
その際、キャンペーンの告知クリエイティブに加えてギフトに添える当選通知カードをデザインしたのですが、プロトタイプを素早く作ることで議論や意思決定をスムーズに進めることができました。
そのプロトタイプを作成するにあたり、今回はChatGPTやMidjourneyを活用して更なる時短に挑戦したので、その事例についてご紹介します。
B/43ペアカードユーザーの皆さんを祝いたい！結婚祝いキャンペーンのはじまり
B/43ペアカードは2023年7月に2周年を迎え、この期間ユーザーの皆さまから「同棲期間からB/43を使っていて結婚しました！」といった嬉しいご報告をいただくことも増えました。
そんな中で、皆さまになにかお祝いができないか？との話が出る中で、今回形になったのが、6月のジューンブライドに合わせた結婚祝いキャンペーンでした。
ご結婚から3年以内のご夫婦（事実婚も可）のなかから抽選で50名さまに、ご結婚のお祝いとして、お花のブランド「ブルーミー」とコラボしたお花付きギフトをお届けするという企画で、B/43のアプリ内とSNSで告知し、結果として900名以上の方にご応募いただけるキャンペーンとなりました。
お祝いの気持ちを伝えるための当選通知のデザイン
今回、キャンペーンの告知をするクリエイティブの他に、当選した方々へのギフトに封入する当選通知を作成する必要がありました。
初回のすり合わせに先立って、いくつか当選通知の事例を調査しました。 当選通知という視点で探すと、コピー用紙にメッセージか書かれたライトなものが多かったため、当初はキャンペーン告知のクリエイティブをベースに、シンプルに紙一枚でのお知らせを作ろうと考えていました。
↓最初の調査画像&ラフ案
もっとお祝いの気持ちを込めるために
企画担当のchikaさんとの初回のすり合わせの際、「せっかくユーザーさんに直接お祝いと感謝の気持ちを伝えることができる場なので、当選を伝える紙1枚ではなく、もう少しお祝いの気持ちを加えたものにできないか」「お祝いの気持ちがより伝わることで、より喜んでもらえ、結果としてSNSでのシェアなどB/43のことを知ってくれている人の輪が広がる効果も得られるのでは」という話になり、もう少し幅を広げてデザインを検討してみることにしました。
ゴールとして、「ユーザーさんへのお祝いの気持ちがしっかり伝わること」「B/43とブルーミーからのお祝いであることが最大限伝わること」ことを設定し、アイデアを広げてみることになりました。
もちろん、納期や予算の制約もあるため、この限られた制約の中でどれだけユーザーさんに喜んでもらえるデザインを考えられるかにチャレンジすることになりました。
アイデアを広げる
ゴールを実現するアウトプットとしてふさわしいイメージをリサーチしていきました。
リサーチにはPinterestやInstagram、Google画像検索などを活用して、結婚式の招待状を中心に、結婚式のペーパーアイテムを調査しました。
調査を進める中で
結婚式の招待状のような、
- リッチな紙質
- 箔押しや型抜きなどのリッチな装飾
を取り入れつつ、
- お祝いしたい対象のおふたりを中心にイメージを作る
- B/43のカードとブルーミーさんの植物をテーマに、ブルーミーさんとのコラボの必然性を感じるようなデザイン
にすることでデザインの軸が作れそうだと思い、この方向性でいくつかプロトタイプを作成してみることにしました。
タイトなスケジュールをクリアするために
方向性は見えてきたものの、元々1枚物のフライヤーを想定して制作スケジュールを確保していたため、制作に使える時間はあまり多くはありません。
また特殊な印刷をすることになった場合、想定しているスケジュールより長めに印刷スケジュールを抑える必要があります。また、追加のコストも発生します。
そのため、次のMTGまでに超高速でイメージを固め、意思決定をするためのプロトタイプを制作する必要がありました。
これらを踏まえて
- A案. 元々予定していた仕様に収まる案
- B案. 元々の仕様は超えるが、目的が一番達成されそうな案
の2パターンを作成することにしました。
ChatGPTやMidjourneyを活用したプロトタイプ作り
Aの元々の予算で予定していた仕様に収まる案は、これまでのB/43のデザイン資産を組み合わせることで表現できそうだったため、クイックに作成しました。
問題はB案です。
プロトタイプ段階ではあくまでゴールイメージが伝わればいいので、できるだけ早く仕上げるためにこれまではストックフォトなどを活用しつつ作っていました。
ただ、イメージどおりのストックフォトを見つけるのもなかなか難しく、結果として0から書いたほうが早かったのでは…？思うようなこともしばしばありました。
最終的に方向性に決まった際は書き起こすので、ここで必要なのはあくまでイメージを伝えるプロトタイプ用の素材です。30-50点のたたき台でよいものに、完成度の高いストックフォトをはめると、みた人のイメージがかたまりすぎてしまう懸念もありました。
そのため、今回ChatGPTとMidjourneyを活用して、ちょうどいいプロトタイプ用の素材を作成してみることにチャレンジしました。
まずはChatGPTを利用してMidjoueney用のコマンドを出力
Midjoueneyに画像を書き出してもらうのですが、そのための命令が必要です。 的確に指示を出すために、ChatGPTを活用し、Midjoueney用のコマンドを出力してもらいます。
ChatGPTのプラグインを活用
ChatGPTのプラグインであるPhotorealisticを利用します。プラグインは、GPT-4のしたのPlugin storeからインストールすることがでます。
Photorealisticと検索してプラグインをインストールします。
Midjourney用のコマンドを出力
プラグインが有効な状態で、書いてもらいたい絵のイメージを伝えていきます。
真ん中に新郎新婦のシルエット。周辺に植物をモチーフにした円上のイラスト。 モノクロ2階調
のように要件を伝えると、Midjourney用のコマンドを出力してくれます。
日本語も併記してもらうと改変がカンタンに
指示をする際、「コマンドは日本語と英語で出力してください」と添えておくと、英語と日本語で出力してくれます。
実際の出力には、結果の精度が高くなりやすい英語のコマンドを利用するのですが、日本語を添えておくと、英語が苦手な人でも具体的にどういうニュアンスを言語化して伝えているのか？がわかりやすくなるのでおすすめです。
不要だな、意図と違うなと思う条件も抜きやすくなります。
Midjourneyで出力
英語のプロンプトをコピーし、Midjourneyで出力します。 一発で思うようにはならないことが多いので、再生成したり、不要なコマンドを削除したりして調整しながら何度か繰り返し、イメージに近いものを出力します。
出力した素材をIllustratorに取り込み
出力した画像をIllustratorに取り込み、ライブトレース機能でパスを作成します。
新郎新婦には手にB/43カードを持ってもらいたかったので、ざざっとイメージが伝わるレベルで要素を書き足し、
- 新郎新婦をメインに
- 植物をあしらいコラボを表現
- 手にはB/43カード
という、荒いけど表現したいデザインのポイントは伝わる素材を作成して、これでプロトタイプを作りました。
並行して、納期とコストの計算
当選者の方々にお祝いの気持ちを伝えるため、箔押し印刷はぜひ取り入れたいと思ったのですが、箔押し印刷を行うとなると、通常の印刷のみに比べると時間もコストもかかります。
デザイン案を作成するのと並行して、間に合うスケジュールとコストの試算を行い、この点についても比較検討しながら意思決定できるようにしました。
方向性をすり合わせて方針決定
これらの叩きをベースに、今回どちらの方向性で進めるかのすりあわせのMTGを行いました。
ゴールとして、「ユーザーさんへのお祝いの気持ちがしっかり伝わること」「B/43とブルーミーからのお祝いであることが最大限伝わること」こととすると、やはりB案がよいということになり、コストと納期に関しても許容ができる範囲内であったため、無事B案の方向性で進めることができました！
イラストを書き起こしてデザインデータを作成
方向性が決まったので、具体的に最終的な入稿用のデータをデザインしていきます。
Midjourneyで出力した画像はプロトタイプ上で理想のイメージを伝えるためには役立ってくれましたが、 理想の絵とは異なるので参考にしながら書き直しました。
植物と人物のサイズのバランス、手に持っているのがカードであることがギリギリわかるサイズ感など 理想のイメージになるよう最終的なデザインデータを作っていきました。
まずはB/43カードを手に持った夫婦をあらためて書き起こし、サイズ感を調整しました。
植物の素材については、1から描いていくと時間がかかるので、素材を購入して利用しました。
曲線のある植物を探していたところ、フロップデザインさんのフラワーシルエット素材集をが非常に素晴らしかったので、今回はこちらを購入して利用させていただきました！
周辺にバランスよく配置し、ドレスの上の植物はヌキで表現して植物と新郎新婦を融合させていきました。
Photoshopで簡易に合成
箔を押したときのイメージが想像しやすいように、この段階でPhotoshopで簡易的に合成したイメージ画像も作成しました。
プロトタイプの時点でこのようなイメージを作ることもできたのですが、細部の詰めがあまい状態で箔押しのイメージまで見せてしまうと逆に残念なイメージに見えてしまうことがあるので、プロトタイプの段階では用意しませんでした。
ただ、最終的に背景の色やその他のギフトと合わせた時、よりリアルなイメージがあった方がよいため、このタイミングでは箔押しのイメージがわかる素材を用意しました。
箔押しについてはAdobe Creative Cloudのサイトにあるこちらのテンプレートを利用して簡単に作成しました。
Figmaで一覧化してデザインレビューをもらう
デザインデータができたところで、文言などの細かいレビュー、背景の色味などの調整に取り掛かりました。
弊社は全員Figmaのアカウントを持っているので、書き出したデータをFigmaに貼り出してレビューしてもらいました。
背景色については、B/43ペアカードのミントを使うことを想定していましたが、カード単体での見栄えやギフトに添えたときの見え方なども考慮してベージュやマルチカラーバージョンも用意して比較、検討しました。
↓実際にギフトの写真に添えたときのイメージも準備して検討しました
最終調整して完了！
細かいところにもフィードバックをもらい、ブルーミーさんからもレビューを頂き、完成しました！
入稿。そしてユーザーの皆様にお届け
完了したところで入稿用にデータを整え、印刷しました。
印刷はグラフィックさんにお願いしました。いつもありがとうございます！
当選したみなさまの声
キャンペーンの成果として、当選したユーザーのみなさまからたくさんご投稿いただきました。 カードのスラッシュにも気づいてくださった方がいてとても嬉しかったです！
B43さんから結婚祝いをいただきました🎁専用のデザインのメッセージカードがかわいい💐#B43とブルーミーの結婚祝い pic.twitter.com/uaTuPPQuOe
— Objective-ひろC🍜個人開発/Flutter (@hirothings) 2023年8月10日
届きましたー！！
— すーたろ (@su_chan244) 2023年8月10日
ありがとうございます😊
プリン楽しみだなぁ🍮
ウェディングカードにちゃんとB43のカードのスラッシュが見える😍
#B43とブルーミーの結婚祝い pic.twitter.com/lZIL3N9UsT
まとめ
今回、ChatGPTやMidjourneyを活用することで、短い期間の中でもやりたいことを実現させることができました。
AIに完璧な完成品を出力してもらうのはなかなか難しいですが、今回のように一部を補助してもらいながら最終的なアウトプットに繋げていくのはとても便利な使い方だなと感じました。
アイデア次第でいろいろな活用ができそうだなと思っているのですが、まだアイデアが少ないので、みなさんの活用事例も是非教えていただけたら嬉しいです！
最後に
今回はキャンペーンという形になったので、すべての方を対象にはできませんでしたが、今回の経験をもとに、今後はもっと多くのユーザーの皆様に喜んでいただけるような企画やサービス改善に取り組んでいければと思います！
今後ともB/43をよろしくお願いいたします😊
それでは、次回のブログもお楽しみに！
