CASE #03 EVENT WEBSITE

渦のように、 人を巻き込むサイトを。

徳島Heroes 2026 公式WEBサイト — オープンファクトリー「企業の文化祭」の入り口を、デザインから予約の仕組みまで一気通貫で制作。

Client
徳島県中小企業家同友会
地域連携委員会 様
Launch
2026.06
Role
デザイン / コーディング
予約フォーム / ミニゲーム
URL
heroes-tokushima.com ↗
Overview

親子で地元の仕事に出会う2日間。
その入り口を、1つのサイトに。

「徳島Heroes 2026」は、徳島県中小企業家同友会 地域連携委員会が主催するオープンファクトリーイベント。「情熱にふれ 心が動き出す」をコンセプトに、徳島の製造業や農業などの企業が工場・現場を特別公開します。

私たちはその公式サイトを、デザインからコーディング、来店予約フォーム、子ども向けミニゲームまで一気通貫で制作。動画背景のトップ、開催日までのカウントダウン、出展企業の検索・地図、申込みの自動メール連携を1つのサイトに統合し、「行ってみたい」から「予約した」までを迷わせない導線を設計しました。

反響は開催を待たずに表れています。2026年7月末の時点で、出展18社のうち半数以上のお仕事体験がすでに受付を終了。出展企業の募集も、多数の応募により締め切られました。

Website Design Coding Form & Mail Mini Games
Full Site Tour

切り抜きではなく、
1ページまるごと。

スクロールに合わせて、公開中の実サイトをトップから協賛セクションまで通しでご覧いただけます。

01トップ / カウントダウン
02お知らせ
03出展募集
04概要・誕生秘話
05体験をさがす(18社)
06参加企業マップ
07SNS・参加者の声
08協賛・参加団体
0%
heroes-tokushima.com
徳島Heroes 2026 公式サイトの全ページ(トップから協賛セクションまで)
What We Delivered

制作のポイント

01
動画背景ヒーロー+カウントダウン
現場の空気が伝わる動画背景に、開催日(8/21・22)までのリアルタイムカウントダウンとパーティクル演出を重ね、トップで一気にイベントの熱量を伝える設計に。
02
出展企業の検索・絞り込み
掲載18社の出展企業を、キーワード検索とカテゴリ(テクノロジー・ものづくり・食/農/自然など)で絞り込めるUIを実装。行きたい現場を直感的に探せます。
03
地図 × カーナビ案内
各企業の所在地を地図上のピンで表示。タップすると詳細ページやカーナビ案内につながり、当日の移動までスムーズにサポートします。
04
お仕事体験の予約フォーム
来場者がその場で申し込める予約フォームを設置。申込みから当日の受け入れ準備までが滞りなくつながるよう、通知と集約の運用まで含めて設計しました。
05
オリジナルミニゲーム 3種
「工場しわけマスター」「ものづくりタワー」「ものづくり名人」の3つのミニゲームを制作。遊びながら地元のものづくりに触れられる、子ども向けの入り口を用意しました。
06
運用しやすい更新基盤
出展企業はデータファイルとテンプレートで管理し、非公開フラグ付きで安全に追加・公開できる手順を整備。公開後も16社→18社と、企画の進行に合わせて拡張を続けています。
Hero Movie

トップを飾るのは、
現場を描いたアニメーション。

工場、農園、研究室、そして食卓へ。徳島のものづくりの現場が次々と切り替わっていく18秒のループ動画を、サイトのファーストビューに据えました。 本番ではこの上にキャッチコピーとカウントダウンが重なります。ここでは背景そのものを、テキストなしで。

LOOP — HERO BACKGROUND
SCENES  工場 / 体験ワークショップ / きのこ栽培 / トマトハウス / 制御盤 / 食品加工 クリック/タップで再生・一時停止(音声なし)
Mobile First

当日、片手で使えること。

夏休みの親子が現地で使うサイトです。スマホでの見やすさと操作のしやすさを最優先に、カウントダウン、体験さがし、地図、予約までを縦1本の導線に整理しました。

右のスマホの中では、実際の公開ページがゆっくり自動でスクロールしています。カーソルを乗せると止まります。

徳島Heroes 2026 公式サイトのモバイル表示(全ページ)
Project Details
Client
徳島県中小企業家同友会
地域連携委員会 様
Project
徳島Heroes 2026
公式WEBサイト 制作
Event
オープンファクトリー「企業の文化祭」
2026年8月21日(金)・22日(土)
Scope
WEBデザイン / コーディング
予約フォーム・メール連携 / ミニゲーム制作
SEO・運用サポート
Tech
HTML / CSS / JavaScript
VISIT LIVE SITE HTTPS://HEROES-TOKUSHIMA.COM/

イベントや地域の取り組みも、
1つのサイトで。

サイトのデザインから予約フォーム、当日の運営を支える仕組みまで。
イベント・地域プロジェクトのWEBもお気軽にご相談ください。

お問い合わせ
All Works
すべての実績を見る
→