🧭 目的・スタイルで探せる、おしゃれフォント図鑑が登場!【いますぐ見る】

「これ試してみたい」がきっと見つかる、Web制作の最新ツール&テクまとめ【2025年5月版】

あとから探せるWebライブラリ「Collective」も新登場!

「最近どんなツールが出てるんだっけ?」
「気になるUIネタ、あとで使おうと思って忘れた…」

そんなときにサクッと振り返れるように、いま注目されているWeb制作まわりの便利ツールやアイデアをまとめてご紹介します。

今月も、FigmaプラグインやCSSテクニック、ノーコードサービスからアニメーションまで、幅広くピックアップしてみました。

気になるものがあれば、ぜひブックマーク&シェアしてみてくださいね。

クリエイターの作業効率が上がる、注目ツールまとめ(2025年5月版)

16時間前
NEW
AIを活用したプロトタイプ作成ツールで、プロダクトチームがUIデザインを迅速に作成し、ユーザーからのフィードバックやデータに基づいた意思決定を行い、チーム内でのコラボも可能。

ツール・ジェネレータ🛠️

19時間前
NEW
ブラウザ上でCSSスタイリングのカスタマイズができるオンラインツール。立体的に回転する3Dアニメーションを実現可能。

ツール・ジェネレータ🛠️

HTML/CSS

20時間前
NEW
CSSのmaskを利用して、カルーセルやスライダーの両端をフェードアウトさせるCSSテクニック。

スニペット✂️

HTML/CSS

2日前
NEW
ヨハネス・フェルメールの最も有名な絵画「真珠の耳飾りの少女」を108億万画素でスキャン、ブラウザ上で閲覧できます。絵の具が劣化によりひび割れした細部までくまなくどうぞ。

インスピレーション💡

3日前
NEW
コンテナ端の子要素の余白を自動的にトリミング、レイアウトを簡単にする新しい CSS プロパティ、margin-trim の使い方を紹介した記事。

チュートリアル📘

HTML/CSS

3日前
NEW
アーケードゲームのような遊び心あふれるデモ。カートのスピードなどをブラウザなどでカスタマイズ可能です。

ツール・ジェネレータ🛠️

4日前
Figmaでプロンプトを入力すると、プラグインが実際のデザインに変換します。さらにすごいのは、結果をリアルタイムで確認できること。

プラグイン

Figma

4日前
NotionをつかってCMSサイトを構築できるサービス。あらゆるタイプのウェブサイトやアプリの制作に対応しています。

ツール・ジェネレータ🛠️

4日前
Tailwind CSSとMotionで作成された、美しいアニメーションが特長のUIコンポーネント集。コピペも簡単で、カスタマイズ可能。 オープンソースMIT。

アニメーション🎞️

JavaScript, Tailwind CSS

4日前
97年に登場したWindows向けメディアプレイヤーのスキンテーマをひたすら集めたギャラリーサイト。

インスピレーション💡

4日前
Claude AIとChatGPTを使い、Figmaのデザインをプロダクションレベルのコードに変換するプラグイン。React、SwiftUI、Tailwind、Flutterなどの複数のフレームワークをサポート。

プラグイン

Figma

4日前
CSS APIとView TransitionをサポートしたアンカーポジショニングのためのTailwind CSS専用プラグイン。

Tailwind CSS

4日前
Made With GSAPがGSAPのInertiaPluginを使ったホバーエフェクトのチュートリアルを公開しています。

アニメーション🎞️

GSAP

7日前
GSAPが完全無料で商用利用も可能になりました。人気の高いSplitTextプラグイン、いままでは有料でしたがすべてのボーナスプラグインが無料となりました。

アニメーション🎞️

GSAP

7日前
オンライン上で画像を細かく編集できるフォトエディターツール。編集した画像のダウンロードも可能です。

ツール・ジェネレータ🛠️

1週間前
凹凸のあるすりガラスを手軽に作成できるFigmaプラグイン。お好みの範囲にエフェクトを適用でき便利。

プラグイン

Figma

1週間前
サムネイルをクリックすると、パスを描きながら画像が繰り返し表示されながら拡大表示されるフレームアニメーション。

アニメーション🎞️

HTML/CSS

1週間前
ウェブサイトの基本となるUIデザインベースで利用する配色カラーパレットをCSS color-mix()をつかって作成する方法を紹介。デモ配色ジェネレーターも一緒にどうぞ。

配色🎨

HTML/CSS

1週間前
ジェン・シモンズ氏が、ウェブデザインにおけるタイポグラフィの見た目を改善する、新しいCSSラインハイト単位について説明しています。従来の設定との違いを分かりやすくデモを使って体験できます。

チュートリアル📘

HTML/CSS

1週間前
Mihael Miklosicがp5.jsを使って作成した、Perlinノイズ・グラフィック・ツール。色やシェイプなどカスタマイズ可能で、エクスポートまで。

ツール・ジェネレータ🛠️

1週間前
Reactの新機能とをつかった、スムーズなUI遷移の実装についてスニペット付きで詳しく紹介しています。

チュートリアル📘

React

2週間前
漫画などで用いられる集中線をCSSのみで表現でき、ヒーローセクションなどの背景にもおすすめ。

スニペット✂️

HTML/CSS

2週間前
CSSで描かれたスタイリッシュな背景パターン集。幾何学・グラデーション・サイバー風まで、全て商用利用OK&カスタマイズ自由。ライト・ダーク両対応です。

ツール・ジェネレータ🛠️

HTML/CSS

2週間前
HTMLシンボルや絵文字をコピー&ペーストするためのリソースで、すべて検索可能。

ツール・ジェネレータ🛠️

HTML/CSS

2週間前
CSSやTailwindでのCSSスニペットライブラリ。ボタンやカードチェックボックスなどさまざま。CSSだけでなく、Tailwind版が用意されているのがミソ。

スニペット✂️ ツール・ジェネレータ🛠️

HTML/CSS, Tailwind CSS

2週間前
clip-pathプロパティをつかったハート型CSSシェイプの作り方スニペット。

スニペット✂️

HTML/CSS

2週間前
スクロール スナップ、ユーティリティ関数、3D 効果、ドラッグ可能なインタラクションを使用した各種デモを見ながら、カルーセルの作りかたを学びます。

チュートリアル📘

GSAP

2週間前
Nuevo.Tokyo™は、日本の伝統的な色彩美と現代的なUIデザインを融合させるプロジェクトの一環として、Figma上でJAPANESE GRADIENTS [FOR UI]™デザインパックの無料版を提供しています。

配色🎨

Figma

2週間前
PartyKitとPeerJSを使ってReact Miami Confのために作ったブラウザベースのマルチプレイヤーゲーム。全員が同じ部屋に参加します。

ツール・ジェネレータ🛠️

React

3週間前
ユーザーインターフェースをスタイリングするのに、backdrop-filterを利用した実用的なサンプル例をまとめたチュートリアル。

チュートリアル📘

HTML/CSS

3週間前
新しいclip-path: shape()を使えば可能です。 コードはより複雑ですが、CSS変数を使って簡単にコントロールできます。

スニペット✂️

HTML/CSS

3週間前
Figma謹製のQRコード生成ツール。URLやテキストはもちろん、Wi-fiやSMS、電話番号、メールアドレスでコードを発行できます。

ツール・ジェネレータ🛠️

3週間前
滑らかなスクロールアニメーションを実現できるJavaScript ライブラリが最新版ver4にアップデート。

アニメーション🎞️

JavaScript

3週間前
出発地と到着地を入力するとGEOロケーションマップを作成してくれるオンラインツール。

ツール・ジェネレータ🛠️

3週間前
部屋の写真をアップロードするとAIが自動でリノベーションを提案してくれるAIツール。棚やフロア、壁などもカスタマイズ可能です。不動産リスティングに。

ツール・ジェネレータ🛠️

3週間前
アップロードした複数の画像をもとに動画を作成できるオンラインツール。

ツール・ジェネレータ🛠️

3週間前
究極のテキストから動画へ、バイラル動画ソリューション!スクリプトを数秒でビデオに。aiビデオジェネレーター、ストーリー、ニュース、クイズなどからお選びください。

ツール・ジェネレータ🛠️

3週間前
PDF作成や画像編集、AIライティングなど200を超える無料便利ツールをまとめたライブラリ。

ツール・ジェネレータ🛠️

3週間前
shadcn/uiライブラリ上に構築されたコンポーネントとブロックのコレクションで、フロントエンドとSupabaseバックエンドを1つのコマンドで接続します。

UIライブラリ

shadcn/ui

3週間前

ui-component

JavaScript

3週間前
映画が撮影された場所をユーザーが投稿、Googleマップ上に表示してくれます。スマホアプリもあり。

インスピレーション💡

3週間前
パタパタと回転しながら出発時刻や到着地を表示するあれです。JavaScriptをつかった詳しい使い方、デモページと一緒に公開中。

チュートリアル📘

JavaScript

3週間前
マウススクロールに合わせてUIコンポーネントのボーダーラインがきらりと光るCSSアニメーション。

スニペット✂️

HTML/CSS

3週間前
JavaScriptを利用せずCSSのみで作成できる画像カルーセルを手軽に実装できるジェネレーター。

ツール・ジェネレータ🛠️

HTML/CSS

3週間前
マウスホバーするとまるで生き物が呼吸するように動き出すアニメーションデモ。Generateでシェイプの変更や編集も可能です。

インスピレーション💡

WebGL

3週間前
スクロールに合わせて画像が七色に光るホログラフィックエフェクトをCSSのみで作成したスニペット。実装方法と一緒にどうぞ。

アニメーション🎞️

HTML/CSS

3週間前
ぼやけた画像プレースホルダ(LQIP)を生成するCSSテクニック。必要なカスタムプロパティは1つだけ!

チュートリアル📘

JavaScript

3週間前
ユーリ・アルティウクがベジェ曲線とシェーダーに潜入し、TSLを使ってThree.jsのすべての情報が吸い込まれるような、渦アニメーションを再現します。

チュートリアル📘

WebGL

4週間前
アレックス・ムーリンヌフがreact-three/fiberでマリオワールドを再現。フル3Dコントローラー。ソースはこちら。

インスピレーション💡

React

1か月前
CSS スクロール駆動型アニメーションなどの進歩のおかげで、HTML と CSS だけでこの効果を Web 上で再現できるようになりました。

ui-component

React

🔍 実はこれらのツール、あとから全部探せます

ここまで紹介してきたツールやテクニック、「あとで使ってみよう」と思っても、どこで見たか忘れてしまうことってありませんか?

そんなときのために、Web制作に役立つ最新の情報をストックした新ライブラリ「🦄 Collective(コレクティブ)」をローンチしました!

🦄 Collectiveってなに?

「気になる」をあとから探せる、Web制作のネタ帳

Collectiveは、日々紹介している便利ツールや制作ネタを、あとから探しやすくまとめた“ネタ帳”のような存在です。

  • 気になったツールや記事を時系列で一覧表示
  • カテゴリやタグで絞り込み検索OK
  • 「あのツール、どこだっけ?」を防げる、あとから使えるアーカイブ

これまでにも、

🎨 Best Fonts – 目的・スタイルで探せる、おしゃれフォント図鑑
🧰 Toolbox – 探して使える、無料デザイン素材の“道具箱” 

といったライブラリを展開してきましたが、Collectiveは「日々のアップデート」をまとめてストックする場所として使ってもらえたら嬉しいです。

👉 Collectiveライブラリを見る

🧭 まとめ:気になったら、“あとで”じゃなく“いま”試してみよう

気になるツールを見つけても、気づけばタイムラインの彼方に…。そんな経験、きっと誰にでもありますよね。

今回紹介したツールやネタは、すべてCollectiveにまとめてアーカイブしてあります。

あとから探しやすいように、カテゴリやタグで絞り込みもできるので、思い出したときにすぐ見つけられます。

ぜひ、“あとで助かる道具箱”として活用してみてくださいね。

👉 Collectiveライブラリを見る

Adobe Stock

アドビだからストック素材サービスも ここまでクリエイティブ。

Adobe Stockは、アドビがクリエイターのためにつくったストックサービスです。写真やイラストなど高品質な素材が約3億点。無料素材も100万点。
検索、プレビュー、ライセンスの取得をPhotoshopから直接できるので効率の良さが抜群。
たくさんのAdobe Creative Cloudユーザーに選ばれているのには理由があります。

最初のひと月は素材が10点まで無料なので、気軽に始めてみませんか。

Adobe Stockをもっと詳しく

Adobe Stockを無料で始める