
Andrew Cunliffe — Senior Staff Designer & Technologist
AIの門番と会話して通してもらう個人ポートフォリオ。守秘案件をどう見せるかをAI越しに解いている。
- クレジット
- Andrew Cunliffe
- 使用技術
- Three.jsReactNext.jsWebGLパーティクルAI対話UI
Intuit(QuickBooks、TurboTax)でシニアスタッフデザイナーを務める Andrew Cunliffe の個人サイト。本人の説明は「AI+HI のサービス体験、Figmaプラグイン、エージェントが組んだWebツールを作る」で、Work / Elsewhere / Playground の3つに分かれています。金融系プロダクトでの経歴と軍役を含む経歴が短く添えられます。
一番の仕掛けは入口です。サイトがAIの門番(doorman)に守られていて、会話して通してもらうと中に入れる、という構造になっています。エンタープライズのAI案件は守秘義務でそのまま見せられない、という個人ポートフォリオの構造的な問題を、AIとの対話に置き換えて処理しているわけです。背景には WebGL のパーティクルフィールドが敷かれ、Awwwards のタグは Three.js / React / Next.js。
【参考になるポイント】
・ポートレート画像が portrait-relight/rest.webp という名前でパラメータ付きに呼ばれている。ライティング違いの複数状態を用意していることが命名から読み取れる
・守秘案件を「載せない」のではなく「AIに要約させて話させる」方向で解決している。ケーススタディを公開できない職種のポートフォリオの参考になる
・og:image と twitter:image はどちらも https://andrewcunliffe.ai/OG.png の1枚で、OGP用に別途用意されている
・※パーティクルフィールドの実装が Three.js かどうかは Awwwards のタグと本人の紹介文に基づく。WebFetch が返すMarkdownからは canvas の実体を確認できていない
・※2026年7月7日エントリー、Nominee(5.80〜9.40、平均7.8前後)
