2023年度から開催されている「やさしいロボコン」（2023年度大会主催：渋谷教育学園渋谷中学高等学校理科部）のWebサイト、そしてサイト内で表示する大会ロゴを制作しました。

背景

「やさしいロボコン」は毎年6月に仙台で開催される「知能ロボットコンテスト」のルールをベースとして開催されるロボットコンテストです。なお主催となる渋谷教育学園渋谷中学高等学校理科部は私自身所属していた部活であり、今回のコンテストでも運営に関わっております。

初開催となるイベントなことから、出場者を公開で募ることが重要となり、Webサイトの制作を行うこととなりました。ただ、開催まで2か月からの計画開始であり、情報公開までの期間も非常に限られる状態であったことから、1週間程度でWebサイトの制作、公開にこぎつけました。

掲載する内容は開催概要、競技ルール、ニュース、参加申し込み、競技結果、お問い合わせと幅広く、出場者と参加者といった対象者が開催前と開催後いずれにおいても閲覧するという前提で、そのいずれにおいてもどのコンテンツも見つけやすく閲覧しやすいWebサイトが必要となりました。

デザインについて

技術選定

中学校・高校の部活が主催する大会という都合上予算面にも限りがあり、かつ情報系に詳しい方が今後管理に加わるとは限らないという観点から、動的な部分にはフロントエンドのJavaScriptのみを利用しGitHub Pagesで公開しています。

複数年の開催を見据え、大会の情報を簡単に更新できるように、大会の情報はJSONファイルに記述し、JavaScriptで読み込むようにしました。これにより、情報の更新を行う際にはHTMLファイルを直接編集する必要がなく、大会の情報を更新することができるようになりました。

全体

大会の趣旨に合わせて、デザインはシンプルでわかりやすいものとし、情報の配置に対して細心の注意を払いました。様々な閲覧者に対して、Webサイト全体を複雑に感じさせないことを重視しています。

出場者と観客の両方に対する唯一の情報提供手段である都合上、公開する情報は多岐にわたります。こういった多様な情報をわかりやすく取りまとめられるよう、情報のカテゴリーごとにページやセクションを分割し、ページの行き来を左側に固定表示されたナビゲーションバーで行うシンプルな仕組みとしました。

コンテンツの表示位置がトップページであったり独立したページであったりとそれぞれ異なり、特にトップページ表示中は項目によってページ内遷移とページ遷移の両方が生じることになります。ストレスを感じさせないように、コンテンツの内容量、トップページにシングルページでは位置する必要性などを検討して綿密なコンテンツの検討を行っています。

大会結果ページ

後日記載予定です。

制作物スクリーンショット

トップページと競技結果ページ（後日対応予定）のスクリーンショットは以下からご覧いただけます。

スクリーンショット