斜め上を行く最新Webオンラインツール、素材50選

「ほったらかしで、デザインの作成が完了」

「配色に悩んだときの救世主」

「時間のかかっていたデザイン作業が一瞬で終了」

そんな噓のようなツールが、AIの進化によって日々、世界中で公開されています。

このまとめでは「これはやられた!」と思わずうなってしまう、最新オンラインツールや素材55個をご紹介。

カテゴリ別に整理しています、自分だけの神ツールを見つけてみませんか。

Web制作便利ツール

Progressively Enhanced WebGL Lens Refraction

レンズの屈折をリアルに表現したCSSとReact Three Fiberを活用したレスポンシブなWebGLレイアウトを作成する方法を学びます。デモページ

Grid Item Hover Effect

半透明グラス風のホバーエフェクト集には、WebGLで作成された3つの異なるホバー効果があります。デモページ

Some Ideas for Fullscreen Image Slideshow Animations

フルスクリーン画像のスライドショーのトランジション集には、

全部で16種類のデモが公開中。デモページ

Ideas for Image Motion Trail Animations

ユーザーのマウスの動きに沿って、複数の画像がアニメーション付きで表示されるアイデアサンプル集。デモページ

Screen Sizes

iPhoneやiPad、Apple WatchにApple TVといったアップル製品のスクリーンサイズをまとめたチートシートとして便利なサイト。

Epic Easing

まるで呼吸をしているように心地よいイージングアニメーションを手軽に作成でき、CSSコードをそのままコピペできる便利ツール。

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

Fluid Responsive Design | Utopia

ブレークポイントなしでレスポンシブ対応のグリッドレイアウトを手軽に作成できるCSSオンラインツール。

Clamp calculator | Utopia

ブラウザサイズの変化に合わせて、文字サイズも流動的に変化するCSS Clamp計算ツール。お好みの文字サイズを決めるだけで、面倒な作業もありません。

Astro + View Transitions Photo Gallery

WebフレームワークAstroと、連続性のある画面遷移アニメーションを実現できるWeb新技術 View Transitions APIを活用した、写真ギャラリー用テンプレート。ソースコードも公開中。

Homepage | GSAP

プロフェッショナル向けに構築された人気JavaScriptアニメーションライブラリがリブランディングし、より親しみやすいデザインに。より詳しい使い方ドキュメンテーションも公開中。

MetalliCSS

光沢感たっぷりでメタリックなCSSボタンをコピペできるサイト。ゴールドやパープル、シルバーといった各メタル色が揃います。

The Progress CSS Loaders Collection

CSSのみで作成できるローディングアニメーション500種類を集めたコレクションで、カテゴリごとに細かく分けられています。

Godly — Astronomically good web design inspiration

デザイン性の高いWebサイトだけを集めたギャラリーサイトで、動きやインタラクションをGIFで確認できるのもポイント。

Footer — The only footer gallery on earth.

さまざまなサイトの素敵な「フッター」デザインのみを集めたWebギャラリー。どんなコンテンツを記載するか迷ったときの参考に。

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

Free JAMStack themes, templates & starters | StaticMania

カスタマイズしやすく、デザイン性の高いHTMLテンプレートをダウンロードできるサイト。すべてではありませんが、多くの素材を無料ダウンロードできます。

Flexoki — Steph Ango

アナログ印刷インクと紙の温かみのある色合いからインスピレーションを得た、ミニマルで美しい配色コレクションは、クリックで色をコピーできます。

DEVI

業種を選び、ブランド名を決め、何を表現したいか入力するだけで、AIがWebサイトを作成してくれる新サービス。無料で試すことができますよ。

Semblance: A Frontend Design Quiz — Kapwing

超激ムズのフロントエンドデザインクイズ。以下の画像、HEXコード「#0000ff」はA、Bどっち?

デザイン制作便利ツール

Transparent Zip Bag Textures

フォトショップなどで重ねるだけで、まるでビニールのパケ袋に入っているように見える、高品質なPNGテクスチャ素材。

Sh*tty Doodles | 120 Free Sketches PNG

手描きの落書きスケッチ120種類をPNGファイルで集めた無料デザイン素材集。皮肉っぽさやユーモアのあるイラストが魅力的。

A Monograph of the Trochilidæ, or Family of Humming-Birds

鳥類図鑑の最高傑作のひとつとも言われる、およそ200年前の古いイラストを忠実に複製・復元したハチドリの無料イラスト集。

【商用可】レトロかわいい「ハチドリ」のイラスト素材400枚無料ダウンロード

Mondrian Generator

ミッドセンチュリー家具やインテリアなどでも見かける、オランダの抽象画家ピエト・モンドリアンのパターンを作成できるオンラインツール。

Perception

入力したキーワードにマッチする配色をAIが見つけたり、ワードと色の関係性を瞬時に測定してくれる新しい配色AIツール。

Rayst Gradients

色鮮やかで美しい、AIによって生成された64枚のグラデーションテクスチャ素材集。

Shader Gradient

ザラっとした質感のアニメーション付きグラデーションをオンライン上で作成、コードをそのままコピペできる便利ツール。

Free Animated Background Videos — Tella

アニメーション付きの美しいグラデーションを4K動画ファイルとして無料ダウンロードできるコレクション。

A Collection of Free Grunge, Vintage & Concrete Textures

ザラっとしたグランジ、ヴィンテージ、コンクリート系テクスチャを集めたコレクション。オーバーレイ効果を演出したいときにぴったり。

感動フォトショップ 写真をオーバーレイ効果で魅力的にする方法

J-Fontサムネメーカー

お好みの画像をアップロードすれば、ブラウザ上で筆文字入りの投下画像を生成できる国産ツール。

LogoGratuit.fr | Logos Professionnels Gratuits et Libres de Droits

無料で利用できるSVGロゴを集めたミニライブラリ。ITやスタートアップ企業を想定したロゴがずらり。

■参照記事 : Web制作あるある「画像ない問題」を解決!ダミー画像の生成サービス15選

Spectrum.Art

ウェブサイト向けのトレンドに合わせてアップデートされた配色カラーパレットを探すことができるカラーツール。

■参照記事 : 配色アイデアに迷わない!無料ですごい配色カラーパレットツール111個まとめ【2023年版】

Generate 3D Textures for Free | Polycam

文字を入力するだけで立体的な3Dテクスチャを生成してくれるAIツール。一度に4つのバリエーションが生成され、何度でもやり直しできるのもうれしい。

Alpaca – AI Tools Built For Artists

「手描きスケッチからAI画像生成したい。」という夢を今すぐ叶えてくれるPhotoshop AIプラグイン。使ってみた感想・レビューは以下よりどうぞ。

■参照記事 : Photoshop魔改造!手描きスケッチ​から​AI画像生成できるプラグインAlpaca

Masterpiece X

わずか数単語のキーワードを入力すれば、3Dなだけでなく、動きのあるデザインを作成できるジェネレーティブ3Dアプリ。

unstock.ai

欲しい画像を文字で入力するだけで、AIが生成してくれる画像生成ツール。アイコンに特化して生成できるのもポイント。

Zoommy – more than 200 000 free photos in one place

著作権フリーでCC0ライセンスのストック画像を50以上のサイトから横断検索できるツール。有料ですが4.99ドルという、お求めやすい価格で。

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

Ecommerce Icon Set (140+ Icons)

ショッピングサイト専用で開発された140種類のアイコン素材集。SVGやPNG、Figmaと収録ファイル形式も豊富。

Mockup – Figma

一瞬で高品質なモックアップをFigma上で作成できるプラグイン。作成したモックアップは商用利用も可能です。

Mockup Generator & Animator 3D | Rotato

スマホデバイス画面上に独自に作成したアプリやWebデザインを使用して、見事な3Dモックアップを作成でき、さらにアニメーションも追加可能。Mac専用アプリ。

【無料】ちょっとずるい、Photoshop最新モックアップ素材80選

デザインの見せ方で損をしている人を救うため、過去2年間のあいだに公開された無料のモックアップ素材を徹底的に調べなおしました。

面白ツール

冷凍餃子フライパンチャレンジ|味の素冷凍食品

「餃子を焼くと焦げるフライパン」だけ集めたWebサイトには、全国から提供された3520枚ものフライパンの3Dデータを閲覧できます。味の素が公開。

CapCut

素晴らしい動画をだれでも作成できるよう、必要なものがすべて揃った無料のオールインワンビデオ編集アプリ。

AI Emojis

プロンプトを入力すると絵文字を作成できる新しいAIツール。

Picyard

普通の画像ジェネレーターアプリに比べ、チャート作成やタイムライン、フェイクTweet画像、マインドアップなど変わった画像を無料で作成できます。

Radio Garden

表示される世界地図からお好きな場所を選択すれば、その土地のラジオをリアルタイムで視聴できる面白ツール。

TimeGuessr – Round One

映し出された写真を元に、世界地図から場所と年代を特定していく、地理と歴史のオンラインクイズ。

Today Tagz: What’s Trending Today

X(旧Twitter)やTikTokoにおける世界のトレンドワードをリスト形式で確認できるWebアプリ。日本語にも対応しており、各トレンドの上位50位まで表示可能。

SunShot

スクリーンキャストを撮影する際に、マウス部分に自動フォーカスしてくれるオープンソースの無料アプリ。動きもスムーズでなめらか。

Karektar

表示されているマス目を塗りつぶし、自分だけのピクセルドットフォントを作成できるツール。

The Project Gutenberg Open Audiobook Collection

マイクロソフトとMITが共同で開発した、大規模なオープンアクセスのオーディオブック集。数千を超えるコレクションに無料でアクセスできます。

Workverse – Productive Virtual Meetings and Workspace.

会議はできるだけシンプルにし、生産性を向上させることをコンセプトにしたバーチャルワークスペース。用途に応じてプライベート専用スペースを作成できます。

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

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

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