Web制作のたびに繰り返し手こずって、時間のかかってしまう作業ってないでしょうか。
作業の効率化や時短において、限界を感じているひとにこそ刺さる、知っておきたい最新オンラインツールをまとめてご紹介します。
面倒な作業もあっという間に終わるだけでなく、どれも無料で利用でき、これまでのWeb制作がガラリと変わるコード不要の「ノーコード」Webページビルダーや、AI技術を活用したサービスも続々増えています。
「Web制作をもっと手早く終わらせたい」と考えているひとは、まずは自分だけのお気に入りツールを見つけてみましょう。
- 1. Web制作便利ツール
- 2. 配色ツール
- 3. デザインコレクション
- 4. イラスト系ライブラリ
- 5. プロトタイプツール
- 6. アイコンツール
- 7. コラボ、リモートワークツール
- 8. 面白、クリエイティブツール
面倒なWeb制作におさらば！便利すぎる新登場オンラインツールまとめ
Web制作便利ツール
すりガラスを通して覗いたような背景のぼかしが特長の「グラスモーフィズム」スタイルをカスタマイズ、作成できるオンラインツール。
1700種類以上の動くアニメーションアイコンを揃えたライブラリで、JSONやGIF、AEP、EPS，SVGなど豊富なファイル形式から選び、自由にカスタマイズを適用しましょう。
Web制作で日常的に使える無料のCSSやHTML、JSウェブツール50種類以上を提供中。これどうだっけ？を解決してくれますよ。
なんの設定もなしでウェブプロジェクトをブラウザ上で開始できる話題のツール。通常のHTMl/CSS/JSをつかったウェブ制作のほかに、Node.jsやReactにも対応。
コード不要でシンプルなインターフェース画面をつかってウェブサイトを作成できるオンラインツール。無料からはじめることができますよ。
見落とされがちなデジタルアクセシビリティについて、分かりやすく紹介したガイド。公式リソースであるWCAG 2.1（Web Content Accessibility Guidelines）を理解したいひとへ。
2020年おわり頃から話題となっているTailwindフレームワークに対応した、ノーコードWebページビルダーアプリ。120以上の編集可能なブロックが用意されており、ドラッグ＆ドロップの操作のみで完成です。
Figmaで作成したファイルをHTMlに変換し、ライブサイトで閲覧できる状態にするまで、わずか2クリックで実現できる画期的なツール。サンプルページがこちら。
どんなデザインにも対応できる、シンプルでレスポンシブなペライチサイトを作成できるオンラインツール。
表示しているWebサイトのコントラスト比をその場で調整できるChrome拡張プラグイン。３つのモードで、コントラストの低い部分を修正してくれます。
Style Free HTML Bootstrap 4 Template
人気フレームワークBootstrap 4で作成された、ミニマルスタイルのHTML/CSSテンプレート。
レイヤー機能搭載のエディタで、イラストやパターン、アイコンなどをデザインするCSS編集オンラインツール。
アドレスを入力スルだけでメタタグの表示状態を確認、修正できるオンラインツール。
オープンソースのノーコードWebサイトビルダーで、レスポンシブの表示確認など細かな調整にも対応、FTPへのアップロードなどもでき高機能。
表示しているウェブサイトで使われている、すべてのSVGファイルをダウンロードできるだけでなく、SVG最適化やPNGファイル形式でのダウンロードもワンクリック。ブラウザChromeの拡張機能プラグイン。
ブログやオンラインストア、ポートフォリなどあらゆるウェブサイトの作成が、ノーコードで可能なウェブページビルダー。最近特に増えているサービスのひとつ。
あらゆるタイプの見積書を簡単なステップで作成することができるWordPressプラグイン。独自のドラッグ＆ドロップ式の計算ビルダーをつかって、フォームを無制限に作成できます。
配色ツール
色の組み合わせや色合い、色相と彩度、輝度などあらゆる配色を試すことができるツールが揃います。
あらゆる配色のRGBやCYMK，HSL値などの情報をまとめた巨大カラーライブラリ。色の組み合わせに迷ったときにも、「〇〇色系」といった感じで検索でき便利。
デザインコレクション、UIキット
画像をアップロードするだけで、各ソーシャルメディアに合った画像リサイズ、切り抜きを一括変換してくれる自動便利ツール。
デザインに自信がないひともテンプレートを活用して、おしゃれなデザインを瞬時に作成できるオンラインデザインツール。
波ウェーブをつかった美しい背景テクスチャをシンプルなツールで調整し、そのまま無料ダウンロードできるツール。
イラスト系ライブラリ
Webサイトやアプリに適した7,800個以上のイラストを揃えたサービスで、他に比べても圧倒的で豊富なイラストスタイルやクオリティ。
ロイヤルティーフリーの3Dイラスト画像を無料配布しているありがたいサイト、イラスト数も充実しており、光沢感のある立体イラストが印象的。
かわいいイラストやアニメーションを無料ダウンロードできるライブラリで、毎週アップデートが行われており、収録数は500を超えています。
Scenic Background Animtions Pack
美しい風景イラストアニメーションを揃えた素材集で、シーンに応じて朝、昼、夜が用意されており、商用OK。AiやSVG、PNG、MP4、GIFファイルで収録されています。
プロトタイプツール
Figmaをダークモードで利用できるアプリ、暗いところでも見やすいコントラストにこだわった仕様。
FigmaがリリースしたオンラインホワイトボードFigjamをつかった、ワイヤーフレーム作成に便利なコンポーネントをセットにした無料ライブラリ。
アイコンツール
App Icon Generator and Resizer
アプリ用アイコンをアップロードすれば、iPhoneやwatch OS、CarPlay用など複数のアイコンサイズに自動変換、リサイズしてくれるツール。
5000種類以上のシンプルなラインアイコンを無料ダウンロードでき、無料CDNやアイコンエディタ機能も便利。SVGアイコンを探しているときにどうぞ。
オープンソースで商用利用もできるアイコンとイラストおよそ12万個を無料ダウンロードできるモンスターサイト。
900種類以上のSVGアイコンを無料配布しているライブラリで、随時アップデート中。MITライセンスでオープンソース。
どんどん素材がたまって、どれがどれだか分からなくなるひとも少なくないアイコン。このツールを利用すれば、驚くほど効率的にアイコンを整理、管理でき、ストレスフリーな世界に。
コラボ、リモートワークツール
共同でのコラボレーションをしながら、手軽にインタラクティブなワイヤーフレームを作成できるオンラインツール。
公開済みのウェブサイト上で複数のチームで同時にデザインの作成や編集を行うことができるコラボツール。
複数のチームメンバーがドキュメンテーションや解説マニュアルなどを同時に作成、編集できるコラボレーションアイテム。
まるで本当に会社のデスクで作業をしているような、レイアウトを自由にカスタマイズできるコラボレーションツール。さまざまなツールを共同で利用でき、Spotifyといったエンターテインメント系アプリにも対応。
面白、クリエイティブツール
カメラに写った顔や指、ポーズをトラッキングするJSツール。使っている様子はまるでSF映画の世界。
Adobe Photoshop Inspiration Generator
フォトショップのデザインアイデアが枯渇したときにルーレットを回して、デザインのお題を決めるAdobe謹製の面白ツール。
日本発のツールで、およそ15分間の音声収録と500円のサービス利用料を払うことで、自分の声を「CoeFont（コエフォント）」に変換してくれます。
犬の写真をアップロードすると、AIが犬種を自動判別してくれるオープンソースアプリ。
ブラシで抽象的に顔を描くことで、超リアルな顔写真に変換してくれる人工知能をつかったAIツール。
特殊なツールを一切使わずに、ブラウザ上でアイデアを具現化するワークフローを作成できるオンラインツール。
世界中から集められたさまざまな「パターン」デザインをまとめたコレクションで、カテゴリやジャンル別に閲覧することもできる、インスピレーションにぴったりなサイト。
自分だけのオリジナル・オンライン地図マップをカスタマイズ、作成できるツールで、旅の詳しい情報や撮影した写真などのほか、旅行工程マップの作成もラクラクです。
Wifi接続用のQRコードを作成し、そのまま印刷できるウェブアプリ。カフェやホテル、無料Wifi施設での利用にも便利ですよ。
前回の最新オンラインツールも一緒に確認してみてはいかがでしょう。
