学生必見!ポートフォリオの作り方を徹底解説!

【AIReel】写真からキービジュアルを作る方法

【AIReel】写真からキービジュアルを作る方法

記事内にプロモーションを含む場合があります

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Webサイトや広告などで、第一印象を大きく左右する「キービジュアル」。イメージに合った写真を探しても、構図や背景、色味がデザインに合わないことがあります。

そんなときに活用できるのが画像生成AIです。既存の写真をAIで加工することで、背景や雰囲気を変えたり、エフェクトを加えたりと、目的に合わせたビジュアルを作成できます。

今回は「AIReel」を使って、人物写真からデザインカンファレンスのWebサイト用キービジュアルを制作します。実際の作例をもとに、写真の加工から仕上げまでの流れを紹介します。

今回制作するキービジュアルの作例

今回は、架空のデザインカンファレンス「CREATIVE SHIFT 2026」のWebサイト用メインビジュアルを制作します。シンプルな人物写真をベースに、AIReelで背景や色味、デジタルエフェクトを追加。ブルーやパープルを基調とした、クリエイティブとテクノロジーを感じさせるビジュアルに仕上げます。

元の写真 → AI加工 → キービジュアル

と、どのように変化していくのかを見ながら制作していきましょう。

AIReelでキービジュアルを作成

それでは実際にAIReelを使ってキービジュアル作成を行ってみましょう。

STEP.1
AIReelにログイン
AIReelにアクセスし、右上からログインします。Googleアカウントがあれば簡単にログインが可能です。
アカウントがある方は画像から画像へをクリックしましょう。
STEP.2
画像から画像へを実行
左メニューの [ 画像 ] をクリックし、[ 画像から画像へ ] を選択します。モデルを選択し、ベースとなる画像をアップロードしましょう。
元画像
なお、今回使用する元画像は左図です。このベースとなる素材に加飾を加えてキービジュアルを作成します。
プロンプトを入力し、画像サイズを選択します。デザインカンファレンスをテーマにしたキービジュアルなので、テーマに沿ったプロンプトを入力します。
※なお、サンプルプロンプトは下部に掲載しています。

最後に [ 制作を開始 ] をクリックします。
STEP.3
キービジュアルのベースが完成
文字入れをする前のキービジュアルのベースデザインが完成しました。完成したビジュアルはダウンロードしておきましょう。
FINISH
文字入れを行う
再び [ 画像から画像へ ] をクリックし、ダウンロードしたキービジュアルをアップロードします。
モデルを選択し、プロンプトを入力しましょう。
※サンプルプロンプトは下部に掲載しています。
以上でデザインカンファレンスをイメージしたキービジュアルが完成しました。ベースとなるビジュアルを作成してから文字情報を後から生成して加えると精度の高い仕上がりにできます。

Webサイト用キービジュアル。近未来的なデザインカンファレンスをイメージした、洗練されたクリエイティブテック系のビジュアル。 画面右側に、黒いハイネックの服を着た若いアジア人女性を大きく配置。女性は横顔で、やや上方向を見つめている。髪は黒髪で後ろにゆるく束ね、自然な毛流れを残す。表情は落ち着いていて知的で、未来を見つめているような印象。 画面左側にはWebサイトのタイトルやコピーを配置できる広い余白を確保する。 全体のカラーはダークネイビー、ディープブルー、シアン、パープルを中心とした寒色系。左側は濃いネイビーから黒に近い暗い背景、右側は明るいブルーから淡いシアンへ変化するグラデーション。 人物と背景に、半透明の幾何学図形、斜めに伸びるシャープなポリゴン、デジタルグリッチ、細かなドットパターン、デジタルノイズ、水平ライン、透明な矩形、ホログラムのような光を重ねる。 人物の髪や肩の周辺にはブルーとパープルの光を重ね、人物とデジタルグラフィックが融合しているような表現にする。背景には抽象的な都市やデジタル空間をわずかに感じさせるディテールを追加。 広告・Webデザインとして使用できる高品質でスタイリッシュな仕上がり。SF映画のように重厚にしすぎず、デザインイベント、クリエイティブカンファレンス、AI、UI/UX、テクノロジーを連想させる現代的で洗練されたアートディレクション。 文字、ロゴ、ボタン、UI、読める記号は一切入れない。左側の余白を十分に残す。

入力画像の人物、背景、構図、色、ライティング、グラフィック、エフェクトは変更せず、そのまま維持してください。 この画像をデザインカンファレンスのWebサイト用メインビジュアルとして仕上げます。 画面左側の余白を使用して、以下のテキストを追加してください。 メインタイトル: CREATIVE SHIFT 2026 サブタイトル: DESIGN × AI × EXPERIENCE イベント情報: 2026.10.17 SAT — 10.18 SUN GRAND FRONT OSAKA キャッチコピー: DESIGN THE NEXT EXPERIENCE. 【レイアウト】 「CREATIVE SHIFT 2026」を画面左側のメイン要素として大きく配置してください。 CREATIVE SHIFT 2026 の3行構成にし、左揃えで配置します。 メインタイトルには太くモダンなサンセリフ体を使用し、文字間と行間をやや詰めた、デザインカンファレンスらしい力強いタイポグラフィにしてください。 「CREATIVE」と「2026」は白を基本とし、「SHIFT」にはブルー〜パープル系のアクセントを使用してください。 メインタイトルの下に DESIGN × AI × EXPERIENCE を小さく配置してください。 さらにその下にイベント開催日と会場名を配置してください。 2026.10.17 SAT — 10.18 SUN GRAND FRONT OSAKA 文字情報には明確なサイズ差を付け、 CREATIVE SHIFT 2026 ↓ DESIGN × AI × EXPERIENCE ↓ 開催日・会場 の順番で視線が流れるようにしてください。 タイポグラフィには、入力画像に使用されているブルー、シアン、パープルの色をアクセントとして使用し、背景のデジタルグラフィックと自然に馴染ませてください。 必要に応じて文字の一部に、ごく軽いグリッチ、ライン、透明な矩形、デジタルUI風の装飾を追加してください。ただし可読性を最優先し、過度なエフェクトは使用しないでください。 右側の人物には文字を重ねず、人物の顔・髪・服・ポーズを変更しないでください。 元画像のアスペクト比、人物の位置、背景、色調、ディテールは維持してください。 指定していない文字、ロゴ、記号、数字は追加しないでください。 指定した英字・数字のスペルを正確に描画してください。

その他キービジュアルの作例

国内旅行とジムをテーマにしたキービジュアルの作例です。こちらもビジュアルを作成してから文字入れを別途後から行っています。最初からすべての要素を一度で入れるより、段階を経て生成する方が精度が高くなりますよ。

おわりに

今回はAIReelを使って、人物写真からWebサイト用のキービジュアルを作成する方法を紹介しました。

画像生成AIをデザインに取り入れることで、写真の背景や色味を変更したり、グラフィックやエフェクトを追加したりと、素材そのものをデザインの方向性に合わせて調整できます。従来のメインビジュアルの作り方では、イメージに合った写真素材を探し、その素材に合わせてデザインを組み立てることも多くありました。

AI画像編集を活用すれば、反対に作りたいデザインに合わせて写真を加工するという選択肢も生まれます。もちろん、生成した画像をそのまま完成品として使用するだけでなく、Photoshopなどで文字やレイアウト、色味を調整して仕上げるのもおすすめです。

AIキービジュアルの作成や画像生成AIを使ったデザインに興味がある方は、写真加工や素材制作など、普段の制作工程の一部から取り入れてみてはいかがでしょうか。


ではまた!