Advertisement

 

この記事では、Webデザインやグラフィックデザインの制作がグンと捗る、便利すぎる最新オンラインツールをまとめてご紹介します。

 

通常、時間のかかってしまう面倒な作業も、これらのツールやサービスをうまく活用することで、より快適にデザイン制作をすすめることができます。お気に入りのツールを自分のワークフローに取り入れ、自分だけの爆速制作スタイルを確立してみませんか。

 

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

 

コンテンツ目次

 

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

 

イラスト系ライブラリ

Illustrations

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

illustrations

 

 

 

Smash Illustrations

45種類のキャラクターに、200個を超えるデザイン素材や背景、20シーンをパックにした無料イラスト集。

smash-illustrations

 

 

 

Drawer

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

drawer

 

 

 

デザインコレクション

Tartanify

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

5k__tartan_patterns___tartanify_com

 

 

 

Adaptiff

他にはないユニークなデザインを無料で作成、編集できるオンラインツール。文字テキストを入力するだけで、さまざまなスタイルを手軽に試すことができます。

adaptiff

 

 

 

awesome-design-plugin

 

 

 

笑った表情にしたり、目をパッチリとさせたり、自由に顔を調整、レタッチできるiPhone無料アプリ。

bloom

 

 

 

Campfire

Pinterestの代替ツールとして登場した、デザインのインスピレーションが欲しいときに活用したいサイト。

camfire

 

 

 

Creatures

SketchとFigmaの基本的なシンボルやコンポーネントを利用して、かわいいユニークなモンスターをデザイン、編集できます。

creatures

 

 

 

Curls Mac App

シンプルで手軽なルールに沿って、配色カラーパレットを決めることができるMac専用デザインアプリ。Macのメニューバーに表示できるので、いつでも利用可能な点もポイントです。

curls-mac-app

 

 

 

Isobuild

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

explore_isobuild_isometric_design_editor_to_create_awesome_illustrations

 

 

 

Flow Lines

プリセット設定を行うことで、数式を利用した膨大なバラエティーのSVGアートワークを作成、ダウンロードできるオープンソースSVGジェネレーター。

flow-lines

 

 

 

Litur

カメラを向けた映像の特定の色をHEXカラーコードで表示してくるiPhone用アプリ。

frame-1

 

 

 

Happy Hues

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

happy-hues-scaled

 

 

 

Printable Design

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

print-design

 

 

 

Pastryy

ウェブサイトに自分の作品をアップロードすれば、24時間以内にフィードバックをもらうことができるサブスクリプションモデル。

shotsnapp-1573813931-642

 

 

 

Vectary

立体的な3Dデザインを作成できるツールで、複雑な3Dソフトウェアにも負けないクオリティーをボタンひとつで完成させます。

vectary-photon

 

 

 

Vectornator Pro

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

vectornator-scaled

 

 

 

モックアップツール

Angle 3

オンラインツールFigmaやSketch、XD向けに開発された、ベクターモックアップを揃えたプラグインで、ツールを離脱することなく、モックアップを自由にカスタマイズできます。

angle-3-mockups

 

 

 

Artboard Studio for Figma

ブラウザ上でデザイン作業ができる人気ツールFigma用の拡張プラグインで、Figmaから離脱することなく、本物そっくりな3Dモックアップを作成できます。

artboard-studio-for-figma

 

 

 

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

adalo

 

 

 

Diez

デザインフレームワークを作成、管理できるオープンソースの無料プロジェクト。専用アプリまたはウェブサイト上で利用できます。

diez

 

 

 

Looop.dev

CanvasやWebGLアニメーションのプロトタイプを作成できるコーディングツールで、ユーザーが自由にカスタマイズできる柔軟な点も◎。

looop-dev

 

 

 

Lottie Web Player

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

lottie_web_player_-_lottiefiles

 

 

 

Material Builder

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

material-builder

 

 

 

Sketch to Xcode

Sketchファイルをドラッグ&ドロップで放り込むだけで、カラーアセットとSwiftコードに一括変換してくれる便利ツール。

sketch-to-xcode

 

 

 

Unicorn Platform

スタートアップ向けのランディングページの作成ができるオンラインツールで、モダンな見た目と使いやすさが定評。有料プランにすることで、独自ドメインによる運営が可能に。

unicorn-platform

 

 

 

Web制作お役立ちツール

BuilderX

React向けコーディングをブラウザ上で行うことができるデザインツールで、デザイナーとデベロッパーの隙間を埋めるツールとして誕生しました。

builder-x

 

 

 

CSS Layout

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

css_layout

 

 

 

Divjoy

Reactをつかったプロジェクトをより簡単にはじめることができるコードツール。

divjoy

 

 

 

Font Pairings ByPeople

フォントの新しい組み合わせを見つけるのに活用したいオンラインツール。手作業でキュレートされた書体を、さまざまな設定を加えながら見つけ、フォントの無料ダウンロードまで行うことができます。

font-pairings-by-people

 

 

 

Invisible Line

文字テキストを整列させ、読みやすいお好みの行間を作成、共有できる面白ツール。

invisible-line-scaled

 

 

 

Responsive Viewer

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

responsive-viewer

 

 

 

Slice

webやモバイル用のユーザーインターフェースの作成を、より快適に行うことができるコンポーネント集。

slice

 

 

 

Universe Design System

Sketchでのより効率的なワークフローを目指したツールで、コンポーネントを利用して統一感のあるデザインを短時間で作成できます。

universe-design-system

 

 

 

プロトタイプツール

Wireframer

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

 

 

 

Vectary for Figma

立体的で目を引く3Dデザイン、モックアップを、Figmaツールから離れることなくボタン操作のみで作成できます。

3d-design-vectary-for-figma

 

 

 

Figma Color Search

ローカルスタイルにお好みの配色を追加、保存できるFigma拡張プラグイン。

figma-color-search

 

 

 

Figma Auto Layout

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

 

 

 

Figma Community

世界中の他のデザイナーとつながり、作品をシェアしたりFigmaの学びの場として活用したいコミュニティサービス。

figma-community

 

 

 

Logo Creator

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

figma-logo-creator

 

 

 

Figma Ninja

Figmaの基本的な使い方やショートカットキーを、ゲーム感覚で覚えることができるFigma拡張プラグイン。

figma-ninja

 

 

 

Flowkit

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

flowkit-1-1

 

 

 

Root UI Kit

FigmaとSketchでのワイヤーフレーム作成を想定したUIキット。用意されたコンポーネントやワイヤーフレーム用テンプレートを利用して、手軽にプロトタイプを作成しましょう。

root-ui-kit

 

 

 

Wireframe for Figma

美しいワイヤーフレームやユーザーフロー・プロトタイプの作成に役立つプラグインで、カテゴリ分けされたパーツを組み合わせるだけで、ウェブやモバイル用のワイヤーフレームが完成です。

wireframe-for-figma

 

 

 

アイコン素材パック

Line Awesome

Bootstrapなどで利用されているFont Awesomeアイコンを、モダンなラインスタイルにスワップできる無料アイコンセット。

line-awesome

 

 

 

Simple Icons

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

simple-icons

 

 

 

面白ツール

Figma Product Planner

プロダクト開発をより快適に始めることができ、ゴール設定や問題解決まで、あらかじめ用意されたテンプレートを使って、あらゆるタスクをこなしていくFigma用プラグイン。

figma-product-planner

 

 

 

Gantt.io

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

gantt-scaled

 

 

 

Hellvetica

世界中のグラフィックデザイナーをイライラさせる文字のカーニングが特長のフリーフォント。

hellvetica

 

 

 

Pizdata

グラフィックやUIデザインのクリエイティブの作成をプロデザイナーに依頼でき、24時間で完成、さらに1ヶ月に何度でも利用できるサブスクリプションモデル。

pizdata-scaled

 

 

これまでの便利ツールも確認しておこう。

2019年に公開されたサービスやデザイン素材なども一覧リストアップしているので、以下のサービスも一緒にチェックしてみると良いでしょう。

 

mindmap-by-realtimeboard
ウェブデザイナーやグラフィックデザイナーのデザイン制作をスピードアップさせる、便利な最新オンラインツールをご紹介します。 ゼロから作ると時間のかかって
typography-resources
この記事では、Webデザインやグラフィックデザインの制作が捗る、便利な最新オンラインツールをまとめています。 これらのツールやサービスを利用すれば、デ
css-wand
この記事では、Webデザインやグラフィックデザインの制作が捗る、公開されたばかりの最新便利オンラインツール、無料デザイン素材をまとめています。 これら
free-collection-of-handcrafted-patterns-1
この記事では、日常行っているWebデザインやグラフィックデザインの制作が格段スピードアップする、便利な最新オンラインツールをまとめてご紹介しています。
fresk-folk
この記事では、Webデザインやグラフィックデザインの制作スピードが爆速になる、便利な最新オンラインツールをまとめています。 うまくツールやサービスを利

 

サムネイル@: Litur.app – A Color Picker from the real world.