Ferment Intelligence Report

The Anatomy of Creative Web Agencies

AIが「80点の無難なWeb」を一瞬で量産する時代に、なぜ彼らのサイトは圧倒的に「別格」なのか?
Fermentに登録された日米欧のトップエージェンシー10社のデザイン思想、採用技術スタック、業務実績の徹底分析。

Target: 10 World-Class Agencies
Platform: Ferment × Kamos OS
Date: September 2026
Author: Kamos Design Research

💡 序論:なぜ今、Web業界は「まともな状態」に戻りつつあるのか

過去10数年のWeb制作は、重厚長大な分業体制(企画・ワイヤー・カンプ・コーディング・検証)と中間マージン、検索エンジンに迎合したSEOハックや金太郎飴のようなコンポーネント配置によって「表現の自由度」を失いかけていました。「CSSが書ける」「フレームワークを組める」という実装の手間そのものに高額な費用が支払われていた時代です。

しかし生成AIが80点のコードとレイアウトを数秒で生み出すようになったことで、その構造は崩壊しつつあります。テンプレ通りのWebの価値がゼロに近づいた結果、「で、あなたは何を表現したいのか?」「どんな手触り(身体感覚)を届けたいのか?」という、Web黎明期やFlash黄金期のような「純粋なクラフトマンシップと美意識の勝負」へと回帰しています。

ここにまとめた10社は、まさにその「95点〜100点の極限」に挑み続けている表現者たちです。彼らが何を見て、何を削り、どう実装しているのかを解剖します。

Showing 10 of 10 agencies
株式会社PRMO
Japan / Kichijoji

株式会社PRMO

prm.ooo ↗

東京・吉祥寺を拠点とするリモートファーストのクリエイティブスタジオ。Webを単なる情報板ではなく「操作する歓びのあるインタラクティブ空間」として再定義する、国内屈指のWebGL/体験設計チーム。

代表的な業務実績
集英社ゲームズ (SHUEISHA GAMES) 公式サイト:ゲーム会社の遊び心を、流動的なCanvasアニメーションと破綻のないグリッドで表現。
花王 ATTACK SUPER FIT BOTTLE:ボトルの立体構造をスクロール連動の3Dビューで直感解説。
サンリオ クロミ (KUROMI) 公式アーティストサイト:ダークポップな世界観とサウンド・UIの完全同期。
デザイン & 技術的アプローチ
Three.jsとHTML5 Canvasによるカスタムシェーダー。サウンドのON/OFFトグルを備え、ページ遷移時のシームレスなディゾルブをNuxt/Vueで実現。グラフィックデザインの骨格を崩さずに3Dを自然に溶け込ませている。
Three.js HTML5 Canvas Nuxt WebGL Sound Design Interactive
SHIFTBRAIN Inc.
Japan / Tokyo

SHIFTBRAIN Inc.

shiftbrain.com ↗

Awwwardsを席巻し続ける日本のデジタルクリエイティブ界の最高峰。ブランドの本質を緻密に言語化し、極上のタイポグラフィと微細なGLSL表現で「大人の洗練」へと昇華させる。

代表的な業務実績
TERADA KNIT コーポレートサイト:ニットの糸の微細な編み目や質感をデジタル上で再現し、素材への敬意をWeb体験として表現。
GOOD NEWS (那須):サステナブルな食の循環を、有機的なスクロールモーションと心地よい余白で演出。
NTTデータ経営研究所 / 鈴機商事:BtoBや堅牢な企業サイトにおいても圧倒的な美意識を注入。
デザイン & 技術的アプローチ
GLSLフラグメントシェーダーを用いた「派手すぎないテクスチャ感」。GSAPによる完璧なイージング曲線設計。日本語フォントと欧文フォントの組み合わせ比率、カーニングへの偏執的な調整。
Three.js GLSL Shaders GSAP Grid System Brand Strategy Audio Sync
mount inc.
Japan / Tokyo

mount inc.

mount.jp ↗

長友賢氏率いる伝説的デザインプラクティス。Webサイトを「動くポスター」「体験型シアター」へと昇華させ、閲覧者を一瞬でそのブランドの虜にするストーリーテリングの巨匠。

代表的な業務実績
ISSEY MIYAKE 各ブランドWeb:布のドレープ、衣服の立体美、身体の動きを極限まで引き算されたミニマルな画面構成で提示。
UNIQLO 各種グローバルキャンペーン:世界中の誰もが直感的に操作できるユニバーサルかつプレイフルなWeb体験。
POLA、サントリー、本田技研:企業の思想を「言葉」と「構図」の力で研ぎ澄ます。
デザイン & 技術的アプローチ
自社サイトはVue/Nuxtを土台にしつつ、徹底的なエディトリアル構成。技術を前面にひけらかさず、写真のトリミング、余白、テンポ、文字の置き位置だけで圧倒的な説得力を生み出している。
Typography Editorial Layout Vue Nuxt Brand Philosophy Art Direction
monopo
Japan & Global

東京・ロンドン・ニューヨーク・パリに展開するコレクティブ・エージェンシー。「powered by all of us」を掲げ、ストリート感と現代カルチャーを注入したエッジの効いたデジタル体験を創出。

代表的な業務実績
POLA B.A、SHISEIDO 各種グローバルローンチ:伝統的なビューティーの枠組みを壊す、尖ったアートディレクション。
Canada Goose、ASICS、Red Bull:ファッションとスポーツのカルチャー文脈を織り交ぜたインタラクティブキャンペーン。
自社プラットフォーム「powered by all of us」:世界中のクリエイターを束ねるボーダレスな表現。
デザイン & 技術的アプローチ
React / Next.js を採用した軽快な国際化(i18n)対応。雑誌のエディトリアルをWebに移植したようなアシンメトリー(非対称)レイアウトと、大胆なビビッドカラーのコントラスト使いが秀逸。
React Next.js i18n Street Culture Global Collective Asymmetric Layout
STUDIO DETAILS
Japan / Nagoya & Tokyo

STUDIO DETAILS

details.co.jp ↗

「神は細部に宿る」を文字通り実践するブランドファーム。1ピクセルの余白、フォントのカーニング、スクロールの減速曲線に至るまで、徹底的に磨き上げられたクラフトマンシップが看板。

代表的な業務実績
VERMICULAR (バーミキュラ):鋳物ホーロー鍋の重厚な金属の質感と料理のシズル感を、精密なスクロール連動と高精細ビジュアルで再現。
ROHTO (ロート製薬):製薬会社の信頼性と先進性を両立させたWebリブランディング。
自社知見メディア「知見」:デザインと経営の接続に関する高度なオピニオンを発信。
デザイン & 技術的アプローチ
日本語フォントを最も美しく読ませる行長・行間設計。ホバー時のマイクロインタラクションが極めて滑らかで、押し付けがましくない上品な高級感を生み出している。
Detail-Oriented Micro-Interactions Brand Farm Craftsmanship Typography
Active Theory
Global / LA & Amsterdam

Active Theory

activetheory.net ↗

WebGL / 3DリアルタイムWeb体験における世界の絶対王者。映画のVFXとゲームエンジン、Web技術の境界を完全に消し去った「没入型デジタル空間」を量産する。

代表的な業務実績
Spotify Kids / Hulu / Coachella VR:数万人規模が同時接続するバーチャルフェスやインタラクティブ空間をブラウザ上に構築。
自社プラットフォーム「Dreamwave」:Webブラウザだけで動く高精細メタバース・バーチャルイベント基盤。
Google I/O Web Experiences:最新Web標準(WebGPU/WebXR)を限界まで引き出す実験的プロジェクト。
デザイン & 技術的アプローチ
自社開発のWebGLエンジン「Medusa」。水面のリアルタイム波紋計算、ボリューメトリックフォグ(光の筋)、立体音響(Web Audio API)を融合。高解像度かつ60fpsを維持するメモリ・シェーダー最適化技術は世界最高峰。
WebGL 2.0 WebGPU Custom Engine (Medusa) Spatial Audio Volumetric Lighting Realtime 3D
Locomotive
Global / Montreal

Locomotive

locomotive.ca ↗

Awwwardsのエージェンシー・オブ・ザ・イヤー常連。世界中のWebデザイナーに愛用される「Locomotive Scroll」の開発元であり、スクロールとタイポグラフィの美しさで世界一の評価を受ける。

代表的な業務実績
Lightship (次世代全電動キャンピングカー):プロダクトの3Dモデルをスクロール進行と完全同期させ、世界的なデザイン賞を総なめにした金字塔。
Pangram Pangram Foundry:フォント見本帳をインタラクティブに試し打ち・購入できる先鋭的なタイポグラフィサイト。
自社ブランディング:黄色のアクセントと力強いサンセリフによる唯一無二のアイデンティティ。
デザイン & 技術的アプローチ
バターのように滑らかな慣性スクロール(Smooth Scroll)。ポスターデザインの規則をWebに持ち込んだ巨大タイポグラフィとグリッド。3Dモデルのカメラパスとスクロール位置の完璧な連携。
Locomotive Scroll Three.js Brutalist Typography Scroll-Driven 3D Camera Pathing
Resn
Global / NZ & Amsterdam

「世界で最もクレイジーで愛されるデジタルスタジオ」。シュルレアリスム、サイケデリック、狂気のユーモアを驚異的な技術力で形にし、Webデザインの常識を20年以上にわたり破壊し続ける。

代表的な業務実績
adidas Originals / Toyota / The Economist:見る人を笑わせ、驚かせ、夢中にさせるバイラル性の極めて高いキャンペーンサイト。
自社サイト「Resn Drop」:画面を長押し(Click & Hold)すると、画面全体が液体のように融解・爆発する伝説的ギミック。
FWA / Awwwards 歴代最多受賞クラス:カンヌライオンズやD&ADでも無数のトロフィーを獲得。
デザイン & 技術的アプローチ
リアルタイム物理演算(2D/3D Rigid Body & Soft Body)とカスタムWebGLシェーダー。マウスのクリック長押しやカーソル移動をゲームコントローラーのように扱い、身体的な「触感」をWeb上に生み出す。
Physics Engine Click & Hold UX WebGL Shaders Gamification Surrealism
BASIC/DEPT®
Global / San Diego & NYC

BASIC/DEPT®

basicagency.com ↗

Google、Airbnb、Patagoniaなどシリコンバレーや世界屈指のブランドを支える「モダン・デジタルブランディングの頂点」。商業性と圧倒的な美意識を完全両立させるプロフェッショナル。

代表的な業務実績
Google Store (公式Eコマース体験):ハードウェアプロダクトの魅力を引き出す、流れるような購入体験とビジュアル設計。
Patagonia / KFC / Bang & Olufsen:ブランドの思想をストーリーとして伝えながら、高いコンバージョンを生む次世代Eコマース。
カルチャーメディア「THINKING」:社内研究、ポッドキャスト、プレイリストを発信するオウンドメディア。
デザイン & 技術的アプローチ
Next.jsとHeadless Commerce(Shopify Plus, Sanity等)を融合。黒を基調としたダークモードと、余白を大胆に取ったハイエンドなレイアウト。カスタムカーソルやドラッグ操作による直感的なUI操作。
React Next.js Headless Commerce Luxury Minimalism Custom Cursor Sanity CMS
Hello Monday
Global / Copenhagen & NYC

Hello Monday

hellomonday.com ↗

コペンハーゲンとNYを拠点とする「デジタルクラフトと遊び心の調和」の象徴。人間味、優しさ、思わずクスッと笑ってしまうアニメーションで、ブランドの体温を画面越しに届ける。

代表的な業務実績
Google Arts & Culture:世界の美術品や文化財を誰もが直感的に探索できるインタラクティブ展示を多数開発。
YouTube Kids / Star Wars:子供から大人まで夢中になれる、ストーリーブックのようなWeb体験。
Bang & Olufsen:北欧オーディオの澄んだ音とクラフトマンシップを可視化。
デザイン & 技術的アプローチ
LottieやHTML5 Canvasによるオーガニックなベクターアニメーション。ボタンを押した時の「ぷるん」とした弾力感や、イラストが呼吸するように動くマイクロインタラクション。アクセシビリティへの高い配慮。
HTML5 Canvas Lottie Animation Playful UI Human-Centric Nordic Aesthetics

📊 10社 表現手法 & 技術マトリックス

各社が得意とする表現領域と中核技術の分布。プロジェクトの目的に応じて「どの引き出しを使うべきか」の指標になります。

Agency 拠点 主要表現スタイル 中核フロントエンド 演出・インタラクション技術 最大の強み
PRMO 日本 (吉祥寺) 3Dインタラクティブ空間 Nuxt / Vue Three.js, Canvas, Sound FX ゲーム性・世界観とUIの統合
SHIFTBRAIN 日本 (東京) 洗練された大人の質感 Vite / Vanilla Three.js, GLSL, GSAP タイポグラフィとシェーダーの極致
mount inc. 日本 (東京) 動くポスター / シアター Nuxt / Vue Micro-CSS, 音声・映像同期 言葉と構図による強烈な印象
monopo 東京 / 欧米 ストリート・カルチャー Next.js / React i18n, 非対称レイアウト グローバルな感性とカルチャー融合
STUDIO DETAILS 日本 (名古屋/東京) ディテール・クラフト React / Headless 極小ホバー, 厳密グリッド 1px・字間の徹底的な美意識
Active Theory 米 (LA) / 蘭 リアルタイム3Dメタバース Medusa (自社製) WebGL 2, WebGPU, Web Audio ゲームエンジン級のリアルタイム技術
Locomotive カナダ (モントリオール) ブルータリズム × スクロール Nuxt / Node Locomotive Scroll, Three.js スクロール慣性と巨大フォントの美学
Resn ニュージーランド / 蘭 サイケデリック&物理演算 Custom WebGL Matter.js, 物理演算, Shaders 既成概念を壊す狂気のユーモア
BASIC/DEPT® 米 (サンディエゴ/NY) ラグジュアリー・コマース Next.js Headless Commerce, Custom Cursor 商業価値とミニマリズムの完全両立
Hello Monday デンマーク / 米 北欧プレイフル・ヒューマン Vue / Canvas Lottie, Canvas Micro-interactions ブランドの体温を伝える優しいモーション

✨ 彼らから私たちが「盗むべき」6大クラフト原則

AI時代において、テンプレートやコモディティから脱却し、「魂の宿るWeb」を作るためのエッセンス。

01 / MOMENTUM

スクロールの「慣性」と「間」

ブラウザ標準のスクロールはカクつきやすく無機質です。LocomotiveやSTUDIO DETAILSのように、適度な摩擦(Friction)と減速曲線(Ease-out)を設けるだけで、ページをめくる指先に「上質な紙やシルクを撫でているような身体的フィードバック」が生まれます。

02 / TYPOGRAPHIC DISCIPLINE

タイポグラフィの「引き算と緊張感」

飾り立てたグラフィックよりも、フォントのウェイト差、ジャスティファイ(行揃え)、字間(Tracking/Kerning)の詰め具合が画面の品格を決定づけます。文字をただの情報ではなく「空間を定義するテクスチャ」として扱っています。

03 / SUBTLE SHADERS

3D / WebGLは「隠し味」にする

素人は派手な3Dモデルを画面中央に回しがちですが、SHIFTBRAINやPRMOのような一流は、光の屈折、マウス追従の微かな歪み、背景のノイズなど「空気感(アンビエント)」を表現するためにシェーダーを使います。主役はあくまでコンテンツです。

04 / AUDIO & HAPTIC FEEDBACK

音とマイクロインタラクション

ボタンにカーソルが吸い付くカスタムカーソル、クリック時の極めて小さな「カチッ」というフィードバック音。視覚だけでなく聴覚や触覚を刺激することで、Webサイトは「見るもの」から「触れるもの」へと変貌します。

05 / SEAMLESS TRANSITIONS

「真っ白な画面」を絶対に見せない

リンクを踏んだ瞬間に画面が真っ白にリロードされる体験を徹底的に排除。Next.jsやNuxtのSPA遷移、あるいはBarba.jsのようなページトランジションにより、アプリや映像作品のように滑らかにシーンが切り替わります。

06 / PHILOSOPHY FIRST

思想(アティチュード)を語る

単に「こんな機能があります」「こんなデザインができます」ではなく、「私たちは何を美しいと信じているか」「なぜこれを作るのか」という哲学を前面に出しています。機能で選ばれるのではなく、姿勢で選ばれるための設計です。