#Tinkersynth | Explore Tumblr Posts and Blogs

413-request-entity-too-large · 4 years

Text

2019年間ベスト！Web制作を変える便利オンラインツール厳選85個

2019年も残すところわずかとなり、今年もWeb制作を快適にするオンラインツールがたくさん公開されました。

この記事では、今年紹介したツールのなかでも特に話題になった2019年の便利オンラインツールベスト85個をまとめてご紹介します。

実際に制作フローに取り入れて便利だったツールを選りすぐったこのコレクションには、「無料で利用できることを基本としたツール」を揃えています。これらのツールやサービスを活用して、より快適なWeb制作ライフを過ごしましょう。

2019年に登場した最新オンラインツール一覧

以下は、2019年にかけて当サイトで紹介した、ウェブ制作が捗る便利ツール一覧となります。今回未紹介のツールが中心となっているので、こちらも一度目を通しておくことをオススメします。

http://bit.ly/2H59iHK

http://bit.ly/2H6Aztv

http://bit.ly/2X4mqqn

http://bit.ly/2Vg8oO5

http://bit.ly/2QmKQFh

http://bit.ly/2PZfwgL

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

コンテンツ目次

1. イラスト系ライブラリ

2. デザインコレクション

3. モックアップツール

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

5. Web制作お役立ちツール

6. プロトタイプツール

7. アイコン素材パック

8. 面白ツール

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

イラスト系ライブラリ

Fresh Folk

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

目次へ戻る

Mixkit Art

さまざまなスタイルの手描きイラストを無料ダウンロードできるサービスで、毎月定期的に公開アイテムがアップデートされています。

目次へ戻る

Illustrations

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

目次へ戻る

FreeIllustrations

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

目次へ戻る

unDraw for XD

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

目次へ戻る

http://bit.ly/2X71DCE

Abstrakt Illustration

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

目次へ戻る

404 Illustrations

ウェブサイトの404ページで利用できる、ユニークでかわいいイラストを集めた無料デザイン素材キット。

目次へ戻る

Paaatterns

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

目次へ戻る

Drawer

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

目次へ戻る

http://bit.ly/2YddVoL

デザインコレクション

SVG Arista

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

目次へ戻る

SVGator

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

目次へ戻る

Happy Hues

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

目次へ戻る

Culrs 2.0

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

目次へ戻る

ColorBox by Lyft Design

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

目次へ戻る

Copy Palettes

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

目次へ戻る

Muzli Search

このツールを利用することで、デザインのインスピレーションが欲しいときに、高品質なアートワークやロゴ、イラスト、写真のみを配色カラーパレット付きで検索できる、デザイン制作でも重宝するツールです。

目次へ戻る

http://bit.ly/2Jg1lj5

Vectornator Pro

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

目次へ戻る

Lunacy 4.0

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

目次へ戻る

http://bit.ly/2QmD4Lz

http://bit.ly/350WATh

http://bit.ly/2Suu2yY

Remove BG for Sketch

ボタンクリックひとつで人物を背景から切り抜くことができるあのサービスが、ついにSketchにも対応です。

目次へ戻る

http://bit.ly/2X22PXQ

Free Logo Maker

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

目次へ戻る

Gradienta

150種類以上のCSSのみでスタイリングされたグラデーションを無料ダウンロードできるオープンソースのプロジェクト。

目次へ戻る

Tartanify

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

目次へ戻る

Isobuild

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

目次へ戻る

Printable Design

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

目次へ戻る

Awesome Design Tools

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

目次へ戻る

Typography Resources

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

目次へ戻る

Really Good Emails 2.0

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

目次へ戻る

Figma Freebies

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

目次へ戻る

http://bit.ly/2QrGqwK

Brutalist Web Kit

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

目次へ戻る

Mixkit

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

目次へ戻る

http://bit.ly/39f25Rn

Fugue 2.0

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

目次へ戻る

モックアップツール

Apple Mockups

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

目次へ戻る

Frrames

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

目次へ戻る

UiPrint

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

目次へ戻る

Printable Mockups

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

目次へ戻る

Stacc

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

目次へ戻る

Screen Guru

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

目次へ戻る

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

Lottie Web Player

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

目次へ戻る

Haiku Animator

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

目次へ戻る

Froala Pages

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

目次へ戻る

Material Builder

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

目次へ戻る

Bulma Builder

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

目次へ戻る

Gapplin

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

目次へ戻る

Web制作お役立ちツール

CSS Wand

ホバーエフェクトやローディングなど、コピペで利用できるCSSスタイルコレクション集。`

目次へ戻る

CSSeffectsSnippets

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

目次へ戻る

CSSFX

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

目次へ戻る

CSS Animo

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

目次へ戻る

Get Waves

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

目次へ戻る

CSS Layout

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

目次へ戻る

Flowbase

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

目次へ戻る

&nbsp

Darkmode.js

Macではおなじみのダークモードをウェブサイトに導入できるJSプラグイン。参考サイトの右下に表示されたアイコンをクリックすると、実際に切り替わる様子を確認できます。

目次へ戻る

&nbsp

JS Cloudimage 360 View

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

目次へ戻る

&nbsp

Lax.js

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

目次へ戻る

&nbsp

Generated Photos

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

目次へ戻る

&nbsp

Responsive Viewer

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

目次へ戻る

&nbsp

http://bit.ly/2J0LPr9

&nbsp

Screen Size Map

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

目次へ戻る

&nbsp

LongLiveSS

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

目次へ戻る

&nbsp

Compress Studio

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

目次へ戻る

&nbsp

Kodika.io

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

目次へ戻る

&nbsp

Mind Map by RealtimeBoard

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

目次へ戻る

&nbsp

プロトタイプツール

Wireframer

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

目次へ戻る &nbsp

&nbsp

Figmac

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

目次へ戻る

&nbsp

http://bit.ly/2QrGqwK

&nbsp

Uizard

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

目次へ戻る

&nbsp

Flowkit

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

目次へ戻る

&nbsp

Charts for Sketch

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

目次へ戻る

&nbsp

Figma Auto Layout

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

目次へ戻る &nbsp

&nbsp

Logo Creator

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

目次へ戻る

&nbsp

アイコン素材パック

Zwicon

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

目次へ戻る

&nbsp

Movin Icons

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

目次へ戻る

&nbsp

Potlab Icons

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

目次へ戻る

&nbsp

ICONSVG

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

目次へ戻る

&nbsp

Ikonate

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

目次へ戻る

&nbsp

Eva Icons

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

目次へ戻る

&nbsp

Simple Icons

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

目次へ戻る

&nbsp

面白ツール

Drawow

子供の描いた絵をスキャンしアップロードすれば、２４時間でユニークなキャラクターにしてくれるサービス。

目次へ戻る

&nbsp

Canvas for Chrome

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

目次へ戻る

&nbsp

Streamlabs OBS

ゲームのプレイ実況などストリーミング配信をすぐに行うことができる無料ツール。

目次へ戻る

&nbsp

Jumprope

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

目次へ戻る

&nbsp

Sizle

プロ顔負けのプレゼンテーションに最適なスライドを作成できるオンラインサービス。テンプレートも多数用意されており、なめらかなアニメーションエフェクトも実装済み。

目次へ戻る

&nbsp

Gantt.io

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

目次へ戻る

&nbsp

Visual Sitemap

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

目次へ戻る

&nbsp

Tinkersynth

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

目次へ戻る

&nbsp

Giphy Arcade

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

目次へ戻る

&nbsp

It’s Centred That

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

目次へ戻る

&nbsp

http://bit.ly/2MtqjxC

&nbsp

PhotoshopVIPでは、2019年にかけて合計285個のオンラインツールを紹介してきましたが、2020年はWeb制作を便利にするどんなツールが登場するか楽しみです。

&nbsp

2019年間ベスト！Web制作を変える便利オンラインツール厳選85個はPhotoshopVIPで公開された投稿です。

0 notes