Web制作のお供に!最新オンライン時短ツール32個まとめ

これから使いたい、あまり知られていない便利ツールが大集合

Web制作の効率化を図りたいというひとにオススメしたい、最新オンライン時短ツールをまとめてご紹介します。

「もっと早く知りたかった」と思ってしまう、便利なツールを中心に、クリエイターの日々のデザイン業務を軽減してくれる、目からウロコな素材やツールが揃います。

カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。


コンテンツ目次

 

Web制作の効率、生産性アップ!話題の最新オンラインツールまとめ

デザインツール

Womp 3D

立体感たっぷりな3Dデザインを、ブラウザ上で直感的に作成できる、新世代のオンラインツール。その他の3Dツールや無料素材も、一緒にどうぞ。

 

Bezel

こちらも、3Dデザインをブラウザ上で、手軽に作成できるデザインツール。チームで共同コラボしながら、デザインを進めることができるのが特長。

bezel 3d tool

 

Liquid Wave Background Cover

グラデーションの波ウェーブが印象的な、高品質なテクスチャ素材40枚セットで、そのまま使えるJPGファイルと、カスタマイズ可能なAIファイルが同時収録です。

Liquid_Wave_Modern_and_Minimal_Mesh_Backgrounds_Cover

 

Aaabstract

放射状にひろがるラインを、ぐにゃりと曲げたり、色付けしたり、自由にカスタマイズ、そのままテクスチャとしてダウンロードできるデザインツール。

aaabstract-texture

 

Brushify Art

写真をアップロードして、ほんの数秒待つだけで、本格的な水彩ペイント風に仕上げてくれるツール。

brushify-art

 

Everypixel

50にも及ぶ、高品質なフォトストックサイトから、まとめて縦断検索できる便利ツール。

EVRYPIXEL-STOCK-IMAGE-SEARCH-ENGINE

 

FarbVélo – Random Color Cycler

美しい配色のグラデーションを、ランダムで表示してくれるオンラインツール。各色の名前とHEXコードも、そのままコピー可能です。

farbvelo-elastiq

 

Gradient Blob SVG

複数の淡いグラデーションカラーを重ね、独自のBlobテクスチャをダウンロードできます。PNG、SVGから選ぶことができ、色やサイズなども自由にカスタマイズOK。

gradient blob svg

 

More Graphics

数回クリックするだけで、さまざまなパターンテクスチャを、ゼロから生成できるオンラインツール。グラデーションやバウハウス、モンドリアン、幾何学模様など。

more-graphics

 

Shortcuts Design

PhotoshopやIllustrator、AfterEffect、Figmaなど、さまざまなデザインツールのショートカットをまとめて確認できる、チートシート的ライブラリ。

shortcuts-design

 

Webデザイン便利ツール

Inline Layout Switch Idea

画像をクリックしたときの、ページ遷移エフェクトが美しいレイアウトアイデア。2つのサンプルデモが用意されており、ソースコードもダウンロードできます。

 

ウェブアクセシビリティ導入ガイドブック

デジタル庁が公開した、ウェブアクセシビリティの考え方、取り組み方のポイントを解説する、ゼロから学ぶ初心者向けのガイドブック。

A11y-Introduction-Guidebook デジタル庁

 

Daily.dev

ブラウザを開くたびに、最新のWeb関連ニュースを確認できる拡張プラグイン。Chrome、Firefox、Microsoft Edge用がそれぞれ準備されており、すべて無料。

 

Accessible Color Palette Generator

WCAG(Web Content Accessibility Guidelines)に準拠した、配色を手軽に作成できるブラウザアプリ。

ACCESSIBLE-COLOR-PALETTE

 

Curzr

マウスカーソルをカスタマイズできるコードを、無料配布しているサイトで、今後も数が増える予定だそう。

curzr

 

Dark Mode Design

ダーク系のWebデザインのみをコレクションしたWebギャラリー。国内外のWebギャラリーと一緒に確認するのがオススメ。

DARK-MODE-DESIGN

 

KickstartDS

デザインシステムを作成するためのスタートキットで、一貫性のあるウェブサイト制作を、効率的に行うことができるUIコンポーネントが揃います。

kickstart-DS

 

Lenis Smooth Scroll

スクロールに応じたエフェクトを可能にする、オープンソースの軽量スクロールライブラリで、他のライブラリの不満点を解消し、アニメーションを特に重視しています。

lenis-smooth-scroll

 

Type Scale

黄金比や白銀比などをつかって、Webサイトに適切な文字サイズを、瞬時に作成してくれる便利ツール。

Typescale

 

モックアップ・アイコンツール

Magician

文字テキストを入力すると、AIがアイコンから画像まで、自動で生成してくれる、Figmaプラグイン。

 

 

Illustration Builder

イラストなど、Webサイト制作で便利な、300種類を超えるコンポーネントを収録しており、アイデア次第で、無限に組み合わせることができます。

illustration-builder-for-figma

 

HTML to Design

WebサイトのURLを入力するだけで、自由に編集できる、Figma用ファイルに変換してくれる、便利すぎるプラグイン

html-to-design-for-figma

 

Futicons

VRや仮想通貨、ドローンやサステナブルな技術など、最新テクノロジーに関するアイコンをまとめたセットで、SVGまたはPNGでダウンロード可能。無償版には125個のアイコン収録。

futicon

 

Bricks (β) — Free Ui-kit for wireframing

ワイヤーフレームを作成したり、独自のUIキット作成のベースとして利用できる、コンポーネントライブラリ。現在、ベータ版として公開中で、今後もコンポーネント追加予定。

bricks-ui-kit-for-wireframing

 

クリエイティブ・面白ツール

ChatGPT

テキストで質問を投げかけると、AIが回答してくれる未来のツール。日本語にも対応しています。現在はテスト期間中で、すべて無料で利用できます。

ChatGPT

 

Deck Library

1000以上のスタートアップ向けのピッチデッキを集めたているウェブライブラリ。好みのデザインを見つけたら、パワポ用おすすめ無料テンプレートで再現してみても良いでしょう。あのユニコーン企業のピッチも。

deck-library

 

Gen Cup

W杯の試合結果と、グラフィックデザインを組み合わせた、ジェネレーティブ・アート・プロジェクト。ゴール数やパスの数、ボール支配率などのデータを、ビジュアルに変換、素敵なポスターに仕上げます。

GENCUP-ART

 

Generated Photos

架空の人物10万人分の姿写真を生成、すべてダウンロードできるオンラインツール。カスタムデータを注文することも可能。

GENCUP-ART.

 

Rectangle for Mac

ショートカットキーを押すことで、お好みのウィンドウサイズやレイアウトに変更してくれる、Mac用の時短ツール。

rectangle-for-mac

 

Wrap

美しいスクリーンショットを、簡単に編集できるブラウザ拡張機能で、他の人と共有できるのもポイント。

WRAP-SCREENSHOT-BEAUTIFULLY

 

In Rhythm With Nature

「自然のリズムと自分を同期させる」をコンセプトに、花がゆっくり開いたり、閉じたりする映像を楽しむことができる、リラックスコンテンツ。

 

およそ一ヶ月前となる、前回のオンラインツールまとめがこちら。進化がとまりません。

関連記事: クリエイターの作業をラクにする最新Web、オンラインツール33個まとめ