部活の古びたHPでモダンに作り変えました
はじめに
こんにちは！ 工学院大学マジシャンズ・ソサエティで活動しているマジシャンTNです。
この度、僕が部活の公式ウェブサイトをリニューアルしました。
完成したサイトはこちらです！
工学院大学マジシャンズ・ソサエティ 公式サイト
情報学部に在籍しているものの、本格的なサイト制作は全くの未経験。そんな僕が、なぜ、そしてどのようにしてサイトを完成させたのか。
今回は、その制作過程についてAIインタビュアーに根掘り葉掘り聞いてもらったので、その全記録を対話形式でお届けします。
インタビュー開始
AI: サイト制作お疲れ様でした！マジシャンTNさんが一人で全部やったと聞いて驚きました。早速ですが、そもそもなんでサイトをリニューアルしようと思ったんですか？
マジシャンTN: 前のサイトが結構古くてデザインがイケてなくて、自分が依頼する側だったら、正直ワクワクしないし頼まないだろうなーって思ったのがきっかけです。
AI: なるほど。「自分が依頼者だったら」という視点が大事だったんですね。
マジシャンTN: そうです。あと、情報学部にいるのに「本格的なサイト作ったことないな」ってずっと思ってて。何か一つ形にしたかったっていうのもあります。
AI: スキルアップも兼ねてたんですね。
マジシャンTN: はい！
AI: ええ、大事な動機です！新しいサイトのデザインはどんなことを意識しましたか？
マジシャンTN: とにかくシンプルに！ってことです。ページをやたら増やさず、直感的に分かるようにしました。あと、マジックの部活なんで、黒をベースにして雰囲気を出してみました。
AI: 確かに、黒が基調だとグッと引き締まりますね。依頼を増やすための工夫とかはありますか？
マジシャンTN: デザインをモダンな感じにして信頼感を出したり、活動内容が分かる写真を載せたり。依頼フォームは置いてないんですけど、インスタとかTwitter、メールにすぐ飛べるようにボタンを分かりやすく配置しました。
AI: 使った技術は基本的なHTML、CSS、JavaScriptとのことですが、何かこだわったギミックはありますか？
マジシャンTN: サイトを開いた瞬間に、埋め込んだ動画が再生されるようにして「おっ」て思わせるようにしました。あと、ちょっとした遊び心でライトモードに切り替えるボタンもつけてみました。
AI: サイト制作は初めてだったんですよね？一番「うわ、大変だ…」ってなったのはどこですか？
マジシャンTN: もともとHTMLとCSSは知識として勉強してたんですけど、いざ自分でサイトを1から作るとなると話は別で…。特にCSSって、覚えること多いじゃないですか。
AI: 分かります。その壁はどうやって乗り越えたんですか？
マジシャンTN: そこで活用したのが、OpenAIが提供してるCLI型のAIエージェントツール、Codexです。
AI: おお、AI！なぜAIエージェントを使おうと？
マジシャンTN: これからのエンジニアって、AIと一緒に開発するのが当たり前になると思うんですよ。僕も触ったことはあったんですけど、今回ガッツリ実践で使ってみたいなと思って。
AI: なるほど、未来を見据えていたと。実際に使ってみてどうでした？
マジシャンTN: めっちゃ時間短縮になりました。自分で一つ一つ調べながらやるより、圧倒的に実装が早かったです。
AI: 最高じゃないですか。逆に、AIを扱う上で「ここ難しいな」って感じた部分は？
マジシャンTN: 指示が大雑把だと、AIも何したらいいか分からないみたいで、すぐバグが出るんですよね。こっちの伝え方が大事なんだなって痛感しました。
AI: その「指示の難しさ」はどうやって解決したんですか？
マジシャンTN: agent.mdっていうファイルを作って、そこに「こうしてほしい！」っていう具体的な指示を書き出すようにしたんです。そしたらエラーが減って、かなりスムーズに進むようになりました。
AI: なるほど！AIへの"仕様書"みたいなものを用意したんですね。サイトを公開してみて、周りの反応はどうですか？
マジシャンTN: いやー、まだ公開したばっかりなので、これから依頼が増えてくれたら嬉しいなーって感じです。
AI: これからが楽しみですね！最後に、このサイトやマジシャンTNさん自身の今後の展望を教えてください。
マジシャンTN: まずはこのサイトに、カッコいいマジックのPVを撮って載せたいですね。あと、ごちゃごちゃさせずに、メンテナンスしやすい状態はキープしたいです。制作中からGitHubでコード管理してたので、更新作業はやりやすいはずです。
AI: いいですね！ご自身のスキルアップについてはどうでしょう？
マジシャンTN: 今回の制作でWeb開発が面白いって再確認したので、この公式サイトとは別に、ReactとかTypeScriptみたいなモダンな技術を使って、自分のポートフォリオサイトとかも作ってみたいです！
AI: 素晴らしいです！挑戦はまだまだ続きますね。本日はありがとうございました！
おわりに
AIとの対話を通して、今回のサイト制作の過程を振り返ることができました。目的意識を持つこと、そして新しい技術をうまく活用することで、形にすることができました。
この記事が、同じように何かに挑戦しようとしている方の背中を少しでも押すことができれば幸いです。
もしよろしければ、サイトを触ってみて「もっとこうしたら使いやすいかも？」といった改善点やご感想など、Zennのコメントでいただけるとめちゃくちゃ嬉しいです！
Discussion