| サイトURL | https://bakushin.dev/ |
| オーダー形式 | オーナー様から直接のオーダー |
| 制作期間 | 365時間 |
| 担当範囲 | 新規サイト制作 |
| スキル | 3D【立体的な映像】, Apollo Client, Framer Motion, GITHUB, GLSL (Shader), GraphQL, Next.js, SCSS, Swiper, Three.js, WebGL, WordPress, ヘッドレスCMS |
| 制作のポイント | ヘッドレスCMS（GraphQLを用いてWordPressの記事をNext.jsへフェッチ）して、SEO有利にサイト制作しました。 ISRで24時間毎に最新記事の状態を更新する設計です。 GraphQL（WPGraphQL活用／クエリ設計）／Apollo Client（ApolloProvider構成、クエリ定義、キャッシュ設定） reCAPTCHA、ハニーポットもプラグインを使用せずにコーディングしています。 ページ遷移も爆速です。 FV（ファーストビュー）にはThree.js（WebGL）を採用。カスタムシェーダー（GLSL）を自ら記述し、スクロール強度や慣性と連動して画像が有機的に波打つ歪みエフェクトを実装しました。GPUによる低負荷かつ高効率な描画をベースに、WebGLの描画とCSSのclip-pathを同期させることで、枠線そのものが変形するユニークでインパクトのある視覚体験を演出しています。 |
「技術」と「情緒」を融合させたファーストビュー演出
FVのメインビジュアルには、Three.jsとカスタムシェーダー（GLSL）を駆使した独自の画像歪みエフェクトを実装しました。
単なるライブラリの呼び出しに留まらず、以下の高度な制御を組み込んでいます。
物理ベースの動的干渉：スクロール速度や慣性と連動する「色収差（RGBズレ）」や「フィルムグレイン」を実装。静止画に「時間軸」と「質感」を与え、没入感を高めました。
数学的アプローチによる有機的な造形：CSSの clip-path とWebGLを同期。多重sin波を用いることで、機械的ではない、液体のような有機的な枠線の波打ちを実現しています。
インタラクティブな体験設計：マウス位置に反応する「リップル（波紋）エフェクト」を搭載。ユーザーの動作が直接画面に干渉する「触れるビジュアル」を構築しました。
GPU最適化：複雑なピクセル計算をすべてGPUで行うことで、多機能な演出と滑らかな描画性能（デバイスピクセル比の制御等）を両立させています。
デザイン担当
（X：@ngu_pursing）
