Web制作を変える！2021年の便利オンラインツール・ベスト100選

by

https://photoshopvip.net/132717

published on 2021-12-21
実際には140個以上。

目次

  • CSSツール
  • パターンツール
  • イラスト系ツール
  • デザインツール
  • 配色ツール
  • グラデーションツール
  • SVGツール
  • スクリーンショット系ツール
  • アイコンライブラリ
  • フォント・タイポグラフィー系ツール
  • アニメーションツール
  • 学習・チートシート系ツール
  • Webデザイン便利ツール
  • プロトタイプ・モックアップツール
  • 面白、クリエイティブツール

ツール一覧

CSSツール

  1. Glass UI：グラスモーフィズム・エフェクトをその場で試しながら作成、調整できるオンラインツール。
  2. Shadow Palette Generator：ドロップシャドウを重ねることで超リアルな影を作成できるCSSツール。シンプルなインターフェース。
  3. Grainy Gradient Playground：CSSグラデーションにザラッとしたSVGテクスチャを重ねることで、レトロなエフェクトに仕上げるオンラインツール。
  4. CSS Buttons App：50種類のボタンスタイルが揃い、クリックひとつでCSSをコピー可。
  5. CSSButtons.io：クリックひとつでコピペできるだけでなく、気に入ったボタンはHTMLとCSSによるカスタマイズ、保存も可能。
  6. CSS Stripes Generator（※該当サイト不明）：ストライプ線の角度を選択し、お好みの色を追加していくだけのお手軽な操作感。（※類似の名称で同種のサービスが多数ある）
  7. Neumorphism CSS Generator：ニューモーフィズムスタイルをCSSで生成できるオンラインツール。オブジェクトのサイズや丸み、ドロップシャドウの距離などの詳細設定、配色、光源などカスタマイズ性の高さもポイント。
  8. Tail Blend：CSSmix-blend-modeプロパティをリアルタイムでプレビューできるオンラインツール。
  9. SVG Color Matrix Mixer：画像のコントラストや明るさ、彩度などを調整することで、クリエイティブで美しいSVGフィルタを直感的に作成できるオンラインツール。
  10. CSS Layout Generator：Webサイトでよく見かけるレイアウトをCSS Gridで作成し、リアルタイムでレイアウトを確認しながらCSSコードを生成できるオンラインツール。今後CSS Flexboxにも対応予定。

パターンツール

  1. Basic Pattern Repository：SVGで表現された、ウェブサイトで使いやすいシンプルなパターンをあつめたコレクション。素材はどれも商用可能なGPLライセンス。
  2. SVG Backgrounds：SVGでデザインされたユニークな背景ベースパターンをえらび、お好みの配色やカラーモード、不透明度を調整し、オリジナルのSVG　ファイルを作成。
  3. Pattern Collect：世界中から集められたさまざまな「パターン」デザインをまとめたコレクション。カテゴリやジャンル別に閲覧可。

イラスト系ツール

  1. Heritage Library：著作権フリーで無料利用できる名画やアートから集められたイラスト。くだものや野生動物、海洋生物、ファッションなど幅広くジャンル別に公開。
  2. Scenic Background Animtions Pack：美しい風景イラストアニメーションを揃えた素材集。シーンに応じて朝、昼、夜が用意。商用OK。AiやSVG、PNG、MP4、GIFファイルで収録。
  3. Rareblocks – THe Profect logos：自由に編集できるベクター素材。商用利用も可能なロゴデザイン50種類。
  4. Seek Vectors：あらゆる有名SNSアプリのロゴをベクター形式で無料ダウンロードできるお役立ちツール。ファイル形式はPNG、SVG、JPG、EPS、AIファイルから選択可能。
  5. Vectorove：無料のベクターイラストコレクション。お好みで配色を３色まで変更。カスタマイズできるので、プロジェクトに合わせて利用可。
  6. Storyset：あらゆるデザインに対応できるイラスト素材の配色を変更したり、アニメーションの追加などオリジナルイラスト素材を作成できるオンラインツール。
  7. PixelTrue Free Illustrations：かわいいイラストやアニメーションを無料ダウンロードできるライブラリ。毎週アップデートが行われており、収録数は500を超えている。
  8. Free Sparkling New Year Clip Art Pack：ミラーボールやシャンパン、花火など新年を祝う豪華なイラストレーションを無料ダウンロード。PNGファイルで、300dpiのA3サイズでプリント印刷にも対応。
  9. Doodle Ipsum：「ダミーイラスト」を生成できるオンラインツール。スタイルを選び、縦横比を設定、背景ありなしを選択。生成されたコードをウェブサイトに貼り付けるだけで利用可。

デザインツール

  1. Everypixel：50を超える主要フォトストックサイトから縦断マルチ検索を行ってくれる。
  2. Same Energy：ビジュアルにこだわりまくったサーチエンジン。調べたいワードを入力し、表示された画像をクリックしていくことで、よりイメージに近い画像をまとめて表示。
  3. Cleanup.pictures：写真の不要な部分をブラシでなぞるだけで、あらゆるものを消去し、違和感なく背景を再描画してくれる。
  4. Erase BG：写真をアップロードするだけで、自動で背景を透明にしてくれるオンラインツール。ユーザー登録不要。画像サイズは5,000×5,000pxまで。
  5. To the Third Dimension：高画質でユニークな3Dデザインパーツをスタイル別に集めたサイト。PNG版を無料ダウンロードできる他、有料でソースファイルの入手、プロジェクトに合わせてカスタマイズも可能。
  6. Animated Loops：リキッド型の図形シェイプにアニメーションを加えた3Dイラストレーションの素材パック。
  7. 3D Bay：ロイヤルティーフリーの3Dイラスト画像を無料配布しているサイト。イラスト数も充実。光沢感のある立体イラストが印象的。
  8. Market：CC0で自由に利用できる3Dモデルやテクスチャ、HDRISなどを集めたライブラリ。
  9. Uppbeat：クオリティの高いBGMを無料配布しているサイト。クレジット表記不要。無料プランでは10個/月まで、有料プランは7ドルから。
  10. Adobe Creative Cloud Express：Adobeがリリースした、「誰でも手軽に」高品質なコンテンツが作れることを目指したデザインツール。基本機能を無料で利用可。
  11. Vectornator：すべて無料とは思えないほど高機能なmacOSとiPad向けグラフィックデザインアプリ。
  12. Canva Video：オンラインデザインツールのCanvaが、ついにビデオ動画の編集にも対応。
  13. Album Cover Backgrounds：音楽アルバムやミックステープのカバー表紙に使える、完全無料のカバーアート向けテクスチャを集めたライブラリ。
  14. Image to Sketch AI：撮影した写真や画像をアップロードするだけで、手書きスケッチ風に変換してくれる無料オンラインツール。（※実際のツールのサイトはこちら）
  15. Make your photo 16×9：画像をアップロードすると、縦長の写真でも16×9に自動調整してくれる。
  16. Pixelhunter：手元にある写真をアップロードするだけで、あらゆるソーシャルメディア用画像サイズに自動変換。
  17. Pexel：SNS投稿に必要なパーツやテンプレートを揃えたFigma用ファイル。

配色カラーツール

  1. Dopely Colors：美しい配色カラーパレット。グラデーションを作成したり、カラーホイールによる配色選び、配色コントラストチェック、トーンツールなどの機能がずらり。
  2. Material Theme Builder：画像や色を選択すると、アルゴリズム機能で自動生成されたUI用のダイナミックカラーが表示されるツール。Figmaとブラウザ版で利用可能。
  3. Radix UI：美しく、アクセシブルなウェブサイトやアプリケーションをデザインすることを前提にしたオープンソースによるカラーシステム。
  4. Couleur.io：（※ノートンの判定で危険サイトとされたので、リンクも内容も紹介しない。）
  5. Huey Color palette Generator：色覚異常のひとでも、テキストと背景の適切なコントラストを認識できる、WCAGコントラストに沿った配色カラーパレットを自動生成。
  6. Actionable Color Palettes：ウェブデザインで使いやすい配色カラーパレットを集めたサイト。
  7. Color UI：そのまま利用するのはもちろん、カスタマイズも可能な美しい配色カラーパレット集。カラーピッカーやマテリアルカラー一覧など、配色に困ったときに参考にしたいサービス。

グラデーションツール

  1. Mesh Gradients：プロトタイプツールSketch内でメッシュグラデーションを作成、追加できる拡張プラグイン。より美しい滑らかな色の変化を表現可能。
  2. ffflux：お好みの2色を決めるだけで、淡いぼかし具合が美しいグラデーションをつかった背景テクスチャを作成。SVGファイルでダウンロード可。
  3. Noise & Gradient：色を超えるマルチカラーをつかったグラデーションを作成し、ザラッとしたGrainエフェクトを追加できる配色ツール。完成したテクスチャは無料ダウンロードも可能。
  4. Gradient Generator Tool：通常のCSSグラデーションよりもカラーホイールを意識した、美しいグラデーションを作成できるオンラインツール。
  5. CSS Gradient Editor：複雑なCSSカラーグラデーションを作成できるオンラインツール。あらかじめ用意されたプリセットの他、ミッドポイントを活用したより美しいグラデーションを表現可。
  6. Gradients Mass Driver Workshop：２つのお好みの色を決め、抽出サンプルポイント数を指定することで、よりなめらかなCSSカラーグラデーションを作成。コードを自動生成。
  7. Easing Gradients：よりなめらかなグラデーションの色の混ざり方を調整できるツール。画像の上に文字テキストを重ねるときなどに便利。
  8. Whatamesh：アニメーション付きの背景デザイン向けグラデーションメッシュを作成できるオンラインジェネレーター。クリックひとつでコードを発行。Gradient.jsを読み込む必要。
  9. Animated Gradient Background Generator：アニメーションで変化する背景用のグラデーションを作成できるオンラインツール。グラデーションの色や角度、アニメーション速度も細かく調整可。
  10. Conic.css：CSSで表現できる美しいグラデーションのみを厳選したライブラリ。
  11. Mesh：WebGL shadersによって美しいグラデーションを作成できるオンラインツール。
  12. 100 Free Mesh Gradients Collection：ハンドメイドでデザインされたマルチカラーの美しいメッシュグラデーション100種類を揃えたテクスチャ素材セット。

SVGツール

  1. SVG Shape Divider：ユニークな形のSVGシェイプ・ディバイダーを作成できるオンラインツール。
  2. Ssshape：オーガニックなblobシェイプを作成できるオンラインツール。キャンバス上にお好みでドットをうち、右下にあるボタンをクリックすれば完了。
  3. SVG Shape Geneartor：3色まで選択可能でオーガニックな見た目のSVGシェイプをランダムで作成できるジェネレーター。
  4. Haikei：ユニークなSVGシェイプや背景、シームレスパターンを作成できるオンラインツール。
  5. Wicked Backgrounds：波ウェーブをつかった美しい背景テクスチャをシンプルなツールで調整し、そのまま無料ダウンロード可。
  6. bbburst：表示したいシェイプを選び（複数選択可）、配色を決めるだけで、カラフルな紙吹雪デザインをSVGファイルで作成、ダウンロード可。
  7. Dddoodle：落書きのようなユルい手書きデザイン120種類を、SVGファイル形式で収録した無料アイテム。CC0で商用利用にも対応。
  8. SVG Gobbler：表示しているウェブサイトで使われている、すべてのSVGファイルをダウンロードできるだけでなく、SVG最適化やPNGファイル形式でのダウンロードもワンクリック。ブラウザChromeの拡張機能プラグイン。
  9. SVGcode：JPGやPNG、GIF、WebP、AVIFなどのラスター画像を、SVG形式に変換できるオンラインツール。

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

  1. Screen REC：スクリーン画面をその場ですぐに録画できるシンプルなオンラインツール。動画ファイルはMP4とWebMから選択可能。
  2. Poet.so：お好みのTwitter投稿のスクリーンショットを撮影、加工、ダウンロードまで一括でできるオンラインツール。
  3. CodePNG：自分のコードをペーストし、背景グラデーションを選択すれば、美しい画像ファイルに変換してくれるオンラインツール。

アイコンライブラリ

  1. Health Icons：ヘルスケア、健康、歯医者、薬学、病院などあらゆる医療に関するアイコン600以上。MITライセンスで商用利用も自由に。
  2. COVID-19 Icon Set：コロナウイルス、COVID-19に特化したベクターアイコン56個セット。AiとEPS、SVG、PNGファイルが収録。
  3. Bootstrap Icons：人気CSSフレームワークBootstrapが、ついに公式アイコンライブラリを公開。1500種類を超えるアイテムが揃い、SVGやSVGスプライト、Webフォントとして利用可。
  4. Free Charts Icon Set：4つのカテゴリに分けられた80種類のチャート図のアイコン素材セット。グラフやビジネス、アナリティクス解析などを想定したイラストが揃う。PNGとSVGファイルで収録。
  5. Sensa：300種類を超える絵文字アイコンを、PNGやSVG、Figma、Sketchファイルで。あらゆるサイズに対応できるベクターファイルでの提供。
  6. 3D Icons：1400以上の3Dアイコンを揃えた無料素材集。PNGファイルの他、Figmaファイル、3DソフトBlenderと互換性のある.fbxファイル形式を用意。
  7. Koloicons：統一感のあるアイコン3000種類を、SVGファイル形式で収録した、Figmaファイル。
  8. FreeIcons：オープンソースで公開されているアイコンに絞り集め、タグ付けしたアイコン検索ツール。網羅している個数は10万個越え。個別ダウンロードも、色の変更も可能。ユーザー登録すれば、お気に入りアイコンセットを作成、保存可。
  9. IconDuck：商用利用にも対応した、オープンソースの10万個を超えるアイコンとイラストを公開しているサイト。セットごとに整理されている。
  10. SVG Repo：30万個を超えるベクターアイコンを無料ダウンロード、商用利用できるサイト。
  11. CSS Icon Animated：すべてCSSのみで作成されたアイコンコレクション。２つのアイコンを利用するだけで、シェイプが変化するモーフィング・アニメーションエフェクトを作成可。
  12. Fluent Icons：Microsoftがリリースした4000個以上のオープンソースのベクターアイコンライブラリ。あらゆるインターフェースに必要な素材が揃い、Figmaファイルでも利用可能。
  13. Iconoir：現在900個以上のSVGアイコンが揃った、世界最大規模のオープンソースライブラリ。すべてMITライセンスの商用可。
  14. Glyphs：※リンク先に問題があるようなので、リンクの設定と説明文の転載を実施しない。
  15. Flagpack：260を超える世界中の国旗を集めたライブラリ。デザイナー向けにはSketchとFigmaファイル。デベロッパー向けにはReactとVue、Angular用ファイル。
  16. Google Fonts | Material Icons：2000種類を超えるアイコンを用意。5つの異なるスタイルから選択可。ウェブフォントとしてAPI経由で利用可。
  17. App Icon Generator and Resizer：※リンク切れのため掲載しない。
  18. Nucleo：驚くほど効率的にアイコンを整理、管理できるツール。

フォント・タイポグラフィーツール

  1. Fontshare：これまで有料で販売されていたフォントを無料ダウンロードできるだけでなく、Webサイトで手軽に利用できるAPIサービスが特長。※項目名のリンク先は紹介記事。サービスのリンクはこちら。
  2. Fonts Knowledge：Google Fontチームが世界中のタイポグラフィーのプロと協力して制作したフォントのためのライブラリ。目的に応じた書体をえらび、使用するための基本、参考ガイド。
  3. Coding Font：画面の左右に表示されたフォントから好きな方を選択していくと、自分にもっとも合ったコーディング用フォントを決定可。
  4. Modern Fluid Typography Editor：最小値と最大値を設定することで、特定の画面サイズに適した文字サイズに自在に変化するタイポグラフィー向けCSSツール。
  5. Doppler：各スクリーンサイズに応じたフォントの見え方をまとめて確認、調整できるオンラインツール。調整したCSSはそのままダウンロード可。
  6. MockoFUN：入力した文字を円サークルやハート型など、シェイプに沿って配置できるシンプルなオンラインツール。
  7. Letterform Archive：歴史を超えて愛される「シンプルイズベスト」なフォントデザイン9,000枚以上が揃う。デザインアイデアは浮かばないときの参考インスピレーションにぴったり。

アニメーションツール

  1. Fable：ブラウザから利用できる、モーションデザイン向けプラットフォーム。初心者にもやさしいインターフェースも特長。無料プランで基本的な機能を試すことができる。
  2. Atropos JS：スマホで驚くほどタッチ操作フレンドリーな、3Dパララクスホバーエフェクトを作成できる、軽量かつ無料オープンソースのJavaScriptライブラリ。没入感のあるデザインを手軽に実現可。
  3. Motion One：超軽量なファイルサイズによる最速パフォーマンスを掲げた、ウェブアニメーションAPIライブラリ。使い方もシンプルで、はじめてのひとでも分かりやすく、詳しい公式ドキュメントも完備。
  4. Web Animation Course：Webアニメーションについて詳しく解説したデザインコース。アニメーションの基本原則からホバーエフェクト、スクリーンに応じたアニメーションなど、細かい動きをデモと一緒に学ぶ。