めっちゃ楽!面倒なWeb制作から救う最新オンラインツール44個まとめ

 

ホームページやウェブサイトを制作するなかで、「この作業は苦手」「いつも〇〇でつまづく」など日々格闘しているひとも多いでしょう。

 

この記事では、そんな面倒なWeb制作を楽にするお役立ち最新オンラインツールをまとめてご紹介します。

 

頭を抱える配色えらびから、おしゃれイラストのダミー生成ツールや、商用利用もできるHTMLテンプレートなど、時間のかかっていた作業を時短できる新サービスがぞくぞく増えています。

 

自分だけの最強ワークフロー術として、この機会に活用してみてはいかがでしょう。

 

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

 


コンテンツ目次

 

 

Web制作の効率、生産性アップ!話題の最新オンラインツールまとめ

 

Web制作便利ツール

Cal.com

ビジネスミーティング、セミナー、ヨガクラス、さらには家族との通話などに使えるCalendlyの代替ツール。より柔軟なカスタマイズが可能で、独自のカレンダー予約機能をもつことも。

 

 

 

Atropos JS

スマホで驚くほどタッチ操作フレンドリーな、3Dパララクスホバーエフェクトを作成できる、軽量かつ無料オープンソースのJavaScriptライブラリ。没入感のあるデザインを手軽に実現できます。

 

 

 

Basic Pattern Repository

SVGで表現された、ウェブサイトで使いやすいシンプルなパターンをあつめたコレクションで、素材はどれも商用可能なGPLライセンス。使いたいパターンをクリック、生成されたコードをコピペしたら完成です。Figmaファイルも公開中。

 

 

 

CCCreate

現役デザイナーがウェブ制作で利用しているオンラインツールを、カテゴリ別にまとめたキュレーションサイト。配色やレイアウト、書体、アイコン、アニメーション、図形シェイプ、公式ドキュメントなど便利なものばかり。

 

 

 

30 Seconds of Code

「30秒で解決できる」をモットーに、JSやCSS、Reactなどウェブ制作で役立つスニペットをまとめた便利ライブラリ。特にCSSスニペットは目からウロコのテクニックが満載です。

 

Webデザインの種明かし、コピペできる最新HTML/CSSスニペット30個まとめ

 

 

Dropzone

あらゆるHTML要素に、ドラッグ&ドロップのファイルアップロードや進捗状況などを表示できる、JavaScriptライブラリ。

 

 

 

個人情報テストデータジェネレーター

ダミーの氏名・住所などの個人情報を自動生成できるオンラインツールで、最大1万行まで生成でき、CSVファイル形式でダウンロードできます。血液型、会社名、クレジットカード番号と期限、マイナンバー情報などにも対応しています。

 

 

 

Inovatik

クレジット表記不要でどんなプロジェクトにも利用でき、BootstrapフレームワークでカスタマイズしやすいHTMLテンプレートを公開しているサイト。定期的にアップデートされています。

 

 

 

Animated Backgrounds

CSSのみでスタイリングされた、以下サンプル例のようなユニークなアニメーション背景用コードを配布するサイト。

 

 

 

Open Meteo

日本を含む世界各地の週間天気予報を、最大2キロのマクロ範囲で提供できるオープンソースのAPI。商用利用もご自由にどうぞ。

 

 

 

Meta Tags

リンクを共有したときに、GoogleやFacebook、Twitterでどのように見えるか、URLを入力するだけで確認できるオンラインツール。作成したメタタグはそのままコピペで利用できます。

 

 

 

Access Guide

アクセシビリティの基礎を学びたいひとにオススメ、WCAG 2.1に基づいたルールを図解イラスト付きで、分かりやすく紹介したライブラリ。

 

 

 

LightWidget

Instagram投稿をウェブサイトに表示したい!というときに便利なツール。投稿数など細かくカスタマイズでき、基本無料で利用できます。詳しい使い方は、こちらの記事が参考になりました。

 

 

 

Medio: Web Design Agency Template

CC0ライセンスで無料配布されている、Bootstrap 5で作成された高品質なHTMLテンプレート。トップページの他、サービスやお問い合わせなど基本的なページが各種揃います。デモページはこちらから。

 

 

 

Motion One

超軽量なファイルサイズによる最速パフォーマンスを掲げた、ウェブアニメーションAPIライブラリ。使い方もシンプルで、はじめてのひとでも分かりやすく、詳しい公式ドキュメントも参考に。

 

 

 

Nord

コーディングに集中できる読みやすさを実現した、コーディングのための北国の青みを帯びたカラーパレット4種。

 

 

 

Super for Notion

自分なりにカスタマイズし、最適な仕組みを作り上げる万能アプリNotion内で、ドラッグ&ドロップの簡単操作でウェブページを作成できてしまうすごいツール。

 

 

 

Whatamesh

絶妙にアニメーショ絶妙に、背景デザイン向けのグラデーションメッシュを作成できるオンラインジェネレーター。クリックひとつでコードを発行してくれます。Gradient.jsを読み込む必要あり。

 

 

 

 

配色ツール

Actionable Color Palettes

ウェブデザインで使いやすい配色カラーパレットを集めたサイトで、サンプルをつかった色の確認ができ便利です。

 

 

 

Colorsandfonts

配色や書体選び、グラデーション、フォントの組み合わせなど、ウェブデベロッパーやデジタルデザイナーが頭を悩ます問題を解決できるツールが揃います。Figmaファイルでも利用できます

 

 

 

CSS Gradient Editor

複雑なCSSカラーグラデーションを作成できるオンラインツール。あらかじめ用意されたプリセットの他、ミッドポイントを活用したより美しいグラデーションを表現でき、作成したコードもそのままコピペで利用可能。

 

 

 

Gradients Mass Driver Workshop

2つのお好みの色を決め、抽出サンプルポイント数を指定することで、よりなめらかなCSSカラーグラデーションを作成、コードを自動生成してくれます。

 

 

 

Huetone

LCHのカラースペースを利用して、予測可能で親しみやすいカラーパレットを自動で作成してくれる配色ツール。

 

 

 

Huey Color palette Generator

色覚異常のひとでも、テキストと背景の適切なコントラストを認識できる、WCAGコントラストに沿った配色カラーパレットを自動生成してくれるツール。

 

 

 

Colorffy

配色カラーパレットやグラデーションなど、ウェブ制作で使いやすい色を探すときに便利なツール。色別に絞り込みでき、見つけたグラデーションはお気に入りに保存できます。

 

 

 

Palitra App

キーワードを入力すると、検索で見つかった画像を配色カラーパレットで表示してくれるツール。 日本語テキスト入力にも対応しています。

 

 

 

 

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

Three D Scans

著作権フリーの3Dスキャンデータを無料ダウンロードできるサイト。3DアートのCG作品制作にいかがでしょう。

 

 

 

Libre Logos

商用利用OKなオープンソース、自由に利用できるロゴデザインをSVGまたはPNGファイルで無料ダウンロードできます。

 

 

 

Doodle Ipsum

ダミー画像ならぬ「ダミーイラスト」を生成できるオンラインツール。スタイルを選び、縦横比を設定、背景ありなしを選択。生成されたコードをウェブサイトに貼り付けるだけで利用できます。

 

 

 

Hatchful – Free Logo Maker

職種や好きなデザインスタイル、ビジネス名やスローガンなどを記入するだけで、目的にあったロゴデザインを無料で作成してくれるツール。本格的なネットショップが開設できるECプラットフォームShopifyプレゼンツ。

 

 

 

Multiavatar

120億通りに及ぶ独自アバターイラストを自動生成できるオンラインツール。作成したアバターは無料ダウンロードできるオープンソース。

 

 

 

Standards

ブランドガイドラインをデザインできる新ツールで、現在ウェイティングリストでユーザー募集中。

 

 

 

Tool Graphics

丸や四角といったシンプルな幾何学模様による、ランダムなグラフィックパターンを、Generateボタンをクリックするたびに自動で生成するツール。

 

 

 

Vector Styler

MacとPCに対応した、高度なイラスト・ドローイングツール。イラストやロゴ、アイコンはもちろん、タイポグラフィ、スクリーン、印刷、ウェブ用のベクターアートにも最適。無料の体験トライアルもあり、買い切りプランが用意されているのもポイント。Illustrator代用ツールのひとつとして。

 

Photoshopの代用で使える画像編集・加工おすすめツール【目的別まとめ】

 

 

 

プロトタイプ、アイコンツール

COVID-19 Icon Set

現在進行中のCOVID-19対策に貢献したいと考え、コロナウイルス、COVID-19に特化したベクターアイコン56個セット。AiとEPS、SVG、PNGファイルが収録されています。

 

 

 

JP + UI Kit

iOSとAndroidのモバイルアプリに対応したFigma用日本語UIキット。AppleのHuman Interface GuidelinesやGoogleのMaterial Designで定義されたUIコンポーネントを日本語フォントに最適化し、UIデザインワークを効率化することを目的に作成されたそう。

 

 

 

Koloicons

統一感のあるアイコン3000種類を、SVGファイル形式で収録したお得すぎる素材、Figmaファイルでどうぞ。

 

 

 

 

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

Jitsi Wonderland

最先端のビデオ品質と機能を備えた、ビデオ会議プラットフォームの使用と展開を可能にするオープンソースプロジェクト。HD動画対応やチャット、共有シェア、投票ツール、バーチャル背景など必要なツールがまるっと揃います。

 

 

 

Revolt

プライバシーを重視した、独自チャットアプリを作成できるオープンソースツール。

 

 

 

 

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

Self Parking Car Evolution

遺伝的アルゴリズム(Genetic Algorithm)を用いた、たった500行のコードで、自動車の自動駐車を実現しようというプロジェクト。

 

 

 

Glass

プロ・アマ問わず、写真家のための新しい写真共有アプリ兼コミュニティ。夢中になるのではなく、愛してほしいと考え作成されており、気が散らないように、写真に集中できるのが特徴。

 

 

 

How I Experience Web Today

ウェブがいかに「不便」になったかを体験できる皮肉サイト。目的のホームページにたどり着くまでに、いくつもの罠が、。

 

 

 

My Room in 3D

実際の仕事場をリアルに再現し、照明ライトなどもカスタマイズ可能な、three.jsによるコンセプト。ソースコードも配布中、画面上をバギーで爆走するポートフォリオサイトが話題だったBruno Simonによるプロジェクト。

 

 

 

Pirsch

Google Analyticsに代わる、シンプルでプライバシーに配慮したオープンソースのソフトウェア。軽量で、クッキーを使用せず、どのようなウェブサイトにも、またバックエンドにも簡単に統合できます。

 

サムネイル@ :