【仮想サイト】
C-esta Room
"喫泉" -KISSEN-

「温泉ミスト」や「都会のオアシス」というサービスのコンセプトをWebデザインで表現するために、すりガラスのような質感（グラスモーフィズム）を全面的に採用しました。

工夫点

背景の backdrop-filter: blur を効果的に使い、背景画像（空やミスト）を透けさせることで、閉塞感のない開放的で幻想的な空気感を演出しています。

技術

背景レイヤー（bg-layer）を多重構造にし、パララックスやパーティクル表現を想定した奥行きのあるDOM設計を行っています。

PCとスマートフォンで情報の見せ方を最適化しています。特に「料金プラン表」においては、単に縮小するのではなく、スマホ閲覧時には「カード型レイアウト」に変形するCSS設計を行いました。

工夫点

PCでは比較しやすい「横並びの表」、スマホでは詳細が見やすい「縦積みのカード」へと、displayプロパティと::before疑似要素（attr(data-label)）を活用してシームレスに切り替えています。

メリット

狭い画面でも横スクロールが発生せず、ユーザーがストレスなくプラン内容を確認できます。

ターゲットである「多忙なビジネスパーソン」に響くよう、信頼感と癒やしを両立するデザインシステムを構築しました。

フォント

見出しには格式高い明朝体（Noto Serif JP）、本文には視認性の高いゴシック体（Zen Kaku Gothic New）を使い分け、可読性と高級感を両立しています。

配色

:root 定義変数を使用し、癒やしの「Primary Green」と高級感の「Accent Gold」を一元管理。サイト全体でトーン＆マナーを統一し、メンテナンス性も確保しています。

見た目だけでなく、実際の使い勝手（ユーザビリティ）にも細部までこだわりました。

スクロール

固定ヘッダーの高さ（offsetHeight）をJavaScriptで動的に計算し、アンカーリンク移動時の「被り」を防ぐ微調整を行っています。

エラー処理

画像読み込みエラー時に、自動でテキストロゴに切り替わる onerror 処理をHTML内に記述し、表示崩れを防ぐ堅牢な作り（フォールバック）にしています。

ファーストビューでブランドの世界観を強く印象付けるため、ページ読み込み時に全画面動画を再生するオープニング演出を実装しました。

自動再生

ブラウザの自動再生ポリシー（Autoplay Policy）を考慮し、muted（消音）かつ playsinline 属性を付与することで、スマホでもスムーズな自動再生を実現しています。

UX配慮

動画終了（endedイベント）時のフェードアウトに加え、画面クリックでもスキップできるイベントリスナーを設定し、ユーザーを待たせない設計にしています。