2019年間ベスト!Web制作を変える便利オンラインツール厳選85個

best-of-online-tools-in-2019-1

 

2019年も残すところわずかとなり、今年もWeb制作を快適にするオンラインツールがたくさん公開されました。

 

この記事では、今年紹介したツールのなかでも特に話題になった2019年の便利オンラインツールベスト85個をまとめてご紹介します。

 

実際に制作フローに取り入れて便利だったツールを選りすぐったこのコレクションには、「無料で利用できることを基本としたツール」を揃えています。これらのツールやサービスを活用して、より快適なWeb制作ライフを過ごしましょう。

 

 

2019年に登場した最新オンラインツール一覧

 

以下は、2019年にかけて当サイトで紹介した、ウェブ制作が捗る便利ツール一覧となります。今回未紹介のツールが中心となっているので、こちらも一度目を通しておくことをオススメします。

 

ウェブデザイン制作が爆速に!便利な最新オンラインツール47個まとめ

ウェブデザイン制作が加速中!便利な最新オンラインツール53個まとめ

ウェブ制作が捗る!便利すぎる最新オンラインツール、無料素材56個まとめ

ウェブ制作がすご楽に!便利な最新オンラインツール33個まとめ

Webデザイン制作が変わる!便利な最新オンラインツール45個まとめ

ウェブ制作をスピードアップ!便利すぎる最新オンラインツール、無料素材51個まとめ

 

ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。

 

コンテンツ目次

 

Webデザイン制作が変わる!便利な最新オンラインツールまとめ

 

イラスト系ライブラリ

Fresh Folk

スタイリッシュなイラストを作成できる無料ライブラリ。PSDファイルのレイヤーを表示/非表示にするだけで、髪型やスキンカラー、服装などを着せ替えできます。また、観葉植物やインテリア家具など43種類のオブジェクトも同時に収録。

目次へ戻る

 

 

 

Mixkit Art

さまざまなスタイルの手描きイラストを無料ダウンロードできるサービスで、毎月定期的に公開アイテムがアップデートされています。

mixkit-art

目次へ戻る

 

 

 

Illustrations

商用利用もできる100種類のかわいいイラストを公開しているサイトで、AIやSVG、PNG,EPSファイルで無料ダウンロードできます。

illustrations

目次へ戻る

 

 

 

FreeIllustrations

背景デザインを想定した美しいイラストを、無料または有料でダウンロードできるオンラインサイト。参照元を明記することで無料で利用でき、より大きなサイズが欲しいときは別途購入が必要となります。

freeillustrations

目次へ戻る

 

 

 

unDraw for XD

美しいイラストをクレジット表記なしで商用利用できるAdobe XD用プラグイン。オンライン無料イラスト配布サイトunDrawがベースになった、豊富なイラスト数やカスタマイズ性が魅力です。

undraw-for-xd

目次へ戻る

 

これ便利すぎ!Adobe XDのおすすめ無料プラグイン20個まとめ

 

 

Abstrakt Illustration

独特の作風の手描きイラストをSVGとPNGファイル形式で無料ダウンロードできるWebイラストサービス。

9-abstrakt-illustration

目次へ戻る

 

 

 

404 Illustrations

ウェブサイトの404ページで利用できる、ユニークでかわいいイラストを集めた無料デザイン素材キット。

404-illustration-vers

目次へ戻る

 

 

 

Paaatterns

カラフルで美しいベクターパターンテクスチャを多数そろえたデザイン素材集で、SketchやFigma、XD,Illustrator用ファイルの他に、SVGとPNGファイルでダウンロードできます。

9-paaatterns

目次へ戻る

 

 

 

Drawer

高品質なLottieアニメーションとSVGイラストレーションをコレクションしたサイト。自由にカスタマイズできるので、異なるデザイン要素を手軽に導入できます。

drawer

目次へ戻る

 

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

 

 

デザインコレクション

SVG Arista

このツールはCSSコードを使って、アップロードしたSVGファイルのstrokefillプロパティのアニメーションを作成するAnimistaのスピンオフ・プロジェクト。

svg-arista

目次へ戻る

 

 

 

SVGator

魅力的で複雑なSVGアニメーションをオンライン上で作成、エクスポートできる、ウェブ制作の時短ツール。無料トライアルあり、直感的に操作できるパネルを使って、ロゴやアイコン、キャラクター、背景デザインなどを作成できます。

svgator

目次へ戻る

 

 

 

Happy Hues

配色カラーパレットを選んでも、具体的な使い方が分からないというひとにオススメしたいツール。カラーパレットを選択するたびに、サイト全体の配色も変更し、ひと目で確認できます。

happy-hues-scaled

目次へ戻る

 

 

 

Culrs 2.0

美しい配色カラーパレットを手入力で集めたキュレーションサイトで、類似色(英: Analogous Colors)や3色配色(英: Triads)などジャンル別に配色を探すことができるツール。

curls

目次へ戻る

 

 

 

ColorBox by Lyft Design

ウェブサイトで利用する配色をより細かく調整し、目的にあった理想の色を表現できるオンラインカラーツール。

colorbox

目次へ戻る

 

 

 

Copy Palettes

FIgmaやSketchで利用できる、SVGの配色カラーパレットを作成、コピペで利用できるオンラインツール。

copy-palette

目次へ戻る

 

 

 

Muzli Search

このツールを利用することで、デザインのインスピレーションが欲しいときに、高品質なアートワークやロゴ、イラスト、写真のみを配色カラーパレット付きで検索できる、デザイン制作でも重宝するツールです。

muzli-search

目次へ戻る

 

ノンデザイナーにおすすめ!センスの良い配色、デザインアイデアを見つける画像検索ツール Muzli Search

 

 

Vectornator Pro

Mac専用の無料グラフィックデザインツール。Illustratorの代替ツールとしてはもちろん、リアルタイム共同作業ももうすぐ公開予定。

vectornator-scaled

目次へ戻る

 

 

 

Lunacy 4.0

SketchファイルをWindows上で、しかもオフラインで利用できるグラフィックデザインソフトウェア。

4-lunacy-4

目次へ戻る

 

Photoshop 必要なし?無料で使える画像編集、加工オンラインツール26個まとめ

Illustratorいらず?!ベクター画像作成につかえる無料の代替ツールまとめ【2021年版】

無料ではじめよう!おすすめお絵描きソフト、ペイントツールまとめ【2021年版】

 

 

 

Remove BG for Sketch

ボタンクリックひとつで人物を背景から切り抜くことができるあのサービスが、ついにSketchにも対応です。

remove-bg-for-sketch

目次へ戻る

 

まるで魔法、画像の切り抜きを1クリックで!Photoshop拡張プラグインRemove.bg使い方ガイド

 

 

Free Logo Maker

ユーザー登録やクレジット表記なども不要、ロゴデザインを完全無料で作成、ダウンロードできるサービス。作成したロゴは、商用ライセンス対応となっています。

8-free-logo-maker

目次へ戻る

 

 

 

Gradienta

150種類以上のCSSのみでスタイリングされたグラデーションを無料ダウンロードできるオープンソースのプロジェクト。

gradienta

目次へ戻る

 

 

 

Tartanify

5,000枚を超えるタータンチェック柄を集め、SVGとPNGファイル形式で無料ダウンロードできます。

5k__tartan_patterns___tartanify_com

目次へ戻る

 

 

 

Isobuild

セミフラットなアイソメトリック(等角投影法)画像を作成し、SVGやPNG、JPEGファイル形式でダウンロードできる無料オンラインツール。

explore_isobuild_isometric_design_editor_to_create_awesome_illustrations

目次へ戻る

 

 

 

Printable Design

招待状や商品タグ、サンキューカード、チケット、結婚式のRSVPなどを印刷可能なPDFファイル形式で作成、無料ダウンロードできるサービス。

print-design

目次へ戻る

 

 

 

Awesome Design Tools

400種類に及ぶデザインツールを細かくカテゴリ分けし、リスト化したリソースコレクション。

awesome-design-tools

目次へ戻る

 

 

 

Typography Resources

タイポグラフィー、書体に関連する素材やツール、オンラインサービス、教材などをひとつにまとめたキュレーションサイト。

typography-resources

目次へ戻る

 

 

 

Really Good Emails 2.0

4,000を超える実際に使われているEメールデザインを集めたギャラリーサイト。8-really-good-emails

目次へ戻る

 

 

 

Figma Freebies

特に海外で人気となっているデザインツールFigmaの無料デザイン素材をまとめたキュレーションサイト。

figma-freebies

目次へ戻る

 

本当によく使うFigmaの便利ショートカット厳選36個まとめ

 

 

Brutalist Web Kit

最近のウェブデザイントレンドを多数盛り込んだ、70種類を超えるアートボードを収録したデザイン素材集。FigmaとSketchファイルで収録されています。

8-brutalist-web-kit

目次へ戻る

 

 

 

Mixkit

商用プロジェクトにも対応できる、高画質なHD動画を無料ダウンロードできるビデオ動画ストックサイト。詳しくは以下のエントリーでも触れています。

mixkit

目次へ戻る

 

著作権フリー!超ハイクオリティな動画素材を無料ダウンロードできる Mixkit

 

 

Fugue 2.0

ビデオコンテンツ作成向けの音声トラックを無料ダウンロードできるサイト。カテゴリ別に細かく分けられ、目的の音を探しやすくインターフェースも改善されました。

fugue-2

目次へ戻る

 

 

 

モックアップツール

Apple Mockups

iPhoneやMac、iPadなどAppleガジェットのモックアップを集め、無料で公開しているライブラリ。PSDやAiなどさまざまなファイル形式を選択できます。

apple-mockups

目次へ戻る

 

 

 

Frrames

Mac OSやWindows、iOS、Androidなどのスクリーン画面をそのまま再現できるモックアップフレーム集。SketchやPhotoshop、Adobe XD、Figmaなど多彩なデザインアプリ用ファイルが揃います。

2-frrames

目次へ戻る

 

 

 

UiPrint

ウェブサイトやアプリのアイデアを紙に手書きしたいときは、プリント印刷可能なスケッチ用テンプレートをダウンロードしてみましょう。10種類から選ぶことができます。

uiprint

目次へ戻る

 

 

 

Printable Mockups

ダウンロードしてそのままプリント印刷できる、さまざまなスクリーンサイズに最適化されたモックアップコレクション。

2-printable-mockups

目次へ戻る

 

 

 

Stacc

動画ビデオを高画質なGIFアニメーションに変換してくれるサービス。FFMPEGという新しいファイル形式を採用し、ファイルサイズを落としながら、ビデオ出力のような画質クオリティを保つことができます。

2-stacc

目次へ戻る

 

 

 

Screen Guru

サイトURLを入力するだけで、どんなウェブサイトのスクリーンショットも一発で作成できるオンラインツール。

screen-guru

目次へ戻る

 

 

 

デザインからコードへの変換ツール

Lottie Web Player

Lottieで作成したアニメーションをほんの数クリックのみで、WordPressなどのウェブサイトに導入できるツール。

lottie_web_player_-_lottiefiles

目次へ戻る

 

 

 

Haiku Animator

モバイルアプリやウェブサイトで利用できる、魅力的なアニメーションを直感的に作成できるオンラインサービス。14日間の無料トライアル体験もあります。

animator-by-haiku

目次へ戻る

 

 

 

Froala Pages

ウェブデザインで想定できる140を超えるコンポーネントをつかって、ドラッグ&ドロップの直感的な作業でウェブページを作成できるツール。10ページまで無料で利用、作成できます。

froala-pages

目次へ戻る

 

 

 

Material Builder

Google謹製マテリアルデザインと人気フレームワークBootstrapをつかって、素早くレスポンシブウェブサイトを作成できる無料ツール。

material-builder

目次へ戻る

 

 

 

Bulma Builder

軽量で人気のCSSフレームワーク「Bulma」専用のエディタ、ビルダー機能で、コードを考えずに手軽にテンプレートを作成できます。

3-bulma-builder

目次へ戻る

 

 

 

Gapplin

SVGファイルを開くことで、ウェブサイト用に最適化しレンダリングしてくれるMac専用アプリ。

3-gapplin

目次へ戻る

 

 

 

Web制作お役立ちツール

CSS Wand

ホバーエフェクトやローディングなど、コピペで利用できるCSSスタイルコレクション集。`

css-wand

目次へ戻る

 

 

 

CSSeffectsSnippets

印象的なホバーエフェクトやボタン、テキストなどをあつめたアニメーションライブラリで、クリックするだけでCSSをコピーできるお役立ちツール。

csseffectssnippets

目次へ戻る

 

 

 

CSSFX

こちらもクリックするだけでHTML/CSSコードをコピペできる、ホバーやボタンリンクなどのCSSエフェクトをまとめたコレクション 。

cssfx

目次へ戻る

 

 

 

CSS Animo

テキストやボタン用CSSホバーエフェクトや読み込みアイコンなど、控えめで印象的なCSSアニメーションスタイル40種類をクリックでコピペできます。

css_animo

目次へ戻る

 

 

 

Get Waves

あらゆる波型シェイプにカスタマイズができ、そのままSVGファイルとして無料ダウンロードできるサービス。ウェブページのセクション項目同士のスペーサーとしても利用できます。

3-make-some-waves

目次へ戻る

 

 

 

CSS Layout

よく利用される汎用的なレイアウトやUIコンポーネント60種類程を、CSSコードでコレクション、保存できるプロジェクトサイト。毎回利用するようなUIパーツなど、地味に便利。

css_layout

目次へ戻る

 

 

 

Flowbase

オンラインサイト作成サービスWebflowでクローン、複製できるテンプレートをまとめたコレクション。

flowbase

目次へ戻る

 

 

 

Darkmode.js

Macではおなじみのダークモードをウェブサイトに導入できるJSプラグイン。参考サイトの右下に表示されたアイコンをクリックすると、実際に切り替わる様子を確認できます。

darkmode-js

目次へ戻る

 

 

 

JS Cloudimage 360 View

360度、全方向に回転するショーケース用Javascriptプラグインで、2行のコードを加えるだけで、商品を詳細まで伝えることができます。

360-image-maker

目次へ戻る

 

 

 

Lax.js

美しいパララックスエフェクトを手軽に表現できる軽量Javascriptプラグインで、スクロールに合わせて素晴らしいアニメーションエフェクトを実現できます。

lax-js

目次へ戻る

 

 

 

Generated Photos

人工知能をつかって架空の人物の顔写真を100,000パターン作成し、完全無料で利用できるオンライン・ライブラリ。とてもリアルでナチュラルな顔立ち、すごいですAI。

100000-faces

目次へ戻る

 

 

 

Responsive Viewer

レスポンシブWebデザインの表示を、さまざまなサイズで一括確認できるChrome拡張プラグイン。用意されたデバイスの他に、任意のサイズによる表示も可能です。

responsive-viewer

目次へ戻る

 

ウェブ制作の面倒をズバリ解決!オススメChrome拡張機能23個まとめ

 

 

Screen Size Map

CSSのブレイクポイント定義で活用したい、一般的なスクリーンサイズや対応デバイスの人気などを直感的に調べることができるツール。

screen-size-map

目次へ戻る

 

 

 

LongLiveSS

スクリーンショットを撮影したサイトURLと幅x高さを入力すれば、定期的に(日別、週別、月別、時間別)自動でスクリーンショットを自動生成してくれます。

longlivess

目次へ戻る

 

 

 

Compress Studio

画像をアップロードすると自動で圧縮、比較でき、そのままダウンロード保存も可能なオンラインツール。

compress-studio

目次へ戻る

 

 

 

Kodika.io

コーディングの知識不要、ドラッグ&ドロップの簡単操作でiOSアプリを作成できるMac専用アプリ。

kodika-io

目次へ戻る

 

 

 

Mind Map by RealtimeBoard

他のひとやチームとの共同作業、コラボレーションに向いたブレインストーミング用ツール。アイデアをチーム内でまとめ、整理、構築する手助けをしてくれます。

mindmap-by-realtimeboard

目次へ戻る

 

 

 

プロトタイプツール

Wireframer

ワイヤーフレームで利用する文字テキスト部分を、SVG用をつかってカスタマイズできるオンラインUIキット。

目次へ戻る
 

 

 

Figmac

Macのインターフェースにマッチした超軽量Figmaデスクトップアプリ。公式アプリよりも快適な操作性をうたっています。

figmac

目次へ戻る

 

本当によく使うFigmaの便利ショートカット厳選36個まとめ

 

 

Uizard

紙に描いたワイヤーフレームのスケッチ画を、フロントエンド向けのデジタルファイルとコードに自動変換できるユニークなツール。

uizard

目次へ戻る

 

 

 

Flowkit

FigmaとSketch、Adobe XDで利用できる拡張プラグインで、直感的にフローチャート、ワークフローを作成できます。

flowkit-1-1

目次へ戻る

 

 

 

Charts for Sketch

美しいグラフやチャート図を手軽に作成、カスタマイズできるSketch素材ファイルコレクションで、無料ダウンロードできます。

charts-for-sketch

目次へ戻る

 

 

 

Figma Auto Layout

文字テキストの長さや大きさによって、ボタンサイズが自動調整されたり、リスト表示を素早く完成させるなど、デザイン作成のかゆい部分に手が届く拡張機能。

目次へ戻る
 

 

 

Logo Creator

300種類のロゴデザインがあらかじめインストールされており、ロゴ作成に困ったときに手軽に使えるFigma拡張プラグイン。

figma-logo-creator

目次へ戻る

 

 

 

アイコン素材パック

Zwicon

どんな案件にもフィットするUX/UIデザイナーが必要なアイコン素材566個を揃えた素材。Webサイトへの利用も簡単なSVGアイコン同時収録。

zwicon

目次へ戻る

 

 

 

Movin Icons

魅力的だけど控えめなアニメーションも実装したSVGアイコン素材100+個を揃え、あらゆるアプリやプラットフォームに対応できる柔軟さもポイント。無料版は5個のアイコンをダウンロードできます。

movin-icons

目次へ戻る

 

 

 

Potlab Icons

可愛らしいSVGアニメーションをつかったアイコンを無料ダウンロードできるサイトで、アイコンの色やストロークの太さ、サイズなども自由にカスタマイズできます。

potlab-icons

目次へ戻る

 

 

 

ICONSVG

アイコンをSVGコンポーネントに変換するプロセスをシンプル化できるユニークなツール。基本となるインターフェース用アイコンが揃い、自由に好みに合わせてカスタマイズ、あとは最後に表示されたSVGコードを貼り付けるだけ。

iconsvg

目次へ戻る

 

 

 

Ikonate

色やサイズ、ストロークの太さなど自由にカスタマイズできるSVGアイコンセットで、お好みのスタイルをエクスポートして利用することができます。

iknonate

目次へ戻る

 

 

 

Eva Icons

480個を超えるオープンソースのアイコン素材を無料ダウンロードでき、ウェブサイトはもちろん、iOSやAndroidにも対応したデザイン。

eva-icons

目次へ戻る

 

 

 

Simple Icons

有名ブランドのロゴをSVGファイルでダウンロードでき、ブランドカラーもHEXカラーコードで一緒に記載されています。

simple-icons

目次へ戻る

 

 

 

面白ツール

Drawow

子供の描いた絵をスキャンしアップロードすれば、24時間でユニークなキャラクターにしてくれるサービス。

drawow

目次へ戻る

 

 

 

Canvas for Chrome

Chromeブラウザ内でいつでも手書きスケッチを描くことができるサービス。Googleアカウントと紐づけすることで、作成した画像を複数のデバイス間で共有でき、デスクトップで書いたデザインの書いた、タブレット端末ではじめる、なんてことも可能。

canvas-for-chrome

目次へ戻る

 

 

 

Streamlabs OBS

ゲームのプレイ実況などストリーミング配信をすぐに行うことができる無料ツール。

streamlabs

目次へ戻る

 

 

 

Jumprope

サービスや商品の使い方をまとめたHowTo動画を、ステップバイステップで作成できるお手軽ツール。映像編集スキルゼロからはじめることができ、レシピやエクササイズなどの動画を、InstargamやTwitterといったお好みのSNS用素材としてダウンロードできます。

jumprope

目次へ戻る

 

 

 

Sizle

プロ顔負けのプレゼンテーションに最適なスライドを作成できるオンラインサービス。テンプレートも多数用意されており、なめらかなアニメーションエフェクトも実装済み。

sizle

目次へ戻る

 

 

 

Gantt.io

自由にカスタマイズできるガントチャートを手軽にオンラインで作成できるツール。

gantt-scaled

目次へ戻る

 

 

 

Visual Sitemap

URLを入力するだけで、サムネイル付きのウェブ用サイトマップを自動生成してくれるツール。

8-visual-sitemap

目次へ戻る

 

 

 

Tinkersynth

用意されたボタンやコントローラを使って、自由にラインアートを描くことができるデジタル面白ツール。

tinkersynth

目次へ戻る

 

 

 

Giphy Arcade

画像やイラストをアップロードして、自分だけのミニゲームを作成できるオンラインツール。あらかじめテンプレートがいくつか用意されているので、後は使いたいキャラクターを選択するだけ。

gifphy-arcade

目次へ戻る

 

 

 

It’s Centred That

表示される図形の中心をマウスでクリックするミニゲーム。レベル10まで用意されたステージを攻略してみましょう。

its-centered-that

目次へ戻る

 

遊んで学ぼう!配色やデザイン力をアップする無料オンラインゲーム11個まとめ

 

PhotoshopVIPでは、2019年にかけて合計285個のオンラインツールを紹介してきましたが、2020年はWeb制作を便利にするどんなツールが登場するか楽しみです。