特設サイトが完成しました！

こんにち。
DENGIKEN PODCAST.裏方のYです。
今回はDENGIKEN PODCAST.の特設サイトが完成したので工夫した点と、皆さんがこのレベルのサイトを作るにはどのようにAIを活用すればいいかを解説していきます！

工夫した点

今回のDENGIIKEN PODCAST.特設サイトで工夫したのは主に、

1.画面のロード画面をかっこよくする
2.操作をしなくても自動で更新されるようにする
3.引継ぎが簡単になるようにする

の3つです。
この三つのことについて細かく紹介していきます。

1.画面のロード画面をかっこよくする

皆さんが最初にアクセスしたときに以下の写真のようなアニメーションが流れてくると思いますが、そのシーンのことです。

この、アニメーションにはこだわりが多くあります。
まず、一文字ずつ違う文字のアニメーションが違うという点です。
細かいところまで見ていただくとわかるのですが、Dは文字を3分割＋1つの枠文字にしそれぞれが、左、上、下から出てくるようにし、Eの場合は3分割(一つの色はピンク色)＋1つの枠文字という形にし、左、右、上から出てくるなど一文字ずつ動きをこだわりました。
文字以外にも、DENGIKEN PODCAST.が始まった2025を示すためにsince2025などと細かいところにこだわりました。

2.操作をしなくても自動で更新されるようにする

サイトの運営で一番難しいことは、定期的にサイトを更新するという点です。
今回はその面倒な作業を克服するために工夫を行いました。

例えば、02のLATEST EPISODESのところでは、YouTubeの動画が更新されると自動で現在の公開状況を更新されるようにしました。

それ以外にも、定期的に更新しなくても済むような仕組みを組み込みました。

3.引継ぎが簡単になるようにする

サイトの運営で定期的なサイトの更新に次いで難しいのは、サイトを引き継ごうと思っても、中身の編集が難しく結局は昔の形のまま運営されてしまうかもしれないという点です。

そこで、今回の特設サイトではその事態を防ぐために簡単にこのサイトの細かい場所を修正できるようにしました。
実際の、サイトの裏側の画面では、それぞれ入れる文字を簡単に変えることができ、パーソナリティの編集も手軽に行え10年間たっても使えるようなサイトにしました。

このサイトの作り方

そして、ここからはどのようにこのサイトを作成したのかについて解説していきたいと思います。
まず、このサイトはGPT-6を用いてサイトの作成を行いました。

主な手順としては、最初にサイトの入れる項目、デザイン基礎案の作成を行いました。
プロンプトとしては、

「DENGKEN PODCAST.の特設サイトを作成したいからサイトの構成を作成してみて、デザインは主にdengiken.jpのサイトのデザインを意識してほしい。また、DENGIKEN PODCAST.のロゴも添付するからこのロゴに合う色で作成するようにして」

といった感じです。少し雑と感じるかもしれませんは、GPT-6はAGIが高く自分で考える力が高いということをその際は聞いていたためこのようなプロンプトをおこないました。(あと正直私が細かい指示を行うよりAIのセンスに任せたほうがいいものをつくれるので… )

そして、基礎の構成が作成できた後実際にサイトを構築してもらい、細かいところの修正を何回も行いました。

一方で、これだけでは最初のかっこいいアニメーションを作成することができないのでこのアニメーションを作成する際のAIへのプロンプトを特別に紹介しようと思います！！！

「この添付した動画をもとにアニメーションの構成を考え、作成してください」です。

そして、自分で作成したかっこいいアニメーションの動画も一緒に添付してください。(倫理的によくないですが、もし自分で作成できない場合はピンタレストなどからかっこいいアニメーションをもってきてもいいかもしれません)

最後に

以上が、今回のサイトの工夫した点とどう作るのかでした。
もし、自分でサイトを作ってみたい場合などに参考にしてみてください。

そして、DENGIKEN PODCAST.のサイトにぜひアクセスし、ポッドキャスト本編をご視聴してみてください！！！
あとチャンネル登録のほうもよろしくおねがいします、、