Advertisement

free-collection-of-handcrafted-patterns-1

 

この記事では、日常行っているWebデザインやグラフィックデザインの制作が格段スピードアップする、便利な最新オンラインツールをまとめてご紹介しています。

 

カテゴリ分けされたこれらのツールやサービスを利用することで、面倒な作業を自動化し、生産性をアップすることができるでしょう。一度使いはじめると「これなしじゃ考えられない。」、そんな便利ツールが揃います。

 

コンテンツ目次

 

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

デザインコレクション

SVG Arista

このツールはCSSコードを使って、アップロードしたSVGファイルのstrokefillプロパティのアニメーションを作成するAnimistaのスピンオフ・プロジェクト。

svg-arista

 

 

 

Free Logo Maker

ユーザー登録やクレジット表記なども不要、ロゴデザインを完全無料で作成、ダウンロードできるサービス。作成したロゴは、商用ライセンス対応となっています。

8-free-logo-maker

 

 

 

Greyhound Flowcharts

ウェブサイトやモバイルのプロトタイプ作成を数分で行うことができる、200を超えるフローチャートが揃ったUIデザイン素材集。

8-greyhound-flowcharts

 

 

 

Moose: Realistic Photo Collage

写真をしている合成の違和感を全く感じさせない、リアルなフォトコラージュ作成キット。性別はもちろん、年齢、言語、髪の毛、ボディタイプなどあらゆるソート分けを実現。ただしダウンロードは、有料ユーザーのみとなります。

8-icons8-photo-2

 

 

 

Really Good Emails 2.0

4,000を超える実際に使われているEメールデザインを集めたギャラリーサイト。

8-really-good-emails

 

 

 

Ant Design System for Figma

Reactをベースとした、Figma最大級のUIライブラリで、2100を超えるUIコンポーネントに、600個のアイコン素材、カスタマイズ可能なスタイルやスクリーンなど幅広く揃い、詳しい使い方をまとめたドキュメンテーション付き。

8-ant-design-system-for-figma

 

 

 

Atomize React

デザイナーとデベロッパーのコラボレーションをよりスムーズにしてくれる、React.jsのデザインシステム。

8-atomize-react

 

 

 

Brutalist Web Kit

最近のウェブデザイントレンドを多数盛り込んだ、70種類を超えるアートボードを収録したデザイン素材集。FigmaとSketchファイルで収録されています。

8-brutalist-web-kit

 

 

 

Elements For Sketch

無料のSketch専用UIデザイン、コンポーネントをダウンロードできるオンラインサービスで、同時にロイヤリティフリーの高画質フォトストック写真をEnvato Elementsより無料ダウンロードできます。

8-elements-for-ske5tch

 

 

 

Flawwwless UI

オープンソースで公開されているReact.js向けコンポーネントライブラリ。アプリの作成、アップグレードを手軽に行うことができます。

8-flawwwless-ui

 

 

 

Font Pair

フォントの組み合わせ見本をまとめたライブラリで、具体的なサンプル作例を確認できるだけでなく、どれもGoogleフォントで無料利用できる点もポイントです。

8-font-pair

 

 

イラスト系ライブラリ

Abstrakt Illustration

独特の作風の手描きイラストをSVGとPNGファイル形式で無料ダウンロードできるWebイラストサービス。

9-abstrakt-illustration

 

 

 

Delesign

ロイヤリティフリーで商用利用OKのイラストを無料ダウンロードできるライブラリで、自分でカラーの変更もできます。

9-delesign

 

 

 

Huge Illustration Pack & Creator

300以上のイラストに、50背景シーン、100種類のWeb用UIテンプレートなどが揃い、自分だけのイラストレーションを作成できる有料デザインキット。(価格$38)

9-huge-illustration-pack-crator

 

 

 

Isometric Illustrations

商用利用にも対応したMITライセンス付きで、遠近感を利用した3Dフラットスタイルのイラストを無料ダウンロードできます。

9-isometric-illustrations

 

 

 

Paaatterns

カラフルで美しいベクターパターンテクスチャを多数そろえたデザイン素材集で、SketchやFigma、XD,Illustrator用ファイルの他に、SVGとPNGファイルでダウンロードできます。

9-paaatterns

 

 

 

Stubborn Generator

着せかえ人形の要領でオリジナルのキャラクターデザインを作成できる無料イラストツール。Illustratorの他に、SketchとFigmaにも対応しています。

9-stubborn-generator

 

 

この他にもイラスト素材は多数公開されています、こちらも確認してみると良いでしょう。

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

 

モックアップツール

Frrames

Mac OSやWindows、iOS、Androidなどのスクリーン画面をそのまま再現できるモックアップフレーム集。SketchやPhotoshop、Adobe XD、Figmaなど多彩なデザインアプリ用ファイルが揃います。

2-frrames

 

 

 

Printable Mockups

ダウンロードしてそのままプリント印刷できる、さまざまなスクリーンサイズに最適化されたモックアップコレクション。

2-printable-mockups

 

 

 

Screenzy

撮影したスクリーンショットや写真画像を美しく加工してくれるサービス。画像をアップロードするだけで、ブラウザで閲覧した様子に仕上げてくれます。

2-screenzy

 

 

 

Stacc

動画ビデオを高画質なGIFアニメーションに変換してくれるサービス。FFMPEGという新しいファイル形式を採用し、ファイルサイズを落としながら、ビデオ出力のような画質クオリティを保つことができます。

2-stacc\

 

 

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

Balloon.css

JavaScriptを使わず数行のCSSのみで、デザイン要素にツールチップを追加できるちょっと嬉しい機能。

3-balloon-css

 

 

 

Bulma Builder

軽量で人気のCSSフレームワーク「Bulma」専用のエディタ、ビルダー機能で、コードを考えずに手軽にテンプレートを作成できます。

3-bulma-builder

 

 

 

Cookies by Axeptio

ウェブサイトのクッキーを新しい方法で保存、管理することができる新しいサービス。

3-cookies-by-axeptio

 

 

 

Gapplin

SVGファイルを開くことで、ウェブサイト用に最適化しレンダリングしてくれるMac専用アプリ。

3-gapplin

 

 

 

Get Waves

あらゆる波型シェイプにカスタマイズができ、そのままSVGファイルとして無料ダウンロードできるサービス。ウェブページのセクション項目同士のスペーサーとしても利用できます。

3-make-some-waves

 

 

 

Prototyping with React + Framer

ReactとFramerの使い方を学ぶオンラインスクールで、10種類のモジュール、15のプロジェクトなど充実の内容。

3-prototyping-with-react-framer

 

 

プロトタイプツール

Amazon Alexa for Adobe XD

ボイスコマンドAlexaにAdobe XDが対応しました。これで「アレクサ、Adobe XDを開いて」でプログラムを開くことができます。

4-amazon-alexa

 

 

 

Axure 9

ウェブサイトの設計を計画したり、プロトタイプ作成をコード不要でデザインし、デベロッパーへの引き渡しをスムーズにしてくれます。

4-axure-9\

 

 

 

Lunacy 4.0

SketchファイルをWindows上で、しかもオフラインで利用できるグラフィックデザインソフトウェア。

4-lunacy-4

 

 

 

Sketch Manager

Sketchを使った日常のデザイン業務をスピードアップさせる無料の拡張プラグイン。参考元サイトには、より詳しい使い方を紹介した動画も。

4-sketch-manager
 

 

生産性アップツール

Sizzy

ウェブサイト制作の途中で、さまざまなデバイス端末での表示確認をインスタントに行うことができる、時間短縮と生産性がアップするサービス。

 

 

 

Visual Sitemap

URLを入力するだけで、サムネイル付きのウェブ用サイトマップを自動生成してくれるツール。

8-visual-sitemap

 

 

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

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

 

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

 

サムネイル@ : Free collection of beautiful patterns for all vector formats – Paaatterns