
誰でも簡単に編集できる仕様へ、ロボコンのHPをリニューアル
やさしいロボコン(2024)
- Webデザイン
- その他デザイン
- Webサイト実装
2024年12月22日に慶應義塾大学 矢上キャンパスで開催されるロボットコンテスト、「やさしいロボコン2024」のロゴを作成し、ホームページをリニューアルしました。
概要
やさしいロボコンにおいては、2023年度大会でもホームページの作成を担当しており(以下「従来HP」)、そちらでは様々な情報を掲載できるうえ、翌年以降も使えるようにJSONで様々なデータを管理する仕様としていました。
しかしながら、様々な情報を管理し、年度ごとの様々な変化に対応できるようにJSONファイルに様々な設定、記録を書き込めるようにした結果、従来HPのJSONファイルは非常に複雑な記法となってしまいました。ロボットコンテストの運営チームには情報系に詳しい方は多くなく、こういったホームページの管理は非現実的でした。
加えて、従来HPはクライアント側でDOMを生成し、データを反映したページを作成する仕組みとしていたため、読み込みに時間がかかるなどSEOの観点で非常に良くなかったほか、GitHub Pagesのキャッシュなどの問題で表示内容の反映が遅れる、または完了しない事象がありました。JSONファイルで変更できる箇所も十分でなく、2023年度の想定と異なり大会の運営体系が大きく変わったことで、2024年度大会ではHTML自体にも修正が必要となるなど、課題が生じました。
このため、新しいホームページではNext.jsをベースとし、デプロイ時に静的サイトを生成する仕組みとしました。また、ホームページの主要部分をマークダウンで書けるようにし、デプロイ時に自動でパースする仕組みとしたため、ホームページ掲載内容の大幅な変更に柔軟に対応できるようになりました。
加えて、ニュースの部分はmicroCMSをコンテンツマネジメントシステムに採用することで、誰でも簡単に情報の更新が行えるようになりました。
デザインについて
制作の流れやデザインに込めた意味について触れていきます。本プロジェクトではWebサイトのデザインと、ロゴやテーマカラーのデザインに関わっており、以下で触れていきます。
(後日加筆予定です)