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

typography-resources

 

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

 

これらのツールやサービスを利用すれば、デザイン制作で面倒な作業も手軽に、短時間で行うことができ、より効果的にプロジェクトを進めることができます。制作ワークフローに取り入れてみてはいかがでしょう。

 

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

 

コンテンツ目次

 

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

 

デザインツール

SVG Colorizer

用意されたアイコンやキャラクターなどのSVG素材の配色をカスタマイズできるツールで、さまざまな色の組み合わせをリアルタイムで楽しむことができます。

svg-colorizer

 

 

Runner Pro

Sketchをつかたプロトタイプ作成、開発スピードをアップするプラグインで、キーワードを入力することで、見つけている素材を瞬時に探し、表示できるなど、面倒な作業を大幅に軽減してくれます。

runner-pro

 

 

Jumprope

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

jumprope

 

 

JS Cloudimage 360 View

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

360-image-maker

 

 

Scrnshts

App Storeの中から選りすぐりのスクリーンショットを集めたギャラリーサイトで、モバイルデザインの参考、インスピレーションにもぴったりです。

scrnshts

 

 

unDraw for XD

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

undraw-for-xd

 

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

 

SVGator

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

svgator

 

 

Scratch by InVision

クッキングや料理レシピサイトを想定したUIキットで、あらゆるシーンを想定したモバイルアプリ用コンポーネント100種類に加え、合計51のスクリーン画面が揃います。デスクトップからタブレット、スマートフォンまでレスポンシブ対応。

scratch-in-vision

 

プロモーション用に作成された短いクリップには、UIキットのクリエイティブな使い方が紹介されています。

 

 

Shade

主にGPUによってしょりされる、画像処理の手順を指定した小型スクリプト「シェーダー(英: Shader)」を、スマートフォンをつかって指先ひとつで作成できるiPhone向けアプリ。

shade

 

 

Accessible Brand Colors

お好みのブランドカラーを入力すると、アクセシビリティに適した色の組み合わせを表示しながら、より良い色も同時に提案してくれる配色カラーツール。

accessible-brand-colors

 

 

Color.review

入力した2色のコントラストレベルに応じて、評価軸となるスコアを調べて、アクセシビリティを改善できるツール。

color-review

 

 

Culrs 2.0

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

curls

 

 

モックアップツール

PackMojo

ブランドに合ったパッケージ用のボックス箱をオンライン上で作成し、2週間でお届けしてくれる新サービス。現在はアメリカ国内のみの発送となっています。

packmojo

 

 

Mock

動画ビデオをはめ込んだモックアップを手軽に作成できる無料オンラインツール。

mock

 

 

LongLiveSS

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

longlivess

 

 

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

Startup 3

BootstrapのHTMLコンポーネントを使ったオンラインHTMLページビルダー。ドラッグ&ドロップのみの簡単操作で、あらゆるウェブサイトを作成できるツール。

startup3

 

 

React95

ReactをつかってWindows95のUIデザインを復活させるプロジェクトが進行中です。

react95

 

 

Elements for WordPress

2000種類を超えるウェブサイト用テンプレートを利用、作成できるWordPress用プラグイン。

elements-for-wordpress

 

 

Responsive Image Plugin

このWordPres用プラグインは、画像ファイルを画面サイズに合わせて自動リサイズし、アニメーション付きのLazy Loadingにも自動対応してくれます。

responsive-image-plugins-by-cloudimage

 

 

Unity for Designers

あらゆる端末に対応した、クロスプラットフォームのゲーム開発をゼロから学ぶ、6時間の特訓オンラインコース。

unity-for-designers

 

 

GitHub Personal Website Generator

GitHubによる活動履歴などをまとめて掲載でき、自分だけのプロフィール画面を自動で作成してくれるジェネレーターツール。

github-personal-generator

 

 

Book for Leeflets

美しいレイアウトやデザインが特長の単一シングルページを、指先ひとつの簡単操作で作成できるツール。無料サインアップすることで、カスタマイズが可能となります。

book-for-leeflets

 

 

Gridbox v5.0

オンライン上でプロトタイプを作成できるツールで、Bootstrapに対応したライブラリやデザイン要素を使って、効果的かつ高速にページを作成できます。

gridbox-v5

 

 

Core by Mason

ウェブサイトやアプリで利用できる70種類を超えるコンポーネントを揃えた、フロントエンド向けUIキットで、ReactとHTMLで利用できる完全レスポンシブなレイアウトという点もポイント。

core-by-mason

 

 

CSSeffectsSnippets

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

csseffectssnippets

 

 

CSSFX

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

cssfx

 

 

Lax.js

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

lax-js

 

 

プロトタイプツール

Voiceflow

Amazon AlexaやGoogle Assistantに対応したボイスアプリの作成、プロトタイプや公開までを一括で行うことができるオンラインサービス。

voiceflow

 

 

Flawless Feedback

iPhoneとMacをミラーリングし、リアルタイムでフィードバックを残したり、共有、トラッキングできる無料ツール。

flawless-feedback

 

 

Hawkeye

iPhoneやiPadなどiOSデバイス上で、視線の動きを分析する「アイ・トラッキング・テスト」を行うことができるサービス。

hawkeye

 

ツールを実際に利用している様子が以下の動画。視線に合わせてヒートマップがリアルタイムで表示されているのが分かります。

 

 

Lint for Sketch

自分のデザインガイドラインに沿ってSketchファイルを検証、再設計してくれるSketch専用拡張プラグイン。

 

 

Charts for Sketch

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

charts-for-sketch

 

 

Vectary 3.0

ウェブサイトやソーシャルメディアなどで利用できる3Dデザインを手軽に作成できるツール。ブラウザ上で作成でき、コラボレーションにも向いており、アイデアをチームと共有したり、フィードバックを募るなど、デザインプロセスを円滑にする機能が満載です。

vectary-3

 

 

Haiku Animator

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

animator-by-haiku

 

 

Retest

ウェブサイトのURLを入力するだけで、異なるデバイスによる表示、クロスブラウザチェックをまとめて自動で行うことができる便利ツール。

retest

 

 

アイコン素材パック

DopeIcon

シンプルで使いやすいアイコン素材1000種類を揃えた有料コレクションで、毎週新しいアイコンがアップデートされています。100個の無料版からはじめてみましょう。

dopeicon

 

 

Ikonate

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

iknonate

 

 

Potlab Icons

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

potlab-icons

 

 

Classic Macintosh UI Kit

Appleが誕生した1984年当時に利用されていた、UIデザイン100種類以上を集めたフリー素材セット。アイコンやカーソルなどレトロなコンポーネント素材が揃います。

classic-macintosh-ui-kit

 

 

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

Honest Feedback

ポートフォリオの作成に困っているユーザーに向けて、フィードバックや改善点などを提供するシンプルで、とても便利なサービスのひとつ。特に学生ユーザーを想定しているそう。

honest-feedback

 

 

面白ツール

Tinkersynth

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

tinkersynth

 

 

Designer Bio Generator

デザイナーのユニークなプロフィールを自動生成してくれるサービス。ボタンをクリックすれば、ランダムでさまざまなプロフィールが表示されます。

designer-bio-generator

 

 

Speak Human

メルマガ登録やエラーメッセージ、ローディングなどウェブサイトでよく見かける「マイクロコピー」を自動生成してくれるジェネレーターツール。

speak-human

 

 

デザインコレクション

Product Design Tips

ユーザーエクスペリエンスやプロダクトデザインに関する世界中の記事をコレクションしているサイトで、Chrome拡張プラグインの他に、Slackによる購読も可能です。

product-design-tips

 

 

Awesome Design Tools

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

awesome-design-tools

 

 

Checklist Design

ログイン画面や金額表、404エラーページ、お問い合わせフォームなどUXやUIデザインのベストプラクティス集。

checklist-design

 

 

Ear Palettes

音楽アルバムカバーに発想を得た配色カラーパレットを集めたキュレーションサイト。

ear-palettes

 

 

Glide

PowerPointを使ったプレゼンテーションや資料作成に便利なスライドやモックアップ、アイコン、地図などを揃えた無料ライブラリ。

glide

 

 

Landing Stock

ランディングページをより効果的に魅せる美しいフリー写真をあつめたコレクションサイト。現在、「人物」と「テクノロジー」のジャンル分けがされており、今後もアップデート予定となっています。

landing-stock

 

 

Logo Grabber

開いているどんなサイトからも、ロゴデザインを見つけてダウンロードしてくれる、Chrome拡張プラグイン。

logo-grabber

 

 

Typography Resources

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

typography-resources

 

 

Workbench

画像ファイルのリサイズ、テキストの抜き出し、カラーパレットの自動生成、PSDからPNGファイルの変換などデザイン制作の生産性がアップするツールをまとめたライブラリ。

workbench

 

 

Humane by Design

モバイル技術の急激な成長によって、より人間らしい考え方をコンセプトの詳細、サンプル例などをスタイリッシュにまとめたサイト。

humane-by-design

 

 

その他のツールも試してみよう。

当ブログでは不定期となりますが、さまざまな最新ウェブツールや素材などをまとめてご紹介しています。自分のワークフローに合ったデザインツールを探して、試してみましょう。

 

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

 

参照元リンク@ : 36 New Design Tools, Spring 2019 – Prototypr.io