お久しぶりです。師匠でございます。

去る2024年1月、横浜デジタルアーツ専門学校でYDA EXHIBITION 2024という展示・プレゼンテーション大会が行われました。

そのYDA EXHIBITION 2024で、私はWebデザイン科を代表してプレゼンテーションをしてきました・・・。

いやー
まさか自分がプレゼンテーターとしてYouTubeに映る時が来るとは思いませんでしたよ。もし私の勇姿を見たいぞっていう方はアーカイブが残っているのでこちらから。2番目に発表しています。

URL：https://www.youtube.com/live/qZZEEEuVQK4?si=LPqflx3CFRdJMlWk

まぁ毎度お馴染み、なんでこの話をしているかといいますと

今回はあのプレゼンで行っていた作業内容を大公開していきます！

これを見ればあなたもRTA(リアルタイムアタック)に挑戦できます！いぇい！
なんとこのRTA、ネットワークが負けることなくうまくいけば6分切ることができます。

今考えるとすごいことをしていますね。

私が本番で出したタイムは6分31秒でしたが、他の人はどれくらいのタイムを叩き出してくれるのでしょうか。先輩とかは10分前後と言っていたような…

あと当日話すことができなかった説明もここで補足できたらいいなと思っています。
では早速いきましょう！

まず作業を始める前に準備することがあります。

1.　ChatGPT、DALL・E、Runway Gen-2のツールをブラウザに用意
2.　VSCodeとプレビューを画面に常にある状態に
3.　あらかじめChatGPTに聞く内容決めておき最初にChatGPTに送る文章をコピーしておく

ここの特に3が重要で、この作業をするだけで3秒くらい変わります。
時間を有効に使いたい方は忘れないようにしましょう。

準備が終わり次第、いよいよ本作業に入っていきます！

手順1　ChatGPTに以下の内容を送る

—————————————————————————–

展覧会のティザーサイトを制作したいです。
展覧会のタイトルは「YDA EXHIBITION」とする。
ページの構成は以下のとおり。

１．ヘッダーエリア
ヘッダーエリアには、ロゴとナビゲーションメニューが入る
ナビゲーションは　HOME、概要、ポートフォリオの3つ

２．ヒーローセクション
キャッチコピーと目を引くビジュアルが入る

３．ポートフォリオセクション
代表的な展示作品の紹介が入る

４．フッターエリア
フッターエリアには、コピーライトが入る
このサイトのベースとなるHTMLとCSSを生成してください。

—————————————————————————–

私はこのような文章を送ってサイトのベースのコードを生成してもらいました。ページ構成の話は今度また別の機会でできたらいいなと思うので今回は省略しますが、一応

HTML・・・Webサイトを作成する時のコンピューターへ構成を指示する担当
CSS・・・背景色や画像の設置、文字の加工など幅広いデザインを指定する担当

みたいなイメージで思ってくれたら嬉しいです。

またこの作業と同時進行で、ChatGPTで生成されたHTML、CSSはVSCodeに貼り付けた後、DALL・Eで欲しい画像の生成(今回はポートフォリオ作品を載せたかったためそれにあった画像を生成)とRunway Gen-2で動画化させたい画像を読み込ませておきます。この作業がネットワークの速度によって速い遅いがあるので、先にやっておくのがベストです。

手順2　 ChatGPTに以下の内容を送る

—————————————————————————–

展覧会「YDA EXHIBITION」のキャッチコピーと200字程度の説明や紹介文を考えてください。

—————————————————————————–

ChatGPTに戻って今度は展覧会のキャッチコピーを生成してもらいます。このキャッチコピーを元にしてDALL・Eでロゴ画像を生成してもらうので、いい感じにかっちょいいのを選びましょう。

このあたりからDALL・EとRunway Gen-2の進捗状況を確認し、できていたらダウンロードしておきます。

手順3　 ChatGPTに以下の内容を送る

—————————————————————————–

ポートフォリオセクションは2カラムレイアウトになるようにその箇所のHTMLとCSSを生成してください。

—————————————————————————–

この文を見た時「2カラムセッションとはなんぞや」と思った方、いらっしゃるんじゃないでしょうか。
文で説明するのは難しいのでイメージ画像を貼っておきます。

言葉で表現するなら複数のコンテンツが並んでいる状態のことです。中々聞きなれない単語ですよね。私もたまに忘れます。

手順4　 ChatGPTに以下の内容を送る

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

ポートフォリオ作品名とその紹介文を100字程度で2つ考えてください。

—————————————————————————–

次にポートフォリオ作品を紹介するための作品名・説明文を生成してもらいます。ここもぜひかっちょいいのを選びましょう。

手順5　 ChatGPTに以下の内容を送る

—————————————————————————–

ヒーローセクションに動画を埋め込みたいです。

—————————————————————————–

最後にメインビジュアルとなる動画をここで貼り付けるので、その部分のHTMLを生成してもらいます。あとこれがかなり重要なのですが、時間があるタイミングでプレビューを見ながら画像サイズを調整しておきましょう。これをすることで見栄えがかなりよくなります。

これで完成！

私が実際にやってみたものがこちらになります。

今回はサイト制作のためにChatGPTを使用しましたが、最近は色々な場面でAIが普及されていますよね。作業の効率化につながるAIですが、使い方は今一度考える必要があると私は思いました。

次は複数ページある難しいバージョンにもチャレンジしてみたいので、また機会があればやります！

みなさんもぜひこのブログを見ながらRTAにチャレンジしてみてください！
ではでは、今回はこの辺でﾉｼ