AI ダイナミックバナーバイオの作り方
作成するもの
ダイナミックバナーは、アイドルのプロフィールページを生き生きと見せる最も効果的な方法のひとつです。静止写真の代わりに、ページ上部にループする動画ポートレートを配置し、その下にアイドルの独自の雰囲気を表現する 9 枚の画像を並べた「My Vibe」グリッドを設置してみましょう。本チュートリアルでは、まさにそれを作成します。映画的なビジュアルとインタラクティブなデザインを融合させた、モダンなアイドルバイオページです。
これを実現するために使用するのが Trickle です。Trickle は vibe coding のために構築されたエージェンティックキャンバスで、AI による画像生成・動画生成・デザインツールを統合し、静止画からモーションバナーまでシームレスに制作できます。内蔵モデルとしては、迅速な画像生成が可能な Nano Banana、高精細なイメージから動画生成を行う Seedream 4.0、そしてシネマティックなアニメーションを生み出す Seedance 1.0 Pro があり、静的な素材を没入感のある本格的な映像に変換できます。
モデル概要と使いどころ
Nano Banana
高速な画像生成とスタイル探索。参照画像をもとにアイドルのポートレートを洗練させたり、9 枚グリッド用のバリエーションを作成するのに最適です。
Seedream 4.0
プロンプト追従性の高い高精細な生成。スチルをさらに整えたり、ポートレートから一貫性のある短い動画を作成するのに使用できます。
Seedance 1.0 Pro
滑らかで映画的なモーションを付与する画像 → 動画・テキスト → 動画モデル。自然な呼吸や髪の動き、カメラの微妙な移動などで静止画を高品質なバナー映像に変えるのに有効です。
一貫性のためのヒント
ライティングパレットやスタイルトークンをひとつ決め、全工程で繰り返し使用しましょう。例：赤いアンビエント光、映画的ライティング、ムーディーなトーン、浅い被写界深度。
エンドツーエンドのチュートリアル
Step 1 リファレンスとスタイルトークンの準備
- 使用権限のある腰から上のアイドル画像を 1 枚選びます。
- スタイルトークンを一度定義し、それを統一して使います。例：赤いアンビエント光、シネマティックシャドウ、ソフトなボケ、UHD、9:16 縦長ポートレート。
Step 2 Trickle でヒーローポートレートを生成
Trickle で Generate Image を選択。
リファレンス画像とスタイルトークンをもとにポートレートを生成。
肌や髪、ライティングが狙い通りでなければ再生成。
選んだポートレートを Library に保存し、idol_hero_still と命名。
品質チェックリスト
- 顔が鮮明でスタイルに合っているか
- 肩や衣装が 9:16 で映えるか
- 背景光と色調が UI アクセントに一致しているか
Step 3 「My Vibe」9 枚グリッドの作成
- Generate Image を使い、ヒーローと同じスタイルトークンを持つ 9 枚の画像を生成。
- 内容のバリエーションを指定：
- ジュエリーやドリンク、家具、小物などのオブジェクト
- 都市夜景やネオン、抽象的テクスチャといった雰囲気シーン
- 人物シルエットや手など一部人物要素
- 各画像を Library に保存し、vibe_01 … vibe_09 と命名。
キュレーションのコツ
9 枚を並べて確認し、色温度が浮いているものは差し替えることで統一感を保つ。
Step 4 バナー用にヒーローをアニメーション化
生成したポートレートを動かしましょう。Trickle で Generate Video を選び、idol_hero_still をベースに使用します。モーションは控えめに：穏やかな頭の動き、自然な呼吸、髪の微妙な揺れ、スローなカメラプッシュなど。3〜6 秒程度にして、ループが滑らかになるようにします。
レンダリングが完了すると、動画は Library に保存されます。名前を idol_banner_video と付けておきましょう。
ループのヒント
最初と最後のフレームを似せるように指示すると、シームレスなループが可能になります。
Step 5 Magic Canvas でページを構築
- Magic Canvas を開き、新しいキャンバスを開始。
- 自然言語でヒーローセクションをレイアウト：
- 全幅のビデオバナーを配置し、レスポンシブ対応で 9:16 を保持。
- ソースは idol_banner_video。
- デフォルトでミュート＆ループ。枠線や影はなし。
- 左側に名前のテキストを配置：韓国語名＋英語名を 2 行に。フォントは Caveat。
- 動画のロード中には idol_hero_still をポスター画像として表示。
- ヒーロー下に「My Vibe」グリッドを配置：
- 3×3 のレスポンシブグリッド。
- vibe_01 … vibe_09 を挿入。
- ホバーで微妙に拡大し、蛍光グリーンの細い枠を表示。
コピペ用 vibe coding 命令例
- “ヒーローセクションを二列レイアウトで作成。左はテキスト、右はメディア。”
- “右列に全幅ビデオプレイヤーを挿入。ソースは Library.idol_banner_video。ループ＆ミュート。装飾なし。”
- “ポスター画像に Library.idol_hero_still を使用。”
- “左列に韓国語名と英語名を H1/H2 で追加。フォントは Caveat。縦中央揃え。”
- “ヒーロー下に My Vibe セクションを追加。3×3 グリッドに Library.vibe_01〜vibe_09 を配置。ホバー時に拡大と#c4f82a の枠を表示。”
- “背景はダーク UI (#0c0c0c)、重ねたグレー (#1a1a1a, #2a2a2a)。アクセントは #c4f82a, #84cc16, #22c55e。”
Step 6 パフォーマンスとアクセシビリティの調整
- 動画は H264/H265 の適切なビットレートで、モバイルでもすぐ再生できるようにする。
- 動画や画像に代替テキストを設定。
- フォーカススタイルやキーボード操作に対応。
- モバイルとデスクトップ両方でレイアウトを確認。
再利用できるプロンプト設計テンプレート
ヒーローポートレート用
目的 腰から上のアイドルポートレートを生成。 [ライティングパレット] と [ムードトークン] を保持。顔を強調。背景は最小限でシネマティック。9:16縦長。肌と髪は鮮明。
9 枚グリッド用
目的 ヒーローと同じスタイルトークンを共有する9枚の画像を生成。オブジェクト・雰囲気・人物の3カテゴリーをミックス。色温度とライティングを統一。9枚を個別出力。
ポートレート動画化
目的 ポートレートを微妙な動きでループ動画化。フレーミング一定。自然な呼吸・髪の揺れ・スローなカメラプッシュ。3〜6秒。ループ可能な開始・終了フレーム。
Magic Canvas 配置
全幅ループ動画バナー [asset_name] を使用。ポスター画像 [still_asset] を追加。左列に [韓国語名] [英語名] を Caveat フォントで。My Vibe グリッドに [vibe_assets] を配置。ダークUI＋ネオングリーンアクセント。
なぜ重要か
静止画をモーションループに変えることで、ページを開いた瞬間にブランドと個性を伝えられます。Trickle の Library ワークフローにより、同じヒーロー動画をプロフィールやプレスキット、ショーケースに簡単に再利用できます。
公開チェックリスト
- ポートレートとバナーが同じライティングとパレットを共有している
- バナーは滑らかにループし、デフォルトでミュート
- Caveat フォントで名前が正しく表示され、代替フォントも準備
- 9 枚の画像が圧縮済みで色調一致
- モバイルでも名前とバナーが正しく表示される
- すべてのアセットが Library 内で明確に命名されている