Advertisement

 

この記事では、Webデザイン制作を快適にする最新オンラインツール30個をまとめてご紹介します。

 

ウェブデザインだけで、あらゆるクリエイティブな場面で活躍しそうな、「あったら便利。」を実現した驚きの新しいツールを中心にセレクト。

 

これまで時間のかかっていた面倒なことも、ウソのように簡単にこなす便利な機能や素材などずらり揃います。

 

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

 


コンテンツ目次

 

 

Web制作の効率性アップ!おすすめ最新オンラインツールまとめ

🧰 Webデザイン便利ツール

100 Buttons

自由に利用できるHTML/CSSボタン100種類をコレクション。どれも魅力的なアニメーションが目を引きます。GitHubページも公開中。

 

Webサイトにおける「ボタン」は、使いやすさと分かりやすさが重要です。このバランスがなかなか悩みどころで、いつも同じスタイルのボタンを色を変えて再利用、なんてことも

 

 

AnimatiSS

ウェブプロジェクトを華やかにする素敵なCSSアニメーション集で、その場で再生、コピペで利用できるのも便利です。

 

 

 

Min-Max-Value Interpolation

画面サイズに応じてフォントサイズが変化する、レスポンシブの最新テク「Fluid Tpography」をCSSのclamp()関数を使用して、手軽に設定できるオンラインツール。オフラインでも利用可能。

Min-Max-Value Interpolationのデモ画像

 

 

 

Blob Animation

スムーズでなめらかな動きを加えたBlog流体シェイプを手軽に作成できるオンラインツール。

 

液体が波打つような、ゆるやかなスライムのような曲線をもつBlob流体シェイプ。ウェブサイトに取り入れることで、直線的で無機質な印象から、ナチュラルで優しい印象を与え

 

 

Bob Ross Ipsum Generator

テレビ番組『ボブの絵画教室』で有名なアメリカの画家ボブ・ロス。彼のハッピーなことばをダミーテキストとして利用できるツール。

ハッピーなダミーテキストツール Bob Ross Quotes Generator

 

「準備はまだできていないけど、仮のダミー画像を入れておきたい」ウェブ制作中にそんな場面に遭遇することもあるでしょう。 この記事では、ダミー画像を手軽に

 

 

Scroll Animation Ideas for Image Grids

スクロールに合わせて複数の画像のサイズや配置などをスムーズにアニメーションさせる参考レイアウト、8つのデモページが公開中。

 

 

 

Chalk.ist

ソースコードを美しい画像として作成できるツールで、背景のグラデーションなども手軽にカスタマイズでき便利。

 

 

 

Design Systems Gallery

世界中のあらゆるブランドのデザインシステムを集めたライブラリで、実際にデザインシステムを作成するときの参考に。

有名ブランドのdesign systemを集めたギャラリーの画像

 

 

 

Motion DevTools

ウェブアニメーションをこれまで以上に素早く作成をコンセプトにした、Chromeブラウザ拡張プラグイン。

Motion Devtool - Chromeブラウザプラグイン

 

 

 

Bravo Studio

ノーコードでモバイルアプリを作成できる画期的なツール。AIを駆使したノーコードツール、今後もますます活躍しそう。

 

 

 

Scroll Between

パララックス効果をHTML内で表現でき、クロスブラウザ対応で使い勝手のよいツール。

 

 

 

🦄 デザインツール

Creattie

魅力的なLottieアニメーションを集めた新しいライブラリで、無料Lottieもハイクオリティでおしゃれ。

 

 

 

Illustrator Colour Palette Pack

配色に困ったときに便利なカラーパレットを集めた無料Illustrator向けライブラリ。

 

 

 

Free Watercolor Photoshop Brushes

まるで実際に手書きしたような風合いをPhotoshopで表現できるブラシ素材100種類セット。

 

フォトショップの素材の中でも、高品質なブラシは使いやすい万能アイテム。 あらゆるスタイルを表現できますが、どれを使ったら良いか迷ってしまうというひとも
※ 2019年2月13日に新しい素材6種類を追加し、合計36個の無料Illustrator用ブラシとなります。 ※ 2021年2月24日、ダウンロードでき

 

 

Illustrations

どんなデザインにも合う、カラフルなイラスト素材セット。FigmaやSketch、Aiに対応したベクター形式で、SVGとPNGで無料ダウンロードできます。

Illustrations - 無料で高品質なイラストを提供

 

 

 

Selfone

美しいPowerPointテンプレートが必要ですか?スマホアプリの紹介を想定し、すべて無料でダウンロードできます。KeynoteやGoogle Slidesでも利用可能。

 

 

 

Vector Wiki

世界中のあらゆるブランドロゴを検索、SVGベクターファイル形式で無料ダウンロードできるサイト。PNGファイルもOK。

12万以上のロゴやアイコンをSVGファイルでダウンロードできるVectorWiki

 

 

 

 

🗺 プロトタイプ・アイコンツール

Artboard Studio

オンライン上で品質の高いモックアップを作成、簡単に仕上げることができるツール。アニメーションを追加することもできますよ。

 

 

 

Open Stickers

80種類のスタイリッシュで楽しげな手書きイラストが特長のステッカーデザイン集。FigmaまたはSketch、Aiファイルでもどうぞ。

80種類のかわいい手書きイラストベクター open sticker

 

 

 

Free 3D Food Icons

超立体的な3Dたべものアイコン素材25個セットで、3D BlenderファイルによるカスタマイズOKで、FigmaとPNGファイル形式でどうぞ。

超立体的な3Dたべものアイコン素材25個セット

 

 

 

Cryptofonts

仮想通貨のロゴを集めたアイコン&Webフォント集で、1500以上のCSSとSVGアイコンが公開中。

仮想通貨のロゴを集めたアイコン&WebフォントCryptofontの画像

 

 

 

Dope UI

ハイクオリティなUIデザインテンプレートを無料ダウンロードでき、どれもデザイントレンドを意識した今っぽさが欲しいときや、レイアウト決めにも便利。FigmaやPhotoshop用ファイルでどうぞ。

ハイクオリティなUIデザインテンプレートを無料ダウンロードできるDopeUI

 

 

 

Humbleicons

シンプルで使い勝手の良い、216個のSVGアイコン素材パック。個人、商用プロジェクトでも無料利用OKです。SVG Spriteでの利用も可能で、CSSによるスタイリング編集しやすい点も◎。

使い勝手のy位シンプルな

 

 

 

Iconduck Figma プラグイン

12万個のオープンソースアイコンを検索、利用できる最強Figma用プラグインのひとつ、IconDuck。

12万個のオープンソースアイコンを検索、利用できるIconDuck

 

 

 

PixelArtIcons

ピクセルアートのようなSVGアイコン350+個パック。24x24pxで作成されており、Figmaファイルも無料配布中。MITライセンス。

24x24pxのピクセルドットで描かれたアイコン素材350+個パック PixelArtIcons

 

 

 

 

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

OptimiseImages

JPGやSVG、PNG、GIF画像の最適化と圧縮、さらには次世代の画像フォーマットWebPやAVIFへの変換もできる便利ツール。1つで9つの画像最適化ができるそう。

 

 

 

BGremover

画像をアップロードすれば、背景を自動で削除してくれるオンラインツール。なぞるだけで不要なものを消してみたり、撮影で切り抜きできるツールと一緒にどうぞ。

 

Photoshopで画像から人や物などのオブジェクトを除去する方法は、デザイン制作において重要なテクニックです。しかし、用途に応じてツールを使い分け、除去レタッチ作

 

 

WeektoDo

プライバシーに配慮した、1週間のスケジュールを確認できるシンプルなアプリツール。

WeekToDoの画像

 

 

 

Short.io

完全にブランド化されたURLを短縮・パーソナライズ・共有できるツール。無料ではじめましょう。

ドメインでリンク短縮できるshort

 

 

 

Shrink.media

画像ファイルのサイズを圧縮できるツールで、画像の品質を細かく調整でき、5000pxの大きな写真サイズまで対応してくれます。

Shirnk Mediaの画像

 

 

 

NFT Export

ノーコードでNFTを生成できる無料オンラインツール。デモコレクションも公開されています。メタデータ付き10,000NFTコレクションの生成、プレビュー、編集、ダウンロードが数分で無料で。

 

 

 

Keyboard Accordion

パソコンのキーボードをつかって、適当につなげるだけで曲っぽくなる「ダイアトニック・コード」のアコーディオン演奏ができる楽器ツール。

パソコンのキーボードでアコーディオンを演奏できるKeyboard Accordion

 

 

 

GetCam

手持ちの使わなくなったiPhoneをウェブカメラとして利用できるようにするアプリ。MacとWindowsどちらも利用できます。

 

 

 

QIndR.io

イベントや予約の日時や場所、ウェブサイトなどの詳細情報をQRコードで生成できるオンラインツール。QRコードツール増えてますね。

イベントや予約に便利なQRコード生成ツールQIndR.io

 

 

 

列車vs巨大な穴

リアルすぎる破損表現を表現できる自動車ゲームのデモプレイ。どれも飽きずに見てしまいました。

 

 

前回の最新便利ツールは以下よりどうぞ。

「こんなことできちゃうの?!」「もっと早く知りたかった。」 この記事では、ホームページ制作を快適にする最新オンラインツール48個をまとめてご紹介。