はじめに
本記事では、架空のサウナ施設「NaGI Sauna（凪サウナ）」のティザーサイトを、あえてVanilla JS（フレームワークを使わない素のJavaScript）＋ CSS ＋ HTML5のみで構築した際の設計思想と実装のポイントを紹介します。非エンジニアの方にも伝わるよう、専門用語には都度簡単な説明を添えています。
1. このサイトについて
| 項目 | 内容 |
|---|---|
| プロジェクト名 | NaGI Sauna（凪サウナ）ティザーサイト |
| 目的 | 実在しない施設を題材にした、建設前のビジョン可視化・ポートフォリオ制作 |
| ターゲット | 本格的なサウナ体験を求める層、日常のストレスから解放されたい大人 |
| 参考デザイン | wewewe.jp のような、余白を活かした高級感あるワンページ構成 |
「ティザーサイト」とは、正式オープン前に施設やサービスの世界観だけを先行して伝える、いわば"予告編"のようなサイトです。予約フォームや決済機能は持たず、ブランドの雰囲気を伝えることに全振りした構成になっています。
2. 制作フロー全体像
このプロジェクトは「デザインカンプ制作 → 素材生成 → 実装 → 品質担保 → 公開」という流れで進めました。まずは全体像をマップで示します。
- 要件定義書をもとに、施設のコンセプト・掲載セクション・料金表などの要件を整理
- その要件をFigmaでデザインカンプ化（
front-design-figma.pdf）。余白の取り方や配色、タイポグラフィなどのトンマナをここで固める - サイトに掲載する素材は生成AIで用意。ヒーロー部分の動画はHiggsfield、その他の施設写真はElevenLabsでそれぞれ生成
- Figmaのデザインを見ながら、ビルドツールを使わない静的HTML/CSS/Vanilla JSで忠実に実装
- PlaywrightによるE2EテストとGitHub ActionsのCIで動作を自動検証
- Vercelへデプロイして公開
「デザインの精度」と「実装の再現度」を両立させるため、Figmaのデザイントークン（色・余白・フォントサイズなどのルール）をそのままCSSのカスタムプロパティに落とし込む、という手順を徹底しています。
3. なぜあえて「ビルドツールなし」を選んだのか
要件定義の段階ではNext.js等のモダンフレームワークも選択肢に挙がっていました。しかし今回は次の理由から、静的な HTML / CSS / JavaScript のみで実装する方針を取りました。
- デザインの完全再現を最優先にしたかった（Figmaで作り込んだデザインを、余計な抽象化を挟まずそのままコードに落とし込む）
- ビルド環境（
npm installやコンパイル処理）が不要なため、そのままVercelやNetlifyにアップロードするだけで公開できる - 依存ライブラリがゼロなので、将来的な脆弱性対応やライブラリのバージョン更新に追われない
- ページ数が少ないLP・ティザーサイトの規模感において、フレームワークのオーバーヘッド（学習コストやビルド時間）がメリットを上回らない
つまり「技術力がないから使わない」のではなく、サイトの規模と目的に対して技術選定を最適化した、という判断です。LP制作においては、この「身の丈に合った技術選定」こそがコストと納期に直結する重要なポイントになります。
4. デザインを支える技術構成
マークアップ : HTML5（単一ページ構成）
スタイリング : CSS（カスタムプロパティ + Grid / Flexbox）
アニメーション: Vanilla JS（IntersectionObserver）+ CSS Transition
フォント : Shippori Mincho（明朝体・Google Fonts）
画像最適化 : 元素材（Higgsfield / ElevenLabsで生成、5〜8MB）を幅1600px・JPEG化して軽量化
デザイントークン
「デザイントークン」とは、色やフォントなどのデザイン上のルールを、コード内で使い回せる変数として定義したものです。これにより、色を1箇所変更するだけでサイト全体に反映されるようになり、デザインの一貫性を保てます。
| トークン | 値 | 用途 |
|---|---|---|
--color-base |
#fbfbf9（オフホワイト） |
ベース背景。空間の静寂を表現 |
--color-accent |
#8a9aa3（グレー） |
アクセントカラー。「水風呂」や「凪」を象徴 |
--color-text |
#1a1a1a（ブラック） |
本文。視認性と高級感を両立 |
見出しにはレタースペース（文字間隔）を広めに取ったセリフ体、本文には行間2.0前後の明朝体を採用し、セクション間には160px以上の余白を確保しています。「余白を大胆に使う」ことこそが「凪（波の穏やかな状態）」という世界観を視覚的に表現するための最重要ポイントでした。
5. こだわった実装ポイント
5-1. ローディング演出
サイト表示の直前に、ロゴ単体を全画面表示するローディング画面を実装しています。
- 白背景の中央にロゴがフェードイン＋ゆっくり拡大
- 水面の波紋のようなリングが広がる演出
- 波が引くように画面全体がフェードアウトし、本編を表示
表示時間は約2.2秒に調整し、ローディング中は背後のスクロールを固定しています。第一印象を作る"入口"に手間をかけることで、ブランドの世界観への没入感を高めています。
5-2. 縦長ヒーロー動画
トップ最上部には、Higgsfieldで生成した施設外観の動画を配置しています。参考にした wewewe.jp に倣い、あえて横長ではなく**縦長（アスペクト比3:4）**に切り抜いて中央配置し、周囲に余白を残すことで、写真集をめくるような上質な印象を演出しました。動画は autoplay（自動再生）/ muted（ミュート）/ loop（ループ再生）/ playsinline（モバイルでフルスクリーン化させない）という4つの属性を組み合わせ、スマートフォンでも違和感なく自動再生されるようにしています。
5-3. スクロール連動アニメーション
各セクションの画像やテキストは、画面内にスクロールで入ってきたタイミングでフェードやワイプ（カーテンを開くような演出）と共に出現します。これは IntersectionObserver というブラウザ標準のAPI（要素が画面内に入ったかどうかを、負荷の低い方法で検知する仕組み）を使い、画面内に入った要素へ is-inview というクラス名を付与し、CSSの transition でアニメーションさせる、という設計です。
GSAPやFramer Motionのような外部アニメーションライブラリを一切使わず、素のJavaScriptとCSSだけでこの演出を実現している点がこの実装の技術的な見どころです。ライブラリを使わないことで、読み込むJavaScriptの容量が最小限に抑えられ、ページの表示速度に貢献します。
また、prefers-reduced-motion（OS側で「視差効果を減らす」設定をしているユーザー向けの指定）を検知した場合はアニメーションを無効化し、アクセシビリティにも配慮しています。
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
5-4. レスポンシブ対応
3段階のブレークポイントを設け、スマートフォンからワイドディスプレイまで最適な体験を提供しています。
| 画面幅 | レイアウト |
|---|---|
| 〜768px | 1カラム。ナビはハンバーガーメニューに切り替え |
| 769〜1080px | カードを2カラム表示 |
| 1081px〜 | デザインカンプ通りの最大レイアウト（コンテンツ幅は最大1280px） |
5-5. 開発中のスマホ実機プレビュー環境
制作中、npx http-server でサイトを起動しても表示されるのはPCサイズの画面だけで、スマホでの見え方を確認するにはブラウザの検証ツール（DevTools）でウィンドウ幅を疑似的に狭くするしかありませんでした。そんな折、他のエンジニアが2画面でスマホの実機画面をリアルタイムでPCに映しながら開発しているのを見かけ、同じ環境を今回の開発フローにも取り入れてみました。
具体的には、browser-sync（ファイル保存を検知して接続中のブラウザを自動リロードする「ライブリロード」機能を持つ開発用サーバー）を導入し、npm run dev:mobile で site/ を配信するようにしました。起動すると次の2つのURLが表示されます。
Local: http://localhost:3010 ← PCのブラウザ用
External: http://192.168.x.x:3010 ← 同じWi-Fi内のスマホ用
スマホ側で External のURLを開いておくと、PCでコードを保存するたびにスマホの画面が自動で即リロードされます。あとはそのスマホ画面をQuickTime（iPhone×Macをケーブル接続してAirPlayミラーリング）や scrcpy（Androidの実機画面をUSB経由でPCに表示するツール）でPC画面に映せば、まさに見かけた「2画面リアルタイム開発」と同じ環境になります。
さらに、実機を毎回用意しなくても済むよう、スマホの外枠を模したフレームの中にサイトをはめ込んで表示するプレビューページ（dev/mobile-preview.html）も自作しました。iPhone SE / iPhone 14・15 / iPhone 15 Pro Max / Pixel 7 / iPad miniといった端末サイズをプルダウンで切り替えて確認できます。
この仕組みは開発補助用のツールのため dev/ フォルダに置き、デプロイ対象の site/ フォルダやE2Eテスト用サーバー（ポート8901）とは完全に切り離しています。「あって当然」に見えるこうした開発体験まわりの小さな工夫も、結果的にレスポンシブ対応の精度と実装スピードを底上げしてくれます。
6. 掲載セクションの紹介
ティザーサイトとして、以下のセクションを1ページに縦一列で構成しています。掲載している施設写真はすべてElevenLabsで生成したAI素材です。
- Concept ―― コンセプト文と外観写真
- Sauna ―― 「右凪（100℃・ロウリュあり）」「左凪（85℃・瞑想特化）」の2種類のサウナ紹介
- Bath ―― 内風呂・水風呂・露天風呂
- Relax ―― 屋内外に設けた「整い場」の紹介
- Lounge ―― 無料Wi-Fi完備のラウンジとフード＆ドリンクメニュー
- Smoking ―― 屋内喫煙所と、脱衣所直結の喫煙所
- Price & Information ―― 料金表・営業時間・アメニティ
- FAQ ―― よくある質問（アコーディオン形式で10問）
7. 品質担保：E2Eテストの自動化
「動くことを見た目で確認する」だけでなく、Playwright（ブラウザを自動操作してテストするツール）を使ったE2Eテスト（End-to-Endテスト。実際のユーザー操作を再現して画面全体の動作を検証するテスト手法）を導入し、以下の項目をChromium・WebKit（Safari相当のエンジン）の両方で自動検証しています。
- 画像14枚・動画1本が正しく読み込まれ、通信エラーが発生していないこと
- ナビゲーションの各リンクが対応するセクションへ正しくスクロールすること
- FAQの10項目すべてが正しく開閉すること（1つ開くと他が閉じる仕様も含む）
- モバイル幅でハンバーガーメニューが開閉し、リンク選択後に自動で閉じること
さらにGitHub Actionsを用いて、コードをpushするたびにこれらのテストが自動実行される**CI（継続的インテグレーション）**の仕組みも整えています。「見た目のデザインはできているが、実は一部のリンクが壊れていた」といった事故を未然に防ぐための仕組みです。
8. セキュリティとプライバシーへの配慮
フォームや会員機能を持たない静的サイトであっても、レスポンスヘッダーレベルでのセキュリティ対策は行っています。
| ヘッダー | 目的 |
|---|---|
Content-Security-Policy |
外部からの不正なスクリプト実行を防止（自サイト内のスクリプトのみ許可） |
X-Frame-Options |
他サイトに埋め込まれてクリックを乗っ取られる攻撃（クリックジャッキング）を防止 |
Strict-Transport-Security |
HTTPSでの通信を強制 |
また、アクセス解析には Cookie を使用せず、個人を特定する情報も収集しない Vercel Web Analytics を採用し、プライバシーポリシーページで収集データの内容を開示しています。「デザイン重視のティザーサイト」であっても、公開する以上は最低限のセキュリティ・プライバシー対応を怠らない、という姿勢で制作しています。
まとめ
今回のNaGI Saunaティザーサイト制作を通じて、次のことが確認できました。
- 1ページ完結のLP・ティザーサイトであれば、フレームワークに頼らずとも高級感あるデザインと滑らかなアニメーションを実現できる
- Figmaでのデザインカンプ制作 → 生成AIによる素材制作 → ビルド不要な実装という流れにより、写真撮影ロケや動画撮影を行わずとも短期間で高品質なティザーサイトを形にできる
- ビルドツール不要な構成は、公開の手軽さ・保守のしやすさ・表示速度の面で明確なメリットがある
- 見た目だけでなく、E2Eテストやセキュリティヘッダーといった「見えない部分の品質」まで作り込むことで、実運用に耐えるサイトになる
「凝ったアニメーションのあるLPを作りたいが、大掛かりなシステムは要らない」「まずは世界観を伝えるティザーサイトだけ先に作りたい」といったご要望をお持ちの方は、ぜひ本記事のような構成での制作もご検討いただければと思います。
本記事で紹介したサイトは実在しない架空の施設を題材としたポートフォリオ作品です。