🤖 この記事はClaudeと一緒に書いています。体験はすべて本物です。文章の構成や言い回しの整え方をClaudeに手伝ってもらいながら、書いている本人(にっちょめ)の言葉でお届けしています。
この記事を読むとわかること
- ブログのメインビジュアルをAIで作る方法
- Midjourney・ChatGPT・Canvaの使い分け方
- 「どんなデザインが好きか」を先に言語化すると進めやすい理由
- 「プロンプトだけ渡す」より「画像を渡す」方がうまくいった理由
ブログのトップページに大きく表示されるメインビジュアル。サイトの第一印象を決める部分なので、ブログのコンセプトに合ったものを作りたいと思いました。
使用したAIはこの3つです。
- ChatGPT:最近のアップデートで画像生成が得意になったAI。まず最初に試した
- Midjourney:画像生成に特化したAI。細かい雰囲気の調整が得意
- Canva:デザインツール。AI生成機能もあり、テキスト入れまで一気にできる
にっちょめ今回、Claudeの出番はほとんどありませんでした。
結果的にスムーズだった順番はこの流れ
- 好みのデザインを参考サイトで言語化する
- Midjourneyで方向性を探る
- 気に入った画像をChatGPTに渡して仕上げる
- Canvaでキャッチコピーを入れて完成
最初からこの順番で進めていたわけではなく、試行錯誤の末にたどり着いた流れです。その過程をそのまま書いておきます。
①まずChatGPTで試した→いまいち
最初はChatGPTにこんなプロンプトを投げ、画像生成を試みました。
AIをテーマにしたウェブサイトのトップ画像を作成してください。コンセプトは、AIと共に成長する未来です。オレンジ（#D97745）とベージュ（F6E7DA）を基調とした配色で、フラットデザインを使用してください。コンピューターと人物（男性）の画像を含めてください。デザインはシンプルで分かりやすいものにしてください。
英語プロンプトの方が精度が上がりやすいと聞いていたので、Google翻訳を使って英語で入力。
にっちょめ「フラットなデザイン・AIテーマ・オレンジ系」という条件で出してみましたが、優しめな印象でちょっと想像していたイメージとは違いました。
②Midjourneyで試した
今度は同じプロンプトを使ってMidjourneyで生成してみることにしました。
AIをテーマにしたウェブサイトのトップ画像を作成してください。コンセプトは、AIと共に成長する未来です。オレンジ（#D97745）とベージュ（F6E7DA）を基調とした配色で、フラットデザインを使用してください。コンピューターと人物（男性）の画像を含めてください。デザインはシンプルで分かりやすいものにしてください。
先ほどと同様、英語に変換してプロンプトを入力。
ChatGPTと比べてみると、明らかに雰囲気が違います。ChatGPTは柔らかくて親しみやすい印象なのに対して、Midjourneyはデザイン力と色彩のセンスがあります。
にっちょめ同じプロンプトでも、ツールによってここまで個性が出るのかと驚きました。
③Canvaでも別の方向から試した → いまいち
ここで一旦Canvaへ移動。
CanvaにもAI生成機能があるので、そちらでも試してみました。キャッチコピーごとに指示を出せるので、テキスト入り画像を一気に作れる点が便利。でもこちらもしっくり来ませんでした。
Claudeプロンプトがよくなかった可能性もあります。
④Midjourneyでプロンプトを変えて再挑戦
一度Midjourneyに戻り、プロンプトを変えて再生成しました。
AIをテーマにしたウェブサイトのトップ画像を作成してください。フラットデザインで、オレンジ色（#FF7F50）を基調とし、コンピューターと人物（男性）の画像を含めてください。
デザインはシンプルで分かりやすいものにしてください。
先ほどのプロンプトより好みの色彩に。
ちなみにMidjourneyは一つのプロンプトで４つの画像を作成してくれます。
⑤そのMidjourney画像をChatGPTに投げたら、いい感じになった
Midjourneyが作ってくれた画像は、ハッとするほど洗練されていて、ひと目で気に入りました。でも、その完成度の高さに触れると、「もし別の角度から切り取ったらどうなるだろう？」「もっと違う表情も見られるかも」と、さらに好奇心が湧いてきました。
そこで、お気に入りの一枚を手に取って、今度はChatGPTに相談してみることにしました。
にっちょめこの画像の雰囲気を真似て、もう一度別パターンで生成をお願いします。
これが正解でした。プロンプトだけ渡していた時と全然違うデザイン。画像を「お手本」として渡すことで、ChatGPTが雰囲気をしっかり理解してくれました。
元の洗練された構図はそのままに、ChatGPTの手によってふんわりとした可愛らしいエッセンスが追加。今の自分に一番しっくりくる、お気に入りのパターンを見つけることができました。
にっちょめさらに別パターンの生成をお願いしす。
デザインの質感を残したまま。レイアウトを変更してくれました。
Midjourneyの「デザイン性」と、ChatGPTの「解釈の優しさ」。この二つを掛け合わせてみたら、想像以上に素敵な結果が待っていました。
「男性の顔は書き込まないでください」など細かい修正指示を追加しながら、最終的に気に入ったものができました。
⑥「どんなデザインが好きか」を先に言語化する必要があった
ここまできて、気づいたことがあります。「フラットなデザインが好き」と言いながら、自分が具体的にどんな雰囲気を求めているのかが、自分でもうまく言語化できていませんでした。
AIへの指示を出す前に、まず自分が何を求めているかを整理することが大切です。私が参考にしたのがSWELLの公式デモサイトです。
いくつかのデモサイトを見ていくうちに「こういう雰囲気がいい」というイメージが固まってきました。気に入ったデザインが見つかったら、
そのURLをそのままAIに渡してみるのが一番早いです。
「このサイトのデザインの雰囲気に合わせて画像を作ってください」と、URLや画像を渡すだけで、言葉で説明するより伝わりやすい。
⑦キャッチコピーの文字入れはCanvaで
最後は画像への文字入れ。
キャッチコピーはClaudeと相談して「AIと手探りで始める、新しい仕組み。」に決定。
Canvaで画像に載せました。
ここでCanvaを使う理由がひとつあります。MidjourneyやChatGPTで生成した画像のテキストは、後から触れません。フォントや位置を微調整しようとしても、画像として固まっているので編集できない。
Canvaは違います。生成した画像の上にテキストを別レイヤーで置けるので、フォント・サイズ・位置を自由に調整できます。だから画像は別のAIで作り、文字だけCanvaで後入れするスタイルが一番効率よかったです。
完成したデザインがこれ
完成したメインビジュアルをSWELLのカスタマイザーから設定しました。
- WordPress管理画面 →「外観」→「カスタマイズ」
- 「トップページ」→「メインビジュアル」を開く
- 「スライド画像[1](PC)」に画像をアップロード
- 「メインテキスト」にキャッチコピーを入力
- 「公開」をクリック
AIと進めてみて気づいたこと
今回の作業を通じて、一番大事だと感じたのは「先に自分の好みを言語化すること」でした。デモサイトを見ながら「こういう雰囲気がいい」を固めてからAIに指示を出すと、結果が全然変わります。
AIへの指示が上手くいかない時は、自分の中にある「好きなもの」がまだ言語化できていないサインなのかもしれません。
もう一つ気づいたのは、「プロンプトだけ渡す」より「画像やURLをお手本として渡す」方がずっと上手くいったこと。言葉で説明するより、具体的な参考素材を渡す方がAIには伝わりやすい。
ツールごとに得意なことが違うので、一つに絞らず使い分けた方が効率よかったです。
- Midjourneyはバリエーション出しが強い。
- ChatGPTは画像を見ながら細かく調整できる。
- Canvaはテキスト入れまで一気にできる。
初心者なりにいろんなAIを試してみてよかったと思います。
にっちょめこの記事が少しでもみなさんの参考になれば幸いです。以上、ありがとうございました。
