知らないと損する最新Web&デザインツール、素材55選

「いつもやってるこの作業、実はちょっと面倒」

「アイデアを形にできるツールや素材が欲しい」

「クリエイティブの生産性を上げたい」

そんな人に朗報です。

このまとめでは、ここ最近公開された便利なツールや素材の中から、「本当に使えるもの」だけ55個を厳選。

カテゴリ別に整理しているので、自分に合った新しいツールを見つけ、作業をもっと快適にしてみましょう。

Web制作便利ツール

On-Scroll Column & Row Animations

スクロールすると、グリッド状に並べられた画像アイテムをアニメーションさせながら表示し、一瞬で目を奪う素敵エフェクト。デモページ

Connected Grid Layout Animation

グリッド同士の角がつながったようなスクロールアニメーションが展開し、不規則な見た目を表現できるレイアウトアイデア。デモページ

On-Scroll Perspective Grid Animations

こちらもスクロールベースのアニメーションで、ページをスクロールすると、グリッド状に並んだ画像が面白い動きの流れに沿って変形します。デモページ

Scroll-Based Layout Animations

GSAPのScrollTriggerとFlipを使用し、さまざまなスクロールベースのレイアウト切り替えアニメーションを実現します。

Inspiration for Text Block Transitions

文字がランダムで一文字ずつアニメーション付きで表示されるトランジションエフェクト。

On-Scroll SVG Filter Effect

GSAPのスクロールトリガーとフリップを、SVGフィルターと組み合わせたスクロールエフェクト。

画像にSVGフィルターを適用し、スクロールに合わせて表示します。

On-Scroll Pixelated Image Loading Effect

マウススクロールで画像を表示するときに、ピクセルローディングエフェクトを追加するエフェクト。

Easing Functions Cheat Sheet

イージング関数をつかえば、より実生活での動きに近いアニメーションを表現できます。

このページは、各イージングのサンプルデモや使い方を詳しく解説したガイドとして活用できます。

👉 ディズニー直伝!Webデザインでアニメーションの基本原理を応用する方法

CSS Box Shadows Generator

設定パネルのお手軽操作で、美しいbox-shadowを作成できるオンラインCSSツール。

Proportio.app

タイポグラフィ、アイコノグラフィ、スペーシング、デザインシステム内のコンポーネントのプロポーションを瞬時に整えるツール。

UIColors

TailwindCSSを使用して、お好みの色の補色を簡単に見つけることができるオンラインツールです。

色が決まっていないときは、スペースキーを押すとランダムなカラーパレットを生成できます。Fimgaプラグインあり。

OddContrast

背景色と文字色のコントラスト比を、CSSの新しいカラースペース「OKLCH」で確認できるツール。

Foodmart – Free Bootstrap 5 eCommerce HTML Template

生鮮食品などを販売するオンラインマーケットのHTMLテンプレート素材で、人気フレームワーク Bootstrapで作成されているので、カスタマイズにも柔軟に対応できます。デモページ

👉 商用OKの無料HTMLテンプレート120個以上をダウンロードできる Templates Jungle

Theme Toggles

ライトモードとダークモードの切り替え用にデザインされた、素晴らしく使いやすいアニメーショントグルのコレクション。

コピペですぐに利用できるのも、とても便利。

Lightning CSS

同等のJavaScriptベースのツールよりも100倍以上高速だそうで、シングルスレッドで1秒間に270万行以上のコードを最小化できます。

QR Designer

色を変更したり、文字やロゴを追加するなど、QRコードを自由にカスタマイズできるオンラインツール。

Framer AI

文字プロンプトを入力するだけで、ほんの数秒でウェブサイトをAIが自動で生成してくれる、画期的な未来ツール。

CSS Selectors: A Visual Guide & Reference | fffuel

よく使われるCSSセレクタのビジュアルガイド。

重要なセレクタが詳しく説明、視覚化されており、「このCSSセレクタ、何だっけ」と忘れがちなものまで網羅しているので、チートシートとして活用できます。

landing.love

アニメーションをつかったウェブサイトだけを集めたギャラリーには、現在570サイトを収集中。

インスピレーションやアイデアが欲しいときに。

👉 本当は教えたくないWebデザイン参考ギャラリーサイト30選

BentoGrids

UIデザインの原点である「視覚的な階層」と「構成」をベースにした、BentoUIを採用したウェブサイトをまとめたギャラリー。

👉 Web新トレンドBento UIって何?はじめ方とサンプル事例まとめ

デザイン制作便利ツール

意外と知らない最新フリーフォント32選 2023年8月度

無料ダウンロードできる良質フォントをまとめた記事。「新しいフォントが欲しい」という人におすすめです。

キラキラ七色、ホログラム極上テクスチャ素材30選

美しく輝く、鮮やかで目を引くグラフィックスタイル。ここでは、デジタルで利用できるテクスチャ素材を集めています。

Cosmic Media

キーワードを入力するだけで、写真や動画、GIF、AI画像、イラスト、ベクターファイルを、複数のフリーストックサイトから検索できます。

👉 フリー写真素材のおすすめサイト徹底まとめ57選【商用利用無料】

290+ Branding Color Palette Examples (Hand-Curated)

ロゴデザインなど、ブランディングに向いている配色290パターン以上を、現役デザイナーが一つずつ手動で集めたカラーライブラリ。

Ai Passport Photos

人物が写った画像をアップロードするだけで、背景だけをぼかしたり、差し替えたりできる新しいオンラインツール。

3D Map Generator – 3D Mapper

Photoshopで地球上のほぼすべての場所の3Dマップを作成できる独自プラグイン。

検索から作成、マップのレンダリングまですべてフォトショップの中で完結できるすご腕ツール。

Playground

呪文プロンプトをつかって、プロのようなデザインを数秒で完成させることができる新デザインツール。

Holographic & Iridescent Background/Texture Maker | fffuel

七色に輝く美しいホログラムテクスチャを作成、カスタマイズできるオンラインツール。

作成したテクスチャは、JPGとWebP、PNGでダウンロードできます。

👉 キラキラ七色、ホログラム極上テクスチャ素材30選

SVG Hub

ウェブプロジェクトなどで、すぐに貼り付けて使うことができる、70を超えるSVGあしらい素材が揃います。

自由に配色をカスタマイズでき、デザインに合わせてダウンロード可能。

SVGmix

SVGアイコンやロゴデザインをまとめて検索し、ダウンロードもできるオンラインツール。

190を超えるアイコンプロジェクトが用意されており、SVGアイコンの総数は30万越えの充実度。

Transhumans: Open Source Punk Sci-Fi Art Collection

見た目は人間だけど超能力をもつ、SF映画の主人公のような存在、「トランスヒューマン」を題材にした手描きイラスト素材集。

👉 全て無料、本当は教えたくないフリーイラスト素材サイト95個まとめ【商用OK】

FREE Poser illustrations

20種類の面白いポーズをしたキャラクターイラスト集は、製品やサービスの特徴を紹介したいときなど、特に便利。

顔アイコンジェネレーターZ

髪型や目、鼻など顔をパーツごとに分け、選ぶだけで人物アイコンをサクッと作成できる国産ジェネレーター。

10色のカラープリセット完備で、作成したアイコンはもちろんダウンロード可能。

Delete BG by Blend: Free Image Background Removal

写真をアップロードすると背景を自動で切り抜きできるオンラインツール。

さらにプロプランでは、背景のカスタマイズからデザイン編集まで可能に。

100+ Lip Print Textures

100以上の真っ赤の口紅のキスマークを集めたテクスチャ素材集。

あなたのラブレターをよりリアルに、バレンタインデーのポスターをよりロマンチックにしてみましょう。

PNGなので色のカスタマイズがしやすいのもポイント。

100 Free Shadow Overlays / Textures [PNG Transparent]

写真に重ねるだけで、超リアルな「影」を追加できるオーバーレイテクスチャ100枚セット。

ヤシの木などの葉っぱや窓のサッシやフレームなどの影が、背景透明のPNGファイルで収録されています。

Cube World Kit

アニメーション化されたキャラクターや動物、敵などを使用し、独自のキューブの世界を作成できるツールキット。

FBX、OBJ、glTF、Blend 形式で、個人および商用プロジェクトで無料で使用できます。

Free Squiggle 3d illustrations

立体的にねじれた3Dイラストレーション素材、全部で20種類が収録されています。

7つの鮮やかなカラーリングで、FigmaとPNGファイルで、3200x3200pxの高解像度による収録。

Modyfi – Create. Together.

文字プロンプト入力をベースとした、新しいAIクリエイティブツール。リアルタイムでのコラボレーションを、すべてブラウザ内で操作できます。

Free Faces Gallery

現役デザイナーが見た目の良い英語フォントのみをキュレーションしたミニライブラリ。

どれも商用利用できる、オープンソースのみが厳選されています。

tldraw

手描きでささっと書いた文字や図形などを、手軽にSVGやJSONファイルでエクスポートできるオンラインツール。

Grunge Duotone Poster Photoshop Effect

フォトショップで写真を配置するだけで、鮮やかな色彩とグランジ感を組み合わせた、デュオトーンエフェクトを作成できる素材集。

プロトタイプ・アイコンツール

Figma to Video

Figmaで作成したデザインをアニメーション化して、MP4動画に変換し、ビデオ広告やプレゼンテーションなどを作成できるプラグイン。

4,000 Free + Open Source Icons – Figma

ベクター形式の無料でオープンソースのアイコン、なんと4,000個が収録された巨大コレクション。

特にWeb用のユーザーインターフェースを作成するのに理想的な、シンプルアイコンがカテゴリ別に揃います。

Iconbuddy — 180K+ open source icons

150を超えるアイコンセット、計10万を超える素材からキーワード検索できる巨大アイコンライブラリ。

すべてオープンソースのため商用利用でき、その場で色や背景の変更もでき、そのままダウンロードまでどうぞ。

Free and open-source SVG Icons – Flowbite

ReactとFigmaをサポートする、およそ500個のシンプルで使い勝手の良いSVGアイコンライブラリで、アイコンサイズやストロークもカスタマイズ可能。

Browser Mockups Figma Kit

8つの異なるブラウザを忠実に再現した、Figma用モックアップテンプレート集。

ライトモードとダークモードの2バージョン、そしてモバイル版テンプレートが用意されています。

Wireframe Designer – Figma

デスクトップとモバイル両方のワイヤーフレーム用モックアップを簡単に作成できるキット。

豊富なコンポーネント数に、リアルタイムで結果を確認できるなど、ワイヤーフレーム作成を高速化。

AI image generator by Freepik – Figma

文字プロンプトをはじめてつかう人にも分かりやすい、AI画像生成プラグインはFigma専用。

毎日、ひとつのプロンプトに対応して4枚ずつ、16バリエーションの合計64枚まで無料で利用することができ、生成される画像サイズは1024pxほど。

面白ツール

Magic Powers Video Effects

動画クリエイター向けに何千もの無料の映画製作リソースを提供しています。

ドラマチックな描写に必要なVFXやSFX、4K動画、グラフィックなどあらゆるアイテムが揃います。

HeyPhoto – AI Photo Editor Online

AIを用いて自撮りやグループ写真を調整できるオンラインツール。

視線の方向を変えたり、花の形や肌の色を変更したり、年齢や髪型なども瞬時にカスタマイズできます。

Kern Type

文字間をバランスよく調整するオンラインゲームは、カーニング技術を磨くのにぴったり。

👉 楽しく学ぼう!デザイナーにおすすめのデザイン独学ゲーム22個まとめ

PDF Tool – HodlSoftware

PDFファイルの分割やページの削除、回転、最適化など、PDFのある程度の修正をオンラインでできる便利ツール。

LEGO Building Instructions

6800種類を超えるLEGOブロックの組み立て図を集めたアーカイブコレクションには、現在は廃盤となってしまったレアな製品も含まれれています。

Top AI Tools Collection – OpenCatalog

話題になっている人気のAIツールをまとめた便利系ライブラリ。カテゴリ分けされ、整理されているので、目的のAIツールを簡単に見つけることができます。

WebGL Moonclock

月が昇る時間と沈む時間、今の位置、月の見かけの大きさなどをインタラクティブに体験できるオンラインツール。

およそ3か月ぶりのまとめでしたが、新しいツールがどんどん登場しています。

前回のまとめは以下からどうぞ。

👉 サクサク爆速で作業をこなす最新ツール、素材39個まとめ