【仮想サイト】Sky Sight Studio

「空からの視点」というテーマを強烈に印象づけるため、ファーストビュー（ヒーローセクション）にこだわり、映画のような質感をWeb上で再現しました。

工夫点

単なる画像の配置ではなく、ノイズテクスチャ（Grainy Gradients）と多層のグラデーションオーバーレイを重ねることで、デジタル感を抑えた深みのある空気感を演出しています。

技術

CSSの mix-blend-mode: overlay を活用し、背景画像・グラデーション・SVGノイズパターンを合成。Tailwindの utility class を駆使して複雑なレイヤー構造を実装しました。

「SSS」というブランドロゴを通して背景のドローン映像が透けて見える、印象的なセクションを構築しました。静的なテキストと動的な映像を融合させ、先進性を表現しています。

工夫点

黒背景の中に白文字を配置し、その白文字部分だけを透過させて背面の動画を表示させることで、視覚的なインパクトとブランドのアイデンティティを同時に伝えています。

技術

CSSの mix-blend-mode: multiply（乗算）という「魔法のプロパティ」を使用。z-index で動画とマスクレイヤーの重なり順を制御し、軽量なコードで高度な映像表現を実現しました。

プロフェッショナルな信頼感（Deep Blue）と先進性（Cyan）を両立させるため、Tailwind CSSを用いたモダンなUIデザインを採用しました。

デザイン

ヘッダーやカード要素に backdrop-blur（すりガラス効果）を適用し、背景との一体感を維持しつつ情報を浮き上がらせています。また、ホバー時の微細なスケール拡大やシャドウの変化など、マイクロインタラクションで操作性を向上させました。

構成

Tailwindの Container Queries プラグインや Grid システムを活用し、あらゆるデバイスサイズで最適化されたレイアウト（レスポンシブデザイン）を提供しています。

ポートフォリオとしての機能を果たすため、制作実績をクリックした際にシームレスに動画を再生できるモーダルウィンドウを実装しました。

UX設計

ページ遷移することなくその場で動画を確認できるため、ユーザーの離脱を防ぎます。モーダル展開時には背景をぼかす処理を入れ、映像への集中を促しています。

JS実装

Vanilla JSで実装。クリックされた要素から source を取得してモーダル内の video タグにセットする動的な処理を行い、閉じる際には自動で一時停止・リセットする制御も加えています。