Webデザインの現場で使えるAIツール・素材系サービスの最新動向を集めた。今回はシェーダー編集ツールShadersのMCP対応、メッシュグラデーションエディタColorFlow、画像生成スイートKreaの拡張、Figma向けのAIアセット生成プラグイン、商用利用OKの無料AI素材Lummi、そしてランディングページ用プロンプト集MotionSitesの6件を紹介する。どれもコードを書く前の「素材づくり」を高速化してくれるツールばかりだ。
コードで返ってくるシェーダー編集ツール「Shaders」
ShadersはGLSLベースのビジュアルエフェクトをブラウザ上でプレビューしながら調整できるエディタで、プリセットの検索やパラメータ調整をGUIで行い、そのままReact/Three.jsなどフレームワーク向けのプロダクションコードとして書き出せるのが特徴だ。アップデートログによると、直近ではAIエージェントから直接プリセットを検索・導入できるMCPコネクタが追加されており、Claude CodeなどのAIコーディングツールからターミナル経由でシェーダー効果を組み込む使い方が広がりつつある。背景の光の粒子やノイズ、グロー効果などを「コードは書きたいがゼロから数式は書きたくない」というデザイナー・エンジニア双方にとって扱いやすいツールだ。
ノーコードでメッシュグラデーションを作る「ColorFlow」
UIキット素材で知られるLS.GRAPHICSが公開したColorFlowは、サインアップ・インストール・課金一切不要でブラウザだけで使えるメッシュグラデーション生成エディタだ。公式紹介記事によれば、カラーポイントをドラッグして配置し、グレインやクロマティックアベレーション(色収差)といったエフェクトを重ねられ、静止画のほか4K動画としての書き出しや、Framer・Webflow・Reactへの直接埋め込みにも対応する。ヒーローセクションの背景づくりで「それっぽい」グラデーションを数分で作れる手軽さが魅力だ。
| ツール | 用途 | 出力形式 | 料金 |
|---|---|---|---|
| Shaders | シェーダー/ビジュアルエフェクト | コード(React/Three.js等) | フリーミアム |
| ColorFlow | メッシュグラデーション背景 | 画像/4K動画/埋め込みコード | 無料 |
| Lummi | ストック写真・イラスト・3D素材 | 画像ファイル | 無料(商用可・クレジット不要) |
創作スイート化する画像生成AI「Krea」
Kreaはリアルタイムに描画しながら画像を生成できるキャンバス機能で知られてきたが、公式ブログを見ると画像生成にとどまらず、動画生成、アップスケーリング、カスタムモデルのLoRAトレーニング(Krea Train)、スタイル転写まで揃う総合クリエイティブスイートへと拡張が進んでいる。ムードボード機能にはランダム選出・自動選出モードも追加されており、配色やスタイルの方向性を固める前段階のインスピレーション探しに向く。Webサイトのヒーロービジュアルやアイキャッチ素材を作る際の下地づくりとして活用しやすい。
Figmaキャンバス上でアセットを生成するAIプラグイン
Figma上で完結するアセット生成プラグインも充実してきている。Pictographicはビジネス・人物・テクノロジーなどタグ検索でCC0ライセンスのイラストをキャンバスに直接ドロップできるライブラリ型プラグイン、Andoはテキストプロンプトから画像・アイコン・テクスチャを生成したり、ラフなスケッチを清書したりできるAIコパイロット型プラグインだ。どちらもFigma Communityから無料で導入でき、ワイヤーフレーム段階での「とりあえずの絵素材」を素早く埋められる。
クレジット不要で使える無料AI素材「Lummi」
LummiはAIアーティストが生成・キュレーションした16,000点以上のストック写真・イラスト・3Dアセットを、商用利用・クレジット表記なしで無料公開しているサービスだ。色味やアスペクト比、フォーカルポイントで検索でき、APIも提供されているほか、Figma・Canva・Webflowとの連携も謳われている。従来の有料ストックフォトに頼らずヒーロー画像やブログのアイキャッチを揃えたい場合の選択肢になる。
コピペで動くヒーローセクション集「MotionSites」
MotionSitesはそれ自体がサイトを生成するツールではなく、Framer Motionを使ったアニメーション付きヒーローセクションのプロンプト集で、コピーしてLovableやBolt、Cursor、Claudeといったコーディング系AIツールに貼り付けるだけでReactコードとして展開できる。SaaS・フィンテック・Web3・ポートフォリオなど業種別のプロンプトに加え、CTAや料金表、フッターなどページ部品ごとのテンプレートも揃っており、「プロンプトを書く時間」自体を省略したい人向けの素材集といえる。
主な情報源
- Shaders – Updates
- LS.GRAPHICS Blog – Introducing ColorFlow
- Krea Blog
- Pictographic (Figma Community)
- Ando – AI Copilot for Designers (Figma Community)
- About Lummi
- motionsites.ai Review – Stork.AI
各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。