![見出し画像](https://assets.st-note.com/production/uploads/images/130708989/rectangle_large_type_2_feaca7687155a74365ac2755dab48639.png?width=800)
【Midjourney】AIでヒーロー画像を作ってみたよ
こんにちは。アメリカ・シリコンバレー在住のSeikaです。
先日Jyugonという会社のホームページ作成を手掛けたので、その制作過程をnoteでシェアしていこうと思います。
今回はその第一弾、「ヒーロー画像制作」です。
ヒーロー画像は、ウェブサイトの顔とも言える大切な要素ですよね。
ヒーロー画像って何?
AIをどう使うの?
と思った方は読んでみてくださいね。
(2024年2月12日公開)
![](https://assets.st-note.com/img/1707782413303-s5VeDktyg5.png?width=800)
1. ヒーロー画像について調査
ヒーロー画像(Hero Image)とは、ウェブサイトのトップページやランディングページの最上部に配置される大きな画像のことです。
まずは、ChatGPTを利用してヒーロー画像のサイズや画質、効果的なプロンプトについて調査しました。
デスクトップサイズは通常1920x1080ピクセル、モバイルは360x640ピクセル、タブレットは768x1024ピクセルが推奨されています。
画質はウェブでは72 DPIが一般的ですが、高品質を目指す場合は300 DPIを選ぶことも。
ファイル形式はJPEGやPNGが一般的ですが、ページの読み込み速度を考慮して画像の圧縮も重要です。
会社名とブランドカラーは決まっているので、ヒーロー画像のアイディアも出してもらいます。
1. ジュゴンと海のイメージ
ジュゴンが泳ぐクリアな海の画像を使用し、海の色をブランドカラーに合わせて調整します。これにより、会社名の由来とブランドカラーが調和したビジュアルが作成できます。
2. テクノロジーと自然の融合
テクノロジー(例えば、ラップトップやモバイルデバイス)とジュゴンや海の自然な要素が融合した画像を作成します。このコンセプトは、テクノロジーと自然が調和しているという企業の哲学を表現できます。
3. グローバルなコミュニティ
多様な背景を持つエンジニアやプロフェッショナルが海岸で協力して作業する画像を使用します。背景には、海やジュゴンを描いた壁画などが描かれています。
4. 静寂と調和
静かな海の中でジュゴンが泳いでいる画像の上に、企業のミッションやビジョンを強調するテキストを配置します。テキストの色はブランドカラーを使用して統一感を出します。
2. 画像生成系AIで画像生成
Midjourneyというツールを使って、いろいろなアイディアを形にしてみました。
会社名が「ジュゴン」なので、その要素を取り入れようと試みましたが、なかなか難しい...
![](https://assets.st-note.com/img/1707783264976-bLGGaTvu6x.png?width=800)
![](https://assets.st-note.com/img/1707783408344-TgNv5Z0UCa.png?width=800)
![](https://assets.st-note.com/img/1707783468840-3d1FLimaAW.png?width=800)
![](https://assets.st-note.com/img/1707783815733-xGyweJWsYn.png?width=800)
![](https://assets.st-note.com/img/1707783858377-bizdroTvq3.png?width=800)
![](https://assets.st-note.com/img/1707783904020-cuiV0UxWEJ.png?width=800)
ここら辺から迷路に迷い込んだ感覚に襲われたので、
いいヒーロー画像とは何なのか調べてみることにしました。
colbiの10 Top Website Hero Images and Best Practices to Create Your Ownによると
成功事例を参考にすることで、自身のウェブサイトに適したヒーローイメージをカスタマイズし、訪問者に明確なメッセージを伝えることができる。
とあったので、まずは成功事例に沿って作ってみました。
![](https://assets.st-note.com/img/1707784490586-f01dFmGyui.png?width=800)
![](https://assets.st-note.com/img/1707785052410-XGIwXUkg1q.png?width=800)
![](https://assets.st-note.com/img/1707785157983-Mtjs73qOxj.png?width=800)
この時点で100パターンほど作りました。
![](https://assets.st-note.com/img/1707785275249-JdUPIJXk1d.png?width=800)
![](https://assets.st-note.com/img/1707785244426-OTB5shGqrd.png?width=800)
![](https://assets.st-note.com/img/1707785247466-ahGaVkd8v9.png?width=800)
3. メンバーに意見をもらう
変な方向にいってしまう間にプロジェクトメンバーの意見をもらいます。
![](https://assets.st-note.com/img/1707785696072-oHzaU2tHqw.png?width=800)
![](https://assets.st-note.com/img/1707785699331-HQes0pMZYs.png?width=800)
![](https://assets.st-note.com/img/1707785705012-yY2kvtL29f.png?width=800)
![](https://assets.st-note.com/img/1707785707647-Fhy5GAGNWY.png?width=800)
4. 決定
1回目の提案後メンバーと話し、画像が決定👏
![](https://assets.st-note.com/img/1707786057040-PjgzZ8EGsl.png?width=800)
5. まとめ
今回はAIを使ってヒーロー画像を作ってみました。
元々はChatGPTでリサーチした「ジュゴン」をテーマにスタートしましたが、Midjourneyで試行錯誤を重ねていくうちに方向転換。
チームメンバーの意見も取り入れながら、女性のエンジニア画像に決定しました。
作業時間は3時間ほどでしょうか。
案外時間がかかってしまいましたが、画像をスクラッチから作るよりは断然速くできます。
次回は、会社のイメージカラーについて書いてみます。
もし記事が役に立ったと思ったら、ぜひスキボタンを押してください😊
それでは、次回の記事でお会いしましょう!
Follow me here😊
よろしければサポートお願いいたします。いただいたサポートはクリエイターとしての活動費に使わせていただきます。