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

fresk-folk

 

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

 

うまくツールやサービスを利用することで、時間や労力の必要な作業もラクラクこなし、よりプロジェクトを円滑にすすめることができるでしょう。気に入ったツールを制作ワークフローに取り入れ、さらなる制作スピードアップを目指しましょう。

 

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

 

コンテンツ目次

 

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

 

イラスト系ライブラリ

Fresh Folk

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

 

 

 

FreeIllustrations

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

freeillustrations

 

 

 

Icons8: Vector Creator

かわいいイラストをお好みで組み合わせて、オリジナルベクターイラストを作成できるオンラインツール。完成したイラストのダウンロードも可能で、ジャンル別に探すこともできます。

 

 

 

Glaze

カテゴリ分けされたかわいいイラストを無料ダウンロードできるライブラリ。ブランディングやプレゼン資料作成など幅広く活用できます。

glaze

 

 

 

Freebies by People

フォントやアイコン、UIキット、HTMLテンプレートなどグラフィックからwebデザインの作成が捗る無料素材を集めたライブラリ。タブをオンにすれば、商用可能アイテムのみを絞り込むことが可能。

freebies-by-people

 

 

 

Open Doodles

かわいいユニークな手描きイラストをまとめてダウンロードできる無料コレクション。自由に色を変更できるオンラインジェネレーターも用意されています。

open-doodle

 

 

 

Web制作お役立ちツール

Screen Size Map

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

screen-size-map

 

 

 

Compress Studio

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

compress-studio

 

 

 

Dimensions

ウェブサイトに表示されている各要素間のピクセル幅を調べることができるChrome拡張機能。

dimensions-chrome

 

 

 

Pitch

プレゼンテーション資料をチーム間でコラボレーションしながら作成できるオンラインツール。美しいデザインのテンプレートも特長。

pitch

 

 

 

Animation Desk

スマホやタブレットで柔軟なアニメーションを作成でき、子供でもデザインできる手軽な操作性にも注目のアプリ。

animation-desk

 

 

 

Leon Sans

ウェブサイトやモバイルアプリでの利用を想定した、Canvasベースのデザインフォント。可読性の良い美しいサンセリフ書体をベースに、アニメーションやグラデーションなどのスタイルを自由に適用できます。

 

 

 

Resume Builder

海外向けのレジュメ(英: Resume)、履歴書を無料で作成できるオンラインツール。

resume_builder_-_create_a_resume_for_free_in_minutes

 

 

 

Generated Photos

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

100000-faces

 

 

 

Faces: Avatars without background

CC0ライセンスで完全無料で利用でき、同時に背景もカスタマイズできるアバター用テンプレート50種類を、FigmaとXD用でダウンロードできます。

avatar-faces-app

 

 

 

Upscale Pics

サイトにログインし画像をアップロードすると、余分な部分を自動的に取り除き、よりくっきりとした写真加工を行ってくれるツール。

upscale-pics

 

 

 

Naker.Back

インタラクティブな3Dアニメーションを無料で作成できるオンラインツールで、あらかじめ用意されたテンプレートをつかって、すぐにデザインを開始することもできます。

naker-back

 

 

 

Framer Guide to React

コンポーネントベースでJSを使って高速なウェブアプリを構築できるReact。これからReactを学びたいというひとに向けた電子書籍。サンプルコードもしっかり揃いますが、サンプルの閲覧にはFramer Xの無料トライアルへの登録が必要です。

framer-guide-to-react

 

 

 

Doka.photo

画像のりサイズや白黒フィルタ、コントラストや彩度の調整など、簡単な写真加工をオンライン上で行うことができるツール。

free-online-image-editor-doka

 

 

 

モックアップツール

Apple Mockups

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

apple-mockups

 

 

 

Shots Mockups

デザインコミュニティDribbbleやInstagramなどで作品をプレゼンするのに役立つ、ウェブデザイン向きモックアップライブラリ。現在50種類のテンプレートが公開されています。

shots-mockups

 

 

 

UiPrint

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

uiprint

 

 

 

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

Froala Pages

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

froala-pages

 

 

 

Builder

ドラッグ&ドロップでHTMLテンプレートを無料作成、ダウンロードできるツール。ランディングページやプロモーション、オンラインストア、ドキュメンテーションなどあらゆるデザインに対応できます。

builder-drag-and-drop

 

 

 

CSS Animo

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

css_animo

 

 

 

Kodika.io

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

kodika-io

 

 

 

Shade

コンバージョン率の高いランディングページを無料作成できるオンラインツール。スタートアップ向けの魅力的なテンプレートが多数揃っています。

shade-free-landing-pages-for-startup

 

 

 

プロトタイプツール

Design Systems for Developers

開発デベロッパー向けのデザインシステム制作完全ガイド。デザインシステムを作成しておくことで、チーム間での共通コンポーネントを瞬時に確認できます。

design-system-for-developer

 

 

 

Figgy

Figmaをダークモードに変換できたり、よりクールな見た目のロゴを表示したりできる無料のプラグイン。

figgy

 

 

 

Represent

Sketchでデザイン作成中に、アプリから離れることなくストリームライブやチャットなどを行うことができるプラグイン。クライアントやチーム間での利用にも素敵です。

represent-sketch

 

 

 

Color System Plugin for Sketch

プロトタイプ作成ツールSketchのインターフェースをダークモードに変更できるカラーシステム・プラグイン。

color-system-plugin-for-sketch

 

 

 

InVision: Design System Manager

デザインに必要なフォントや配色、スタイル、コンポーネントなどをまとめたデザインシステムを作成、管理、共有できるオンラインツール。

invision-design-stystem

 

 

 

Airtable to Figma

リアルなデータを使ってモックアップやプロトタイプを作成できるFigma用プラグイン。

airtable-dtaabse-plugin

 

 

 

Easometric

Figmaで立体的なアイソメトリック・イラストを手軽にデザインできるプラグイン。

easometric

 

 

 

Figmac

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

figmac

 

 

 

Visual Eyes

SketchやFigma、Adobe XDなどのプロトタイプツールで作成したUIデザイン、コンポーネントを、人工知能AIが効果的にデザインのアシスタントをしてくれるプラグイン。

visual-eye

 

 

 

アイコン素材パック

Milk Icons

18種類にカテゴリ分けされた3つのスタイル、合計1000以上のプレミアムアイコンが揃います。無料版はPNGのみ、プロ版はSVGなど複数ファイル形式でダウンロード可。

milk-icons

 

 

 

Movin Icons

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

movin-icons

 

 

 

Flawwwwless UI

React.js専用のオープンソース・コンポーネントライブラリ。ボタンやレイアウト、アイコン、メニューなど揃い、いわばBootstrapのReact版と言ったところでしょうか。

flawwwless-ui-icon

 

 

 

デザインコレクション

Copy Palettes

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

copy-palette

 

 

 

Email Love

Eメールデザイン制作の参考にしたいギャラリーサイト。実際に送信された魅力的なデザインが揃います。

email-love

 

 

 

Image Hues

フリーストック写真サイトUnsplashからセレクトされた写真の配色カラーパレットを表示し、クリックで#HEXカラーコードをコピペできます。

image-hues

 

 

 

面白ツール

Giphy Arcade

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

gifphy-arcade

 

 

 

Fake Clients

ロゴデザイン制作の架空プロジェクト案件を、ボタンをクリックするたびに提案してくれる、デザイン学習に便利なオンラインツール。

fake-clients

 

 

 

Record3D

iPhoneやiPadで撮影した動画を3Dビデオに変換し、ARでディスプレイ表示できるようにするアプリ。

record3d

 

 

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

当サイトでは、定期的に気になる新サービスやデザイン素材などをまとめて一覧リストアップしています。2019年に入り公開された、以下のサービスもチェックしてみてはいかがでしょう。

 

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

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

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

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

 

サムネイル@: An illustration library of people and objects – Fresh Folk