Webサイト制作の時短テク!便利な最新オンラインツール48個まとめ

 

この記事では、Webデザインで注目したい最新オンラインツール48個をまとめてご紹介します。

 

2021年に入って公開された新しいツールやサービスが中心で、Webデザイン作業の効率化や作業スピードがアップする便利ツールが揃います。

 

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

 


コンテンツ目次

 

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

Web制作便利ツール

SVG Shape Geneartor

3色まで選択可能でオーガニックな見た目のSVGシェイプをランダムで作成できるジェネレーターで、ランディングページなどあらゆるデザインのアクセントになりそうな素材。

 

 

AnimXYZ

ウェブサイトで利用できるCSSアニメーションツールで、CSS変数を利用しているので、@keyframeを書かずにあらゆる動きを表現できます。

 

 

Bootstrap 5 Cheatsheet

人気HTMLフレームワークBootstrapで使用されているクラスや変数、mixinをリアルタイムプレビューできるチートシート。項目ごとに整理されているので、気になるクラス名をクリックしてみましょう。

 

 

Cherry

ダウンロードしてすぐに編集できる、拡張性の高いデザインシステム用テンプレート。デザイン作成からサイト完成までをバックアップする頼もしい無料ツール。

 

デザインシステムの作り方徹底ガイド 参考にしたい導入事例まとめ

 

 

Github Surf

Github.comを.surfに変えるだけで、レポジトリをVS Codeオンラインエディターで一発表示できるサービス。Chrome拡張機能ももうすぐ公開です。

 

 

Shuffle

BootstrapやTailwind、Material UIなど人気フレームワークを選択でき、ドラッグ&ドロップでウィジェットを追加していくだけでテンプレートを数分で作成できます。デベロッパーの開発をより手早く行うことが可能に。

 

 

Animated SVG Links

CSSだけで表現できるユニークなホバーリンクエフェクト。波型ウェーブやジグザグなど、デザインのアクセントにも。

 

 

Glass Morphism

不透明度やぼかし具合など細かい調整ができるだけでなく、背景にお好みの画像をアップロードできるので、より実践に近いコードの確認ができます。

 

 

Glassmorphism CSS Generator

こちらもグラスモーフィズム・スタイルを手軽に表現できるCSSジェネレーター、設定項目が少ないぶん、スッキリとしたソースコードに。

 

グラスモーフィズム?CSSコピペできる新Webトレンドの参考HTMLスニペット、ツールまとめ

 

 

2020 Ipsum

ウェブサイトのダミーテキスト作成に便利なオンラインツールで、COVID-19やTik Tokといった、2020年を代表するキーワードを盛り込んだユニークな文章がポイント。

 

 

Pollen

ユーティリティファーストなCSSを設計するためのCSS変数だけをまとめたスタイルシートで、一貫性のあるデザインスタイルの管理にもオススメ。

 

 

K!sbag: free Minimal Portfolio Template

シンプルな見た目のポートフォリオ向けHTMLテンプレートで、トップページを含む合計6ページが収録されており、PSDファイルも同梱。

 

 

MacOS 11 Big Sur UI Kit

アップデートされた最新版macOS 11 Big Surのインターフェース画面をそのまま完全再現したUIキットで、Sketch専用ファイルとなります。

 

 

CSS Stripes Generator

ストライプ線の角度を選択し、お好みの色を追加していくだけのお手軽な操作感。ストライプ線は何本でも増やすことが可能。

 

 

SVGWaves.io

ウェブコンテンツの仕切り線として活用できる、波型ラインを自由に作成できるオンラインツール。アンカーポイントをいくつでも追加できるので、複雑なシェイプにも見事に対応できます。

 

 

Tails

ドラッグ&ドロップで直感的にウェブサイトを作成できる、Tailwind.CSSをベースにしたオンラインHTMLページビルダー。2021年に入り、Tailwind.cssの勢いがすごいです。


 

 

Tail-Kit

Tailwind.CSSで作成された、200を超えるコンポーネントがセットに。どんな案件にも対応できる汎用性の高いコンポーネントが揃い、どれもオープンソースで公開中。

 

 

Three.js Journey

立体的な3Dウェブサイトに欠かせないThree.jsとWebGLを基礎から学ぶ本格オンラインコース。

 

 

Wicked Blocks

フレームワークTailwind CSSで作成されたブロックやコンポーネントを集めたコレクションで、コードをコピペするだけで利用できるお手軽さ。

 

 

 

配色ツール

pika

スクリーン上から自由に色を抽出できるMac専用カラーピッカーアプリで、同時にコントラストのはっきりした色の組み合わせを、点数付きで提示してくれます。

 

 

Hypercolor

Tainwind CSSで利用されているカラーパレットで作成された美しいグラデーションカラーコレクション。CSSコードをコピペで利用できます。

 

 

Colortopia

美しいカラースキームを手軽に探すことができる、MITライセンスのオンラインツール。

 

 

Color UI

そのまま利用するのはもちろん、カスタマイズも可能な美しい配色カラーパレット集。カラーピッカーやマテリアルカラー一覧など、配色に困ったときに参考にしたいサービスのひとつ。

 

 

Color Spark

オープンソースで公開されているカラースキーム・ライブラリ。プロジェクトにインポートし、手軽に配色のカスタマイズを行うことが可能に。

 

 

 

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

Tabbied

三角や丸などのシンプルな幾何学模様と美しい配色をつかって、オリヂナルのデザインパターンをブラウザ上で作成、編集できるツール。

 

 

Edite

フォトショップがなくても、ブラウザ上でシンプルな画像編集を行うことができるオンラインツール。切り抜きや文字テキストの追加、フィルタ機能、ショートカットなども充実。

 

 

Everypixel

50を超える主要フォトストックサイトから縦断マルチ検索を行ってくれるツール。キーワード別に探すことができるのはもちろん、無料または有料などのオプションも◎。

 

 


Moose Photos 3.0

人気フォトストックサイトUnsplashなどとは異なり、実際にスタジオでプロのモデルを撮影した、高品質なストック写真が特長の新サービス。

 

 

VISIWIG

継ぎ目のないパターンテクスチャを編集し、完成した作品をベクターファイル形式で無料ダウンロードできます。

 

 

 

イラスト系ライブラリ

3D Illustration Pack

30種類のユニークでかわいい3Dイラストを揃えた素材集で、Figma用ファイルで無料ダウンロードできます。

 

 

3D Characters & Illustrations Pack

2021年に要注目の3Dスタイルを反映したキャラクターとイラスト素材集。無料デモ版として、5つのイラストレーションをダウンロードできます。

 

 

Illustration Kit

個人または商用でも無料で利用できるベクターイラストライブラリ。毎日新しい素材が追加されるので、メルマガ登録しておくと便利かも。

 

 

Palms

アイデアを形にする43種類の手描きイラストを揃えた素材集で、AIファイルの他にSVGやPNGファイルで収録されています。

 

 

Vectorove

無料のベクターイラストコレクションで、お好みで配色を3色まで変更、カスタマイズできるので、プロジェクトに合わせて利用できます。

 

 

Skribbl

クレジット表記なしで自由に利用できる、手書きイラスト素材集。ヘルス&フィットネス、フード&ドリンク、ファッション、農業などにカテゴリ分けされているので使い勝手も良さそう。

 

 

 

アイコンツール

IconDuck

商用利用にも対応した、オープンソースの10万個を超えるアイコンとイラストを公開しているサイト。セットごとに整理されているので、お気に入りのスタイルを見つけてみてはいかがでしょう。

 

 

Flagpack

260を超える世界中の国旗を集めたライブラリ。デザイナー向けにはSketchとFigmaファイル、デベロッパー向けにはReactとVue、Angular用ファイルがずらり揃います。

 

 

 

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

Wondershare

ワイヤーフレームやインタラクティブなプロトタイプを、ウィジェットやテンプレートを使って、ドラッグ&ドロップで作成できるオンラインツール。

 

 

Personal kanban

プロジェクトの見える化を推奨するかんばん方式を、シンプルなオンラインツールで利用してみましょう。

 

 

 

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

PhotoRoom

写真から人物だけを切り抜き、文字やデザインパーツを背景に追加し、オリジナルデザインを作成できるアプリ完結ツール。

 

 

Same Energy

ビジュアルにこだわりまくったサーチエンジンで、調べたいワードを入力し、表示された画像をクリックしていくことで、よりイメージに近い画像をまとめて表示してくれます。

 

 

Snowflake Generator

本物そっくりで超リアルな雪の結晶を作成、カスタマイズできるジェネレーターサービス。できた結晶はJPEGファイルでダウンロード可能。

 

 

Dalle-E

120億以上の言語の組み合わせをトレーニングした人工知能で、あらゆる言葉で表現したものをビジュアル化してくれる未来のツール。

 

 

Uppbeat

クオリティの高いBGMを無料配布していサイトで、クレジット表記も必要なく、無料プランでは10個/月までで、有料プランは7ドルから。

 

 

Open MCT

NASAが開発し、実際に現在も利用されている、データを可視化するためのフレームワークで、デスクトップとモバイル療法で利用できるウェブベース・ツール。

 

 

Soundscape

集中力を高め、リラックスできる環境BGMを聴くことができるサービスで、あらかじめ用意されたプレイリストの他に、自分で音を「つくる」ことも可能です。

 

 

Tree FM

世界中の森林で録音、レコーディングされた音をひたすら流すメディテーション音楽サービス。日常からの逃避行、リラックスしたいときにどうぞ。

 

 

SidePage

ツールやサービスの本格的な使い方ドキュメントをサクサクと作成できる無料オンラインサービス。

 

 

Synesthesia

音に合わせて美しいビジュアルを作成するオンラインシンセサイザー。

 

 

2020年に公開された便利なWebオンラインツール・ベストもまとめいます。

Web制作の時短に!2020年の便利オンラインツール・ベスト100選

 

サムネイル@ : Free Music for Creators – Uppbeat