「忙しいデザインや開発の現場で、新しいツールを試す時間がなくて…」そんな悩みを抱える方も多いのではないでしょうか？
でも、ツールの選択ひとつで、プロジェクトの効率やクオリティが大きく変わる というのも事実。
そこで、2024年に登場した注目のWebツールを一挙にまとめました。
これを読んで、2025年のクリエイティブなスタートに向けた最高の準備をしてみましょう。
コンテンツ目次
Web便利ツール
Easing Wizard – CSS Easing Editor
CSSやJavaScriptアニメーションのイージング効果を視覚的に作成・調整できる便利なツール。リアルタイムプレビューやコード生成機能を備え、魅力的なアニメーションの作成をサポートしてくれます。
The good colors – Full spectrum – OKLCH
注目の色「OKLCH色空間」によるカラーパレット作成ができるツール。一般的なLCHとOKLCH色の比較の通り、より「いい感じの色合い」で、明度と彩度のトーンがあった美しい配色を生成してくれます。
プロンプト入力でCSSアニメーションが作成できる時代がやってきた。生成されたコードは編集自在で、タイミングや配置を微調整したら完成です。現在英語プロンプトのみ対応。
Web制作の面倒におさらば、便利すぎるCSS時短ツールまとめ【2024年版】
Webサイト制作において面倒で時間のかかる作業を効率化したい方へ。
この記事は、CSSコードを手軽に生成できる便利ツールをまとめた最新版リストで、Web制作を快適、楽にしてくれるツール68個が揃っています。
Tailwind CSS関連ツール
Tailwind CSS Gradients – Collection of gradients for Tailwind
Tailwindの配色カラーをつかったグラデーションコレクション。ワンクリックでコピーでき、いつでもプロジェクトに追加できます。
Tailwind CSS Gradient Generator
Tailwindで使われている配色を組み合わせ、テキストや背景の魅力的なグラデーションを生成、ワンクリックでコピペできるライブラリも完備。
統一感のあるWebサイトで利用できるTailwind向け配色カラーパレットを瞬時に生成してくれるCSS時短ツール。Spaceバーでランダムに配色が切り替わります。
コピペで時短、Tailwind CSSおすすめUIコンポーネント、UIキット集、便利ツール【まとめ】
Webサイト制作を効率化できるTailwind CSSのUIコンポーネント集、便利ツールをまとめて紹介した記事。「コンポーネントがありすぎて、どれを使えばよいか分からない」となっていたので、一度まとめてみることに。すると、利用したくなった素材がこんなにも。
Webテクニック、作り方ガイド
Exploring Playful Context-Aware Animations for Fixed Elements
固定要素にスクロールやマウス操作に反応するアニメーションを、ナビメニューに追加する方法を紹介したチュートリアル。GSAPやIntersection Observer APIを使って、動きのある楽しいデザインを簡単に実現できます。
How to Create a WebGL Rotating Image Gallery using OGL and GLSL Shaders
WebGLを使って回転する画像ギャラリーを作成するチュートリアル。OGLライブラリとGLSLシェーダーを活用し、インタラクティブでビジュアル的に印象的なギャラリーを構築する方法を詳しく解説しています。
Creating the Morphing Effect of the Luma Dream Machine Website
Luma Dream Machine のウェブサイトで使用されているモーフィングエフェクトの再現方法を解説したチュートリアル記事。SVGとGSAP（GreenSock）を活用した滑らかな形状変化のアニメーションを実装する方法を詳しく学べます。
Image Stack Entrance Animations
画像を積み重ねて面白いイントロ・アニメーションを作成する方法を紹介します。このアイデアは、ユニークな動きの組み合わせを作成すること。 デモページ
On-Scroll Expanding Image Animation within Typography
スクロールに合わせてタイポグラフィー内の画像が拡大するアニメーションのWebコンセプト。デモページ
3Dアニメーション、エフェクト
Origami: 12 Free Animated 3D Objects
React Three FiberとGSAPで作成された、12種類の無料３Dアニメーションセット。あなたのウェブサイトにちょっとしたデザインセンスを加えたいときにいかがでしょう。
VFX-JS – Visual Effects Framework for Web #VFXJS
ウェブサイトにWebGLによるグリッチエフェクトを追加できるJavaScriptライブラリ。<img>や<video>タグにも対応しています。
UI コンポーネント
Reactプロジェクトにコピー＆ペーストできるように作られたコンポーネントのオープンソースライブラリ。ShadcnとTailwind CSSをベースに構築されており、アニメーションを効果的につかったポップな見た目が特徴。
レトロなデザインスタイルを取り入れた Web UI コンポーネントやテンプレートを提供するサイト。80年代や90年代のアーケードゲームを彷彿とさせる、懐かしいビジュアルのUIコンポーネントを多数収録。
コードエディタ付き700以上の無料UIコンポーネント集。数分でサイトを構築したり、コピー＆ペーストでプロフェッショナルなUIコンポーネントを作成できます！
迅速な開発、簡単なメンテナンス、アクセシビリティのために最適化されたオープンソースのUIコンポーネントライブラリの最新バージョン。インポートするだけで、設定は不要。最新のアプリを構築するために必要なものがすべて揃います。
Figmaプラグイン、UIキット
WordPress Design System | Figma
@wordpress/componentsパッケージの基本UIコンポーネントと、@wordpress/iconsパッケージにあるアイコンを反映したFigmaスタイルとコンポーネントを収録。
2Dのテキストやベクターレイヤーを、ワンクリックで3Dモデルに変換できるFigmaプラグインで、ワークフローに3Dデザインをシームレスに取り込むことができます。
ワンクリックでfigmaファイルをGIFやwebM、MP4ファイルにエクスポートできるFigmaプラグインで、アニメーションを多用したプロトタイプで活躍しそう。
ノーコードツールの進化版として注目を集めるWix StudioのFigmaプラグイン。Figmaで作成したデザインをそのままWixにインポート、サイト公開まで自動で行うことが可能に。
WordPress Design System | Figma
@wordpress/componentsパッケージの基本UIコンポーネントと、@wordpress/iconsパッケージにあるアイコンを反映したFigmaスタイルとコンポーネントを収録。
Instagram – UI Kit 2.0 | Figma
InstagramのUIデザインを完全再現したFigma用UIキット、220を超えるコンポーネントが用意されており、デザインシステムやバリアブルにも対応。ドラッグ&ドロップで手軽にデザインを作成できます。
Gradient Generator · Learn UI Design – Figma
さまざまな色空間で補間された線形、放射状、円錐形のグラデーションを生成し、より豊かで鮮やかなグラデーションを生成します。ライブ更新なので、結果を簡単に表示して調整できます。
DesignCode UI – Figma Design UI Kit & Design System
ノーコードツールFramerとの統合が可能な、Figma用UIコンポーネントとテンプレートを含むデザインシステム。無料版には50個のUIキットが用意されています。
Mapbox デフォルトスタイルまたは Mapbox Studio で作成したカスタムマップスタイルから画像を取得します。緯度、経度、ズーム、方位、ピッチなどのマッププロパティをマップ上やフィールドコントロールを使用して変更できます。
デザイン作業の無駄を削減！今すぐ使える注目の時短Figmaプラグイン20選
今のデザイン作業で、無駄な手間や時間を感じていませんか？
作業をシンプル化し、生産性を最大化するために役立つFigmaプラグインをご紹介。この記事では未紹介のプラグインが中心です。
デザインをつくるときに役立つFigmaプラグインに絞り、リスト形式でご紹介した記事。
アイコン素材
Sketch、Adobe XD、Figma、Webサイト用の国旗アイコンシリーズ。「もっとも忠実な再現」がウリだそうでSVGファイル形式のコピー、ダウンロードできます。
世界中の有名ブランドのロゴ3200個以上をSVG、PDFファイル形式で無料ダウンロードできる巨大ライブラリ。URLだけで表示できるSimple Icons CDNもあります。
UI向け、国旗、支払いアイコン合わせて7000個が揃った、完全無料のアイコンコレクションで、デザイナーやクリエイターはいざというときにあれば重宝しそう。
1997年に発売されたソフトバンク発の日本向け絵文字セットを、FigmaとSketch用アイコンとして復活させた素材。180個のピクセルアートアイコンを収録。
チートシート、グリッドビルダー
「CSS Gridって使いこなせなくて…」そんな人におススメしたいツール。ドラッグするだけで自由にレイアウトを構築できます。列と行数、ギャップサイズを決め、要素を並べていけば完成です。
Grid Builder – Learn and build Tailwind CSS grids
Tailwind CSSによるグリッドレイアウトを簡単に構築し、レスポンシブレイアウトをマスターできるオンラインツール。
HTML/CSSコードスニペット
コピぺするだけ！すぐに使える魅力的なWebテキストエフェクト40選
コピペで使えるWebテキストエフェクト集。バナーや見出しに動きを加え、あなたのウェブサイトに個性をプラスしてみませんか。
See the Pen Text Illumination by Rafa (@RAFA3L) on CodePen.
HTML/CSSでできる、押したくなる最新Webボタンエフェクト集
ウェブサイトを訪れたひとが思わず押したくなるボタンデザインをまとめてご紹介します。
See the Pen Shiny call-to-action button by Ryan Mulligan (@hexagoncircle) on CodePen.
「Webデザインの最新テクニックを知りたいけど、時間が足りない」という方へ。
この記事では、話題になった人気テクニックを中心に集めているので、年末の総チェックにいかがでしょう。
See the Pen Timed Cards Opening by Dilum Sanjaya (@dilums) on CodePen.
See the Pen Cards (gradient border) by Dan (@dtab428) on CodePen.
Webギャラリー
Rebrand — Stellar brand bento inspiration
リブランドしたデザインコンセプトやBento UIレイアウト、プロダクトページなどを、アニメーションGIFのサムネイル紹介する新感覚のWebギャラリーページ。
アニメーションやインタラクションの使い方を実際のWebサイトから集めたWebギャラリー。サムネイルにホバーするとアニメーションが開始されるので見つけやすい。
そんな状況を打開するには、たくさんの優れたデザインの実例を見ることで、次のアイデアを生み出してみましょう。
このリストは2年ぶりにまとめ直したアップグレード版となります。
その他のツールやリソース
ウェブサイトを作成する人のための50冊以上のガイド本を出版し、多くのひとに愛されたA Book Apart。それらの著者が集まり、半公式ディレクトリとして復活。すべて無料公開となっています。
MaxiBlocks Build Like a Master: Huge WordPress Library
2000以上のWordPressパターンを利用できる、コミュニティ最大級のデザインライブラリ。無料で始めることができるフリーミアムプラン。
Chromeに代わる新しいブラウザとして海外のエンジニア界隈で話題となっている新しいツール。WindowsとMac版がどちらも用意されています。
Webデザイン
【総まとめ】2024年世界で話題になったWebデザイン・ベスト60選
今年、Webデザインの世界ではAIの進化や大胆なインタラクションデザインが注目を集め、私たちに新しい可能性を示してくれました。
この記事では、そんなトレンドを象徴する2024年に話題となった年間ベストWebデザイン60選を厳選してお届けします、
2024年に紹介したWebデザインの一覧は、こちらからどうぞ。
UIアニメーション
E-commerce page flow prototype (on tablet) by ★ Giulio Cuscito ★
プロダクト製品のAboutページ。アニメーションを加えたフルスクリーン画面で展開するレイアウト、アース色を中心とした配色もアウトドア向けデザインに。
Hike Flask №003 by Matthew Hall
プロダクト製品のAboutページ。アニメーションを加えたフルスクリーン画面で展開するレイアウト、アース色を中心とした配色もアウトドア向けデザインに。
アドビだからストック素材サービスも ここまでクリエイティブ。
Adobe Stockは、アドビがクリエイターのためにつくったストックサービスです。写真やイラストなど高品質な素材が約3億点。無料素材も100万点。
検索、プレビュー、ライセンスの取得をPhotoshopから直接できるので効率の良さが抜群。
たくさんのAdobe Creative Cloudユーザーに選ばれているのには理由があります。
最初のひと月は素材が10点まで無料なので、気軽に始めてみませんか。
