Claude Codeで組み込むWebデザイン演出ライブラリ

動くグラデーション、液体金属、ガラス表現、3Dをライセンス確認済みのライブラリで。日本語サイトの重さとアクセシビリティへの配慮も解説します

海外のプロダクトサイトでよく見る、ゆっくり動くグラデーションや液体金属のようなロゴ、ガラスのようなパネル。専任のグラフィックエンジニアが何か月もかけて作ったように見えますが、多くは公開されているオープンソースのライブラリでできています。Claude Codeを使えば、組み込み自体は半日もかかりません。難しいのはコードより、どの効果を一つだけ選ぶか、どこまで控えめに調整するか、そしてライセンスをきちんと確認することです。

日本のサイトならではの注意点

先に一つだけ。日本語サイトは、英語サイトより最初から重いことが多いです。日本語のWebフォントは文字数が多いぶんファイルが大きく、そこにWebGLの演出を足すと、古いスマートフォンや社内の古いPCで一気に遅くなります。だからこそ、演出は「ページに一か所」が基本です。

また、企業サイトでは新しいライブラリを入れるときに、情報システム部門や法務の確認が必要な場合があります。この記事で紹介するものは、すべてライセンスを確認したうえで選んでいます。社内説明用に、ライセンス名を控えておいてください。

Claude Codeでの組み込み手順

どのライブラリでも流れは同じです。

サイトの構成を最初に伝える(静的HTML、Vite + React、Next.js など)
公式のREADMEを読ませ、必要な依存パッケージとバージョンを確認させる
置く場所、色(HEX)、速さ、強さをデザインの言葉で伝える
プレビューを見ながら「もっと遅く」「粒子を減らして」と言葉で調整する

仕上げには、毎回このチェックを頼みます。

仕上げとして次を対応してください。
1. prefers-reduced-motion が有効なら、アニメーションを止めて静止画にする
2. 画面外にあるときやタブが非表示のときは描画を止める
3. WebGLが使えない環境では代わりの静止画を表示する
4. 実機のスマートフォンでの表示速度と、増えたファイルサイズを報告する
5. ライブラリのライセンス表記を、サイトのライセンス一覧に追記する

動きを減らす設定への対応は、JIS X 8341-3 を意識した企業サイトのアクセシビリティ方針とも相性が良いです。

ShaderGradient:ヒーローの背景にゆっくり動くグラデーション

ShaderGradient は、WebGLで立体的に動くグラデーションを作れるライブラリです。カスタマイザーで見た目を調整でき、FigmaやFramer向けの版もあります。READMEにはMITライセンスと記載されています。

https://github.com/ruucm/shadergradient のREADMEを読んでください。
このサイトは[Next.js / Vite + React]です。READMEの互換性の表で、
ReactとReact Three Fiberのバージョンが合っているか先に確認してください。
ヒーローの背景だけにグラデーションを入れます。
色は[#HEX]、[#HEX]、[#HEX]。動きはゆっくり、コントラストは低めで、
見出しの日本語がはっきり読めることを優先してください。

Paper Shaders:軽い演出と液体金属の表現

Paper Shaders は依存パッケージなしで動くシェーダー集で、メッシュグラデーション、粒子感のあるグラデーション、ハーフトーン、液体金属などがそろっています。ライセンスはApache 2.0です。まだ0.0.x系で破壊的な変更が入るため、READMEの指示どおりバージョンを固定するようClaudeに伝えてください。

同じチームの Liquid Logo というリポジトリも話題になりますが、こちらは PolyForm Shield という条件付きのライセンスです。仕事で使う前に、法務と一緒に条文を確認することをおすすめします。

Liquid Glass JS と React Three Fiber

Liquid Glass JS は、ガラス越しに背景がゆがんで見える表現を静的HTMLに足せるMITライセンスのライブラリです。ただし背景の取得に html2canvas を使うため、長いページでは重くなりがちで、しばらく更新もされていません。本番ではCSSの backdrop-filter 版と比べてから決めてください。

本格的な3Dなら、MITライセンスの React Three Fiber と drei です。自由度は一番高い反面、学ぶことも多いので、最初はゆっくり回る図形を一つ置くところから始めましょう。

動きがいらないときは静止したテクスチャ

和の落ち着いた雰囲気や、紙のような質感がほしいだけなら、動く必要はありません。nnnoise などfffuelのジェネレーターでSVGのノイズを作り、背景に敷くだけで十分なことも多いです。生成した画像は個人でも商用でも使えますが、素材として再配布することはできません。

まずは一つのページで、効果を一つだけ選んでください。サイトの構成、README、ブランドカラーをClaudeに渡し、仕上げのチェックまで終えたら、実機のスマートフォンで確認します。その効果があるほうがページが伝わりやすいと思えたときだけ、残しましょう。