Advertisement

 

この記事では、Webデザイン制作で役立つ便利な最新オンラインツール41個をまとめてご紹介します。

 

ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトに使える話題の新ツールを中心に揃えています。

 

カテゴリごとに整理しているので、目的にあったお気に入りツールを今後の作業に取り入れてみてはいかがでしょう。

 


コンテンツ目次

 

 

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

Web制作便利ツール

Typedream

シンプルなインターフェース画面を利用して美しいウェブサイトをノーコードで作成できる新ツール。

 

 

 

Editor X

ドラッグ&ドロップによるシンプルな操作でレスポンシブ対応のウェブサイトのコンセプトから制作まで、シームレスなデザインプロセスを実現するノーコードビルダーツール、Wixから登場です。

 

 

 

Codewell

お題となるデザインカンプを元にHTML/CSSコーディングし、スキル向上を目指す学習サイト。無料版では素材ファイルと完成予想PNG画像がダウンロードできます。

 

 

 

CSS Layout Generator

Webサイトでよく見かけるレイアウトをCSS Gridで作成し、リアルタイムでレイアウトを確認しながらCSSコードを生成できるオンラインツール。今後CSS Flexboxにも対応予定。

 

 

 

Copy & Paste CSS

海外でよく見かける有名サイトで使われれているボタンスタイルをCSSで再現し、コピペで実装できるようにまとめたCSSライブラリ。

 

CSSボタンデザインは、スタイルを変えるだけでガラリと印象を変えることができるウェブデザイン要素のひとつです。 Copy & Paste CS

 

 

TailwindCSS Buttons

コピー&ペーストで利用できるTailwindフレームワーク対応のボタン素材コレクション。

 

 

 

UI Snippets

CSSコピペで利用できる使い勝手の良いボタンコンポーネント集。右クリックでCSSとSCSSのソースコードをコピー可能です。

 

 

 

Glass UI

グラスモーフィズム・エフェクトをその場で試しながら作成、調整できるオンラインツール。

 

Glassmorphism(グラスモーフィズム)は、昨年末ごろより「ニューモーフィズムの次はこれだ。」と話題になっているデザイン手法です。 この記事で

 

 

7.css

Windows 7の見た目をそのまま再現したCSSフレームワーク。Windows 95にはじまり、98XPと種類も増えてきましたね。

 

 

 

Github Copilot

Visual Stuidoエディタでコードを途中まで記述すると、残りの行や関数全体をAIが自動で補完、サポートしてくれるツール。

 

 

 

配色ツール

Radix UI

美しく、アクセシブルなウェブサイトやアプリケーションをデザインすることを前提にしたオープンソースによるカラーシステム。

 

 

 

Colors.

グラフィックデザインはもちろん、UIデザインなどのウェブ制作にも活用できる適切な色を選ぶお手伝いツール。

 

 

 

Mobile Palette Geneartor

メインカラーを一色選ぶだけでセカンダリーカラーやアクセントカラーなど、モバイルアプリUIデザイン向け配色を提案してくれるツール。色の組み合わせやトーン、色合い調整など色にまつわるツールがぎっしり。

 

この記事は、2016年8月22日に公開してから再編集、アップデートを随時行っています。新しいツールを加え、サービスが終了しているツールは削除し、合計83個の配色ツールサ

 

 

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

100 Free Mesh Gradients Collection

ハンドメイドでデザインされたマルチカラーの美しいメッシュグラデーション100種類を揃えたテクスチャ素材セット。

 

この記事では、人気のグラフィックのひとつ「グラデーション」をつかった無料テクスチャ、デザイン素材をまとめてご紹介します。 美しい配色の組み合わせを楽し

 

 

Freebie Animated Neon Font

チカチカと点滅するネオンライト・アニメーションを作成できるPhotosho用PSDファイル素材。使い方を紹介したYouTube動画も用意されています。

 

このチュートリアルは、Texturelabsによる英語版オリジナルチュートリアル「Neon Sign Text Effect」をアレンジしたものとなります。

 

 

Designify

画像から人物のみを切り抜き、さらに素敵なさまざまな背景を追加した写真を自動作成できるオンラインツール。

 

スマホのカメラで身の回りにあるオブジェクトを素早く切り抜き、Photoshopなどのデスクトップアプリに直接配置できる、新しいアプリClipDropが登場しました。

 

 

Tinter

画像をアップロードするとカラフルなカラーフィルタ8色を適用でき、そのまま画像をダウンロードすることも可能です。

 

 

 

Pixelhunter

手元にある写真をアップロードするだけで、あらゆるソーシャルメディア用画像サイズに自動変換してくれる便利ツール。

 

 

 

イラスト系ライブラリ

Heritage Library

著作権フリーで無料利用できる名画やアートから集められたイラストは、くだものや野生動物、海洋生物、ファッションなど幅広くジャンル別に公開されており、その数は現在160超え。定期的にアップデートされています。

 

この記事では、クリエイティブなプロジェクトに活用できるヴィンテージイラストを無料配布しているHeritage Libarary をご紹介します。 He

 

 

Scale for Free Illustration

高品質でオープンソースの新しいイラストを毎日1点ずつ公開するライブラリ。用途に合わせて色のカスタマイズも可能で商用OK。

 

この記事では、絵を描くのが苦手という非デザイナーのひとにも役立つ、商用利用可能な無料イラスト素材を公開しているサイトをまとめてご紹介します。 最近のウ
この記事では、デザイン制作で3Dデザインを手軽に作成、利用できる無料ツールやデザイン素材をまとめてご紹介します。 2021年の注目デザイントレンドとし

 

 

プロトタイプツール

Jitter · Animate your Figma designs

Figmaファイルをインポートすれば、手軽にアニメーションを追加でき、動画やGIFファイルでエクスポートできるツール。

 

 

 

Presentation for Adobe XD

プレゼンテーション資料をAdobe XDで手軽に作成できる拡張機能プラグイン。プロが作成したデザインテーマも揃っているので、はじめてのひとでも安心です。

 

 

 

iPhone 12 Clay Mockups for Sketch and Figma (FREE)

シンプルでミニマルな白い粘土のような質感が特長のモックアップ作成キット。FigmaとSketch用ファイルが揃います。

 

 

 

Mockup Generator

数クリックのみで美しいプロダクトモックアップを作成できるオンラインツール。

 

 

 

Gif Export

Figmaで作成したアニメーションをGIFファイルでエクスポートスルことができるプラグイン。

 

 

 

Mario Bros. Figma

Figmaのインタラクティブ・コンポーネントを使って再現された某ゲームデザイン用ファイル。

 

 

 

User Flow Diagram Template for FigJam

Figmaの新しいホワイトボードツールFigJamで使えるユーザーフロー・ダイアグラム用テンプレート。

 

この記事では、デザインツールFigmaに追加しておく便利な、2020年のベストプラグイン42個をまとめてご紹介しています。 実際にインストールしてみた
海外サイト UXPlanet で公開された The only Figma plugins you need for your workflowを著者Pranav

 

 

アイコンツール

Akar Icons

少しだけ丸みをもたせたアイコンスタイルは、UIデザインでの可読性も考慮したライブラリ。個人だけでなく商用にも無料で利用することができます。

 

 

 

Health Icons

ヘルスケア、健康、歯医者、薬学、病院などあらゆる医療に関するアイコン600以上揃ったライブラリ。MITライセンスで商用利用も自由にどうぞ。

 

 

 

Streamline ver. 4

12種類のスタイルでデザインされた77,000個を超えるアイコンを無料ダウンロードできるオンラインツール。FigmaやSketch、Adobe XDから直接検索スルことも可能。

 

 

 

UIcons

ウェブサイトやアプリで使える、シンプルで使いやすいミニアイコン2000種類がSVGファイルで揃います。Webフォントとしても利用できます。

 

この記事では、ウェブサイトのUIデザインに便利な、無料の人気SVGアイコンライブラリをまとめて紹介しています。 豊富な収録数に加え、サイズや配色などの

 

 

Vectoricons Mixer

アイコンに合わせてユニークな背景シェイプを組み合わせることができるツール。

 

 

 

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

mmhmm

ソフトバンクなどから110億円調達するなど、超話題のビデオ会議リモートワークツール「mmhmm(ンーフー)」。自動バックグラウンド除去や高機能なプレゼン資料作成ツールなど便利なものが揃います。

 

 

 

tl;dv for Google Meet

GoogleのオンラインミーティングツールMeet用拡張プラグインで、会議を録画したり、キャプションを追加、会議の内容を文字起こししてチームと共有などいたれりつくせり。

 

 

 

Invision Freehand

複数人のチームでのリアルタイム共同編集をもったホワイトボードツール、最近増えていますこのタイプ。

 

 

 

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

Typomotion

簡単な単語や長い文章テキストなどを入力し、下にある「Genrate a Magic」ボタンを押すと、タイポグラフィ動画に自動変換してくれる新サービス。

 

 

 

Nvidia Canvas

筆ブラシでペイントした簡単に描いた線や形が、AI によってリアリティのある風景画に変換される画期的なペイントツール、現在ベータ版での提供となります。

 

 

 

User Inyerface

表示されたフォームをできるだけ速く、正確に入力するだけのシンプルなゲームですが、めちゃくちゃなUIデザインのおかげで混乱しまくりです。

 

 

 

Mondrian Geneartor

20世紀のはじめに抽象絵画を描いた最初の画家ピエト・モンドリアンの作品「赤・青・黄のコンポジション」をテーマに自動でレイアウトを生成するアートツール。

 

 

 

HTTP Status Dogs

ウェブサーバーから返信されるレスポンス内容を表す3桁の数字、HTTPステータスコードをさまざまな犬の表情で表したユニークなプロジェクト。

 

 

 

Poolsuite FM

夏のプールサイドで聴きたい音楽プレイリストを再生できるオンラインツール。古いMacのインターフェースを再現したUIデザインも素敵です。

 

 

前回のオンラインツールまとめも一緒にチェックしてみてはいかがでしょう。

 

この記事では、日々進化を続けるWeb制作で役立つ、便利な最新オンラインツールをまとめてご紹介しています。 これまではむずかしいと思っていたことや、面倒な作業を

 

サムネイル@ : Poolsuite FM