Advertisement

 

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

 

これらの新しいツールやサービスを利用すれば、これまで後回しにしていた面倒な作業も自動化し、生産性アップ、円滑なプロジェクト進行を実現できるでしょう。「もっと早く知っておけばよかった」と思わせてくれる便利ツールが揃います。

 

 

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


コンテンツ目次

 

新型コロナの影響で無料提供中のオンラインツール、サービスまとめ

adobe-cc-60days-for-free

 

現在新型コロナウイルスの世界的流行の拡大によって、無料提供されているオンラインツールやサービスをまとめたエントリー。

 

動画編集ソフトFinal Cut Pro Xや音楽制作ソフトLogic Pro Xなど、値段で利用を諦めていたアプリを無料で体験できるチャンスです、これを機会にいかがでしょう。

logic_pro_x_-_apple
新型コロナウイルスの急速な拡大によって、他人と距離を1メートル、できれば2メートルのソーシャルディスタンスをとりましょう、という考え方から、不要不急の外出を控えて、自宅にこもりがち

 

 

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

デザインコレクション

Hex Palette

配色のアイデアに困ったときに確認したい、ランダムで美しい4色カラーパレットを集めたライブラリ。

hex-palette

 

 

 

Colors.lol

名前が存在しない色に、人工知能をつかってユニークなネーミングを決め、作成された配色カラーパレットコレクション。

colors_lol_-_overly_descriptive_color_palettes-1

 

 

 

Duo

デザイナーが個人プロジェクトで利用、作成した2色の組み合わせをひたすらコレクションしたページ。どれも美しくて、参考にしたくなる配色が中心で、現在101種類が公開されています。

duo

 

 

 

Parametric Color Mixer

オーディオファイルをミックスするように配色をミックスする配色新ツール。つまみを回して、お好みの色合いを正確に調整できます。

 

 

 

Color Contrast Checker

任意の色を入力すると、コントラスト比がどれくらいか分析し、よりコントラストの高い似た色を提案してくれるAiツール。

color_contrast_checker__analyser_and_color_suggestions___polypane_browser_for_dev___design

 

 

頭を悩ますことの多い「配色」にまつわる便利ツールをまとめたこちらの記事も参考にいかがでしょう。

color-tool2015-top
この記事は、2016年8月22日に公開してから再編集、アップデートを随時行っています。新しいツールを加え、サービスが終了しているツールは削除し、合計66個の配色ツールサ

 

CSS Color Gradient Generator

2つ以上の色をなめらかにブレンドしたCSSグラデーションを作成できる新しいツール。これまでのツールとの違いは、線形や放射状グラデーションの他に、特定のポイントカラー放射状に色が広がるなどユニークな効果も可能。

css-color-gradient-generator

 

 

 

Beautiful Dingbats

水玉ドット柄やストライプなどを選び、お好みの配色やサイズ、シェイプなどを変更し、自由に継ぎ目のないパターンテクスチャをオンライン上で作成できます。

beautiful_dingbats__seamless_pattern_generator

 

 

 

Doodle Patterns

ゆるい手書きスタイルの継ぎ目のないシームレスパターン61枚を提供しているサイト。一部有料アイテムもありますが、無料でも十分活用できそうなアイテムが揃います。

doodle-patterns

 

 

 

Unscreen

短い動画クリップまたはGIFアニメーションをアップロードするだけで、背景のみを切り抜いてくれる画期的なツール。

 

 

 

Neon: Color and Gradient Maker

iPhoneで撮影した写真から自分だけの美しいグラデーションカラーを作成できるカラーアプリ。

neon-2-0

 

 

 

Camille 2.0

モバイル端末をつかって、3Dオブジェクトやバーチャルワールドを作成できるアプリ。iOSおよびAndroid両方に対応。

camille-2-0

 

 

 

The Pentool

デザイナーがデザイナーのために作成したデザインアセットライブラリ。イラスト集からメールテンプレート、ビジュアルデータまで、ウェブ制作で必要なものを素早く手に入れることができます。一部有料アイテムもあります。

thepentool-toolbox

 

 

 

Kidpofy

子供が書いた手書き文字を、デジタルフォントに自動変換し、生涯保存できるようにするアプリ。作成したフォントでグリーティングカードや招待状など作成してみましょう。

kidpofy-caligraphy-to-font

 

 

 

Glyphfinder

特殊記号を集めたグリフセットから、普段見つけることができない文字を検索、発見できる有料ツール。30日間の無料体験トライアルあり。

glyphfinder

 

 

 

イラスト系ライブラリ

Black. Illustrations

黒人をテーマにしたイラスト40種類セット。パブリックドメインで無料利用でき、AiやPSD、XD、Figma、Sketch用ファイルがそれぞれ用意されています。

black-illustrations

 

 

 

Control.

108種類のユニークでかわいい手書きイラストレーションを揃えた素材集。無料版ではPNGファイル形式のみですが、個人および商用利用も可能となっています。

control-illustrations

 

 

 

Faux Code Generator

コードサンプルをSVGイラストで自動生成するジェネレーター。Github Gistを入力し、LightとDarkテーマを選択、ラインの形を選んだら、Create Faux Codeボタンで完了。

faux-code

 

 

 

Pixeltrue

ヘタウマな手書きSVGイラストとLottieアニメーション用ファイルを無料ダウンロードできます。MITライセンスで個人、商用利用に対応しています。

pixeltrue-free_vector_illustrations

 

 

 

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

More Toggles.css

用意されたCSSスタイルシートを読み込み、任意のクラス名を設定するだけで、あらゆる種類やスタイルのトグルデザインをウェブページに実装できます。

moretoggles_css_-_all_styles

 

 

 

The Simpsons in CSS

CSSのみで作成、スタイリングされたSimpsons(シンプソンズ)のキャラクターをまとめたライブラリ。ViewCSSでコードを確認、コピーできます。

the-simpsons-in-css

 

 

 

Spinners React

React用の読み込みローディングアニメーションを作成できるオンラインツール。サイズや色、スピードなどを調整したら、出力されたコードを貼り付ければ完了。

toolbox-1

 

 

 

Web制作お役立ちツール

89 Elements

ウェブサイト制作で必要であろうUIコンポーネント一式が揃った無料HTMLテンプレート。使いたいコンポーネントを選び、コードをコピーするだけで、美しいウェブサイトを瞬時に作成できます。

89elements

 

 

 

BEM Cheat Sheet

BEM命名規則をまとめたチートシートは、web制作で普段から利用するコンポーネントをサンプル例に、触りながら理解できるインタラクティブなオンラインガイド。

bem_naming_cheat_sheet_by_9elements

 

 

 

Checklist

デベロッパーやデザイナーがプロジェクトや開発で確認したい項目をまとめたライブラリ。完了した項目にはチェックを入れていくことで、ケアレスミスを防ぐことができます。

checklist

 

 

 

Corebook

質問に沿って答えていくだけで、ブランドの一貫性、統一感を高めるブランディング向けスタイルガイドを作成できるオンラインツール。

corebook

 

 

 

CSS2JS

CSSをJavaScript用のコードに変換してくれるコンバーター。ユーザー登録なども不要で、無料で利用できる便利ツール。

css2js

 

 

 

Fabula

iPhoneを使ってWebアニメーションを作成できるだけでなく、検証までできるアプリ。細かい調整もその場でリアルタイム確認でき地味に便利。

fabula

 

 

 

Midori

アニメーション付きの画像背景スライダーを手軽に実装できるJSライブラリ。あらかじめエフェクトが用意されており、どれもAfterEffectsのようなインタラクティブな動きに注目です。

midori
 

 

 

プロトタイプ、モックアップツール

Animockup

アニメーション付きのデバイス向けモックアップをオンライン上で無料作成できるツール。iPhone 11やMacbook Pro、iMac、Apple Watchなどのデバイスから選択可能で、カンバスサイズなども調整できます。

animockup_-_free_animated_mockup_maker

 

 

 

Tetrisly

プロトタイプツールFigmaで、デザインシステムとフレームワークを作成するスターターキット。2,500を超えるコンポーネントがオーガナイズされた巨大ライブラリ。

tetrisly

 

 

 

Tracking for Figma

このプラグインを利用すれば、Figmaファイル上で注釈メモを直接作成、添付およびリアルタイムでの更新も可能です。修正箇所のやりとりがよりスムーズに。

tracking-for-figma

 

 

 

コラボレーションツール

Markup

このツールをウェブサイトに導入すれば、フィードバックとコラボレーション向けのダイナミックなカンバスに変換、利用できます。チーム間での共同作業をより手軽に、素早く行うことができます。

markup

 

 

 

Minty 3.0

世界中でフリーランスとして活動するイラストレーターに、直接デザイン依頼をでき、利用ライセンスやダウンロード詳細などもコラボレーションごとに決定できます。

minty-3-0

 

 

 

アイコン素材パック

Flat Icons

高品質なイラストアイコン素材を数多く公開しているサイトで、無料で提供されている素材もクオリティーの高さがひかります。

flat-icons

 

 

 

Unicons

24pxのミニサイズSVGアイコン1,100種類以上が無料で提供されているコレクション。27のカテゴリを網羅しており、SVGアイコンおよびWebフォントとしても利用可能。

2200__free_vector_icons_-_unicons

 

 

 

面白ツール

Unminus

動画制作で利用できる、プロ級のプレミアム音楽を無料ダンロードできるサイト。ロイヤリティフリーで、商用プロジェクトにも対応しています。随時アップデートされ、定期的に新曲が追加されています。

unminus

 

 

 

Spike

ユーザー登録はもちろん、インストールも不要で、複数のユーザーとビデオチャットを行うことができるフリーアプリ。Spikeを利用していないユーザーでも無料で利用できます。ただしファイル共有などは

stripe

 

 

これまでのベストツールもチェックしよう

当サイトでこれまでに紹介したその他のツールも確認してみましょう。特に便利なツールのみを厳選し、定期的にまとめています。

 

best-of-online-tools-in-2019-1
2019年も残すところわずかとなり、今年もWeb制作を快適にするオンラインツールがたくさん公開されました。 この記事では、今年紹介したツールのなかでも
itg-digital
この記事では、2020年に入ってから公開された、Webデザインを快適にする最新オンラインツールをまとめてご紹介します。 ウェブデザインに限らず、グラフ
fresk-folk
この記事では、Webデザインやグラフィックデザインの制作スピードが爆速になる、便利な最新オンラインツールをまとめています。 うまくツールやサービスを利
free-collection-of-handcrafted-patterns-1
この記事では、日常行っているWebデザインやグラフィックデザインの制作が格段スピードアップする、便利な最新オンラインツールをまとめてご紹介しています。
css-wand
この記事では、Webデザインやグラフィックデザインの制作が捗る、公開されたばかりの最新便利オンラインツール、無料デザイン素材をまとめています。 これら