しずまえトライアスロンin静岡 Webサイト制作

静岡県静岡市で今注目の地「用宗」

全国的にしらすが有名な港町「用宗」は、静岡駅やICから近く利便性に優れ、ノスタルジーな町の雰囲気やおいしい海産物が魅力で、近くに住むc rebootメンバーにとっても馴染み深い場所です。

そんな用宗は近年、様々な飲食店やショップ、宿泊施設などが集結し町全体が賑わいを集めています。休日には県内外から多くの観光客が集まり、防波堤に腰かけて海を眺めながら甘い物を食べる姿は、今の用宗を象徴する風景です。

実は、そのように注目されるようになったのはここ数年のこと。その裏側には、地域の魅力を多くの方に知ってもらおうとする地元有志の方々の想いと行動が欠かせません。
しずまえトライアスロンもその一つ。この大会を通して、用宗のことを初めて知ったり、魅力を再確認できた方も多くいるのではないでしょうか。

そのような、地元に根差し多くの方を魅了する大会のWEBサイトということもあり、”どんな方にも分かりやすく楽しく、長く愛されるサイト”をコンセプトとして制作しました。ぜひサイトを見て、大会のことや用宗のこと、ついでにc rebootのことも知っていただけたら嬉しいです。

デザインについて

青色を基調とし、駿河湾や用宗のイメージを反映させました。ベースカラーは青ですが、「ENTRY」関連の情報は黄色で表示し、ユーザーの注目を集めるよう設計しています。
英字フォントは力強さとポップさを兼ね備えたものを採用し、トライアスロンをより身近に感じられるよう工夫しました。

ところどころに波の動きを取り入れ、ロゴに合わせて波や競技のイラストを適切に配置し、視覚的な一貫性と魅力を創出しています。
トップページでは開催日時を大きく表示し、さらにカウントダウンを設置することで、大会への期待感を高めたデザインも特徴です。

構成としては、大会情報、コース、よくある質問など、内容が多いページについては、左側にナビゲーションを配置し、ユーザーが必要な情報にすぐにアクセスできるよう配慮しました。

コーディングについて

WEBサイトを開いたときに選手がゴールする様子と、大会までのカウントダウン表示されるのが大きな特徴のサイトです。
これにより、トライアスロンの躍動感や、大会までの緊張感を表現しています。

さらに、波の動きや競技のイラストにさりげないアニメーションを加え、サイトに動きを与えています。幅広い年齢の方に馴染みやすいイベントということも伝わるよう意識しました。

また、画像の最適化やコードの軽量化を行い、ページの読み込み速度を向上させ、ユーザーエクスペリエンスの改善に努めています。
共通のデザイン要素については、コンポーネント化を図り、コードの再利用性を高め、開発効率の向上とメンテナンス性の改善を実現しました。