こちらの記事でふざけすぎてしまったので、ちゃんとした文章verです。
質問はAIに生成させ、それをもとにボイスレコーダーでが～っとしゃべりました。
これは、ボイスレコーダーの録音を整理したものになります。
高専祭公式HPを開発してみて
一関工業高等専門学校（略して一関高専）の2024年アドベントカレンダーです。
22日目の記事になります。
現在時刻は12月21日夜の10時28分です。実は、この記事の投稿期限は明日、12月22日です。つまり、残り時間はわずか90分！いや草
ホームページ制作に関するQ&A
1. ホームページ制作を決めたきっかけは何でしたか？
所属している電子計算機部（いわゆるパソコン部）が毎年、高専祭のホームページ制作を担当しています。昨年はWeb班のリーダーが制作していましたが、今年は私がリーダーを務めているので、必然的に制作することになりました。
2. ホームページ制作の目的は何でしたか？
高専祭の開催を告知すること。加えて開催期間中に来場者の利便性を高めることです。
マップ機能などは後者にあたりますね。
3. いつからホームページ制作を始めましたか？
夏休みに入ってからになります。
高専の夏休みは長いので、8月初めから9月半ば頃まで時間がありました。最初はFigmaを使ってデザインを作成していました。
4. 制作期間はどれくらいでしたか？
夏休み期間中ずっと取り組んでいました。
5. ホームページ制作に携わったのはあなた一人ですか？それともチームで制作しましたか？
友人S君と2人で行いました。
6. チームで制作した場合、それぞれの役割分担はどのように行いましたか？
デザインや文章作成などの大部分はリーダーである私が担当し、S君にはサーバー管理やデプロイなどを担当してもらいました。
コーディングはS君の方が得意でしたが、彼は別の開発で忙しく、私がメインでコーディングを行いました。
私の方が時間に余裕があったという理由もあります。
7. ホームページ制作で最も苦労した点はどこですか？
マップ作成です。指で操作できる動的なマップを作成したのですが、100個ほどのピンの位置情報をFigma上で微調整し、登録する作業に5時間ほどかかりました。
人海戦術ソロプレイですね。
8. その苦労をどのように乗り越えましたか？
「高専祭を成功させるため」という一心でした。
9. ホームページ制作で最も楽しかった点はどこですか？
Figmaでのデザインと、Webサイトにアニメーションを付ける作業です。
コーディング時にアニメーションを実装し、ブラウザ上で思い通りに動いた時は達成感がありました。
※実際にサイトにアクセスしてみてください！！
10. ホームページ制作を通して学んだこと、成長した点はありますか？
Next.jsというJavaScriptライブラリを使った開発や、UIだけでなく美術的な要素も重要となるホームページデザインについて多くのことを学ぶことができました。
デザインセンスが不足している私にとって、デザイン作業に時間がかかってしまったことは大きな反省点ですが、デザイン能力やFigmaで作成したデザインをNext.jsに落とし込む技術などが向上したと感じています。
11. ホームページ制作にあたり、参考にしたサイトや書籍はありますか？
書籍というか、QiitaやZennなどのサイトを頻繁に参照しました。
あ！！！！そうそう、Pintarestってやつを一日中見てたりもしましたね。
12. ホームページ制作で利用したツールやソフトウェアは何ですか？
（VS Code）、Node.js、Next.jsです。
13. HTML、CSS、JavaScriptなどのプログラミング言語の経験はありましたか？
基本的なコーディングはOKだったんですが、Next.jsは苦労する場面もありました。
14. WordPressなどのCMSの利用経験はありましたか？
WordPressはあまり使ったことがなかったので、抵抗感がありました。
高専祭ホームページにはお知らせページがあり、実行委員の方々が情報を追加できるようにしたかったので、頑張ってmicroCMSを導入し、API経由でNext.jsにコンテンツを連携させました。
15. デザインソフト（Figmaなど）の利用経験はありましたか？
Figmaは使い慣れていたのでデザインは楽しく進められました。
16. レスポンシブデザインの制作は初めてでしたか？
初めてではありませんが、あまり経験はありませんでした。
17. レスポンシブデザインの実現にあたり、どのような工夫をしましたか？
PCファーストでコーディングを行い、メディアクエリでスマホ表示に対応しました。Tailwind CSSもPCファーストで使用するために設定をカスタマイズしました。ios端末に合わせてlvhというCSS単位も活用しました。
18. ホームページのテーマカラーやデザインを決める際に意識したことは何ですか？
先に完成していた紙媒体の公式ポスターとの親和性を意識したことです。
19. ホームページのコンテンツはどのように作成しましたか？
実行委員が作成した50ページほどのパンフレットを元に作成しました。
20. ホームページに掲載した写真やイラストは自作ですか？それとも素材サイトを利用しましたか？
私が撮影・作成したものと、公式ポスターのキャラクターを背景透過加工したものが中心です。
21. ホームページの公開前にテストを行いましたか？どのようなテストを行いましたか？
親戚など複数の人に見てもらい、修正点などを指摘してもらいました。ロジックに関するテストはほとんど実施しておらず、デバイス間の互換性やレスポンシブデザインの崩れがないかなどを確認しました。
22. ホームページ公開後、来場者からの反応はいかがでしたか？
直接的な反応を得る機会は少なかったのですが、小学生が「これ、お兄ちゃんが作ったんだよ」と自慢げに話しているのを聞いて、少し嬉しく思いました。
具体的には、トイレの鏡の前でニヤニヤしてました。
また、高専祭前日に新聞社の取材を受けました。
ホームページ制作者としてインタビューを受けたことは、良い経験になりました。
またもニヤニヤしました。
23. ホームページ公開後、想定外のトラブルは発生しましたか？
共同開発者のS君が前日の準備日にサーバーエラーを起こしてしまったことがありました。
私はサーバーのログイン権限を持っていなかった＆サーバーに詳しくなかったため、S君を励ますことしかできず、ごめんなさいでした。
24. ホームページ公開後、改善したい点はありますか？
コンテンツの量が少し物足りなかったと感じています。来年はもっと早く制作に取り掛かり、豊富なコンテンツを掲載したいです。
25. 今後、ホームページをさらに改善するためにどのようなことをしたいですか？
来年は、高専祭実行委員会が作成するパンフレットが完成し次第、すぐにホームページ制作に取り掛かりたいと考えています。また、デザインなども事前に作成しておきたいです。
技術的な質問
26. ホームページのドメインはどのように取得しましたか？
学校が所有しているkousensai.jpのサブドメインを取得しました。学校はkousensai.jpというドメインを所有していますが、更新期限切れによるセキュリティリスクを考慮し、公式ホームページのサブドメインを使用することにしました。
27. ホームページのサーバーはどのように契約しましたか？
昨年と同じサーバーを追加契約しました。
28. ホームページの公開方法はどのような方法を選びましたか？
共同開発者のS君に任せました。彼はGitHub Actionsを使った自動デプロイなどを設定してくれたようです。
有能すぎる！！！！
29. ホームページのセキュリティ対策はどのように行いましたか？
え。。
あ、
はい、では…
省略します。
30. ホームページのバックアップはどのように行っていますか？
省略します。
31. ホームページのSEO対策は行いましたか？
Next.jsの_layout.tsxなどにメタタグやタイトルなどを設定することで行いました。設定し忘れていたページもあるかもしれません。
32. Google Analyticsなどのアクセス解析ツールは利用しましたか？
Google Analyticsではなく、Xサーバーに備わっているアクセス解析機能を利用しました。
33. ホームページの速度改善のためにどのような工夫をしましたか？
Next.js自体が速度面に優れているため、WebPへの変換など基本的な対策のみで十分な速度を実現できました。
34. プログラミングの知識がなくてもホームページが作れるサービスは検討しましたか？
検討していません。高専生として、Next.jsを使ってすべてコーディングしました。
35. ホームページ制作にあたり、最も難しかった技術的な課題は何でしたか？
特にありませんでした。全部むずかしい
36. その課題を解決するために、どのような情報収集を行いましたか？
技術ブログ以外にも、最近話題のGitHub CopilotのCopilot Chatを活用していました。
37. プログラミングの勉強方法はどのような方法で行いましたか？
省略します。
講釈垂れるつもりはございません。
まだ未熟者なので…
38. プログラミングでつまづいた時にどのように解決しましたか？
1日置いてからVS Codeを開き、コードを見直すと解決策を思いつくことが多かったです。
39. プログラミングのコミュニティに参加したことはありますか？
SNSとかでわるぐち言われたくないのでないです、
40. プログラミングの勉強で役立ったサイトや書籍はありますか？
海外のライブラリの解説を日本語で紹介しているサイトです。
文化祭に関する質問
41. 文化祭のテーマは何でしたか？
「Lasting Memory もう二度とない高専祭」でした。
42. 文化祭の規模はどのくらいでしたか？
今年が60周年ということもあり、非常に大規模なものでした。屋台は50以上、来場者数は数万人規模だったと思います。
43. 文化祭の企画段階からホームページ制作に携わりましたか？
企画段階から携わる予定でしたが、実際にはコーディングなどを始めたのは9月からでした。
44. ホームページ制作の進捗状況を文化祭実行委員会に報告しましたか？
あまり報告していませんでした。
45. ホームページを制作する上で、文化祭実行委員会から要望はありましたか？
文字サイズが小さいといった指摘や、協賛企業の広告掲載依頼などがありました。
46. ホームページを通じて、文化祭の来場者数を増やすことができましたか？
はっきりとは分かりませんが…
去年のアクセス数は1万4303回だったのに対し、今年は50万9555アクセスを記録しました。
自慢したいので声を大にして言いますね。
50万アクセスだったよ！！！
マークダウンの悪用ですね。だめだね。（web開発者としてあるまじきアクセシビリティマナー）
47. ホームページを通じて、文化祭の広報活動に貢献できたと思いますか？
貢献できたと自負しています。まじで。
48. ホームページ制作を通して、文化祭実行委員会との連携は深まりましたか？
深まりました。来年も縁があれば、ぜひ！
49. ホームページ制作を通して、他のメンバーから何か学びましたか？
「時間は大切」ということを学びました。
50. ホームページ制作を通して、チームワークの大切さを実感しましたか？
2人での開発だったので「チーム」と呼べるかは分かりませんが、チームワークの大切さを実感しました。