【仮想サイト】Crystal Design Co., Ltd.

「水と光の空間デザイン」というコンセプトを表現するため、深海のようなダークブルーを基調とし、光の揺らぎや水の透明感をWeb全体で演出しました。画像素材に頼るだけでなく、CSSのみで描画した「リアルな雫」を配置することで、サイト自体が呼吸しているような有機的な美しさを作り出しています。

工夫点

border-radius の値を不規則に設定して自然な水滴の形を作り、複数の box-shadow と backdrop-filter を組み合わせることで、背景が透けて見える「液体としての立体感」をCSSだけで軽量に実装しています。

技術

Tailwind CSSのUtility Classをベースにしつつ、複雑な装飾（雫やシマーエフェクト）にはCustom CSSを併用。mix-blend-overlay などの描画モードを活用し、奥行きのある水中表現を実現しました。

商品の詳細を見るためにページ遷移してしまうと、ユーザーの没入感が途切れてしまいます。そこで、商品をクリックするとその場で詳細情報が浮かび上がる「フルスクリーン・モーダル」を採用しました。

工夫点

モーダル展開時にJavaScriptでDOM（商品データ）を動的に生成・注入する設計にしています。これによりHTMLの初期読み込み量を抑えつつ、アプリのようなサクサクとした操作感を提供しています。

メリット

閉じるボタンのアニメーションや背景のブラー処理など、開閉時のトランジション（transition-all duration-300）を丁寧に調整し、高級ブランドにふさわしい「余韻」のある動きを実装しました。

PC閲覧時には、マウスストーカー（カスタムカーソル）を実装し、ユーザーの操作に特別な体験を付与しました。商品画像にホバーした際にカーソルが反応し、「VIEW DETAILS」の文字が回転しながら現れることで、直感的なクリック誘導を行っています。

工夫点

pointer-events: none を指定してクリック動作を阻害しないようにしつつ、JavaScriptの requestAnimationFrame やCSSの transform を活用して、マウスの動きに遅れて追従する「浮遊感」のある動きを演出しました。

技術

SVGテキストパスを用いた円形文字のアニメーション（animate-spin-slow）と、ブラーのかかった発光エフェクトを組み合わせ、深海を漂うような演出を行っています。

ターゲット層である富裕層やインテリアに関心の高い層に響くよう、徹底して「余白」と「書体」にこだわりました。商品一覧では、あえて画像サイズや配置のリズムを崩したグリッドデザインを採用せず、整然と並べることで「静寂」を表現しています。

フォント

欧文には古典的な気品を持つ「Cinzel」、和文には墨だまりのような情緒を持つ「しっぽり明朝」を選定。明朝体特有の細いラインが、高解像度ディスプレイでも美しく見えるよう調整しています。

動き

スクロールに合わせてふわっと表示される IntersectionObserver によるRevealアニメーションが、静かな空間に動きを与えています。

モバイル端末での閲覧時には、ナビゲーションをハンバーガーメニューに切り替え、全画面オーバーレイで表示することで操作性を確保しました。また、メニュー展開時の挙動にも細かな調整を行っています。

工夫点

メニューのオーバーレイ要素を header タグ内ではなく body 直下に配置することで、CSSのスタッキングコンテキストによる表示崩れ（固定配置の基準ズレ）を回避し、常に画面全体を覆うように設計しました。

操作性

メニュー展開中は document.body.style.overflow = 'hidden' を動的に適用して背景のスクロールをロック。ユーザーがメニュー操作に集中できるストレスフリーな体験を実現しています。