Web / Creative Engineering
このポートフォリオサイト自体
サイト全体をひとつの水面に見立て、各コンテンツが水中から浮かび上がる——映像・コード・モーションを横断する制作力そのものを「体験」で示すために、狙いと思想からデザイン・実装・公開まで一貫して設計しました。
Overview
このサイト自体が第一の実績です。作品を並べるのではなく、「サイトの体験そのもの」で制作力を示すことを狙いに設計しました。
法人にもクリエイティブ/スタートアップにも送れる営業URLとして、狙いと思想からデザイン・実装・公開まで一貫して手を動かしています。
Challenge
映像・音楽・コード・モーションという横断的な強みを、散らからずに一つの魅力として束ねて伝えることが課題でした。
3秒で「何を相談できるか」を伝えつつ、既視感のない一つのアートディレクションで差別化する必要がありました。
Approach
思想を「サイト全体がひとつの水面。コンテンツは水中に沈み、読み込みやスクロールで水面へ浮上する」という単一のシグネチャに集約しました。
派手なスクロール演出を足すのではなく、「水中から拾い上げる」という比喩でサイト全体を貫き、体験そのもので制作の姿勢を語る設計にしています。
Design / Implementation
Astro と生の WebGL（重い依存なし）で構築。明るいパステルのコースティック水面をポスター先行で描画し、WebGL は遅延初期化して初期表示を守ります。
アクセントは Cobalt + Coral、コンテンツはフロストガラスのカードとして浮上させ、和文タイポグラフィと余白の規律はその世界観の中で維持しています。
Result
「攻めた表現がコンバージョンの背骨を壊さない」ことを設計原則に据えました——reduced-motion 完全対応、JavaScript 無効でも全コンテンツが読める、ポスター先行で LCP を保護、スクロールジャックなし、コントラストとフォーカスの担保。
結果として、設計・実装・レビュー・改善のプロセスと「体験で語る」思想を、このサイト自体が実証しています。
Next
実素材と公開可能な案件、計測データを追加し、ケーススタディをより具体的に厚くしていきます。