
Ian Coad DP
撮影監督のポートフォリオ。3Dモデルではなく映像サムネイルの配置と遷移そのものを Three.js で組んでいる。
- サイトURL
- https://www.iancoad.com/
- クレジット
- Benjamin Yoshiwara
- 使用技術
- Three.jsReactSanity無限スクロールページトランジション
撮影監督(Director of Photography)Ian Coad のポートフォリオサイト。制作は Benjamin Yoshiwara。ナビゲーションは Selects(作品)、Reel、Info の3つだけで、映像作品を大きな背景ビジュアルとして見せることに全振りした構成です。CMS は Sanity。
Awwwards のタグは Three.js / React / Sanity / 3D / Infinite Scroll / Transitions。見どころとして挙がっているのは「選択作品のサムネイルフォーカス」「Info ページのトランジション」「/reel/explore のリールハイライト探索」「プロジェクトナビゲータ」の4つで、いずれも映像サムネイルを空間に並べて操作させるタイプの実装です。3Dモデルを見せるサイトではなく、映像素材の配置と遷移に WebGL を使う側に分類されます。
【参考になるポイント】
・/reel/explore という専用URLでリール探索画面を切り出している。トップの導線を汚さずに重い体験を分離する作り
・無限スクロールとページトランジションを両立させるには、React 側のルーティングと3Dシーンの維持を噛み合わせる必要がある。ルート遷移でシーンを捨てない設計が前提になる
・コンテンツは Sanity に置き、映像とサムネイルの差し替えを運用側で回せるようにしている
・※実サイトのHTMLからは canvas や three.js の直接的な痕跡を取得できなかった。3D周りの記述は Awwwards のタグと制作者申告に基づく
・※og:image も twitter:image も見つからなかったため、サムネイルは Awwwards の投稿画像を使用
・※Awwwards は2026年7月14日時点で Nominee(バッチ一覧では Honorable Mention と記録)
