Advertisement

itg-digital

 

この記事では、2020年に入ってから公開された、Webデザインを快適にする最新オンラインツールをまとめてご紹介します。

 

ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトで活躍しそうな新しいツールを中心に揃えています。

 

新しいツールや機能をうまく駆使することで、時間のかかる面倒な作業もラクにこなし、より円滑にプロジェクトを進めることができます。お気に入りのツールをワークフローに取り入れ、より快適で、スピーディーな制作を目指しませんか。

 

 

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


コンテンツ目次

 

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

 

デザインコレクション

City Roads

地名や都市名を入力すると、その街の道路だけを抽出、表示してくれるアート性の高いオンラインツール。日本の地名にももちろん対応しています。

draw-all-roads-in-any-city

 

 

 

Snowflake Painter

オンライン上で点と線を加えることで、自分だけの雪の結晶デザインを作成でき、SVGとPNGファイルで無料ダウンロードできます。

 

 

 

Glitch Art Generator

カラフルなグラデーションをつかった、さまざまなスタイルのグリッチエフェクトをオンラインで自動作成できるツール。グリッチの量や方向などもカスタマイズ可能。

glitchart-io

 

 

 

Duotone by ShapeFactory

お好みのカラーリング2色を選択するだけで、画像をデュオトーン風エフェクトで仕上げ、そのまま無料でダウンロードできます。お好みの写真をアップロードし、カスタマイズすることも可能。

duotone

 

 

 

Vangogh

キーワードを入力することで、そのキーワードに合った配色カラーパレットを自動的に提案してくれる新しいツール。

vangogh

 

 

 

Colorsinspo

すぐに利用できるカラーパレットの他に、配色ツールやグラデーション、ブランドカラーなど「色」に関するリソースをまとめたライブラリ。

colorsinspo

 

 

 

Color Safe

文字テキストと背景色コントラスト比のWCAGガイドラインに沿った、美しい配色カラーパレットを提案してくれるオンラインツール。

color-safe

 

 

 

Calcolor

複雑な色の仕組みを考えなくても、目的の配色を手軽に見つけ、管理することが出来る新しいツール。

calcolor

 

 

 

Multicolor Gradients

軽量でカラフル、レスポンシブにも対応したグラデーションカラーをコレクションしたサイトで、他では見かけないアート性の強い作品が中心に揃います。個人及び商用利用で利用できます。

frame-1-7

 

 

 

Lunacy

Windows専用のグラフィックベクターデザインツール。あらかじめアイコンや写真、イラストなどの素材が収録されているので、すぐにデザインをはじめることができます。最近、新機能の追加や1000以上のバグ修正など大幅なアップデートが行われました。

lunacy-5-0

 

 

 

AI Image Enlarger

人工知能AIによって、解像度の低い画像をピクセルがボケることなく拡大出来るオンラインツール。

ai-image-enlarger

 

 

 

Flow Fields

無数の粒子を自由に操り、ランダムのベクターデザインを作成するオンラインジェネレーター。

flowfields

 

 

 

イラスト系ライブラリ

ITG Digital

人気のイラスト素材をニーズやシーンに合わせてカスタマイズ、作成しダウンロードできる新しいサービス。時間がないときや、同じスタイルで統一したいとき、高品質なイラストが欲しいときにオススメ。

itg-digital

 

 

 

Pixilart

ピクセル画を自由に作成できるオンラインツールで、GIFアニメーションの作成を行うことができます。

pixilart

 

 

 

PNGDB

インターネット上にある2200万を超えるPNGファイルからキーワード検索できる巨大データサイト。

pngdb

 

 

 

Free Vector Images for Commercial Use

商用利用も可能なイラストレーションをIllustrator用AIファイル、Sketchファイル、SVGファイルで無料ダウンロードできます。イラスト数はまだ少ないですが、今後も定期的にアップデート予定だそう。

free-vector-images

 

free-illustration-collection
この記事は、2019年4月23日の初投稿から再編集、アップデートを随時行っています。2020年2月25日に新しい無料イラストを加え、合計54個のフリー素材サイトを紹介し

 

 

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

Neumorphism.io

話題のデザインスタイル「ニューモーフィズム」を手軽に表現できるオンラインツール。トグルを調整するだけでサイズや距離、ぼかし、シェイプ、色などをカスタマイズでき、ソースコードをそのままコピペできます。

neumorphism-io

 

skeuomorph-mobile-banking
Neumorphism(ニューモーフィズム)は、昨年末ごろより新しいデザイントレンドになるのではと話題となっている新しいデザイン手法です。 この記事で

 

 

Brumm

まるで本物そっくりなリアルなドロップシャドウをCSSでスタイリング、カスタマイズできるオンラインツール。作成したCSSスタイルもそのままコピペで利用できます。

brumm-smooth-shadow

 

 

 

Sketch2Code

紙とペンで手書きしたスケッチ画をアップロードすると、HTML5形式に自動で変換してくれる、AIをつかったMicrosoftの未来を感じるサービス。実際にイラスト画をその場で変換してくれますよ。

sketch2code

 

 

 

Kepler Website Builder for WordPress

コード不要のドラッグ&ドロップで思い通りのウェブサイトを作成できる、WordPress用ページビルダー。スタイルフィルタ機能を利用すれば、サイト全体のスタイルを瞬時に切り替えることができます。

kepler-website-builder

 

 

 

Apprat.io

iPhoneやiPad用アプリをコードの知識がなくても、ドラッグ&ドロップで作成できるサービス。30日の無料体験期間も用意されています。

appratio

 

 

 

Web制作お役立ちツール

Responsive Image Breakpoints Generator v2.0

画像をアップローづすると、複数のブレイクポイントに合わせて画像サイズを自動変換し、出力コードもコピペできます。レスポンシブサイト制作に必須のアイテム。

responsive_image_breakpoints_generator_by_cloudinary

 

 

 

RGB Kinetic Slider

PixiJSとGSAPをベースとしたWebGLイメージスライダー。デモも一緒に公開されています。

rgbkineticslider_-_demo_1

 

 

 

Learn CSS Positioning

ウェブデザインにおけるCSSによる「配置」について分かりやすくまとめたチートシート的リソース。

css_positioning

 

 

 

Dark Mode Design

世界的な大企業がどのように「ダークモード」をウェブサイトに適用したのかまとめた、ケーススタディ的なリソースガイド。

darkmodedesign

 

 

 

Airsite

プログラミングの知識が全くなくても、スマートフォン端末からランディングページなどのウェブサイトを作成できるモバイルアプリ。AndroidとiOS両方対応。

airsite

 

 

 

Devsync

ウェブサイトを視覚的に編集し、自分の使っているエディタと同期させることで、リアルタイムでコードを編集、反映させることができるChrome拡張プラグイン。

devsync

 

 

 

プロトタイプツール

iOS 13 GUI

iPhone最新OS、iOS13で使われているUIコンポーネントとスクリーン画面(ダークモードも含む)をそのまま忠実に再現したGUIキット。SketchとFigma用ファイルを無料ダウンロードできます。

ios-13-gui-1

 

 

 

Vectary

立体的な3DモックアップをプロトタイプツールSketchで自由に利用できる拡張機能プラグイン。

vectary-for-sketch

 

 

 

TinyImage

Fimgaで使用する画像のファイルサイズを最高で90%圧縮する有料プラグイン($7/月)。Figmaを使うとページが重くなるというひとにオススメ。

tinyimage

 

best-of-figma-shortcut-1
どんなツールもショートカットを覚えることで、制作時間の短縮、効率化を図ることができます。しかし、膨大にあるショートカットキーをすべて覚えるのはなかなか大変な作業。こ

 

 

Draft XR

Adobe XDで普段どおり作成したプロトタイプを、VRインターフェースを検証、テストすることができるツール。

draftxr

 

 

 

コラボレーションツール

3Drops Tools

複数のチームで共同作業を行うときに活躍するツールを、カテゴリごとにまとめた一覧リスト。デザインから開発、解析やマーケティング、コミュニケーション、管理ツールなどが揃います。

frame-1

 

 

 

Tuple

「まるでいつもの作業と変わらない」状態でリモートで画面共有することができる、Mac専用コラボレーションツール。

tuple

 

 

 

Creately

複数のチームメンバーがリアルタイムのオンライン上で、アイデアやコンセプト、プロセスなどを分かりやすく可視化することができます。

creately-3-0

 

 

 

アイコン素材パック

500+ CSS Icons

CSSのみでスタイリングされた500種類以上のアイコンパック。カスタマイズ自在で、レティナディスプレイにも対応しています。

500-css-icons

 

 

 

Gradientify

お好みのグラデーションカラーを選択でき、合計476個という大量のSVGアイコンを無料ダンロードできるアイコンコレクション。

gradientify-icons

 

gradientify_svg_icons-3
お好みのグラデーションカラーを選択でき、合計476個という大量のSVGアイコンを無料ダンロードできるGradientify Iconsが公開されていたので、今回はご

 

 

Motion

アニメーション付きSVGアイコンをカスタマイズ、無料ダウンロードできるエディター。MacとWindowsどちらでも利用可能。

motion

 

 

 

Icons 8 for Figma

12万個以上の無料アイコンを公開しているIcons8の公式Figmaプラグイン。ブラウザから離れることなく、お好みのアイコンを手軽に見つけることができます。

icons8-for-figma

 

 

 

面白ツール

Snack This

文字テキストを入力すると、アニメーション付きのテキストエフェクトを作成し、無料ダウンロードできるツール。Instagramの投稿などSNSに特化しており、日本語もOK。

snack-this

 

 

 

Youtube Tag Generator

YouTubeで動画を投稿するときに追加しておきたいハッシュタグをリストアップしてくれるツール。日本語にも対応しています。

youtube-tag-generator

 

 

 

Brand Building Guide

ムードボードの作成からブランド名、ブランドカラー、ロゴの作成、フォントの選定などブランディングを行うときに確認しておきたい事項をまとめた完全ガイド。

brand-building-guides-and-tools

 

 

 

Maker Move

スタートアップを想定したアイデアの種になりそうなEブックやポッドキャストなどをカテゴリごとにまとめたライブラリ。

makermove

 

 

 

CloudApp foriOS

このiPhone専用アプリを使えば、スクリーンショットや画面録画、GIFアニメーションの作成などをリアルタイムで行うことができます。

cloudapp-for-ios

 

 

2019年ベスト・オンラインツールもチェック

 

2019年に公開されたオンラインサービス、ツールの中でも、特に話題となったものをピックアップしています。以下の記事も参考にしてみてはいかがでしょう。

 

best-of-online-tools-in-2019-1
2019年も残すところわずかとなり、今年もWeb制作を快適にするオンラインツールがたくさん公開されました。 この記事では、今年紹介したツールのなかでも

 

サムネイル@ : Infinite combinations of illustrations – ITG Digital