ChatGPT、Soraでワイヤーフレーム（ラフ/レイアウト案 / 構成案）を使ってチラシを作成する
新しくなったChatGPTとSoraの画像生成機能
ChatGpt及び動画生成AIのSoraの画像生成が新しくなりました。
4o Image Generatorと言われるものです。
今までChatGPTで画像生成自体は可能でしたが、外部の画像生成専用のAIモデル「DALL-E」を呼び出して生成を行う形式でした。
これが言語モデルでもあるGPT-4o自身が、直接、画像を生成するようになり、そのモデルが動画生成AIのSoraにも搭載されることにより、画像生成が可能になりました。
動画生成AIのSoraは、ChatGPTの有料プランに加入すれば使用することが出来ます。
ChatGpt及び動画生成AIのSoraの4o Image Generatorですが、写真を元に、ジブリ風にしてとプロンプトを書くと、それっぽい絵が生成されたという記事がネットのニュースに載り、私は、実際にその記事を見ると、本当に写真がジブリ風になっていました。
私自身、これに関して、あまり意味を感じないので、そうなんだ、程度に思って、興味を感じませんでした。
しかし、ハルヒスキーさんの動画を見たら、自分の絵を元に、絵柄をあまり変えることなく、いろんな絵を生成してくれることを紹介されていて、それで興味が持てました。
AIを常識範囲内で使う方法を提案しているKEITOさんの動画で、また絵だけなく、プロンプトだけで、ポスターやチラシ、バナーなどのデザインを生成してくれることを知りました。
これを知り、試してみたいと思うようになりました。
ただ、動画生成AIのSoraの新しい画像生成だと、無料だと画像生成に制限がかかり、フルに試すことが出来ません。
今まで私は、無料でChatGPTを使って来ましたが、どうせならこれを機に勉強してみたいと思いました。
そこで1ヶ月だけ動画生成AIのSoraが利用するために、ChatGPTの有料版に申し込みました。
ワイヤーフレームとは？
仕事などで、会社のチラシを作ってほしいと言われるケースがあると思います。
理由としては、中小企業や個人事業では専任のデザイナーがいないケースが多いため身近にいる社員に頼むしかないため、日常業務でExcelやWord、PowerPointなどを使っているためので「パソコンが出来るからチラシもできるだろう」と思われてため、外注すると費用がかかるためので社内の人員で済ませようという低コストを図るため、それらがあげられると思います。
しかし、デザインの未経験の方にとって、チラシを作るのは大変でしょう。」
そんな時に使用してもらいたいのが、ワイヤーフレームです。
ワイヤーフレームの説明をします。
ワイヤーフレームとは、Webサイトやアプリ、ソフトウェアなどの画面設計を図式化した設計図のことを言います。
ワイヤーフレームの特徴ですが以下のようなものがあげられます。
- レイアウト構成を視覚化する…どこに何を配置するか（例：ロゴ、ナビゲーション、ボタン、本文など）
- デザインではなく構造に特化…色、フォント、画像といった装飾要素は基本的に使わない（または簡略化）
- ユーザー体験（UX）を考える第一歩…ユーザーがどのように情報にアクセスし、行動するかを設計
このワイヤーフレームという言葉ですが、チラシ等のグラフィックデザインでは、あまり使われない言葉で、ラフやレイアウト案、構成案と呼ばれることが多いです。
なおラフと構成案の違いは以下の通りです。
- ラフ…デザインのアイデアや構成を簡単に描いたもの
- 構成案…要素の配置バランスを考えた初期設計図
ワイヤーフレーム（ラフ/レイアウト案 / 構成案）を作るメリット
ワイヤーフレーム（ラフ/レイアウト案 / 構成案）を作るメリットは、「なんとなくこんな感じに作りたい」というぼんやりしたイメージを具体化できる点です。
ワイヤーフレーム（ラフ/レイアウト案 / 構成案）があると、素材を「どこに何を置くか」が決まっているので、その通りにはめていくだけですみます。「素材はどこに置こう」、「テキストをその場所に書こう」、「タイトルどこに入れよう」などを、迷うことなく、その結果、制作時間の短縮に繋がります。
デザインの未経験の方初心者の方には難しいとおもわれるでしょう。
安心してください。
実はワイヤーフレーム（ラフ/レイアウト案 / 構成案）を作ることは、デザインの未経験の方でも簡単に作れます。
紙に手描きでラフを描く、パソコンやスマホなどのペイントソフトでラフを描く、パワーポイントなどのドローソフトで描く、それだけです。
以下が例です。
▲実際にWindowsのペイントで描いたワイヤーフレーム（ラフ/レイアウト案 / 構成案）です。
▲実際にドローソフトあるInkscapeで描いたワイヤーフレーム（ラフ/レイアウト案 / 構成案）です。
ChatGPT及びSoraでワイヤーフレーム（ラフ/レイアウト案 / 構成案）を使ってチラシを作成する
ワイヤーフレーム（ラフ/レイアウト案 / 構成案）を作ってみたけど、それを、より視覚的にしたものにしたいと思うデザインの未経験の方はいらっしゃると思います。
そんな時に使用してほしいのが、ChatGPT及びSoraの画像生成機能です。
ChatGPT及びSoraの画像生成は、他の画像生成AIより優れている点があります。
それは文字などを含めて、画像生成を行ってくれる点です。
文字も含めて生成できるので、ワイヤーフレーム（ラフ/レイアウト案 / 構成案）を元にしたチラシの画像を生成してくれます。
今回のブログ記事では、デザインの未経験の方向けに、ChatGPT及びSoraでワイヤーフレーム（ラフ/レイアウト案 / 構成案）を使用して、チラシを作る方法をご紹介します。
この記事では、ワイヤーフレームには、Inkscapeというドローソフトで作ったものを使用します。
ChatGPT、Soraでワイヤーフレーム（ラフ/レイアウト案 / 構成案）を使ってチラシを作成する方法
ChatGPTでワイヤーフレーム（ラフ/レイアウト案 / 構成案）を使用して、チラシを作る方法
①ワイヤーフレーム（ラフ/レイアウト案 / 構成案）を読み込む
ワイヤーフレーム（ラフ/レイアウト案 / 構成案）を、＋ボタンをクリックして、読み込みます。
そしてプロンプトを入力します。
今回はファッションドールの広告を作るということで、以下のプロンプトを入力します。
ファッションドールのかわいらしい商品広告チラシを作成してください。
A あなただけの特別なドール、登場
B ファッションドールを抱いた女の子のリアルな画像
C ファッションドールの商品のリアルな画像
D キュートファッションドール
E ふわっと広がるドレスに、きらきら輝く瞳。
手にした瞬間、まるでおとぎ話の世界へ──。
「キュートファッションドール」は、オシャレが大好きなあなたにぴったり。
付属のコーデやアクセサリーを使って、今日の気分でスタイルチェンジ！
大人のコレクターアイテムとしても、プレゼントにも大人気です！
あなたのセンスで、世界にひとつだけの“わたしらしさ”を完成させよう♪
F 株式会社 ファッションドールハウス
YAML形式で商品広告チラシを詳細に設定してください。
するとYAML形式のコードをChatgptが書いてくれます。
さて、ここでYAMLという聞き慣れない言葉が出てくるので、簡単に説明します。
YAMLとは、「YAML Ain’t Markup Language」の略で、人間にとって読みやすく、かつ機械によって解析しやすいデータの表記形式です。設定ファイルやデータの記述、構造化データの保存などによく使われます言語です。
ChatGPTやSoraで画像生成を行う際に、YAMLを使う以下のようなメリットがあります。
- 構成を明確にできる…人物、背景、スタイル、テキストなどの要素をわかりやすく書き分けられる
- 何度も使い回せるテンプレートになる…パラメータだけ変えれば、似た構成の画像を簡単に作れる
- AIが理解しやすい…日本語でダラダラ書くよりも、YAMLは項目ごとに明確に伝えられるため、AIが各要素を「カテゴリ」として処理しやすくなる
ここでは、難しく考えないで、ChatGPTやSoraで画像生成を行う際に、YAMLは生成したい画像イメージを伝えやすい言語であるとでも思ってください。
そのため、YAMLでプロンプトを書くことで、ChatGPTやSoraが、生成したい画像イメージに近い画像生成を行ってくれるわけです。
②実際に生成する
「ご希望があれば、そのまま画像出力のサポートも可能です。」といったことをChatGPTが提案してくれるので、そのまま画像を生成してくださいと入力し、画像を生成します。
以下が生成された画像です。
YAMLをもとに、もう一枚生成してください、と入力して、生成した画像が以下です。
再度、YAMLをもとに、もう一枚生成してください、と入力して、生成した画像が以下です。
私としては、3枚とも、完成形には程遠い出来だと思いますが、テキストでこれだけ作れれば、見本としては十分使えるので合格点だと思いました。
これを参考にCanvaなどで完成形を作ればいいと思います。
以下がChatGPTで作ったチラシの画像を参考に、Canvaで作ったチラシです。
なお、このチラシに使った写真ですが、画像生成したものではなく、Canvaの素材を使いました。
Soraでワイヤーフレーム（ラフ/レイアウト案 / 構成案）を使用して、チラシを作る方法
①ワイヤーフレーム（ラフ/レイアウト案 / 構成案）を読み込み、プロンプトを入力して画像を生成する
ワイヤーフレーム（ラフ/レイアウト案 / 構成案）を、＋ボタンをクリックして、読み込みます。
そしてプロンプトを入力します。
今回はファッションドールの広告を作るということで、以下のプロンプトを入力します。
ファッションドールのかわいらしい商品広告チラシを作成してください。
A あなただけの特別なドール、登場
B ファッションドールを抱いた女の子のリアルな画像
C ファッションドールの商品のリアルな画像
D キュートファッションドール
E ふわっと広がるドレスに、きらきら輝く瞳。
手にした瞬間、まるでおとぎ話の世界へ──。
「キュートファッションドール」は、オシャレが大好きなあなたにぴったり。
付属のコーデやアクセサリーを使って、今日の気分でスタイルチェンジ！
大人のコレクターアイテムとしても、プレゼントにも大人気です！
あなたのセンスで、世界にひとつだけの“わたしらしさ”を完成させよう♪
F 株式会社 ファッションドールハウス
Remixボタンをクリックして、画像を生成します。
なお今回ですが、比率を3：2、生成枚数を2枚にしました。
以下が生成された画像です。
私としては、ChatGPTよりはややあ完成度が高いかな程度の画像が生成されたと思います。
②ChatGPTが書いたYAML形式のコードで画像を生成する
ChatGPTが書いたYAML形式のコードでSoraが画像を生成することが出来ます。
ワイヤーフレーム（ラフ/レイアウト案 / 構成案）を、＋ボタンをクリックして、読み込みます。
①でChatGPTがChatGPTが書いたYAML形式のコードをプロンプトを入力し、Remixボタンをクリックして、画像を生成します。
なお今回ですが、比率を3：2、生成枚数を2枚にしました。
以下が生成された画像です。
比率の指定の問題からか、下が削れていたりしてますが、私としては、ChatGPTよりはややあ完成度が高いかな程度の画像が生成されたと思います。
テキストのみで、完成品としては使えないが、見本としては十分なものが生成出来る点は、十分だと思いました。
これら生成した画像を参考にCanvaなどでデザイン編集を行い完成させばいいと思います。
以下がChatGPTで作ったチラシの画像を参考に、Canvaで作ったチラシです。
なお、このチラシに使った写真ですが、画像生成したものではなく、Canvaの素材を使いました。
このワイヤーフレーム（ラフ/レイアウト案 / 構成案）を使う方法なら、デザインの未経験の方でも、短時間でチラシを作ることが出来ると思うので、オススメです。
