Advertisement

warp_svg_online-1

 

この記事では、ますます進化するウェブ制作の現場で重宝する、便利な最新オンラインツールをまとめてご紹介します。

 

「こんなツールが欲しかった」をかたちにした、制作ワークフローを改善できる時短ツールが多数揃っています。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。
 

前回のオンラインツールまとめと一緒に確認しておくと良いでしょう。

palette_list_-_color_palette_generator_-_10_000__palettes
この記事では、Webデザインやグラフィックデザインの制作スピードを短縮し、生産性をアップする、便利な最新オンラインツールをまとめてご紹介します。 「も

 


コンテンツ目次

 

Web制作が面白いほどはかどる!便利な最新オンラインツールまとめ

Web制作便利ツール

Squircley

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

 

 

 

Warp SVG

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

 

 

 

Bar Chart Race Generator

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

 

 

 

Blocksy

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

blocksy_-_free_premium_gutenberg_wordpress_theme

 

 

 

Web Stories for WordPress

まだベータ版ですが、Instagramのストーリー機能をWordPressにも実装できる、Google謹製プラグイン。使いやすいインターフェース、すぐに使えるテンプレートも用意されています。

web_stories_for_wordpress_-_download_the_beta

 

 

 

Bits

何度も同じコードを繰り返し書く必要がなくなる、Bootstrapのスニペットをまとめたライブラリ。統計カードや管理パネル、テーブル用テンプレートなど、デザイン性にも優れたスニペットが多数揃っています。

bits_by_creative_tim_-_code_snippets_for_easier_coding

 

 

 

Knopf.CSS

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

knopf_css_-_open_source_button_system_leveraging_css_variables

 

 

 

Nomad Code

見出しやボックス、リボン、リストなど100種類以上のデザインを、コピペするだけで簡単に利用できる日本発のサービス。

nomade-code

 

 

 

Shoelace

あらゆるフレームワークと同時に使え、CSSでカスタマイズも可能、アクセシビリティを念頭に作成されたオープンソースのWebコンポーネント。ボタンやテーブル、アラート、バッジなど普段利用するUIが揃います。

shoelace

 

 

 

SpreadSimple

Googleのオンラインスプレッドシートをつかって、ウェブサイトのコンテンツを管理、更新できる面白ツール。

 

 

 

Typeculator

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

typeculator-1

 

 

 

3D Book Image CSS Generator

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

 

 

 

Dashed Border Generator

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

 

 

 

LT Browser

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

 

 

 

Pure CSS Halftone

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

pure-css-halftone

 

 

 

1-Line Layout

FlexboxやCSS Gridをつかって、たった1行のコードでさまざまなレイアウトを実現したスニペットライブラリ。

1-line_layouts

 

 

 

Botsociety

プロジェクトに合ったチャットボット、ボイスアシスタント機能をデザイン、作成できる画期的なツール。MessengerやSlack、Google Assistant、Alexaなど主要アプリに対応しています。

botsociety-2-0

 

 

 

デザインコレクション、UIキット

Slazzer

画像をアップロードして5秒待つだけで、人物などの被写体の切り抜きを自動で行うサービス。remove.bgが有名ですが、切り抜き精度はかなりのもの。

automatically_remove_background_from_image-slazzer_com

 

remove-bg-ps-plugin
Remove BGは、画像をアップロードしてほんの数秒待つだけで、人物を切り抜いてくれる人気のウェブサービスで、当サイトでも以前紹介しています。 ht

 

 

Procedural City Generator

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

city-generartor

 

 

 

Previewed

Instagramのストーリー投稿に使えるパノラマスクリーンショットや動画、モックアップなどを作成できるオンラインツール。美しいデザイン性とリアルさが特長で、あらゆるプロジェクトにどうぞ。

previewed-1

 

 

 

Free Auto-Animate UI Kit

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

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

 

 

 

revKit

商用プロジェクトにも利用できる、デザインシステムのUIキット。基本のスタイルガイドから、50種類を超えるコンポーネントまで収録し、SketchまたはFigma、Adobe XDどのプロトタイプツールにも対応。

revkit

 

 

 

Free Faces

無料ダウンロードできるおしゃれ英語フォントを、サンセリフやセリフ、ディスプレイなどのカテゴリ別にまとめたキュレーションライブラリ。

home_-_free_faces

 

 

 

Fonts in the Wild

デザインに優れたフリーフォントやGoogleフォント、Adobeフォントを集めたフォントライブラリで、どれもおしゃれな書体ばかりが揃います。

fonts-in-the-wild

 

 

 

Snippet Shot

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

snippet_shot

 

 

 

イラスト系ライブラリ

Free Illustration

無料でダウンロードできるイラスト素材集をコレクションしたサイトで、AiやPSD、Figma、Sketchなどのファイル形式別に探すことも可能。

free_illustrations_-_free_to_use_illustrations___vectors

 

 

 

Indian Doodle

インド人のライフスタイルに合わせた、60種類のシンプルなイラストライブラリ。PhotoshopやIllustratorの他、Adobe XDやFigma、Sketchにも対応しています。

indian-doodle-illustrations

 

 

 

Oh My Startup

美しいグラデーションカラーがアクセントとなった、ユニークなキャラクターのイラストをつかって、ビジネス向けコンテンツを表現できるイラストレーションセット。デモ版として8種類のイラストを無料ダウンロード可能。

oh-my-startup-illustrations

 

 

 

BigHeads

顔や髪型、表情などのパーツをランダムに組み合わせ、ウェブサイトやアプリなどに埋め込み可能な人物イラストを生成できます。SVGファイルによるダウンロードの他、Reactコードも生成可能。

big_heads_%c2%b7_easily_generate_avatars_for_your_projects

 

 

 

配色ツール

ColorSpace

ひとつの色を決めるだけで素敵な配色カラーパレットを自動生成してくれるオンラインツール。3色をつかったグラデーションも作成でき、CSSコードもそのままコピペできる便利な機能ばかり。

colorspace-1

 

 

 

ColorFlick for Dribbble

デベロッパーフレンドリーな配色カラーパレットツールで、手軽にHEXカラーコードをコピペできるChrome拡張機能プラグイン。

colorflick-for-dribbble

 

 

 

ColorSlurp

スクリーン上から抽出した色をさまざまな形式に変換できたり、よく利用する配色をまとめて管理できたりと、なにかと便利なMac専用アプリ。

colorslurp

 

配色に悩んだと便利なツールを新しく追加しています、こちらも参考にしてみると良いでしょう。

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

 

 

プロトタイプツール

Anima for Figma

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

anima-for-figma-1

 

lottie-logo-1
最近のウェブサイト制作では、アニメーションがますます重要になってきています。 この記事は、Lottieの使い方をまとめた基本ガイドです。Lottieの

 

 

Squid

ユーザーフローやダイアグラムをより直感的に手早く仕上げることができるデザインツール。500種類を超えるコンポーネント、216種類のフロー、180以上のスタイルと充実した機能が揃います。

 

 

 

Style Organizer

配色や文字スタイルなどを一覧表示で整理できるFigma拡張プラグイン。

style-organizer

 

 

 

SwiftUI Inspector

作成したデザインを瞬時にコードに変換してくれるFigma専用プラグイン。デザインスタイルをFigmaからXcodeプロジェクト用に簡単変換でき、開発ワークフローを改善します。

swiftui

 

 

 

Figma Bubble

Figma上にてコード知識不要でWebアプリを手軽に作成できるツール、最近増えているサービスのひとつ。

figmabubble

 

 

 

Templatery

Figmaで作成できる、プレゼンテーション用の美しいスライド資料をまとめたライブラリで、今後も継続アップデート予定。

templatery___figma_presentation_templates___templatery___figma_presentation_templates

 

 

 

アイコンツール

Bootstrap Icons Library

最新Bootstrapではじめて追加された、Bootstrap専用アイコンライブラリ。SVGアイコンなので自由に拡大でき、CSSで手軽にカスタマイズも可能です。詳細は以下の詳細ドキュメントよりどうぞ。

primary_bootstrap_icon_library

 

 

 

Tabler Icons

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

tabler_icons_-_550__highly_customizable_free_svg_icons

 

 

 

Simple Icons

およそ1,400ものブランドロゴとブランドカラーを揃えた、無料SVGアイコンライブラリ。

simple-icons

 

 

 

Forge Icons

300種類のSVGアイコンをまとめた無料ライブラリ。ショッピングサイトや旅行サイト、ソーシャルメディア、アプリデザインなどにも最適なあらゆる素材が揃います。

forge_icons_-_300__right_mix_of_svg_icons_for_use_in_e-commerce__travel__social_media__app_design_and_much_more_

 

 

 

コラボ、リモートワークツール

Linear

継続するプロジェクトやスプリント、タスク、バグなどの問題点を追跡、トラッキングできるオンラインツール。

linear_-_the_issue_tracking_tool_you_ll_enjoy_using

 

 

 

miro-live-embed

 

 

 

Sympli Versions

プロジェクトを複数人のチームで行うときに起こりがちな、ファイルの上書きを防ぐデザイナー向けバージョンコントロールツール。

symplic-version

 

 

 

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

Luckysheet

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

 

 

 

RunWay

人工知能を訓練し、自分だけのカスタム・マシーン・ラーニングモデルを作成できる、クリエイター向けツールキット。シンプルで直感的なインターフェースデザインにも注目です。

 

 

 

Jazzkeys

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

jazzkeys

 

 

 

Pxl

ピクセルアートを描くことができるReactアプリ。豊富なパラメータをつかってCSSピクセルイラストを作成できます。SVG、PNG、CSSファイル形式でエクスポート可能。

pxl

 

 

 

Website Screenshot API

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

screenshot-api

 

 

 

attention-insight

 

 

 

Human Sounds

パソコンで使うUIサウンドは通常、機械的な音ですが、実際に人間が発した音をベースに作成したUXサウンドをまとめたライブラリ。mov4ファイルは無料ダウンロード可能。

human-sounds

 

 

 

Spotify Soundtrack Your Workout

いくつかの質問に答えるだけで、自分にあった最適のワークアウト音楽プレイリストを作成してくれます。

spotify-soundtrack-your-workout

 

 

 

Air Line Logos

ミッドセンチュリーの時代に活躍した、アメリカを中心とした世界の航空会社のロゴデザインをアルファベット順に集めたレトロコレクション。

 

 

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

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

 

contra_wireframe_kit
この記事では、Webデザインやグラフィックデザインの制作スピード、生産性がアップする、便利な最新オンラインツールをまとめてご紹介しています。 カテゴリ
the-simpsons-in-css
この記事では、日常行っているWebデザインやグラフィックデザインの制作が捗る、便利な最新オンラインツールをまとめてご紹介しています。 これらの新しいツールやサ
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デザインやグラフィックデザインの制作が捗る、公開されたばかりの最新便利オンラインツール、無料デザイン素材をまとめています。 これら

 

サムネイル@ : Warp SVG