Advertisement

mindmap-by-realtimeboard

 

ウェブデザイナーやグラフィックデザイナーのデザイン制作をスピードアップさせる、便利な最新オンラインツールをご紹介します。

 

ゼロから作ると時間のかかってしまいそうなことも、これらのツールを使うことで大幅に制作時間を短縮できるツールが揃います。今後のデザイン制作のワークフローに取り入れてみてはいかがでしょう。

 

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

 

コンテンツ目次

 

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

モックアップツール

Design Camera

アニメーション付きの3Dモックアップを数秒で作成できるMac専用アプリで、GoogleのMorten Just氏が作成しています。

design-camera

 

 

 

Shotsnapp V2

ウェブサイトやアプリで利用する、美しいモックアップを手軽に作成できるシンプルなツール。

shotsnapp-v2

 

 

 

Cleanmock

ウェブサイトやモバイルアプリの魅力的なモックアップを、オンライン上でしかも無料で作成できる便利ツール。

 

 

 

Screen Guru

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

screen-guru

 

 

 

ScreenSpace Mockup

フォトショップを使わずに、本物そっくりな3Dモックアップを数秒で作成できるオンラインサービス。

screenspace-mockup

 

 

デザインツール

Absurd Design

サルバドール・ダリのようなシュールなイラスト素材を無料ダウンロードでき、他とは異なるランディングページを作成できるサービス。

absurb-design

 

 

 

Figma Freebies

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

figma-freebies

 

 

 

Interfacer

次のデザインプロジェクトで活用できる、高品質な無料デザイン素材のみを集めたサイトで、どれも商用利用可能アイテムのみを厳選しています。

interfacer

 

 

 

CoolHue 2.0 Sketch Plugin

美しいグラデーションカラーの配色パレットとスウォッチを集めたSketch用プラグイン。

coolhue-2-sketch-plugin

 

 

 

Stubborn

30種類のイラストと背景イメージを組み合わせて、自分だけのストーリーを作成できるデザインキット。ウェブ案件やプレゼン資料作成などに。

stubborn-illustration

 

 

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

React Native For Designers

iOSやAndroidアプリの開発をゼロから学ぶ、6時間完結のオンライン学習コース。

react-native-for-designers

 

 

 

Amino for Chrome

Chrome用拡張機能で、好きなサイトをその場でCSSカスタマイズでき、作成したスタイルをGoogleアカウントに保存できます。

amimo-for-chrome

 

 

 

Uizard

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

uizard

 

 

 

Sketch2React

Sketchで作成したデザインファイルを、BootstrapとReactに変換できるフレームワークツール。

sketch2react

 

 

 

Yotako

Adobe XDまたはSketchデザインファイルをアップロードし、アプリで利用したソフトウェアスタックを選択することで、コードを自動生成してくれるツール。

yotako

 

 

 

Shots.ai

手作業で集められたモバイルアプリのデザインパターン6000種類以上が揃い、ボタン一つでデザインをコードに変換してくれる最新サービスのひとつ。

shots-ai

 

 

 

Vue.js for Designers

より高度なデザイン作成を求めているひとは、デザイナーとしてコードを学んでみてはいかがでしょう。デザイナー目線でVue.jsを学習するオンラインコース。

vue-js-for-designers

 

 

プロトタイプツール

This Person Does Not Exist For Sketch

プレースホルダー用にランダムで顔写真を生成してくれる無料Sketchプラグイン。

this-person-does-not-exist

 

 

 

User Testing v2 by Marvel

完成したウェブサイトやアプリを実際にユーザーに使ってもらい、どのような視線の動きをするのか録画できるプロトタイプ用ツール。

user-testing-v2

 

 

 

Felipe for Sketch

直線や長方形などのシンプルな図形を描くだけで、UIデザイン要素に変換できる、プロトタイプ作成を爆速にするSketch拡張プラグイン。

 

 

 

InVision Studio Pocketbook

デザインツールInvisionのStudioの使い方を詳しくまとめたオンラインガイドブック。

invision-studio-pocketbook

 

 

 

Flowbase

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

flowbase

 

 

 

Connection Flow Arrows

サイトマップやフローチャート図をより手軽に作成できるSketch用プラグイン。

connection-flow-arrows

 

 

 

Spark AR Studio

コードを書かずにAR技術をより手軽に作成できる、シンプルで柔軟なウェブツール。顔認識追跡エフェクトなど機能も盛りだくさん。

spark-ar-studio

 

 

 

Userback

デザイン制作で重要なフィードバックを重視したコラボレーションツールで、用意されたシンプルなツール機能で、より直感的なフィードバックを手軽に残すことができます。

userback

 

 

 

iOS Design Kit

最新のiOSデザインを完全再現したプロトタイプ用素材ツールで、iOS 12 GUIを現在無料ダウンロードできます。

ios-design-kit

 

 

サウンドツール

UI Sounds

世界的に有名なオンラインサービスで利用されている音声サウンドをコレクションしたサイト。その場でプレビューを再生できます。

ui-sounds

 

 

 

Fugue 2.0

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

fugue-2

 

 

アイコン素材パック

Zwicon

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

zwicon

 

 

 

ICONSVG

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

iconsvg

 

 

 

Xicons

10日おきに個人および商用利用もOKなベクターアイコン素材を無料ダウンロードできるサービス。

xicons

 

 

 

Essentials Icon Pack by InVisioN

ウェブサイトやモバイルアプリなどでよく利用される基本的なアイコン素材を、カラーとアウトラインの2スタイルで収録しています。

essentials-icon-pack-by-invision

 

 

 

Eva Icons

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

eva-icons

 

 

 

Essential Glyphs

基本的なベーシックアイコン素材が揃い、小さなサイズから大画面まで幅広く対応できるデザインが特長です。

essential-glyphs

 

 

 

Evericons

個人、商用どちらでも利用できる、460種類の高品質なアイコン素材コレクション。

evericons

 

 

 

コラボレーション、共同作業ツール

Mixed

スクリーン画面を見ながら、音声でコミュニケーション、リアルタイム画面共有できるコラボレーションツール。

mixed

 

 

 

Whimsical Sticky Notes

アイデアやコンセプトを付箋に書き出し、まるで壁に張り出すことで、プロジェクトの進行をスムーズに進め、プロジェクト管理をより視覚的、ビジュアルで行うことができるオンラインサービス。

whimsical-sticky

 

 

 

Mind Map by RealtimeBoard

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

mindmap-by-realtimeboard

 

 

 

面白ツール

Canvas for Chrome

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

canvas-for-chrome

 

 

 

ColorBox by Lyft Design

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

colorbox

 

 

 

Blobmaker

ナチュラルなシェイプが特長の図形をデザインできるオンラインツール。作成したデザインは、SVGファイルとして無料ダウンロードできます。

blobmaker

 

 

 

It’s Centred That

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

its-centered-that

 

ゲームを通じでデザインを学ぶことができるオンラインツールもいろいろあります、こちらも参考にどうぞ。

design-game-top2
配色やフォント選びなどデザインの基本に加え、自由なパスを描くことができるペンツールの使い方などを、簡単なゲーム形式を通じて学ぶ、無料のオンラインゲームをまとめてご紹

 

 

Sip 2.0

悩みがちな配色カラーパレットを収集、整理、共有できるデザイナー向けデザインツール。2.0にアップデートされ、インターフェースや使いやすさが改善されています。

sip-2

 

 

 

Mixkit

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

mixkit

 

mixkit-featured-image
プロが撮影した高品質なHD動画やアニメーションを、商用ライセンス付きで無料ダウンロードできるサイト Mixkit (http://mixkit.co)が公開されてい

 

 

Creative Commons Search

14億を超えるCreative Coommonsライセンス付きのデジタル作品から、お好みのデザインを探すことができるツール。同時にパーソナライズされたコレクション機能や、タグ、コンテンツのリミックスなどにももうすぐ対応予定。

creative-commons-search

 

 

フォント、書体ツール

Picas

Googleフォントをつかって、簡単なロゴマークを作成するときに便利なツール。お好みの文字、ブランド名などを入力したら、色やフォント名を自由にその場で試すことができます。

picas

 

 

 

FontSpark

文字を入力し、ボタンを押すたびに、フォントがランダムで切り替わるので、デザインのアイデア出しに困ったときに重宝しそうな書体ツール。

fontspark

 

フォント、書体選びはデザイン制作でも頭を抱えることの多いことも。以下のツールも一緒に活用してみてはいかがでしょう。

web-typography-resource
コンテンツ・ファーストに対する考え方が、デザイナーに認識、理解されるにつれて、デザイン過程において優れたタイポグラフィの作成がますます重要になってきています。

 

 

参照元リンク : 28 Design Tools in 28 Days – Prototypro.io Blog

参照元リンク : 35 New Design Tools in 2019 – Prototypro.io Blog