【1日目資料】
Googleアカウントをご用意下さい。https://www.google.com/intl/ja/account/about
Google AI Studioにログインしてみましょう。https://ai.google.dev/aistudio?hl=ja
【自社商品の画像作成】
ご用意いただくもの「自社商品の写真」
使用するツール「Nano Banana」https://aistudio.google.com/app/prompts/new_chat?model=gemini-2.5-flash-image
このキャラクターの柄の、白いTシャツの画像を作成して下さい。
このTシャツを着た、日本人の若い女性モデルの全身像の写真を作成して下さい。
頭のてっぺんから、足のつま先まで、すべて表示して下さい。
【自社商品の動画作成】
ご用意いただくもの「上記で作成した自社商品AI画像」
使用するツール「Google Whisk(ウィスク)」https://labs.google/fx/ja/tools/whisk
(無料プランでは月に10本まで? 動画(Veo3-Fast)1本で20クレジット消費)
この人物が歩く動画を作成して下さい
「Google Flow」https://labs.google/fx/ja/tools/flow (無料プランでは月100クレジット? 動画(Veo3.1-Fast)1本で10クレジット消費)
Google AI Pro ¥2,900(税込)に入ると月に 1,000クレジット使えるらしいです。
【自社商品動画の編集】
ご用意いただくもの「上記で作成した自社商品AI動画」
【応用編-ナレーションの作成】
使用するツール「gemini-2.5-pro-preview-tts」https://aistudio.google.com/app/generate-speech?model=gemini-2.5-pro-preview-tts
私はTシャツを販売しています。
添付画像のTシャツの商品説明動画を作成しています。
動画で流すナレーションを作成して下さい。
# 注意
声のトーンも指定してください。
Tシャツのキャラクターの名前は「きたしん君」です。
# 出力形式
xxxxxxxxxx (声のトーン)
私はTシャツを販売しています。
添付画像のTシャツの商品説明動画を作成しています。
動画で流すナレーションを作成して下さい。
# 注意
2人の人物の会話形式にして下さい。
「Speaker 1」は女性で、「Speaker 2」は男性です。
声のトーンも指定してください。
Tシャツのキャラクターの名前は「きたしん君」です。
# 出力形式
Speaker 1:xxxxxxxxxx (声のトーン)
Speaker 2:xxxxxxxxxx (声のトーン)
【応用編-音楽の作成】
使用するツール「suno」https://suno.com
きたしん総合研究所資料 https://www.i-kiss.co.jp/kitashinsoken.pdf
添付の資料を参考に「株式会社 きたしん総合研究所」の歌を作成したい。
作成ツールとして「SUNO」https://suno.com/home を使いたい。
「歌詞(Lyrics)」と「スタイル(Styles)」と「曲名(Song Title)」等、
必要な情報を生成して下さい。
【WEBページ作成】
この資料を元にWEBサイトを作成したい。どういったページ構成が良いと思いますか?
ではご提案の内容で、WEBページを作成してください。
(Nano Bananaに切り替えてから)
このWEBサイトに掲載するのにふさわしい画像を複数生成して下さい。
上から画像を、
1.png
2.png
3.png
4.png
5.png
6.png
とファイル名をつけました。
これをHTMLと同じフォルダ内に配置します。
これらの画像をHTMLに掲載したいです。
上記を前提に、HTML,CSSを書き換えて出力して下さい。
【レンタルサーバー紹介】
「XREA(無料だが広告付)」https://www.xrea.com
「LOLIPOP」https://lolipop.jp
「Starレンタルサーバー」https://www.star.ne.jp 等々
【2日目資料】
【本格的WEBページ作成】
サンプルサイト https://kitashin.yancha.biz
サンプルサイトダウンロード https://www.i-kiss.co.jp/kitashin.zip
きたしん総合研究所資料 https://www.i-kiss.co.jp/kitashinsoken.pdf
(Gemini 3 Pro Preview)
この資料を元にWEBサイトを作成したい。どういったページ構成が良いと思いますか?
(Gemini 3 Pro Preview)
ではご提案の内容で、下記6ページのWEBサイトを、HTML,CSS,JavaScript等々を使用して作成して下さい。
各ページを1ページずつ順番に出力して下さい。
各ページのヘッダー部分と、フッター部分は共通のものにして下さい。
CSSは1つの外部ファイルを、すべてのページで共有するようにして下さい。
JavaScriptも1つの外部ファイルを、すべてのページで共有するようにして下さい。
CSSはHTMLと同じ階層にある「css」フォルダに入れて下さい。
JavaScriptのファイルは、HTMLと同じ階層にある「js」フォルダに入れて下さい。
トップページ (HOME)
研究所について (About Us)
事業・サービス案内 (Services)
入会のご案内 (Membership)
よくある質問 (FAQ)
お問い合わせ・資料請求 (Contact)
(NanoBanana)
index.htmlに掲載する画像を生成して下さい。
画像に文字は入れないで下さい。
(Gemini 3 Pro Preview)
生成した画像を1.pngという名前で保存し、HTMLと同じ階層にある「img」フォルダに格納しました。
この画像を掲載した新しいindex.htmlを生成して下さい。
(Gemini 3 Pro Preview)
contact.htmlからお問い合わせメールを送れるようにしたい。
PHPのプログラムを生成して下さい。
送信ボタンを押したら確認画面が表示され、内容を確認後、そのまま送信するか前の画面に戻るか選べるようにして下さい。
送信内容は、送信者のメールアドレスにも控えメールが送られるようにして下さい。
デバッグ用コードも組み込んでください。
(Gemini 3 Pro Preview)
contact.phpの出力した「戻る」ボタンを押した時に、入力した内容がcontact.htmlの中に残っているようにして下さい。
今は戻ると入力内容が消えています。
JavaScriptのSessionStorage機能を使って、contact.htmlとPHPプログラムの組み合わせで実現して下さい。
下記3ページのWEBサイトを、HTML,CSS,JavaScript等々を使用して作成して下さい。
各ページを1ページずつ順番に出力して下さい。
各ページのヘッダー部分と、フッター部分は共通のものにして下さい。
CSSは1つの外部ファイルを、すべてのページで共有するようにして下さい。
JavaScriptも1つの外部ファイルを、すべてのページで共有するようにして下さい。
CSSはHTMLと同じ階層にある「css」フォルダに入れて下さい。
JavaScriptのファイルは、HTMLと同じ階層にある「js」フォルダに入れて下さい。
WEBサイトに掲載するデータは、適当なダミーデータを生成して下さい。
ホーム (HOME)
会社概要 (company)
お問合せ (inquiry)
レンタルサーバー(XREA Free(無料だが広告付))
https://www.xrea.com
https://www.xrea.com/signup
動画資料