Video to Video の使い方

TOP -> Get stated -> Gen-3 Alphoモデルを選択 すると Video to Video 作成画面が表示される。

1. Examples

プロンプト入力項目の “examples” を押下 すると様々なスタイルが用意されている事が分かる。
スタイル選択 -> スタイルの特徴が書かれたプロンプトが自動で入力項目にセットされる。
(正直 ×× style と入力するだけでも、そのスタイルが映像に反映されてたので ↑で選択しなくてもいいかも …)

用意されているスタイル

2. Custom

プロンプト入力項目の “custom” を押下 するとプロンプトの保存をすることができる。

3. Structure transformation

プロンプト入力項目 左下部の “Setting” 押下で開くパレットです。

Structure transformation の値は 0～1まで調整することができ、1に近づくにつれて抽象的スタイルの動画を作成する事ができる。0 が一番リアルな動画スタイルになる。

プロンプト例

元動画

結果の動画とプロンプト

失敗例

元動画

使用例

• 元動画のスタイルを変更したり物体を追加したり。
• 3Dモデル動画 to 様々なスタイルの動画出来そう。
• ダンス動画の作成 (SNSにUPできる)

今流行り！”かば”のツイートでどのくらいのビュー数を稼げるのか？

ランキング

今日時点 (2024/09/17) の結果発表

※ 2024/09/12(木) のツイート

※ 2024/09/13(木) のツイート

• AI生成する事
• view数が多かったツイートのタグをパクる
  #หมูเด้ง #หมูเด้งจะเด้งกี่โมง @kkopzoo #ほっこりトゥイッター
• 複数のイラストで試す

生成パターン

1. ゆるキャラ
2. 奇妙
3. かわいい

生成結果

1. ゆるキャラ

1番目の生成

#Image FX

《生成理由》
手乗り系が流行っていたのと、笑顔にさせたらかわいいかと思ったから。

《課題》
もっとキャラクター感がほしい

《プロンプト》
A hippopotamus in your hand , cute , smiling , very small

2番目の生成結果

《課題》
もう少しゆるキャラ感が欲しい

《修正点》
あり、最初のプロンプトに文言追加

《プロンプト》
A hippopotamus in your hand, cute , smiling , very small , reaching out with all your might, manga small

最終結果

#Adobe firefly

《生成理由》
２番目の画像よりゆるきゃら感がほしかったため

《課題》
なし

《修正点》
あり、すべてプロンプトにするより生成精度が高い firefly の Image to Image で参照度合を調整しながら生成した。

《プロンプト》
a baby hippo

《手順》
1. 合成欄に輪郭参照したい画像をアップロード (強度：MAX)
2.スタイル欄に絵柄を参照したい画像をアップロード (視覚​的​な​適用​量：MAX, 強度：なし)
3.プロンプトを入力し生成押下

2. 奇妙

#Artbreeder

《生成理由》
元画像(二次創作は視聴数多いイメージがあるため)を参照。だれも奇妙なイラストはポストしてなかったから

《プロンプト》
なし。画像の参照度合を変更しながら生成した。

《修正点》
なし

3. 外国風

1番目の生成結果

#chatGPT

《生成理由》
かばツイートに海外の方が多いのと、このテイストのイラストを載せてる人はいなかったから。

《課題》
リアル感が強すぎる。

《プロンプト》
勢いのあるカバのイラストを生成してください。
大きく開けた口：カバが吠えている、または大声を出しているような表現。
体の動き：カバが走っている、または前に突進しているポーズ。
背景の効果：スピード感やエネルギーを表現するために、背景に流れる線や爆発するようなエフェクトを加える。

最終結果

《修正点》
1番目の生成プロンプトに”かわいいイラスト”と付け加えた。

参考デザインを元に、プロンプト to コードでデザインの表現をする。

参考デザイン

使用ツール

• chatGPT

結論

IT会社のシングルサイトを作成する場合、chatGPTで作成する場合
chatGPT > 最終結果

使用割合：AI使用と手作業が約「9:1」
作業時間
chatGPT：約 2h

検証内容

プロンプトだけでどのような返答がされるのか確認するため、
chatGPT・claude でコードを生成しサイト作成。

命令プロンプト と 生成結果

• 参考デザイン画像をAIに送信し、下記プロンプトを作成してもらう。

下記条件に従ってhtml,cssコードを作成してください。

1.ヘッダーセクション
スタイル: ページ上部に配置されており、ブランドロゴとナビゲーションメニュー（「Home Page」「About us」「Services」「Resources」）が水平に並んでいます。背景は白で、フォントは黒または濃いグレーを使用しています。
フレーム構成: ロゴとナビゲーションメニューは、フレックスボックスを使用して中央揃えになっている可能性が高いです。ロゴは左側に配置され、メニューは右側に配置されています。

2. ヒーローセクション
スタイル: 大きな画像とキャッチコピーが中央に配置されています。背景は白で、テキストは太字の黒いフォントが使用されています。「小さく作って、大きく展げる。」というメッセージが強調されています。
フレーム構成: フルワイドなコンテナに画像が配置され、その下にキャッチコピーのテキストがセンタリングされて配置されています。

3. サービス紹介セクション
スタイル: このセクションは、左側にテキスト、右側にイラストが配置されています。アイコンやイラストはブルーとパープルの色調で統一されており、テキストは黒または濃いグレーです。
フレーム構成: グリッドレイアウトまたはフレックスボックスが使用されており、各アイテムが同じ高さで整列されています。左右に均等にスペースが取られています。

4. 仕事セクション
スタイル: のセクションは、特定の業界向けのサービスやソリューションを視覚的に紹介しています。
フレーム構成:全体的なレイアウトは整然としており、6つの異なるサービスが3列2行のグリッドで配置されています。

> 生成結果

• 作成したプロンプトを深津式プロンプトに変更し再送信。
  > ChatGPTの回答精度を高めるため。

#命令プロンプト
あなたは{優秀なコーダー}です。以下の条件に基づいて、IT会社のホームページを作成するためのHTMLとCSSを出力してください。

#条件：
1. ヘッダーセクション
・ページ上部に横並びに配置し、フレックスボックスを使用して中央揃えにします。
・ロゴは左側、ナビゲーションメニュー（「About」,「Services」,「Works」,「Contact」）は右側に配置してください。
・背景色は白、フォントの色は黒または濃いグレーに設定します。

2. ヒーローセクション
・コンテンツ幅は1100px。
・アスペクト比16:9の画像を配置し、その下にキャッチコピー「小さく作って、大きく繋げる。」を中央に配置します。
・背景色は白に設定してください。

3. サービス紹介セクション
・コンテンツ幅は1100px。
・背景色は白、フォントの色は黒に設定します。
・4つのジグザグ型レイアウトを含むセクションを作成します。
・各セクションには画像とテキストを含めます。
・1番目と3番目のセクションでは、画像が左、テキストが右に配置されます。
・2番目と4番目のセクションでは、画像が右、テキストが左に配置されます。
・画像のサイズは固定（例: 300px × 200px）で、テキストボックスは中央揃えにします。
・各セクションの間には適切なスペースを設けてください。

4.ワーク紹介セクション
・2行3列のグリッドレイアウトを使用し、合計6つのカードを配置します。
・各カードには、上部にアイコン画像、セクションタイトル、その下に短い説明文が含まれます。
・各カードは均等なサイズとスペースで配置し、中央揃えにしてください。

カードデザイン:
・カードの背景色は白で、四隅に少し丸みをつけます（ボーダー半径を設定）。
・カードの周囲には薄いシャドウ効果を追加し、浮いているように見せます。
・アイコン画像の下に日本語のタイトル、その下に英語の説明文を配置します。
・フォントの色は濃いグレー、背景色は白に設定してください。

ポイント
> gred要素の場合、カラムやレコード数を指定しないと横並びになる。
> コンテンツ幅は指定しないと要素が画面いっぱいになる。
> 生成結果

• 手動修正箇所
  1.ヘッダコンテンツ幅を変更
  ・1100pxに指定。
  
  2.彩サーバにある画像をhtmlに追加
  
  3.サービス紹介セクション
  ・偶数レコードは画像とテキスト、奇数レコードはテキストと画像の並びにしたかった。
  
  結果
  下記結果が出力されたため、偶数・奇数どちらも画像とテキストという並びになっていた。
  ・cssに画像とテキストを交互にするスタイル
  ・htmlでは偶数・奇数で要素が交互
  　> なので、html構成を「画像とテキスト」の順番に自身で変更。

2を修正するために入力したプロンプト

× ジグザグ型レイアウトを含むセクションを作成
× html要素は変更せずに、画像とテキストを交互にしてください。
× cssだけで画像とテキストの並びを交互にしてください。

• フレームデザインに近いサイトを作成できた。
  > 最終結果

無料の生成AIを活用し、作成したサイトの出来栄えと作業割合、作成時間が知りたい。

使用ツール

• relume.io
• Adobe firefly
• LightX
• chatGPT

結論

テンプレートの様なサイトなら作成可能
> 最終結果

使用割合：生成AIと手作業 約「7:3」
作成時間 (約)
合計：10h
デザイン：3h
デザイン調整：2h
メイン画像生成：1h
アイコン画像生成：1h
コーディング：1h
コード調整：2h

完成したサイトのキャプチャ

検証内容

• relume.io でサイトの構成とフレームデザインの生成
• XD でデザインの手動修正
• Light でメインビジュアルの画像生成
• Adobe firefly でコンテンツ要素のアイコン画像を生成
  > 完成デザイン
• chatGPTでコーディング
  方法：コンテンツ要素ごとに画像のスクショを撮影しGPTでコード生成
  > 生成結果

命令プロンプト

GPTにコンテンツ要素のスクショと共に、下記を送信。

添付した画像の html,css を作成してください。

社員紹介などのgrid要素は列も指定する。 (指定しない場合、要素すべてが横並びになるため)

添付した画像の html,cssを作成してください。要素の並び方は3列2行です。

• GPTコーディング後、CSS, HTMLの手動調整
  ・ヘッダのボタンを削除
  ・サービスを縦並びにし、偶数・奇数で画像とテキストを左右逆にする
  ・社員要素背景を白に変更
  ・フッターのスタイル変更
  > 最終結果

デザイン to コードで作成したデザインを元に、プロンプト to コードでデザインの表現をする。

使用ツール

• chatGPT
• claude.ai

結論

IT会社のシングルサイトを作成する場合、claude ならよくある会社HPが出来そうな予感 (無料制限で未完成)
chatGPT > 最終結果
claude > 最終結果

使用割合：AI使用と手作業が約「9:1」
作業時間 (約)
合計：1h
chatGPT：30min
claude：30min

検証内容

プロンプトだけでどのような返答がされるのか確認するため、
chatGPT・claude でコードを生成しサイト作成。

命令プロンプト と 生成結果

GPTの場合

• 命令文：IT会社HPに必要なコンテンツを質問。

IT会社のホームページを作成する際の必要なコンテンツ

• 生成結果：IT会社HPを作成する際に必要な基本的なコンテンツが文章で返答された。

1. ホームページ（トップページ）
会社のビジョンやスローガンを一目で伝えるキャッチコピー
最新のサービスや製品、キャンペーン情報
会社の強みや特徴を簡潔に説明するセクション
顧客の声や実績の紹介（例: 顧客のロゴや成功事例）

2. 会社概要（About Us）
会社のミッション・ビジョン
会社の歴史や沿革
経営者や主要メンバーの紹介
会社の所在地や連絡先
社内文化や価値観の紹介
.....

• 命令文：指定されたコンテンツに基づいて、トップページのレイアウトを提案。

必要なコンテンツ(コンテンツ番号を入力)をもとに、ホームページのTOPページの構成を考えてください。

• 生成結果：トップページの構成について、指定したコンテンツを元にデザイン案の返答がされた。

1. ヘッダー
ロゴ: ページ左上に会社のロゴを配置。

ナビゲーションメニュー: ヘッダー内に固定され、以下のリンクを含むメニューを配置。

ホーム
会社概要（About Us）
サービス紹介（Services）
製品紹介（Products）
お問い合わせ（Contact Us）
よくある質問（FAQ）
コンタクトボタン: ヘッダー右側に「お問い合わせ」ボタンを目立つデザインで配置。クリックするとお問い合わせフォームにジャンプ。

2. メインビジュアルエリア
キャッチコピー: 会社のビジョンやスローガンを大きなフォントで表示。例：「未来を創るITソリューション」
ビジュアル要素: 高品質なイメージや動画を背景に使用し、提供するサービスや製品の一部をビジュアルで示す。
アクションボタン: 「サービスを見る」「お問い合わせ」など、次のアクションを促すボタンを配置。
・・・・・

• 命令文：コードの作成依頼

ヘッダーからフッターまでの html,css コードを作成してください。

• 生成結果：最終結果

Claudeの場合

• 命令文：IT会社HPに必要なコンテンツを質問。

IT会社のホームページを作成したいです。必要なコンテンツを教えてください。

• 生成結果：トップページの構成とデザイン案 + HTML・CSSコード が返答された。
  > 元々Claudeについているプレビュー機能で確認可能。
  > 生成結果

このHTMLコードは、IT会社のホームページのTOPページの基本的な構造を示しています。主な特徴は以下の通りです：

ヘッダー：ロゴとナビゲーションメニューを含みます。
ヒーローセクション：会社の主要メッセージと呼びかけを表示します。
サービス紹介：主要なサービスを簡潔にリストアップします。
・・・・・

• 命令文：細かいスタイルを指定し修正。
  >メインビジュアルをスライダーにしてください。
  > スライダーは画面いっぱいの、アスペクト比は16:9にしてください。

• 生成結果：上記の指定をHTML + CSSコードが返ってきた。
  > 最終結果
  ※これ以上は有料のためコード生成不可

《結果》
AI Photoshoot だけでは、カバンの形状が崩れたりするため商品画像を生成するのは難しい。
ただし、Instant Design や フォトショを使用することでイメージ画像としてなら使える画像が作成できそう。

《上記画像を作成するためにしたこと》
① 参考画像を chatGPT に投げて、
　・画像の特徴を説明させる
　・その内容を元に文章を修正し、英語に翻訳

② Instant Design で「AI生成した人物」+ 「商品バック (背景削除済)」を合成

③ フォトショで ② の画像調整

④ AI Photoshoot で ③ の合成感をなくす

《命令プロンプト》
・男性

男性は白いTシャツと黒いズボンを着て後ろ向きに立っており、顔は見えず、右肩にショルダーバッグを担いでいる。カメラは男性の背後に配置され、特定の風景やオブジェクトのないシンプルな背景が付いています。

The man is standing facing backward, wearing a white T-shirt and black pants, with his face not visible, carrying a shoulder bag on his right shoulder. The camera is positioned behind the man, with a simple background that lacks any specific scenery or objects.

・女性

女性は後ろ向きに立ち、白いパーカーと白いパンツを着用し、顔は一切見えません。カメラは女性を真後ろから撮影し、背景はシンプルで特定の景色や物体がありません。

The woman is standing facing backward, wearing a white hoodie and white pants, with her face completely not visible. The camera is positioned directly behind the woman, with a simple background that lacks any specific scenery or objects.

—————————————————————

《その他の生成した内容》
Instant Design

《説明》
この機能で生成した男性にバッグを担がせ、影を追加した。

《命令プロンプト》

男性は白いTシャツと黒いズボンを着て後ろ向きに立っており、顔は見えません。カメラは男性の背後に配置され、特定の風景やオブジェクトのないシンプルな背景が付いています。

The man is standing facing backward, wearing a white T-shirt and black pants, with his face not visible. The camera is positioned behind the man, with a simple background that lacks any specific scenery or objects.

《説明》
この画像は、この機能で生成した画像 に フォトショでバッグを追加。

《命令プロンプト》

女性は後ろ向きに立ち、白いパーカーと白いパンツを着用し、一切顔は見えません。カメラは女性の真後ろから撮影し、背景はシンプルで特定の景色や物体がありません。

AI Photoshoot
-> プロンプト作成、超苦労。文言の修正をすればするほど商品の形状が変形したりした。

《結果》
〇 ショルダーバックを使用しているか
× 人物の服装は、白シャツであるか
× 人物がショルダーバックを背負っているか
× 人物と比較した時のバックのサイズ感や形状に違和感がないか
× 人物とバックの馴染み方に違和感がないか

→ ショルダーバックが男性だと認識されているのか？

《命令プロンプト》

男性は後ろ向きに立ち、白いTシャツと黒いパンツを着用し、顔は見えません。カメラは男性の背後からやや左側に向けて撮影し、背景はシンプルで特定の景色や物体がありません。

The man stands facing backward, wearing a white T-shirt and black pants, with his face not visible. The camera is positioned slightly behind and to the left, with a simple background that lacks any specific scenery or objects.

《結果》
〇 ショルダーバックを使用しているか
〇 人物の服装は、白シャツであるか
〇 人物がショルダーバックを背負っているか
× 人物と比較した時のバックのサイズ感や形状に違和感がないか
× 人物とバックの馴染み方に違和感がないか
→ サイズの認識ができていない？

《命令プロンプト》

アップロードした写真はショルダーバックです。
男性は後ろ向きに立ち、白いTシャツと黒いパンツを着用し、顔は見えず、ショルダーバッグを右肩に掛け、カメラは男性の背後からやや左側に向けて撮影し、背景はシンプルで特定の景色や物体がありません。

The uploaded photo features a shoulder bag. The man stands facing backward, wearing a white T-shirt and black pants, with his face not visible, carrying the shoulder bag on his right shoulder. The camera is positioned slightly behind and to the left, with a simple background that lacks any specific scenery or objects.

《結果》
〇 ショルダーバックを使用しているか
〇 人物の服装は、白シャツであるか
〇 人物がショルダーバックを背負っているか
× 人物と比較した時のバックのサイズ感や形状に違和感がないか
〇 人物とバックの馴染み方に違和感がないか

→ ショルダーベルトの長さが足されている

《命令プロンプト》

アップロードした写真はショルダーバックです
ショルダーバックの大きさは、男性の上半身より小さいです。
ショルダーバックから突き出ている線は、バックのベルト部分です。

男性は後ろ向きに立ち、白いTシャツと黒いパンツを着用し、顔は見えず、ショルダーバッグを右肩に掛け、カメラは男性の背後からやや左側に向けて撮影し、背景はシンプルで特定の景色や物体がありません。

The uploaded photo features a shoulder bag. The shoulder bag is smaller than the man's upper body. The line protruding from the shoulder bag is part of the bag's strap.

The man stands facing backward, wearing a white T-shirt and black pants, with his face not visible, carrying the shoulder bag on his right shoulder. The camera is positioned slightly behind and to the left, with a simple background that lacks any specific scenery or objects.

-> それ以降は、どうにもならないため中止

—————————————————————-