「いつもやってるこの作業、実はちょっと面倒」
「アイデアを形にできるツールや素材が欲しい」
「クリエイティブの生産性を上げたい」
そんな人に朗報です。
このまとめでは、ここ最近公開された便利なツールや素材の中から、「本当に使えるもの」だけ55個を厳選。
カテゴリ別に整理しているので、自分に合った新しいツールを見つけ、作業をもっと快適にしてみましょう。
Web制作便利ツール
On-Scroll Column & Row Animations
スクロールすると、グリッド状に並べられた画像アイテムをアニメーションさせながら表示し、一瞬で目を奪う素敵エフェクト。デモページ
Connected Grid Layout Animation
グリッド同士の角がつながったようなスクロールアニメーションが展開し、不規則な見た目を表現できるレイアウトアイデア。デモページ
On-Scroll Perspective Grid Animations
こちらもスクロールベースのアニメーションで、ページをスクロールすると、グリッド状に並んだ画像が面白い動きの流れに沿って変形します。デモページ
Scroll-Based Layout Animations
GSAPのScrollTriggerとFlipを使用し、さまざまなスクロールベースのレイアウト切り替えアニメーションを実現します。
GSAPのスクロールトリガーとフリップを、SVGフィルターと組み合わせたスクロールエフェクト。
画像にSVGフィルターを適用し、スクロールに合わせて表示します。
On-Scroll Pixelated Image Loading Effect
マウススクロールで画像を表示するときに、ピクセルローディングエフェクトを追加するエフェクト。
イージング関数をつかえば、より実生活での動きに近いアニメーションを表現できます。
このページは、各イージングのサンプルデモや使い方を詳しく解説したガイドとして活用できます。
設定パネルのお手軽操作で、美しいbox-shadowを作成できるオンラインCSSツール。
タイポグラフィ、アイコノグラフィ、スペーシング、デザインシステム内のコンポーネントのプロポーションを瞬時に整えるツール。
TailwindCSSを使用して、お好みの色の補色を簡単に見つけることができるオンラインツールです。
色が決まっていないときは、スペースキーを押すとランダムなカラーパレットを生成できます。Fimgaプラグインあり。
背景色と文字色のコントラスト比を、CSSの新しいカラースペース「OKLCH」で確認できるツール。
Foodmart – Free Bootstrap 5 eCommerce HTML Template
生鮮食品などを販売するオンラインマーケットのHTMLテンプレート素材で、人気フレームワーク Bootstrapで作成されているので、カスタマイズにも柔軟に対応できます。デモページ
同等のJavaScriptベースのツールよりも100倍以上高速だそうで、シングルスレッドで1秒間に270万行以上のコードを最小化できます。
色を変更したり、文字やロゴを追加するなど、QRコードを自由にカスタマイズできるオンラインツール。
文字プロンプトを入力するだけで、ほんの数秒でウェブサイトをAIが自動で生成してくれる、画期的な未来ツール。
CSS Selectors: A Visual Guide & Reference | fffuel
よく使われるCSSセレクタのビジュアルガイド。
重要なセレクタが詳しく説明、視覚化されており、「このCSSセレクタ、何だっけ」と忘れがちなものまで網羅しているので、チートシートとして活用できます。
アニメーションをつかったウェブサイトだけを集めたギャラリーには、現在570サイトを収集中。
インスピレーションやアイデアが欲しいときに。
UIデザインの原点である「視覚的な階層」と「構成」をベースにした、BentoUIを採用したウェブサイトをまとめたギャラリー。
デザイン制作便利ツール
無料ダウンロードできる良質フォントをまとめた記事。「新しいフォントが欲しい」という人におすすめです。
美しく輝く、鮮やかで目を引くグラフィックスタイル。ここでは、デジタルで利用できるテクスチャ素材を集めています。
キーワードを入力するだけで、写真や動画、GIF、AI画像、イラスト、ベクターファイルを、複数のフリーストックサイトから検索できます。
290+ Branding Color Palette Examples (Hand-Curated)
ロゴデザインなど、ブランディングに向いている配色290パターン以上を、現役デザイナーが一つずつ手動で集めたカラーライブラリ。
人物が写った画像をアップロードするだけで、背景だけをぼかしたり、差し替えたりできる新しいオンラインツール。
Photoshopで地球上のほぼすべての場所の3Dマップを作成できる独自プラグイン。
検索から作成、マップのレンダリングまですべてフォトショップの中で完結できるすご腕ツール。
呪文プロンプトをつかって、プロのようなデザインを数秒で完成させることができる新デザインツール。
Holographic & Iridescent Background/Texture Maker | fffuel
七色に輝く美しいホログラムテクスチャを作成、カスタマイズできるオンラインツール。
作成したテクスチャは、JPGとWebP、PNGでダウンロードできます。
Transhumans: Open Source Punk Sci-Fi Art Collection
見た目は人間だけど超能力をもつ、SF映画の主人公のような存在、「トランスヒューマン」を題材にした手描きイラスト素材集。
20種類の面白いポーズをしたキャラクターイラスト集は、製品やサービスの特徴を紹介したいときなど、特に便利。
髪型や目、鼻など顔をパーツごとに分け、選ぶだけで人物アイコンをサクッと作成できる国産ジェネレーター。
10色のカラープリセット完備で、作成したアイコンはもちろんダウンロード可能。
Delete BG by Blend: Free Image Background Removal
写真をアップロードすると背景を自動で切り抜きできるオンラインツール。
さらにプロプランでは、背景のカスタマイズからデザイン編集まで可能に。
100以上の真っ赤の口紅のキスマークを集めたテクスチャ素材集。
あなたのラブレターをよりリアルに、バレンタインデーのポスターをよりロマンチックにしてみましょう。
PNGなので色のカスタマイズがしやすいのもポイント。
100 Free Shadow Overlays / Textures [PNG Transparent]
写真に重ねるだけで、超リアルな「影」を追加できるオーバーレイテクスチャ100枚セット。
ヤシの木などの葉っぱや窓のサッシやフレームなどの影が、背景透明のPNGファイルで収録されています。
アニメーション化されたキャラクターや動物、敵などを使用し、独自のキューブの世界を作成できるツールキット。
FBX、OBJ、glTF、Blend 形式で、個人および商用プロジェクトで無料で使用できます。
Free Squiggle 3d illustrations
立体的にねじれた3Dイラストレーション素材、全部で20種類が収録されています。
7つの鮮やかなカラーリングで、FigmaとPNGファイルで、3200x3200pxの高解像度による収録。
文字プロンプト入力をベースとした、新しいAIクリエイティブツール。リアルタイムでのコラボレーションを、すべてブラウザ内で操作できます。
手描きでささっと書いた文字や図形などを、手軽にSVGやJSONファイルでエクスポートできるオンラインツール。
Grunge Duotone Poster Photoshop Effect
フォトショップで写真を配置するだけで、鮮やかな色彩とグランジ感を組み合わせた、デュオトーンエフェクトを作成できる素材集。
プロトタイプ・アイコンツール
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アイコンライブラリで、アイコンサイズやストロークもカスタマイズ可能。
8つの異なるブラウザを忠実に再現した、Figma用モックアップテンプレート集。
ライトモードとダークモードの2バージョン、そしてモバイル版テンプレートが用意されています。
デスクトップとモバイル両方のワイヤーフレーム用モックアップを簡単に作成できるキット。
豊富なコンポーネント数に、リアルタイムで結果を確認できるなど、ワイヤーフレーム作成を高速化。
AI image generator by Freepik – Figma
文字プロンプトをはじめてつかう人にも分かりやすい、AI画像生成プラグインはFigma専用。
毎日、ひとつのプロンプトに対応して4枚ずつ、16バリエーションの合計64枚まで無料で利用することができ、生成される画像サイズは1024pxほど。
面白ツール
動画クリエイター向けに何千もの無料の映画製作リソースを提供しています。
ドラマチックな描写に必要なVFXやSFX、4K動画、グラフィックなどあらゆるアイテムが揃います。
HeyPhoto – AI Photo Editor Online
AIを用いて自撮りやグループ写真を調整できるオンラインツール。
視線の方向を変えたり、花の形や肌の色を変更したり、年齢や髪型なども瞬時にカスタマイズできます。
PDFファイルの分割やページの削除、回転、最適化など、PDFのある程度の修正をオンラインでできる便利ツール。
6800種類を超えるLEGOブロックの組み立て図を集めたアーカイブコレクションには、現在は廃盤となってしまったレアな製品も含まれれています。
Top AI Tools Collection – OpenCatalog
話題になっている人気のAIツールをまとめた便利系ライブラリ。カテゴリ分けされ、整理されているので、目的のAIツールを簡単に見つけることができます。
月が昇る時間と沈む時間、今の位置、月の見かけの大きさなどをインタラクティブに体験できるオンラインツール。
およそ3か月ぶりのまとめでしたが、新しいツールがどんどん登場しています。
前回のまとめは以下からどうぞ。