ラクラクWebデザイン制作!便利な最新オンラインツール39個まとめ

 

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

 

これまではむずかしいと思っていたことや、面倒な作業をボタン一発で完了できるなど、デザイン制作の時間短縮にぴったりなツールから、遠隔でのテレワークにも便利な新機能、ユニークなツールやサービスなどが揃います。

 

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

 


コンテンツ目次

 

 

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

Web制作便利ツール

Tail Blend

CSSmix-blend-modeプロパティをリアルタイムでプレビューできるオンラインツール。お好みので配色や画像なども変更できます。

 

 

 

CSS Color Gradient Generator

背景用壁紙やUI要素に便利なCSSカラーグラデーションを作成できるツール。完成した配色はそのままCSSコピーしましょう。

CSS_Color_Gradient_Generator__beautiful_gradients_for_free

 

 

 

Easing Gradients

よりなめらかなグラデーションの色の混ざり方を調整できるツール。画像の上に文字テキストを重ねるときなどに便利。

Easing_Gradients

 

 

 

Glassmorphism CSS Geneartor

グラスモーフィズムCSSエフェクトを手軽に作成できるオンラインツールで、クリックひとつで完成したCSSコードをコピペできます。

Glassmorphism_CSS_Generator_-_Marko_Denic_-_Web_Developer

 

 

 

daisyUI

Tailwind CSSフレームワークに対応した無料コンポーネント集で、あらゆる要素が揃っているだけでなく、右上ボタンより配色テーマを切り替えることも可能。

DaisyUI_-_Tailwind_CSS_Components

 

 

 

CSS Hell

よくありがちなCSSの間違いを、模範解答と一緒に解説してくれる小技テクニック集で、定期的にアップデートされています。

CSS_Hell_-_To_Hell_with_bad_CSS_

 

 

 

Learn CSS

CSSを基礎からマスターするGoogle発のオンラインリファレンス。世界中の著名クリエイターがずらり集結した納得のボリュームと内容。

Learn_CSS

 

 

 

Anyone Can Learn CSS Grid

CSS Gridプロパティをゲーム感覚で体感的に学ぶことができる無料オンラインリファレンス。

 

 

 

Screen Sizes

iPhoneやiPad、Appleウォッチ、Apple TVなどあらゆるAppleデバイスの画面サイズや詳細スペックをまとめて確認できるチートシート。

Screen_Sizes

 

 

 

Calendso

予約カレンダー機能を作成できるオープンソースのオンラインツール。デモはこちらからどうぞ。

Calendso___The_Open_Source_Calendly_Alternative

 

 

 

Fluid Typography

ウィンドウサイズに合わせて拡大・縮小する文字テキストを作成することで、どんな画面でも美しく見出しを表示できます。

Fluid_Typography

 

 

 

mmm α

まるでコラージュをつくっているように、ドラッグ&ドロップでウェブサイトを作成できるシンプルなツール。右下のアイコンをクリックすると、ページ全体を編集することができます。

mmm_page

 

 

 

Content Aware Resizing

コンテンツに応じた画像のリサイズを可能にする魔法のようなJSプラグイン。

 

 

 

PINTR

顔の写った写真をアップロードすると、一本で描かれたSVGイラストに変換してくれるツール。

PINTR

 

 

 

Frontend Practice

フロントエンドエンジニアのスキルアップを目指して、毎回出されるお題ウェブサイトをポイントを押さえながら再現していきます。

Frontend_Practice___Home

 

 

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

Boring Avatars

ユーザー名と選択した配色でランダムなSVGシェイプを自動生成できるJavaScript Reactライブラリ。

 

 

 

Free Mockup Generator

デスクトップやタブレット、スマホをつかった3Dモックアップをオンラインで作成できる無料ツール。

 

 

 

Market

CC0で自由に利用できる3Dモデルやテクスチャ、HDRISなどを集めたライブラリ。threejsですぐに使えるスターター素材も提供されています。

 

 

 

Triangula

アルゴリズムをつかって画像をポリゴンアート風に仕上げることができるツール。デモはこちらから試すことができ、最大3000pxの3000ポイントまでが推奨値となります。

 

 

 

Make your photo 16×9

画像をアップロードすると、縦長の写真でも16×9に自動調整してくれる便利ツール。

 

 

 

Social Image Generator

コンテンツ記事に合わせたソーシャルメディア向け画像を自動で作成するWordPressプラグイン。

 

 

 

Uncut

はじまったばかりのフォントカタログ集ですが、紹介されているフリーフォントはどれもおしゃれなものばかり。サンセリフとセリフ、モノスペース、ディスプレイ書体から選択しましょう。

 

 

配色ツール

Gradient King

100種類以上の美しいCSSグラデーションを集めたライブラリで、お好みのグラデーションを選択するとCSSをコピペできます。

 

 

イラスト系ライブラリ

Animated Illustrations

100種類以上のアニメーション付きイラストをLottie向けJSONファイルやGIF、After Effectファイル形式でダウンロードできるサービス。無料版ではGIFファイルのみ。

 

 

 

Storyset

イラストの配色をカスタマイズしたり、アニメーションを追加できる無料オンラインツール。Figma用プラグインも公開されています。

 

 

 

This is Tech

ビジネスやテクノロジー、暗号通貨、サイエンスと言った分野を、モダンでおしゃれなイラストで表現した素材集。無料デモ版ではPNGファイル形式をダウンロード可能。

 

 

 

プロトタイプツール

FlowBite – Tailwind Figma Design Kit (Free Edition)

2020年末ごろから急速に人気が広がっているTailwind CSSに対応したデザインをFigmaで作成できるキット。

 

 

アイコンツール

Iconic

インターフェース向けの24x24pxのミニSVGアイコン190個以上が揃った無料ライブラリ。新しいアイコンが毎週追加中です。

 

 

 

Iconoir

現在900個以上のSVGアイコンが揃った、世界最大規模のオープンソースライブラリ。お好みのアイコンをクリックするだけでダウンロードでき、すべてMITライセンスの商用可。

 

 

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

Coscreen

チーム内での画面共有だけでなく、あらゆるデスクトップアプリのリアルタイム共同作業ができるコラボツール。ビデオチャットも可能で、無料プランも用意されていますよ。

 

 

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

3D自動車シミュレーター

Googleマップ上を自動車レースのように自由に走り回ることができるサービス。場所を指定すれば世界中のどこでも走ることができます。

 

 

 

Generated Photos

設定項目をクリックしていくだけで、まったく架空の人物の表情を作成できるツール、未来すぎます。

 

 

 

margin-margin-revoulution CSS

下から迫ってくるmarginをタイミングよくタップするオンラインゲーム。矢印キーでスタートです。

 

 

 

ファイルを20GBまで無料で保存できる新しいクラウドサービスで、データはすべて暗号化されます。Googleフォトの無制限アップロードが終了されることもあり、今後クラウドサービスは増えてくるかも。

 

 

 

Direct Share

ファイルサイズの制限がなくファイルの転送を行うことができる無料オンラインサービス。フィルは第三者のサーバーにアップロードされることはなく、エンドユーザーに直接送信されます。

 

 

 

Scan the World

ピラミッドやダビデ像など世界中のあらゆる貴重な彫刻や文化的工芸品を、そのまま3Dプリントできるデータを無料配布したサイト。実際に作成したユーザーの作品も閲覧できます。

 

 

 

Next Full Moon Calendar

次の満月がいつか教えてくれる、月の情報で満載のメディアサイト。

 

 

 

Facebook Cover Photo Maker

Facebookカバー写真を手軽に作成できるオンラインツール。画像のアップロードや文字テキストの追加、ステッカーやロゴの追加にも対応しています。

 

 

 

Acid Banger

ランダム化されたあるごリムズによってブラウザ上で音を自動作成するツールで、BPMやメロディーなど細かい設定も可能。

 

前回の便利オンラインツールまとめはこちらから。

Webデザイン制作をもっと楽に!便利な最新オンラインツール45個まとめ

 

サムネイル@ : Boring Avatars