Advertisement

 

この記事では、2020年に公開された便利なWebオンラインツール・ベスト100個をまとめてご紹介します。

 

定期的にリストアップしている最新オンラインツールまとめ記事では、2020年にかけて合計306個の新しいツールやサービスが登場しました。

 

その中でも、特にWebデザイン制作に便利なツールを選りすぐったコレクションで、「無料で利用できるツール」を揃えています。

 

これらのツールやサービスを活用すれば、Webデザイン制作をより快適に進めることができるでしょう。

 

カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。

 


コンテンツ目次

 

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

 

CSSツール

Neumorphism.io

話題のデザインスタイル「ニューモーフィズム」を手軽に表現できるオンラインツール。トグルを調整するだけでサイズや距離、ぼかし、シェイプ、色などをカスタマイズでき、ソースコードをそのままコピペできます。

Neumorphism(ニューモーフィズム)は、昨年末ごろより新しいデザイントレンドになるのではと話題となっている新しいデザイン手法です。 この記事で

 

 

CSSeffectsSnippets

テキストリンクやボタンをCSSでスタイリングしたスニペットをまとめたライブラリ。クリックするとCSSソースコードをコピーできます。

 

 

 

Knopf.CSS

あらゆるボタンスタイルを簡単に実装でき、CSSでカスタマイズも可能なモジュール形式のCSSボタンシステム。制作だけでなく、プロトタイプ作成にも重宝します。

knopf_css_-_open_source_button_system_leveraging_css_variables

 

 

 

CSS box-shadow Examples

さまざまなサイトで実際に使われているCSS box-shadowを集めているライブラリ。お好みの影エフェクトをクリックすれば、ソースコードのコピーが可能。

css-dropshadow-generator

 

マテリアルデザインや最近話題のニューモーフィズム・スタイルで見かける、立体感を演出するドロップシャドウ、影エフェクト。 CSS box-shadow

 

 

Brumm

まるで本物そっくりなリアルなドロップシャドウをCSSでスタイリング、カスタマイズできるオンラインツール。作成したCSSスタイルもそのままコピペで利用できます。

brumm-smooth-shadow

 

 

 

3D Book Image CSS Generator

本や雑誌を立体的なCSSアニメーション付きで作成できるニッチなオンラインサービス。

 

 

 

CSS 3D Transform Examples

遠近感を利用した、奥行き感のある3DデザインをCSSで表現するサンプル集。コードをそのままコピーできるので、カスタマイズも自由自在。

 

 

 

Dashed Border Generator

CSSのbackground-imageプロパティを利用し破線を作成できる、ありそうでなかったジェネレーター。

 

 

 

CSS Clip-Path Editor

あらゆる形のClip pathを編集できるオンラインツール。セッティングから図形を選択、または自分で描くことも可能。

 

 

 

Draggable Blend Generator

CSSブレンドモードの比較を左右ドラッグで確認できるミニHTMLスニペット。

 

 

 

Filter.CSS

ぼかしやグレースケース、明るさ、コントラストなどをCSSのみで適用できる、1KB以下の軽量CSSライブラリ。

filter-css

 

 

 

Pure CSS Halftone

写真をCSSフィルタだけでハーフトーンエフェクト風に仕上げることができます。

pure-css-halftone

 

 

 

Header CSS

ウェブサイトのレスポンシブ対応のヘッダーナビゲーションメニュー17種類が揃ったライブラリ。フレームワークを使わず、できるだけ少ないCSSコードで表現できます。

header-css

 

 

 

98.css | XP.css

クラシックなWindows 98 とXPのインターフェース・デザインをそのまま再現したCSSライブラリ。ボタンやチェックボックス、テキストボックス、ドロップダウンなどのコンポーネントが揃っているので、懐かしい90年代レトロインターフェースを作成したいときにどうぞ。

98-css

目次へ戻る

 

 

 

パターンツール

Pattern.css

CSSスタイルシートをサイトに読み込み、任意のクラス名を追加するだけで、CSSオンリーでスタイリングされた美しいパターンデザインを追加できます。

patterns-css

 

 

 

CSS Background Patterns

CSSだけで実装できる背景用パターンを、クリックひとつでコピペ、利用できるオンラインツール。波ウェーブやストライプ柄、ポルカドット、方眼紙など種類も豊富で、サイズや不透明度、配色などのカスタマイズも可能です。

 

 

 

Pattern Monster

継ぎ目のないSVGパターンをオンライン上で作成できるジェネレーターツール。現在100種類近くのパターンが公開されており、カスタマイズも可能です。

 

 

 

Patternico

継ぎ目のないシームレスなパターンデザインをブラウザ上でドラッグ&ドロップの直感的な操作でデザインできるツール。デザイン用に用意されたアイコンの他、画像ファイルをアップロードすることも可能。

seamless_pattern_maker_-_create_unlimited_seamless_patterns_for_free

 

 

 

Pattern Pad

さまざまなレトロスタイルを元にした、美しいおしゃれなパターンを作成、カスタマイズできるオンラインツール。

 

 

 

BGJar

ウェブサイトの背景デザインに適した、SVG画像をオンライン上で手軽に作成できる無料ツール。ボタン操作のみでカスタマイズを自由に行うことができ、商用利用にも対応しています。

 

 

 

Background Generator

ユニークな背景デザインを自動生成できる、シンプルでカスタマイズ可能なオンラインツール。さまざまなパターンを読み込むことで、魅力的で素敵な背景イメージを瞬時に作成できます。

目次へ戻る
 

 

 

イラスト系ツール

Scale

高品質なイラストが毎日アップデートされており、カラーピッカーでお好みの配色に変更することも可能。クレジット表記不要で、商用利用にも対応しています。

 

 

 

sapiens

男女のキャラクターイラストをカスタマイズおよび作成し、SVGまたはPNGファイルでダウンロードできるオンラインサービス。キャラクター作成アプリも$39で販売されています。

 

 

 

ITG Digital

人気のイラスト素材をニーズやシーンに合わせてカスタマイズ、作成しダウンロードできる新しいサービス。時間がないときや、同じスタイルで統一したいとき、高品質なイラストが欲しいときにオススメ。

itg-digital

 

この記事は、2019年4月23日の初投稿から再編集、アップデートを随時行っています。2020年2月25日に新しい無料イラストを加え、合計54個のフリー素材サイトを紹介し

目次へ戻る

 

 

デザインツール

Artify

膨大に揃うデザイン素材をつかって、直感的にデザイン作成できるオンラインベースのデザインエディター。無料ではじめることができ、作成したデザインをPNGファイル形式でダウンロード可能。

artify

 

 

Magma Studio

アーティストやチームがリアルタイムでキャンバスを共有、コラボレーションできるツール。プレビューでは、4人のアーティストが異なるスタイルを同時に描いています。

 

 

 

Gravit Designer

ダウンロード不要、ブラウザ上でベクターグラフィックを編集できるIllustrator代替アプリ。

gravit-designer

 

高価なソフトウェアを購入したり、アプリをインストールしたり、プロを雇うことなく自分で写真の編集や加工ができると想像してみましょう。 Photoshop
グラフィックデザイナーにとって、6万円近くする CorelDraw Suite を購入することは、最適な自分への投資と言えないかもしれません。また、Adobe製品の
これまでは絵やマンガを描くには、ペンと紙を使うということが当たり前でしたが、今ではパソコンを使って、手描きと変わらないレベルのイラストを制作することができるようにな

 

 

Artvee

世界的に知られる名画から、100年以上前に描かれたイラストや広告向けポスターデザインまで合計12,000点以上が揃い、クレジット表記なしで商用でも自由に利用できます。

artvee

 

パブリックドメインで商用利用もできる名画やイラストを検索、高画質で無料ダウンロードできる新しいサイト Artvee を今回はご紹介します。 世界的に知

 

 

Image Colorizer

白黒写真をアップロードすると、人工知能テクノロジーによって自動で色付け、ペイントしてくれるサービス。

imagecolorizer

 

 

 

AI Image Enhancer

写真をアップロードすれば、AIが色合いやコントラストを自動で調整し、写真のクオリティを改善してくれるオンラインツール。

ai-image-enlarger

 

 

 

HEICtoJPEG

HEIC形式の画像ファイルをJPGに変換できるツール。これで、iPhoneで撮影した画像がPCで見ることができます。

 

 

 

Smart Upscaler

画像をアップロードすると、画像のクオリティーを下げることなく最大3,000×3,000pxまで、自動で拡大してくれるオンラインツール。

 

 

 

remove.bg: Remove Backgrounds 100% Automatically

画像をアップロードしてほんの数秒待つだけで、人物を切り抜いてくれる人気ウェブサービスが、Androidスマートフォンでも可能になりました。新しい背景の追加にも対応。

remove-bg-for-android

 

 

 

Background Remover

人工知能の進歩のおかげで、2020年は多くの背景切り抜きツールが登場しました。後発となりますが、動物の毛など複雑な選択範囲機も、正確に自動切り抜きしてくれます。

目次へ戻る

 

 

 

配色カラーツール

Colorsinspo

数千を超える美しい配色カラーパレットをワンクリックでコピーできたり、さまざまなカラーツール、ブランドカラーなど、配色にまつわる素材を揃えた総合サイト。

 

 

 

Farbvelo

ボタンをクリックするだけで美しい配色カラーパレットを提案してくれるツール。色数やカラーモードなど詳細設定も可能で、クリックでHEXコードもコピーできます。

 

 

 

Sorted Colors

スライダーを左右に動かすことで、HEXカラーコードではなく、名前のついたCSSカラーで直感的に配色を選ぶことができるツール。

 

 

 

2 Color Combinations

2色の美しい配色カラーを集めたライブラリで、クリックひとつでHEXカラーをコピペできます。

 

 

 

Palette List

用意された12色の中からお好きな色を2色選ぶだけで、関連するカラーパレットを1万以上も提案してくれるオンラインカラーアプリ。気に入ったカラーパレットは、SVGやSASS、CSSで無料ダウンロードできます。

palette_list_-_color_palette_generator_-_10_000__palettes

 

 

 

Colour Contrast Checker

2色のカラーリングのコントラスト比をライブプレビューで確認できるオンラインツール。お好みのフォントを選択できます。

 

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

目次へ戻る

 

 

グラデーションツール

Glitch Art Generator

カラフルなグラデーションをつかった、さまざまなスタイルのグリッチエフェクトをオンラインで自動作成できるツール。グリッチの量や方向などもカスタマイズ可能。

glitchart-io

 

 

 

CSS Gradient Animator

美しく色が変化するアニメーション付きCSSグラデーションをその場で作成し、CSSコードをコピーできるオンラインツール。Spaceキーでランダムに色を変更できます。

css_gradient_animator___fuze

 

 

 

Multicolor Gradients

軽量でカラフル、レスポンシブにも対応したグラデーションカラーをコレクションしたサイトで、他では見かけないアート性の強い作品が中心に揃います。個人及び商用利用で利用できます。

frame-1-7

目次へ戻る

 

 

 

SVGツール

Squircley

デザイン制作で使える美しいSVGシェイプを作成、エクスポートできるオンラインツール。ナチュラルで自然な形状が特長で、ボタンひとつでコードをコピー、保存できます。

 

 

 

Custom Shape Dividers

波型やジグザグ、矢印などさまざまなシェイプを使い、ウェブサイトのコンテンツわけに便利な境界線デザインを作成するWebアプリ。色やサイズ、シェイプを決定したら、あとはSVGファイルでダウンロードするだけ。

 

 

 

Warp SVG

お好みのSVGファイルをアップロードし、シェイプを自由に変形ワープできるオンラインツール。スクロールでズームイン・アウトできます。

 

 

 

SVG Path Editor

SVGファイルのパスをオンラインで自由に編集できるパスエディター。

 

 

 

Blobs

手書きしたアメーバのようなナチュラルなシェイプをSVGファイルで作成できるWebアプリ。Changeボタンでランダムに形状が変化し、微調整を行うことも可能。MITライセンス。

 

 

 

SVGOMG

IllustratorやSketchなどで書き出したSVGファイルを、Webサイト表示用に最適化してくれるツール。不要なテキストを削除し、読みやすいコードに変換してくれるので、サイトにSVGファイルを使うときはぜひ。

svgomg

 

 

 

Convert2SVG

JPEGなどの画像ファイルをアップロードするだけで、SVGファイルに変換してくれるツール。デフォルトの他にも合計15種類のコンバージョン設定あり。

 

 

 

Convert SVG to PNG

SVGファイルをアップロードすると、PNGファイルの他に、JPGやPDFファイルに自動変換してくれるオンラインツール。

converter-slug

目次へ戻る

 

 

 

スクリーンショット系ツール

Screen Bean

撮影したスクリーンショットをアップロードすれば、使用されている配色を自動抽出し、美しい背景デザインを追加できるツール。

 

 

 

BrowserFrame

各種ブラウザ付きでスクリーンショットを撮影できるオンラインツール。目的のURLを入力するだけで、複数のブラウザやオペレーティングシステム、テーマに対応します。

browserframe-1

 

 

 

Snippet Shot

ソースコードの美しいスクリーンショットを作成できるオンラインサービスで、言語や配色をお好みで選択できます。

snippet_shot

 

 

 

Website Screenshot API

ウェブサイトのアドレスを入力するだけで、美しいスクリーンショットを作成してくれるオンラインツール。ページまるごとスクショしたり、縦横サイズを指定できるなどカスタマイズ性にも優れたツール。

screenshot-api

 

 

 

Limus

撮影したスクリーンショットをアップロードすれば、異なるアングルから見たユニークなスクリーンショットに自動変換してくれます。

limus

目次へ戻る

 

 

 

アイコン系ライブラリ、ツール

Free Favicon Maker

SVGでできたファビコンを手軽に作成できるオンラインツール。使用する書体やサイズ、配色なども変更でき、SVGとPNGファイルとしてエクスポート可能。

 

 

 

Icônes

オープンソースのアイコンをコレクションしており、まとめて検索や、オリジナルのアイコンパックを作成、ダウンロードできるサイト。現在、90以上のプロジェクトに対応中。

 

 

 

Motion

アニメーション付きSVGアイコンをカスタマイズ、無料ダウンロードできるエディター。MacとWindowsどちらでも利用可能。

motion

 

 

 

SVGBOX

操作はいたってシンプルで、お好みのアイコンを見つけて、出力されたコードをコピペするだけ。SVGアイコンを手軽にウェブプロジェクトに追加できるAPIサービス。

 

 

 

Tabler Icons

558個のカスタマイズ可能なSVGアイコンが揃った、MITライセンスで完全無料のライブラリ。シンプルで使い勝手の良いアイコンデザインも素敵。

tabler_icons_-_550__highly_customizable_free_svg_icons

 

この記事では、ウェブサイトのUIデザインに便利な、無料の人気SVGアイコンライブラリをまとめて紹介しています。 豊富な収録数に加え、サイズや配色などの

 

 

500+ CSS Icons

CSSのみでスタイリングされた500種類以上のアイコンパック。カスタマイズ自在で、レティナディスプレイにも対応しています。

500-css-icons

目次へ戻る

 

 

 

フォント、書体系ツール

Capsize

ベースとなる書体に合わせて、適切な文字間と行間を提示してくれるオンラインツール。Webサイトのフォントサイズに困ったときに便利。

 

 

 

Typeculator

ベースとなるフォントサイズを決めるだけで、さまざまな大きさの見出しタイトルを自動計算してくれるオンラインツール。

typeculator-1

 

 

 

The Good Line Height

フォントサイズを入力すると、それにふさわしい行間を教えてくれる便利ツール。

 

 

 

Font In Logo

世界的に有名なブランドのロゴに使用されているフォントをまとめた検索ギャラリーサイト。ロゴからフォントを探すのはもちろん、フォントから使用しているブランドを検索するのにも便利。最後はフォントの購入までサポート。

font-in-logo

目次へ戻る

 

 

 

アニメーションツール

Easings.co

滑らかなアニメーションに欠かせないイージングを、一般的なインターフェースをつかったサンプル例5つで確認、調整できるオンラインツール。カスタムで自分専用のペジェ曲線を試すこともできます。

easings

 

 

 

Keyframe.app

CSSの複雑な@keyframeアニメーションを、タイムライン付エディタで確認しながら調整、作成できるビジュアルツール。

keyframes-app

目次へ戻る

 

 

 

ラーニング教材ツール

2020年度末のCSS総まとめ!有用でオススメな覚えておくべき新仕様をコードと画像付きで解説

2020年に実装されたものを中心に、有益でオススメできるCSSを簡単かつできる限りていねいに書かれています。

 

 

 

Grid Cheatsheet

CSS Gridプロパティの使い方をインタラクティブなデモと一緒にまとめたチートシート。レイアウトや要素の並べ方などに困ったときの確認用に便利。

grid_cheatsheet

 

この記事では、CSS FlexboxとGridをつかってお好みのレイアウトを作成するコツやポイントをまとめた使い方ガイドやチートシート、ゲームなどをまとめて紹介して

 

 

Flexo

Flexboxの仕組みについて、インタラクティブなデモと一緒に学びます。ボタンを切り替えることで、レイアウトを自動的に変化するため、Flexboxを体感的に覚えることができます。

 

 

 

Learn CSS Positioning

ウェブデザインにおけるCSSによる「配置」について分かりやすくまとめたチートシート的リソース。

css_positioning

目次へ戻る

 

 

Web便利系ツール

VvvebJS

人気フレームワークBootstrap4をベースに、オンライン上でドラッグ&ドロップでランディングページなどを作成できるHTMLページビルダー。各デバイスでの表示確認や独自スタイルの保存なども可能。

vvvebjs-1

 

 

 

The Hero Generator

ウェブサイトの魅力的なヒーローイメージを作成できるオンラインツール。グラデーションオーバーレイやボタンスタイル、見出しタイトルの余白など細かい部分も手軽に調整できます。

hero-generator

 

 

 

Tailblocks

人気の軽量CSSフレームワークTailwindをベースに、UIコンポーネントで組まれたブロック要素を多数揃えたHTML/CSSビルダーツール。ソースコードのコピペはもちろん、カラースキン変更やレスポンシブレイアウトによる確認、話題のダークモードにも対応。

tailblocks

 

 

 

Neumorphism UI

新しいデザインスタイル「ニューモーフィズム」を人気定番CSSフレームワークBootstrapで再現し、200種類のUIコンポーネントを揃えたHTMLテンプレート。

neumorphism-ui

 

 

 

Arwes UI

映画で出てきそうな、SFやサイバーパンク感満点のウェブサイトやスマホアプリ向けUIフレームワーク。電子的なクリック音も雰囲気抜群。

arwes_-_sci-fi_ui_framework

 

 

 

Blocksy

コード知識不要で美しいウェブデザインを数分で作成できるWordPressテーマ。無料ながら有料版にも負けない高機能さが、圧倒的な読み込み速度をうたっています。

blocksy_-_free_premium_gutenberg_wordpress_theme

 

 

 

Rough Notation

Webページにアニメーション付きの注釈メモやハイライトなどを追加できる、3.8KBの軽量JavaScriptライブラリ。アニメーション時間や遅延などの設定も行うことができます。

roughnotation

 

 

 

Bar Chart Race Generator

棒グラフでデータの変化を、まるでレースのようなアニメーション付きで表現できるオンラインツール。サンプルデータとして、新型コロナの感染状況を国別にまとめています。

 

 

 

ztext.js

Web上で文字テキストを3Dに変換し、カーソルやスクロールのに合わせて自由に動かすことができるライブラリ。data属性を利用した実装しやすさもポイント。

ztext-js

 

 

 

Responsively App

複数のスクリーンサイズでレスポンシブの確認できるアプリ。表示したすべてのデバイス上で動きがミラーリングされ、個別デバイスごとにインスペクタを表示、スクリーンサイズ撮影にも対応と、ウェブ制作時間を大幅に短縮する無料ツール。

responsively

 

 

 

LT Browser

25を超えるさまざまなスマートフォン端末別にレスポンシブウェブサイトを確認できる、デベロッパーフレンドリーな検証ツール。

 

 

 

Responsive Image Breakpoints Generator v2.0

画像をアップロードすると、複数のブレイクポイントに合わせて画像サイズを自動変換し、出力コードもコピペできます。レスポンシブサイト制作に必須のアイテム。

responsive_image_breakpoints_generator_by_cloudinary

 

 

 

Studio

ウェブサイトのデザインから公開、CMS機能までを完結できる、日本発の国産Webデザインツール。

studio-3

 

ウェブサイト作成に必要なツールがひとつに揃った、国産Webデザインプラットフォーム「Studio」。 コーディングの知識も不要で、Webやアプリデザイ

 

 

Eazy CSS

どんなウェブサイトのデザインも、コード知識不要でタブ操作のみで変更でき、完成したデザインは直接ソースコードでコピペ可能、ノーコード革命です。

eazycss

目次へ戻る

 

 

 

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

Pexels for Figma

プロトタイプツールFigmaアプリ上で、フリー写真の検索を行うことができるプラグイン。検索できる写真は、どれもクレジット表記で商用利用にも対応しており、編集も自由自在。

pexel-for-figma

 

 

 

Origami 3

Facebookが作成したプロトタイプツールで、デザインからアニメーションまですべてをひとつのツールで完結させたサービス。

 

 

 

Free Auto-Animate UI Kit

Adobe XD用UIデザインキット50種類セットで、どれも魅力的なアニメーションが実装されているのが特長。

50-screen-auto-animate-free-ui-kit

 

 

 

Anima for Figma

アニメーションなどの動きも加えたインタラクティブなプロトタイプを作成し、ボタンひとつでHTMLに変換できるツールがFigmaについに対応。Lottieアニメーションなども利用でき、より魅力的なプロトタイプ作成を手軽に行うことができます。

anima-for-figma-1

目次へ戻る

 

 

 

面白、クリエイティブ系ツール

Coronavirus Country Comparator

新型コロナウイルスの世界各国の感染状況をリアルタイムのグラフで比較できるオンラインツール。グラフに表示したい国を選択でき、期間や完治したひとの数など細かく確認できます。

coronavirus_country_comparator

 

 

 

NoisyLoop

世界中の街なかの喧騒、ノイズをそのままBGMとして試聴できるオンラインサービス。オフィスやカフェ、香港のストリート、インドの野菜市、タイの郵便局などユニークな場所で録音されています。

noisyloop

 

 

 

Sound of the Forest

世界中の森林の音を集めたオープンソース・ライブラリ。ヨーロッパや北米が中心ですが、アフリカやブラジル、中国などで録音した音も。残念ながら日本の音は、現時点では未収録。

sounds-of-the-forest

 

 

 

lobe Ai

手軽な操作のみで、機械学習や人工知能モデルを訓練させることができる、まさに未来な無料ツール。

 

 

 

Pose Animator

あらかじめベクターイラストを取り込み、FaceMeshとPoseNetというカメラ認識技術を使い、リアルタイムでイラストをアニメーション化できるスクリプト。

 

 

 

3D Photography using Context-aware Layered Depth Inpainting

一枚の静止画を立体的な3D写真に変換するプロジェクト。3Dエフェクトをどのように作成するのか示したソースコードも公開中。

 

 

 

Sketch2Code

紙とペンで手書きしたスケッチ画をアップロードすると、HTML5形式に自動で変換してくれる、AIをつかったMicrosoftの未来を感じるサービス。実際にイラスト画をその場で変換してくれますよ。

sketch2code

 

 

 

Link to QR

URLリンクをQRコードに変換してくるサービスで、サイズや色なども自由に指定できます。

 

 

 

Luckysheet

Excelに負けない高機能のオンライン・スプレッドシートを作成でき、完全フリーのオープンソースプロジェクト。

 

 

 

Board

真っ白のホワイトボードを、離れていてもオンライン上で共有できるより直感的なコラボレーションツール。Shiftを押しながらペンで入力すれば、クリックする必要もないなど、使い心地にもこだわったお気に入りツール。

whiteboard

 

 

 

BeeCanvas

文字や画像、音声、動画などあらゆるファイルを、複数人のチームで同時に編集、デザインできるホワイトボード機能。リアルタイムで共同作業を行うことができ、ドラッグ&ドロップのシンプルな操作性も○。無料版あり。

 

 

 

Xpression

ビデオチャットやライブストリーム用に、自分の顔を世界の偉人に変えてしまうバーチャルツール。

 

 

 

Procedural City Generator

架空の都市をGoogleマップ風地図で作成できる、オープンソースのWebアプリ。画面右側にある詳細パネルを設定し、Generateボタンを押すだけのお手軽さ。STLやHeightmapなどの3Dレンダリングにも対応。

city-generartor

 

 

 

City Roads

地名や都市名を入力すると、その街の道路だけを抽出、表示してくれるアート性の高いオンラインツール。日本の地名にももちろん対応しています。

draw-all-roads-in-any-city

 

 

 

Free Sound Effect from Mixkit

動画編集で活用したい、高品質なサウンドエフェクト、効果音を無料ダウンロードできるサイト。この他にも、ハイクオリティな無料動画の配布も行っています。

 

 

 

Youtube Tag Generator

YouTubeで動画を投稿するときに追加しておきたいハッシュタグをリストアップしてくれるツール。日本語にも対応しています。

youtube-tag-generator

 

 

 

808303studio

TR-808ドラムマシーンとTB-303ベースシンセサイザーを、手元のキーボードキーを押しながら、実際に体験できるオンラインサイト。

 

 

 

Jazzkeys

ランダムな文字テキストの入力に合わせて、ジャズミュージックを即興で再生してくれるユニークなサービス。

jazzkeys

目次へ戻る

 

 

他のオンラインツールもチェックしよう

 

2020年に紹介した、この他のオンラインツールも一緒に確認してみてはいかがでしょう。

 

この記事では、Web制作が快適に捗る、便利な最新オンラインツールをまとめてご紹介しています。 新型コロナウイルスによる影響で、在宅によるリモートワーク
この記事では、Webデザインやグラフィック制作がぐっと快適になる、最新便利オンラインツール、無料デザイン素材をまとめています。 これらのツールやサービ
この記事では、日々進化を続けるWeb制作で役立つ、便利な最新オンラインツールをまとめてご紹介しています。 Ai、人工知能を利用した、これまで面倒だった
この記事では、ますます進化するウェブ制作の現場で重宝する、便利な最新オンラインツールをまとめてご紹介します。 「こんなツールが欲しかった」をかたちにし
この記事では、Webデザインやグラフィックデザインの制作スピードを短縮し、生産性をアップする、便利な最新オンラインツールをまとめてご紹介します。 「も
この記事では、Webデザインやグラフィックデザインの制作スピード、生産性がアップする、便利な最新オンラインツールをまとめてご紹介しています。 カテゴリ
この記事では、2020年に入ってから公開された、Webデザインを快適にする最新オンラインツールをまとめてご紹介します。 ウェブデザインに限らず、グラフ