これだけあれば困らない!Web制作を快適にする最新オンラインツール48個まとめ

 

この記事では、Web制作が快適に捗る、便利な最新オンラインツールをまとめてご紹介しています。

 

新型コロナウイルスによる影響で、在宅によるリモートワークが増えたことで、誰かと一緒になにかを行う、コラボレーション関連ツールの公開が多くなっています。

 

その他にも面倒な作業をワンクリックで完了させる、知っておくと便利なジェネレーター系ツールや配色リソースなどが揃います。

 

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

 


コンテンツ目次

 

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

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

Magma Studio

アーティストやチームがリアルタイムでキャンバスを共有、コラボレーションできるツール。プレビューでは、4人のアーティストが異なるスタイルを同時に描いています。

 

 

Pattern Pad

さまざまなレトロスタイルを元にした、美しいおしゃれなパターンを作成、カスタマイズできるオンラインツール。

 

 

Pattern Monster

継ぎ目のないSVGパターンをオンライン上で作成できるジェネレーターツール。現在100種類近くのパターンが公開されており、カスタマイズも可能です。

 

 

Make your own Pattern

Adobe Creative Cloudが公開しているオンラインツールで、写真をアップロードするだけで万華鏡のような美しいパターンを作成、カスタマイズできます。

 

 

SVG Path Editor

SVGファイルのパスをオンラインで自由に編集できるパスエディター。

 

 

API for Pexels

ほんの数行追加するだけで、Pexelsの高品質なフォトストック写真を無料で利用できるAPIサービス。

 

 

Pose

人間の自然な動きを表現したキャラクターを描くのに役立つツール。ポーズやアングル、体型、身長なども自由にカスタマイズできます。

 

 

3D Lettering

立体的でおしゃれな文字テキスト、タイポグラフィーを高画質なPNGファイルで260種類以上提供中。デモ版として、10個を無料ダウンロードできます。

 

 

3000 hands

あらゆる動きをした立体的な「手」のデザインだけ3,000個集めた素材コレクション。BLMデザインにもオススメ。

 

 

Shapefest

16万個!以上の3Dシェイプを無料ダウンロードできるオンラインリソース。本物そっくりでリアルな立体感が特長で、金やガラス、紙、セラミックなどあらゆる質感が揃います。

 

 

 

Web制作便利ツール

CSS Background Patterns

CSSだけで実装できる背景用パターンを、クリックひとつでコピペ、利用できるオンラインツール。波ウェーブやストライプ柄、ポルカドット、方眼紙など種類も豊富で、サイズや不透明度、配色などのカスタマイズも可能です。

 

 

The Good Line Height

フォントサイズを入力すると、それにふさわしい行間を教えてくれる便利ツール。

 
 

System Flow

デザイナー視点のWebflowとFigma用UIフレームワーク。ノーコードでウェブサイトを開発する、新しい時代がもうすぐそこまで来ています。

 

 

Flexo

Flexboxの仕組みについて、インタラクティブなデモと一緒に学びます。ボタンを切り替えることで、レイアウトを自動的に変化するため、Flexboxを体感的に覚えることができます。

 

 

Grid by Example

CSS Gridプロパティを活用した、さまざまなレイアウトサンプル例をまとめて確認できるリソースとして。CSSコードのコピペで実装可能です。

 

 

Free Favicon Maker

SVGでできたファビコンを手軽に作成できるオンラインツール。使用する書体やサイズ、配色なども変更でき、SVGとPNGファイルとしてエクスポート可能。

 

 

Link to QR

URLリンクをQRコードに変換してくるサービスで、サイズや色なども自由に指定できます。

 

 

HEICtoJPEG

HEIC形式の画像ファイルをJPGに変換できるツール。これで、iPhoneで撮影した画像がPCで見ることができます。

 

 

Siteoly

Googleスプレッドシートに打ち込んだデータを、コードを書く必要なく、自動でウェブサイトに変換してくれる画期的なサービス。

 

 

 

配色ツール

Color Names

モダンブラウザ対応の140色をまとめた配色リスト。各色の名前とHEXカラーコード、RGB値を確認したいときにどうぞ。

 

 

What The Hex

HEXカラーコードを入力すると、それに合った名前を自動で付けてくれるサービス。CSS VariablesやSCSSのスタイリング命名に便利。

 

 

ColorBox

色相や彩度、明るさなどを調整し、お好みの配色を見つけることができるオンラインツール。新しくなってより直感的に色を選ぶことが可能に。

 

 

Hexpalette

4色の美しい配色カラーパレットを厳選してコレクションしている配色リソースツール。各色をクリックすると、HEXカラーコードをコピーできます。

 

 

Picular

キーワードを入力すると、その雰囲気にあった色合いを複数まとめて提案してくれる配色オンラインツール。

 

 

 

イラスト系ライブラリ

Nice Illustration

クレジット表記不要で、商用利用も可能なイラスト素材を無料公開しているサイト。PNGファイルとカスタマイズできるSVGファイルでダウンロードどうぞ。

 

 

Christmas Illustration

400種類以上のユニークでかわいいクリスマス向けイラストを、PNGとSVGファイルで無料ダウンロードできます。利用時にはクレジット表記を忘れずに

 

 

Blush for Figma

トレンドの手描きイラストを手軽に利用できるFigmaおよびSketch用プラグイン。

 

 

Tyrus

フリーランスのイラストレーターがビジネスを最適化し、好きなことに集中できる時間を増やすことを目的とした、Airbnbが提供するデジタルツールキット。

 

 

 

プロトタイプツール

Custom Graph for Figma

自分のデザインをベースにしたチャート図を作成できるFigmaプラグイン。

 

 

Speedboat for Figma

人気フレームワークTailwind CSSをつかったコンポーネントを、Figma上で編集、カスタマイズできる有料プラグイン。

 

 

Overlay for Figma

Figmaでデザインしたコンポーネントを、ReactやVue、HTML用コンポーネントに変換してくれるプラグイン。

 

 

Uxerkit

ユーザーフローの作成に便利な、柔軟にカスタマイズできる矢印記号をコレクションした素材。SketchとFigmaで利用可能。

 

 

 

アイコンツール

Lordicon

ウェブサイトのアクセントに使いたい、27種類のアニメーションアイコンを揃えた素材セット。お試し版として、50個が無料配布されています。

 

 

Icônes

オープンソースのアイコンをコレクションしており、まとめて検索や、オリジナルのアイコンパックを作成、ダウンロードできるサイト。現在、90以上のプロジェクトに対応中。

 

 

SVGBOX

操作はいたってシンプルで、お好みのアイコンを見つけて、出力されたコードをコピペするだけ。SVGアイコンを手軽にウェブプロジェクトに追加できるAPIサービス。

 

 

Phoshor Icon

Web用インターフェースはもちろん、グラフやチャート図、プレゼン資料作成などあらゆる場面で利用できる、使い勝手抜群のアイコン素材セット。4,000個を超えるアイコンを無料ダウンロードできます。

 

 

macOS Big Sur

新しくなったmacOSスタイルに対応した、各種アプリやツールの代替アイコン2,300個以上を無料ダウンロードできます。

 

 

 

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

BeeCanvas

文字や画像、音声、動画などあらゆるファイルを、複数人のチームで同時に編集、デザインできるホワイトボード機能。リアルタイムで共同作業を行うことができ、ドラッグ&ドロップのシンプルな操作性も○。無料版あり。

 

 

Bubbles

現在見ているウェブページ上でチャットを開始できるChrome拡張プラグイン。言いたいことをうまく伝える手助けになりそうなツール。

 

 

Picter

複数のチームで画面を共有しながら書き込みを同時に行ったり、レビューコメントを保存、確認できるコラボツール。

 

 

Xpression

ビデオチャットやライブストリーム用に、自分の顔を世界の偉人に変えてしまうバーチャルツール。

 

 

 

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

lobe Ai

手軽な操作のみで、機械学習や人工知能モデルを訓練させることができる、まさに未来な無料ツール。

 

 

Free Sound Effect from Mixkit

動画編集で活用したい、高品質なサウンドエフェクト、効果音を無料ダウンロードできるサイト。この他にも、ハイクオリティな無料動画の配布も行っています。

著作権フリー!超ハイクオリティな動画素材を無料ダウンロードできる Mixkit

 

 

Steep

Googleが発表したビジュアル重視の記事形式、「ストーリー」の効果的な活用事例やサンプルをあつめたサイト。まだ数も少ないですが、今後に期待。

 

 

UI Coach

ボタンをクリックするたびに、UIデザインのお題をランダムで出題してくれるオンラインサービス。自分のペースでUIデザイナーを目指します。

 

 

Romanizer

数字をアルファベットで表記するローマ数字に変換してくれるサービス。

 

 

808303studio

TR-808ドラムマシーンとTB-303ベースシンセサイザーを、手元のキーボードキーを押しながら、実際に体験できるオンラインサイト。

 

 

Bongo Cat

ピアノやマリンバ、トロンボーンなど楽器をキーボードをつかって演奏できるオンライン猫サービス。

 

 

前回の最新ツールまとめも一緒にいかがでしょう。

ウェブ制作が捗る!便利すぎる最新オンラインツール、無料素材56個まとめ

 

サムネイル@ : Tyrus | Airbnb Design