Advertisement

 

この記事では、「もっと早く知りたかった」と思ってしまう、Web制作が加速する便利な最新オンラインツールをまとめてご紹介します。

 

面倒な設定をコピペで利用できるCSSツール配色ツール、人工知能を使った便利ツールなどが数多く公開されており、ますますクリエイティブな表現が広がりそうなものばかり。

 

自分のワークフローにうまくツールを導入することで、制作時間の短縮につながるだけでなく、ストレスの少ない快適な作業フローを実現してみてはいかがでしょう。

 

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

 


コンテンツ目次

 

2021年のベストツールも一緒にどうぞ。

この記事では、2021年に公開された便利なWebオンラインツール・ベスト100個+をまとめてご紹介します。 定期的にリストアップしている最新オンライン

 

 

知らないと損をする!Web制作を爆速にする最新オンラインツールまとめ

Webデザイン便利ツール

Box Shadows for TailwindCSS

人気が高まっているフレームワークTailwind CSSでの利用を想定した、CSSドロップシャドウを集めたライブラリ。CSSをコピペできるのも便利。

ほんのり影がついたようなドロップシャドウは、「浮いている」ような立体感を演出できる、ウェブサイトでは欠かせないデザイン要素のひとつです。 ドロップシャドウの使

 

 

Vanta.js

3Dアニメーションをウェブサイトで手軽に利用できるJSライブラリで、カスタマイズしたコードをコピペするだけの簡単さが特長。具体的な実装方法、Elementor向け実装方法も参考にどうぞ。

 

 

Gradient Blob

CSSのみで表現できる美しいBlobデザインを作成、カスタマイズできるオンラインツール。20色以上のスキンカラーも用意されており、作成したCSSコードをコピペでそのまま利用可能。

 

 

 

Alternate Column Scroll Animation

マウスホイールの動きとは逆にスクロールされるギャラリー用テンプレート。Locomotive Scroll JSを利用しています。

 

 

 

Squoosh

Googleが開発した画像圧縮ウェブアプリ。変換結果をブラウザ上で確認しながら設定でき便利。Node.jsで扱える『libSquoosh』の使い方も参考になりました。

 

 

 

California Design System

アクセスしやすく、一貫性があり、パフォーマンスの高いサービスや製品を簡単に構築することを目的とした、カリフォルニア州が手掛けたデザインシステム。

 

 

 

Picostrap 5

人気フレームワークBootstrapの最新バージョンで作成された、ページスピードを意識したWordPressのスターターテーマ。もちろん、無料です。

 

 

 

Uisual

HTMLとCSSのみで作成されたランディングページ向けテンプレートを集めたライブラリ。まだ数は少ないですが、JSなどを必要なく、すぐにウェブデザインを立ち上げたいときやプロトタイプ作成にも便利。

 

 

 

Clay.CSS

メタバースの登場も重なり、新しいデザイントレンドと予想されているクレイモーフィズム(Claymorphism)スタイルを、CSSで手軽に適用できます。

 

 

 

CSS Generator Custom Borders

ジグザグや波型ウェーブなどカスタムしたボーダーをCSSで作成し、そのままコードをコピーできるジェネレーターツール。

この記事では、Webデザイン制作の面倒な作業をラクにするCSS便利ツール87個をまとめています。なお、新しいツールを随時アップデートしています。 CS
この記事では、Webデザイン制作の面倒な作業を楽にこなす、便利なSVGツール53個をまとめてご紹介します。 背景テクスチャやSVGシェイプから、オンラインSV

 

 

The Vanilla List

ウェブ制作で便利なJavaScriptツールやプラグインをまとめたレポジトリ。最新ツールから定番人気ツールまでずらり網羅しています。

 

 

 

Waldo

モバイルアプリをより早く、より少ないバグに改善できるプレミアムツール。アプリをプラットフォームにアップロードし、検証テストを素早く行うことができます。

waldoの画像

 

 

 

What WordPress Theme Is That?検証したいウェブサイトのURLを入力するだけで、使用しているテーマの詳細を丸裸にする秘密ツール。

 

 

 

配色ツール

Colord

HEXカラーコードを入力するだけで、色の分析やRGBやHSLなどに瞬時に変換してくれる、軽量で強力なツール。

 

 

 

Gradient Generator

くすみのない美しいグラデーションを描くことができるオンラインツール。

デザイントレンドは変わっていますが、グラデーションはとてもナチュラルな見た目と多様性に富んでおり、いつの時代も愛されるデザインスタイルです。 この記事

 

 

Non Boring Gradients

上記ツールにも似ていますが、こちらも美しいCSSグラデーションを手軽に作成できるツール。Easingをクリックで変更できるのも、直感的で便利です。

 

 

 

Mesher

CSSをつかっておしゃれなグラデーションを作成できるツール。配色が思いつかないときは、Randomizeボタンをどうぞ。

 

 

 

MeshY

こちらもメッシュグラデーションの美しい配色が特長で、Randomizeボタンをクリックすると、色の混ざり具合がその場で変化していきます。

 

 

 

Gradientos

作成したグラデーションカラーを文字テキストや背景デザイン、アイコンなどで実際に確認できるオンラインツール。

 

 

 

Huemint

人工知能テクノロジーを駆使し、プロジェクトにあった配色を自動で提案してくれるツール。色の組み合わせを確認できるサンプルイメージが豊富でお気に入り。

 

 

 

デザインツール

fffuel : dddraw

オンライン上で手軽に手描きスケッチができ、作成した絵はSVGファイルとしてダウンロードできます。後半では、この他にもさまざまなデザインツールが無償公開されています。

 

 

 

ヴィンテージ専用デザインツールHeritage Designer、今なら有料プランが3ヶ月無料に

ヴィンテージデザインを作成するのに必要なフォントやテンプレート、デザイン素材、編集エディタなど、すべて一つにまとめた画期的なツール。はじめての人でもラッグ&ドロップ機能をつかって、簡単にデザインを作成できます。

 

 

 

Free Comics Photo Effect Mockup for Posters

PSDファイルに写真を放り込むだけで、まるでコミック漫画のような仕上がりのハーフトーンエフェクトに加工できるフォトショップ素材。

 

 

 

元任天堂デザイナーらによる粗ドット700点公開の素材ダウンロードサイトDOTOWN

解像度をできるだけ低くし、可能な限りシンプルな表現を目指した粗いドット絵は、誰でも無料でダウンロードでき、クレジット表記なしで商用利用にも対応しています。

 

 

 

Snoweb

アイコンから背景パターンやデコレーションなど、SVGで作成されたあらゆるグラフィック素材をまとめたライブラリで、どれも無料ダウンロードできてしまいます。

 

 

 

Grads v2

Webサイトやアプリ向けのプロジェクトに最適な、18種類のザラッとした質感のメッシュグラデーション・テクスチャ素材が揃います。パステルカラーが中心のバージョン1も無料でオススメ。

 

 

 

Logo to Use

無料ダウンロードして自由に利用できるロゴデザインをSVGファイル形式でまとめています。モノクロなど、カラーバリエーションも選択できます。

「準備はまだできていないけど、仮のダミー画像を入れておきたい」ウェブ制作中にそんな場面に遭遇することもあるでしょう。 この記事では、ダミー画像を手軽に

 

 

Poly Pizza

7000種類以上の3Dモデルを無料ダウンロードできるサイトで、ローポリ(Low Poly)にジャンルを絞ったシンプルなデザインが特長。

 

 

 

【2022年】クリエイティブに取り入れたい注目トレンド6選(クリエイター向け/国別比較あり)

2022年に注目が予想される6つのクリエイティブトレンドをまとめた、インタラクティブなトレンド予想。

 

 

 

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

Design System for Figma

プロトタイプツールFigmaで公開されている、有名企業で実際に使われているデザインシステムをまとめた一覧リスト。日本からはクックパッドも。

 

 

 

SWM Icon Pack

使い勝手の良いシンプルなSVGアイコン300種類、4つスタイル合わせると1,100個以上の素材を揃えたFigma向けファイル。

この記事では、ウェブサイトのUIデザインに便利な、無料の人気SVGアイコンライブラリをまとめて紹介しています。 豊富な収録数に加え、サイズや配色などの

 

 

フォント・書体カラーツール

Featured Type

デジアン製の高いおしゃれな英語フォントを手動キュレーションで集めているサイト。ただし有料フォント多めなので、無料ではFontshareもおすすめです。

Adobe Fontsは、ここ数年で大きく変わり、いまでは20,000以上のプロフォントをAdobe CCユーザーは無料で利用できるようになりました。

 

 

Font Converter

手持ちのフォントファイルをEOTやTTF、WOFF2、OTFなどに自動変換してくれる便利ツール。

 

 

 

Shaper Interface Styles

UIデザインの文字サイズや余白スペースなどをまとめて設定、カスタマイズできる便利ツール。

 

 

 

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

SocialBook

動画に写っている人物のみを切り取り、他の動画と合成できる動画の背景削除ツール。AIによる魔法のようになんでも消去、削除できるツール、増えてます。

スマホのカメラで身の回りにあるオブジェクトを素早く切り抜き、Photoshopなどのデスクトップアプリに直接配置できる、新しいアプリClipDropが登場しました。

 

 

54NFT

カスタマイズ自由なNFTストアを完全無料で作成できるツール。ストアの開設から販売まですべてを網羅。NFT販売時に取引手数料を支払うフリーミアムプラン。

 

 

 

Zero Code NFT

コーディングの知識がなくても、自分だけのNFTをノーコードで開発、導入できる画期的なサービス。今後ますますの人気が予想される分野のひとつでしょう。

 

 

 

NFT-Inator

NFTアートを着せ替え人形感覚で、手軽に設計、開発できる無料ツールキット。レイヤーの組み合わせをテストしたり、仮想通貨向けのMetaデータと画像ファイルのエクスポートも可能です。

 

 

 

M&M’s Rebranding

配色などは変わりませんが、ブランドを一新したM&M’s。キャラクターデザインは議論の的に。

 

 

 

NHKバーチャル背景ダウンロード

NHKの番組・コンテンツから用意されたバーチャル背景一覧リスト、どれも無料ダウンロードでどうぞ。

 

 

 

Game of Code

NPMのダウンロード数やGithubスターの数、ウェブサイトのトラフィック数など実際のデータを使って、JavascraiptフレームワークやCSSライブラリの人気を勢力図で表現します。