今年KaiRAのWebページを新しくした話(with @matsuda_tkm)

はじめに

本記事は、京都大学人工知能研究会KaiRAのAdvent Calender 18日目の記事です。

今年、私motoと@matsuda_tkmさんの二人でKaiRAのホームページを新しく作り直しました。
KaiRA後輩たちへの引継ぎ資料もかねてKaiRAのホームページを新しく作り直したことについて話していきたいと思います。

📣KaiRA公式サイトがリニューアル！

雰囲気をガラッと変え、情報もわかりやすく整理しました。勉強会のようすや、今読んでいる輪読本もわかるようにしました。このサイトを見て、KaiRAに興味を持つ学生が増えるとうれしいです😊

←旧サイト　新サイト→https://t.co/EzHDO8htaB pic.twitter.com/J05CVoAdEv

— 京都大学人工知能研究会 KaiRA (@kyoto_kaira) October 2, 2023

ホームページを作り直した経緯

ことのきっかけは、KaiRAの顧問小島先生と私motoがKaiRAのことについて雑談をしていたところ、小島先生からKaiRAももう少しオープンに活動をしても良いのではないかという提案をいただいたことです。これは2023年の9月中旬のことでした。
(顧問の小島先生は普段サークルの輪読会に顔を出すことはありませんが、KaiRAのメンバーはしばしば顧問の小島先生と話をする機会があります。)

具体的にどこに改善点があるのかということを聞いたところ、まずホームページがイケてないという話を伺いました。
たしかに、言われてみると、KaiRAのホームページは今はなかなか見かけない黒ベースの背景で、背景画像としても透明感のあるイケイケな感じのホームページでした。
そして、タイトルやヘッダーなどは全部装飾を画像加工アプリで行った画像でした。
ヘッダーにカーソルを合わせてもフォーカスの描画はされず、若干古臭かったです。
(このようにぱっと見ではあまり更新されていない風なホームページでしたが、実はひそかにEventsの欄は更新されていました。)

そこで、その数日後にあった運営メンバーにおける会議の場でもホームページを新しくする提案をしました。
ただ、うちのサークルは人工知能研究会、と名前が付いているだけあってWeb系に詳しい人間はあまりいません。
私もWeb系は一切手を付けたことがありません。
結局その会議では今後も検討しておこうということで終わりました。
(某首相と同じようにずっと保留されるパターンのやつですね…)

その会議後も、どのようにホームページを作っていったら良いのかを私は色々調べて検討していました。
私はプロダクトを作る計画を立てるのが好きな人間です…)
KaiRAの輪読会の後にもホームページを作る計画を立てていたのですが、計画を立てているうちに自分でもウズウズしてきてしまい、輪読会で疲れていて深夜テンションになってしまったのもあって自分でとりあえずホームページを作ってみると決意してしまいました。（笑）
(これはおそらく2023年9月21(木)24時頃と思われます。)

そして24時~27時までホームページを作る作業を行い、2023年9月22(金)7時45分~12時までホームページを作る作業を行うと、ホームページの作り方がだんだん分かってきて確実に作れるという実感がわいてきたので次のようなメッセージをKaiRAの会長の@matsuda_tkmさんにslackで送りました。

その後もぶっ通しで作業を続けていたのですが、2023年9月22(金)17時頃にほとんどの部分を書くことが完了します。(ただし、NF(京都大学11月祭)関連ページの移行を行ったところ、レイアウトなどが崩れてしまっていたのでNF関連ページの調整は必要でした。下の写真に書いてあるkairaのicon設定というのは、KaiRAのアイコンデザインを@matsuda_tkmさんが新しく作ってくださったKaiRAのアイコンデザインに変えることです。)

↓@matsuda_tkmさんが新しく作ってくださったKaiRAのデザイン

こうしてとりあえずざっとホームページ作りが完了したので、私は自分が作ったKaiRAのホームページを@matsuda_tkmさんに見てもらい、気になる箇所があれば調整をしていただくことにしました。

そうして@matsuda_tkmにホームページを調整していただいたのですが、これが神調整でした。
文章も一部読みやすくしていただきましたし、デザインもものすごく良くしていただきました。
(上に挙げた私が作ったホームページと@matsuda_tkmさんが調整をしてくださった今のホームページを見たら違いは一目瞭然でしょう。その他Q&Aのところなども分かりやすくしていただきました。)

この後は私と@matsuda_tkmさんで微調整を続けました。
また、別の日での小島先生との雑談で、日々の活動が分かりやすい方が良いということで、新しく輪読会のスライドをDocswellで公開することにしました。

微調整を繰り返し、上のX(旧Twitter)で投稿があるようにWebページを無事公開することができましたとさ。
(fixed_backgroundを使って背景を固定するとsafariでは背景が固定できないことを知ったため、公開後に私がsafariでも背景が固定できるように変更をしたりもしました。)

技術的な話

どのようにWebページを作ったかについて軽く話しましょう。
Bootstrapを使いました。ベースはHonokaですね。@matsuda_tkmさんが色々とCSSに変更を加えました。

Webページを公開するためにはGitHub Pagesを使いました。
bootstrap.cssを読み込んで、一部style.cssでデザインを上書きしています。
これらの.cssファイルを.htmlで読み込むようにしています。(ここら辺はWebページを作る人なら当たり前だと思うでしょうが…)
また、assetフォルダに写真などのデータはまとめてあります。
このように物凄いシンプルな構成です。
なお、多くの文章は前のKaiRAのWebページからのコピペです。

終わりに

以上、ホームページを新しく作り直した話でした。
私は完全にWeb系初心者ですので、Webページの作り方として拙い箇所があるかもしれませんが、お許しください。