この記事では、「それ、何使ってるの?」と思わず聞きたくなるような、最新のWeb、オンラインツールをまとめてご紹介します。
めずらしいだけでなく、面倒で手間のかかる作業がほんの数クリックで完成の時短アイテムや、今までなかったけどあると便利なツールや素材を中心にセレクト。
カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。
- 1. Web制作便利ツール
- 2. デザインコレクション
- 3. アイコンツール
- 4. 面白、クリエイティブツール
Web制作の効率、生産性アップ!話題の最新オンラインツールまとめ
Web制作便利ツール
一枚の画像を選択すると、他の画像が場所をゆずって、道を空けてくれるアニメーションエフェクト。
2色の配色によるグラデーションをつかった影、シャドウグラデーションを手軽に作成できるオンラインツール。一緒に活用したいグラデーションツールもいかがでしょう。
今増えているノーコードツールのひとつで、ドラッグ&ドロップでウェブサイトを数分で完成させるオンラインツール。
CSSのスタイルテーマ開発を目的としたビジュアルツール。パネル右にある要素をクリックし、パネル左のツールエリアでスタイルを直接編集できます。
だれもが気候データにアクセスできるようにと開発された、温室効果ガスの排出量など気候データをまとめて表示できるAPI。
ウェブサイトで利用できそうな、50を超えるSVGシェイプを作成できるジェネレーターを揃えたコレクション。流体blobシェイプやネオン、ノイズグラデーションなど。
ノーコードツール Webflow で使える無料テンプレート60種類以上が揃ったライブラリ。使い勝手の良いレイアウトのみを手動でコレクションしています。
GitHubの使いかたを実際に操作しながら学ぶことができる、GitHub謹製の無料オンライン教材が公開されました。基本的な操作から、GitHub Actionsの活用やCI/CDまで網羅しています。
Webコンポーネントの作成から管理までできる、オープンソースのUIデザインツール。
人気のフレームワークTailwindで使える、250種類を超えるUIコンポーネントセット。レイアウトを手軽にコピペでき、一般的なウェブサイトに必要なUIは揃っている印象。
あらゆるスマホやデスクトップPC、ノートパソコンなどの画面サイズやオペレーティング・システムなど、詳細をまとめて確認できる一覧リスト。
デザインコレクション
背景デザインに適した美しいベクターデザインをブラウザ上で作成できるツールで、SVGとPNGファイルでダウンロード可能。
写真に映り込んだ不要な部分を、ブラシでなぞるだけで消し去ることができるAIツール。ウォーターマークの削除にも、悪用厳禁。
世界的な大企業が実際に使っているデザインスタイルガイドを集めたコレクションサイト。
美しくて立体的な3Dイラスト素材で、JpegやPNG、SVGファイルの他に、PSDファイルによるカスタマイズも可能。SketchやFigma、Adobe XD用ファイルも同時に収録です。
現役のクリエイターが制作した、「Photoshop」や「Illustrator」の基礎レッスンからUIデザインやバナー制作テクニックなど、本格的なレッスンまで571本がすべて無料。事業譲渡に伴い有料会員サービス終了のため。
SVGイラストをアップロードすると、自動でアニメーションを追加してくれる新しいオンラインサービス。
手軽にデュオトーン写真加工エフェクトを適用できるフォトショップ専用の無料プラグイン。
解像度の低い画像をAIが解決!放り込めば倍サイズのWebツール。AIのおかげで、解像度の低い画像を最大4倍まで拡大できます。
立体的な3Dデザインをドラッグによる簡単な操作で作成できるオンラインツール。光沢感のあるマテリアルや照明、光源を追加できたりと本格的なデザイン。
アイコン、プロトタイプツール
先日アップデートされたばかりのiOS 16を完全再現した、Figma用UIキット。数百を超えるコンポーネントやテンプレート、デモなど、iOSアプリのデザインを開始するのに必要なすべてが揃います。
つるりとした光沢感、そして立体感のある3Dアイコンパック。配色の編集、カスタマイズも自由自在。
Figma内で美しいメッシュグラデーションを作成できるツール。背景やUIコンポーネントなどにもそのまま利用でき、時短アイテムとしても便利です。
Figmaコンポーネント用に設計された、4,600を超えるUIアイコンライブラリ。アウトラインと塗りつぶしスタイルの他に、デュオカラーやデュオトーンも一緒にどうぞ。Figmaの簡単な使いかたで、配色のカスタマイズも自由自在。
ウェブサイトやスマホアプリにすぐに実装できるアイコン素材で、Lottieアニメーションを活用したJSONファイルでの提供。
クリエイティブ・面白ツール
手や指の動きまでスムーズな描写を実現する、ソニーのAR開発用SDK。ARを活用したモバイルゲームなど、さまざまな用途での活用が期待されています。
ほんの数ステップでNFTアートを生成できる、新しいウェブ体験ツール。
一般的なウェブサイトで使用されているコピー文をコピペできる、新しいダミーテキストツール。
2つの歯車をぐるぐる回して、美しい模様を描くレトロなおもちゃ「スピログラフ」をオンラインで再現できるツール。
国会の過去20年分以上の議案データ約1万8000件をオープンデータ化した国会議案のデータベースを、スマートニュースがGitHubで無償公開(衆議院、参議院)されました。
Webアプリでインストール不要のWeb会議ツール。ビデオ通話や画面共有、ファイル共有やボイスチャットなどの機能を備えたオープンソース。
Windowsユーザーにはおなじみのカードゲーム「ソリティア」を、ブラウザで無料プレイできます。
商用利用OKで、700種類以上のサウンド・エフェクト音素材を無料ダウンロードできる素材サイト。戦闘ゲームの攻撃やレトロな8bitサウンド、ボタン音など、誰でも無料で利用できます。
つぎつぎと迫りくる積み木をタイミングよく重ねていくミニゲーム、シンプルですがやりだすとはまってしまいます。
ステップバイステップ作業ガイドをクリックで作成できる、Chrome拡張プラグイン。さまざまなプロセスや仮定を説明、紹介したいときに。
Twitterのツイートを、グラデーションを使った美しいスクリーンショット画像に変換できるオンラインツール。
前回のまとめからおよそ1ヶ月ぶりでしたが、追いつくのが大変なほど新しいツールが次々に登場しています。