Advertisement

 

この記事では、「それ、何使ってるの?」と思わず聞きたくなるような、最新のWeb、オンラインツールをまとめてご紹介します。

 

めずらしいだけでなく、面倒で手間のかかる作業がほんの数クリックで完成の時短アイテムや、今までなかったけどあると便利なツールや素材を中心にセレクト。

 

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

 


コンテンツ目次

 

 

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

 

Web制作便利ツール

Make Way Grid Effect

一枚の画像を選択すると、他の画像が場所をゆずって、道を空けてくれるアニメーションエフェクト。

 

 

 

CSS Shadow Gradients

2色の配色によるグラデーションをつかった影、シャドウグラデーションを手軽に作成できるオンラインツール。一緒に活用したいグラデーションツールもいかがでしょう。

 

グラデーションは鮮やかな配色や動く流体Blobシェイプなど、さまざまな方法や見せ方で見かけるようになっています。 2色の配色によるグラデーションをつか

 

 

SponoCo.

今増えているノーコードツールのひとつで、ドラッグ&ドロップでウェブサイトを数分で完成させるオンラインツール。

 

 

 

CSS.GUI

CSSのスタイルテーマ開発を目的としたビジュアルツール。パネル右にある要素をクリックし、パネル左のツールエリアでスタイルを直接編集できます。

CSS.GUIの画像

 

 

 

Earth API

だれもが気候データにアクセスできるようにと開発された、温室効果ガスの排出量など気候データをまとめて表示できるAPI。

温室効果ガスの排出量など気候データをまとめて表示できるEarth.API

 

 

 

fffuel

ウェブサイトで利用できそうな、50を超えるSVGシェイプを作成できるジェネレーターを揃えたコレクション。流体blobシェイプやネオン、ノイズグラデーションなど。

50を超えるSVGシェイプを作成できるジェネレーターfffuel

 

 

 

Flowout

ノーコードツール Webflow で使える無料テンプレート60種類以上が揃ったライブラリ。使い勝手の良いレイアウトのみを手動でコレクションしています。

Flowoutのサンプル画像

 

 

 

Github Skills

GitHubの使いかたを実際に操作しながら学ぶことができる、GitHub謹製の無料オンライン教材が公開されました。基本的な操作から、GitHub Actionsの活用やCI/CDまで網羅しています。

GitHubの使いかたを学ぶSkills

 

 

 

Macaron Elements

Webコンポーネントの作成から管理までできる、オープンソースのUIデザインツール。

Macaron Elements

 

 

 

Preline UI

人気のフレームワークTailwindで使える、250種類を超えるUIコンポーネントセット。レイアウトを手軽にコピペでき、一般的なウェブサイトに必要なUIは揃っている印象。

Preline UI

 

 

 

Screen Siz.es

あらゆるスマホやデスクトップPC、ノートパソコンなどの画面サイズやオペレーティング・システムなど、詳細をまとめて確認できる一覧リスト。

Screen Siz.esのスクリーンショット

 

 

 

デザインコレクション

Heazy Studio

背景デザインに適した美しいベクターデザインをブラウザ上で作成できるツールで、SVGとPNGファイルでダウンロード可能。

 

 

 

Remover

写真に映り込んだ不要な部分を、ブラシでなぞるだけで消し去ることができるAIツール。ウォーターマークの削除にも、悪用厳禁。

 

「せっかく良い写真が撮れたのに、背景に不要なものや人が写り込んでしまった。」「シャツにケチャップのしみがついている」「写真にうつった文字を変更したい。」

 

 

Branding Style Guide

世界的な大企業が実際に使っているデザインスタイルガイドを集めたコレクションサイト。

Branding Style Guide

 

 

 

Bzzzt

美しくて立体的な3Dイラスト素材で、JpegやPNG、SVGファイルの他に、PSDファイルによるカスタマイズも可能。SketchやFigma、Adobe XD用ファイルも同時に収録です。

Bzzzt

 

 

 

学習サイト「chot.design」の全レッスンが無料公開

現役のクリエイターが制作した、「Photoshop」や「Illustrator」の基礎レッスンからUIデザインやバナー制作テクニックなど、本格的なレッスンまで571本がすべて無料。事業譲渡に伴い有料会員サービス終了のため。

chot.designの全レッスンが無料に

 

 

 

Design Stripe

SVGイラストをアップロードすると、自動でアニメーションを追加してくれる新しいオンラインサービス。

Design StripeでSVGをアニメーション化

 

 

 

DuoTone Photoshop Plugins

手軽にデュオトーン写真加工エフェクトを適用できるフォトショップ専用の無料プラグイン。

DuoTone Photoshop Plugins

 

 

 

Image Upscaler

解像度の低い画像をAIが解決!放り込めば倍サイズのWebツール。AIのおかげで、解像度の低い画像を最大4倍まで拡大できます。

Image Upscaler

 

「この写真、粗くて使えない。」 そんなときは、日々進化する人工知能、AIのおかげで、解像度の低い画像を最大4倍まで拡大できる Image Upscal

 

 

Vectary

立体的な3Dデザインをドラッグによる簡単な操作で作成できるオンラインツール。光沢感のあるマテリアルや照明、光源を追加できたりと本格的なデザイン。

3dツールvectary

 

この記事では、デザイン制作で3Dデザインを手軽に作成、利用できる無料ツールやデザイン素材をまとめてご紹介します。 2021年の注目デザイントレンドとし

 

 

アイコン、プロトタイプツール

iOS 16 UI Kit for Figma

先日アップデートされたばかりのiOS 16を完全再現した、Figma用UIキット。数百を超えるコンポーネントやテンプレート、デモなど、iOSアプリのデザインを開始するのに必要なすべてが揃います。

iOS 16 UI Kit for Figma

 

 

 

Joycon 3D Icon

つるりとした光沢感、そして立体感のある3Dアイコンパック。配色の編集、カスタマイズも自由自在。

Joycon 3D Icon

 

 

 

Mesh Gradients

Figma内で美しいメッシュグラデーションを作成できるツール。背景やUIコンポーネントなどにもそのまま利用でき、時短アイテムとしても便利です。

Mesh Gradients

 

 

 

Untitled Icons

Figmaコンポーネント用に設計された、4,600を超えるUIアイコンライブラリ。アウトラインと塗りつぶしスタイルの他に、デュオカラーやデュオトーンも一緒にどうぞ。Figmaの簡単な使いかたで、配色のカスタマイズも自由自在。

Untitled Icons

 

 

 

use Animations

ウェブサイトやスマホアプリにすぐに実装できるアイコン素材で、Lottieアニメーションを活用したJSONファイルでの提供。

use Animations

 

 

 

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

ToF AR

手や指の動きまでスムーズな描写を実現する、ソニーのAR開発用SDK。ARを活用したモバイルゲームなど、さまざまな用途での活用が期待されています。

 

 

 

bueno

ほんの数ステップでNFTアートを生成できる、新しいウェブ体験ツール。

bueno

 

 

 

CopyBook

一般的なウェブサイトで使用されているコピー文をコピペできる、新しいダミーテキストツール。

CopyBook

 

 

 

Inspiral Web

2つの歯車をぐるぐる回して、美しい模様を描くレトロなおもちゃ「スピログラフ」をオンラインで再現できるツール。

Inspiral Web

 

 

 

国会議案データベースを無償公開

国会の過去20年分以上の議案データ約1万8000件をオープンデータ化した国会議案のデータベースを、スマートニュースがGitHubで無償公開(衆議院参議院)されました。

国会議案データベースを無償公開

 

 

 

MiroTalk

Webアプリでインストール不要のWeb会議ツール。ビデオ通話や画面共有、ファイル共有やボイスチャットなどの機能を備えたオープンソース。

Webアプリでインストール不要のWeb会議ツールmirotalk

 

 

 

Online Solitaire

Windowsユーザーにはおなじみのカードゲーム「ソリティア」を、ブラウザで無料プレイできます。

>Online Solitaire

 

 

 

Springin’ Sound Stock

商用利用OKで、700種類以上のサウンド・エフェクト音素材を無料ダウンロードできる素材サイト。戦闘ゲームの攻撃やレトロな8bitサウンド、ボタン音など、誰でも無料で利用できます。

SF音700種類が無料-スプリンギン

 

 

 

Stack Tower Game

つぎつぎと迫りくる積み木をタイミングよく重ねていくミニゲーム、シンプルですがやりだすとはまってしまいます。

Stack Tower Game

 

 

 

Tango

ステップバイステップ作業ガイドをクリックで作成できる、Chrome拡張プラグイン。さまざまなプロセスや仮定を説明、紹介したいときに。

Tango | Chrome プラグイン

 

 

 

TweetSnap

Twitterのツイートを、グラデーションを使った美しいスクリーンショット画像に変換できるオンラインツール。

TweetSnap

 

 

前回のまとめからおよそ1ヶ月ぶりでしたが、追いつくのが大変なほど新しいツールが次々に登場しています。