No.011 / Websites / 2025
FunterU Official Site
楽しさとあなたをつなぐコーポレートサイト
Project facts
- Role
- Designer / Developer
- Deliverable
- コーポレートサイト
- Industry
- 企業広報・ブランディング
- Capability
- 情報設計 / フロントエンド開発 / 運用設計 / UI設計
- Technology
- HTML / CSS / JavaScript / Service Worker / Progressive Web App
- Audience
- FunterUへの制作相談を検討する企業担当者 / 製品・受託実績・チームを知りたい閲覧者
課題
静的サイトの軽さを保ちながら、製品、受託実績、チーム情報、問い合わせ導線を一つにまとめ、更新時に古いアセットやリンク不整合を残さない運用が必要だった。
解決策
静的HTML、CSS、JavaScriptで情報を一ページへ整理し、CSS変数によるテーマ切替とService Workerのバージョニング、自動検証を含む公開フローを設計した。
主要機能・工夫
- 事業・実績・チームの一元掲載
相談前に必要な情報と問い合わせ導線を一ページ内で確認できる構成にする。
- テーマ切替
CSS変数を用いて配色とコントラストを一貫して切り替える。
- PWA更新フロー
Service Workerのキャッシュ更新時に古いアセットが残りにくい仕組みにする。
成果・変化
- 企業情報と問い合わせ導線を公開
製品、受託実績、チームから問い合わせへ進めるコーポレートサイトを構築した。
- 継続更新できる公開フローを整備
キャッシュ更新と配布物の検証を含む運用へ整理した。
概要
静的HTML（HTML/CSS/JavaScript）で実装したコーポレートLP。製品一覧・受託実績・チーム情報を1ページに集約し、テーマ切替と問い合わせ導線を用意。PWA（Service Worker）ではキャッシュと更新フローを制御し、常に最新の表示になるよう最適化しました。
課題と設計
静的サイトでも更新時に古いアセットが残らないよう、Service Worker のバージョニングとキャッシュ制御を設計し、モーションと干渉しない更新フローを確保した。
主な機能
- グラスモーフィックなLP
- 製品/受託/チームの一元掲載
- テーマ切替（CSS変数）とミニヘッダー
- PWA（Service Worker）でキャッシュ/更新を制御
成果
- 静的HTMLベースのLPを公開
- テーマ切替と問い合わせ導線を実装
- Service Worker の更新フローを安定化（古いアセット残り回避）
制約・前提
- PWAキャッシュとリッチモーションの干渉
- CSS変数ベースでコントラストを崩さないトークン設計
技術的なポイント
- 静的HTMLで構成し、PWA（Service Worker）でキャッシュと更新の競合（古いアセット残り）を避けるバージョニングを設計
- Service Worker の制御を入れ、更新時は新しいアセットへ確実に切り替わるフローを確保
- テーマ切替は CSS 変数（デザイントークン）に寄せ、配色やコントラストを崩さずに全体を切り替え可能に
- LP としての導線（問い合わせ/実績/チーム）を最短で辿れる情報設計にし、読みやすさを担保