Advertisement

 

Web制作のたびに繰り返し手こずって、時間のかかってしまう作業ってないでしょうか。

 

作業の効率化や時短において、限界を感じているひとにこそ刺さる、知っておきたい最新オンラインツールをまとめてご紹介します。

 

面倒な作業もあっという間に終わるだけでなく、どれも無料で利用でき、これまでのWeb制作がガラリと変わるコード不要の「ノーコード」Webページビルダーや、AI技術を活用したサービスも続々増えています。

 

「Web制作をもっと手早く終わらせたい」と考えているひとは、まずは自分だけのお気に入りツールを見つけてみましょう。

 


コンテンツ目次

 

 

面倒なWeb制作におさらば!便利すぎる新登場オンラインツールまとめ

 

Web制作便利ツール

Glassmorphgism CSS Generator

すりガラスを通して覗いたような背景のぼかしが特長の「グラスモーフィズム」スタイルをカスタマイズ、作成できるオンラインツール。

 

 

 

Lordicon

1700種類以上の動くアニメーションアイコンを揃えたライブラリで、JSONやGIF、AEP、EPS,SVGなど豊富なファイル形式から選び、自由にカスタマイズを適用しましょう。

 

 

 

Toolb.dev

Web制作で日常的に使える無料のCSSやHTML、JSウェブツール50種類以上を提供中。これどうだっけ?を解決してくれますよ。

toolb.devの画像

 

Web制作で日常的に使える無料のCSSやHTML、JSウェブツール50種類以上を提供しているToolb.dev。 なにかと面倒な作業をパネル上で直感的に行うことができ

 

 

Glitch

なんの設定もなしでウェブプロジェクトをブラウザ上で開始できる話題のツール。通常のHTMl/CSS/JSをつかったウェブ制作のほかに、Node.jsやReactにも対応。

 

 

 

Typedream

コード不要でシンプルなインターフェース画面をつかってウェブサイトを作成できるオンラインツール。無料からはじめることができますよ。

 

 

Access Guide

見落とされがちなデジタルアクセシビリティについて、分かりやすく紹介したガイド。公式リソースであるWCAG 2.1(Web Content Accessibility Guidelines)を理解したいひとへ。

Access Guideの画像

 

 

 

Windframe

2020年おわり頃から話題となっているTailwindフレームワークに対応した、ノーコードWebページビルダーアプリ。120以上の編集可能なブロックが用意されており、ドラッグ&ドロップの操作のみで完成です。

Tailwindフレームワークに対応したノーコードWebページビルダーWindframeの画像

 

 

 

Quest AI

Figmaで作成したファイルをHTMlに変換し、ライブサイトで閲覧できる状態にするまで、わずか2クリックで実現できる画期的なツール。サンプルページがこちら

FigmaからHTMlに変換しライブサイトをわずか2クリックで立ち上げるQuest Aiの画像

 

 

 

Carrd

どんなデザインにも対応できる、シンプルでレスポンシブなペライチサイトを作成できるオンラインツール。

Carrdの画像

 

 

 

FixA11y

表示しているWebサイトのコントラスト比をその場で調整できるChrome拡張プラグイン。3つのモードで、コントラストの低い部分を修正してくれます。

 

 

 

Style Free HTML Bootstrap 4 Template

人気フレームワークBootstrap 4で作成された、ミニマルスタイルのHTML/CSSテンプレート。

Bootstrap製のHTML/CSSテンプレートの画像

 

 

 

Gradient Art

レイヤー機能搭載のエディタで、イラストやパターン、アイコンなどをデザインするCSS編集オンラインツール。

Gradient Artの画像

 

 

 

Hey Meta

アドレスを入力スルだけでメタタグの表示状態を確認、修正できるオンラインツール。

メタタグ情報を確認、修正できるHey Metaの画像

 

 

 

Silex

オープンソースのノーコードWebサイトビルダーで、レスポンシブの表示確認など細かな調整にも対応、FTPへのアップロードなどもでき高機能。

ノーコードWebビルダーSilexの画像

 

 

 

SVG Gobbler

表示しているウェブサイトで使われている、すべてのSVGファイルをダウンロードできるだけでなく、SVG最適化やPNGファイル形式でのダウンロードもワンクリック。ブラウザChromeの拡張機能プラグイン。

SVG Gobblerの画像

 

 

 

Zyro

ブログやオンラインストア、ポートフォリなどあらゆるウェブサイトの作成が、ノーコードで可能なウェブページビルダー。最近特に増えているサービスのひとつ。

1時間でウェブサイトをノーコードで作成できるウェブサイトビルダーZyroの画像

 

 

 

WP Cost Calculator

あらゆるタイプの見積書を簡単なステップで作成することができるWordPressプラグイン。独自のドラッグ&ドロップ式の計算ビルダーをつかって、フォームを無制限に作成できます。

WordPress見積もり作成ツールWP Cost Calculatorの画像

 

 

 

配色ツール

Colors.

色の組み合わせや色合い、色相と彩度、輝度などあらゆる配色を試すことができるツールが揃います。

Dive into the world of colorsのアプリ画像

 

 

 

HexColorPedia

あらゆる配色のRGBやCYMK,HSL値などの情報をまとめた巨大カラーライブラリ。色の組み合わせに迷ったときにも、「〇〇色系」といった感じで検索でき便利。

色に関する情報を網羅したHexColorPediaの画像

 

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

 

 

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

Biteable

画像をアップロードするだけで、各ソーシャルメディアに合った画像リサイズ、切り抜きを一括変換してくれる自動便利ツール。

各ソーシャルメディアに合った画像サイズにリサイズしてくれるBiteableの画像

 

 

 

Picmaker

デザインに自信がないひともテンプレートを活用して、おしゃれなデザインを瞬時に作成できるオンラインデザインツール。

手軽にデザインをたのしむオンラインツールPicmakerの画像

 

できるだけ予算をかけずに、無料で高品質なデザインを簡単DIYできる方法をお探しですか。 この記事では、デザインの経験がなくても手軽にデザインを作成でき

 

 

 

 

 

Wicked Backgrounds

波ウェーブをつかった美しい背景テクスチャをシンプルなツールで調整し、そのまま無料ダウンロードできるツール。

波型ウェーブ背景テクスチャを手軽に作成できるツールの画像

 

 

 

イラスト系ライブラリ

GetIllustrations

Webサイトやアプリに適した7,800個以上のイラストを揃えたサービスで、他に比べても圧倒的で豊富なイラストスタイルやクオリティ。

 

 

 

3D Bay

ロイヤルティーフリーの3Dイラスト画像を無料配布しているありがたいサイト、イラスト数も充実しており、光沢感のある立体イラストが印象的。

 

この記事では、デザイン制作で3Dデザインを手軽に作成、利用できる無料ツールやデザイン素材をまとめてご紹介します。 2021年の注目デザイントレンドとし

 

 

PixelTrue Free Illustrations

かわいいイラストやアニメーションを無料ダウンロードできるライブラリで、毎週アップデートが行われており、収録数は500を超えています。

500以上の無料イラストとアニメーションをダウンロードできるPixelTrueの画像

 

 

 

Scenic Background Animtions Pack

美しい風景イラストアニメーションを揃えた素材集で、シーンに応じて朝、昼、夜が用意されており、商用OK。AiやSVG、PNG、MP4、GIFファイルで収録されています。

Scenic Background Animtions Packの画像

 

 

 

プロトタイプツール

Dark Mode for Figma

Figmaをダークモードで利用できるアプリ、暗いところでも見やすいコントラストにこだわった仕様。

Figmaをダークモードで利用できるアプリインターフェースの画像

 

 

 

Stratum Figjam

FigmaがリリースしたオンラインホワイトボードFigjamをつかった、ワイヤーフレーム作成に便利なコンポーネントをセットにした無料ライブラリ。

FigJam用コンポーネント集Stratum Figjamの画像

 

 

 

アイコンツール

App Icon Generator and Resizer

アプリ用アイコンをアップロードすれば、iPhoneやwatch OS、CarPlay用など複数のアイコンサイズに自動変換、リサイズしてくれるツール。

アプリ用アイコンを自動生成、リサイズできるIconmakerの画像

 

 

 

Lineicons

5000種類以上のシンプルなラインアイコンを無料ダウンロードでき、無料CDNやアイコンエディタ機能も便利。SVGアイコンを探しているときにどうぞ。

Lineiconsの画像

 

 

 

IconDuck

オープンソースで商用利用もできるアイコンとイラストおよそ12万個を無料ダウンロードできるモンスターサイト。

12万個のアイコンを無料ダウンロードできるIconDuckの画像

 

 

 

Iconoir

900種類以上のSVGアイコンを無料配布しているライブラリで、随時アップデート中。MITライセンスでオープンソース。

iconoirの画像

 

 

 

Nucleo

どんどん素材がたまって、どれがどれだか分からなくなるひとも少なくないアイコン。このツールを利用すれば、驚くほど効率的にアイコンを整理、管理でき、ストレスフリーな世界に。

 

 

 

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

Claritee

共同でのコラボレーションをしながら、手軽にインタラクティブなワイヤーフレームを作成できるオンラインツール。

 

 

 

Graha

公開済みのウェブサイト上で複数のチームで同時にデザインの作成や編集を行うことができるコラボツール。

コラボレーションデザインツールGrahaの画像

 

 

 

Meister Note

複数のチームメンバーがドキュメンテーションや解説マニュアルなどを同時に作成、編集できるコラボレーションアイテム。

ドキュメンテーションをチームで作成できるMeisterNoteの画像

 

 

 

Orbital

まるで本当に会社のデスクで作業をしているような、レイアウトを自由にカスタマイズできるコラボレーションツール。さまざまなツールを共同で利用でき、Spotifyといったエンターテインメント系アプリにも対応。

チームコラボレーションツールOrbitalの画像

 

 

 

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

Handsfree JS

カメラに写った顔や指、ポーズをトラッキングするJSツール。使っている様子はまるでSF映画の世界。

 

 

 

Adobe Photoshop Inspiration Generator

フォトショップのデザインアイデアが枯渇したときにルーレットを回して、デザインのお題を決めるAdobe謹製の面白ツール。

フォトショップのデザインアイデアが枯渇したときのインスピレーションの画像

 

 

 

CoeFont CLOUD

日本発のツールで、およそ15分間の音声収録と500円のサービス利用料を払うことで、自分の声を「CoeFont(コエフォント)」に変換してくれます。

自分の声によるAI音声合成を可能にするCoeFont CLOUDの画像

 

 

 

DogFinder

犬の写真をアップロードすると、AIが犬種を自動判別してくれるオープンソースアプリ。

犬の写真で犬種を判別できるDogFinderの画像

 

 

 

Face Maker AI Massless

ブラシで抽象的に顔を描くことで、超リアルな顔写真に変換してくれる人工知能をつかったAIツール。

Face Maker AI Masslessの画像

 

 

 

Forma

特殊なツールを一切使わずに、ブラウザ上でアイデアを具現化するワークフローを作成できるオンラインツール。

Formaの画像

 

 

 

Pattern Collect

世界中から集められたさまざまな「パターン」デザインをまとめたコレクションで、カテゴリやジャンル別に閲覧することもできる、インスピレーションにぴったりなサイト。

 

 

 

Traveled Map

自分だけのオリジナル・オンライン地図マップをカスタマイズ、作成できるツールで、旅の詳しい情報や撮影した写真などのほか、旅行工程マップの作成もラクラクです。

Traveled Mapの画像

 

 

 

WiFi Card

Wifi接続用のQRコードを作成し、そのまま印刷できるウェブアプリ。カフェやホテル、無料Wifi施設での利用にも便利ですよ。

Wifiに接続出来るQRコードを作成、印刷できるWiFi Cardの画像

 

 

前回の最新オンラインツールも一緒に確認してみてはいかがでしょう。

この記事では、Webデザイン制作で役立つ便利な最新オンラインツール41個をまとめてご紹介します。 ウェブデザインに限らず、グラフィックなどあらゆる