Web制作の面倒な作業におさらば!便利な最新オンラインツール30個まとめ

wrrooom__illustration_constructor

 

この記事では、Webデザインやグラフィック制作がぐっと快適になる、最新便利オンラインツール、無料デザイン素材をまとめています。

 

これらのツールやサービスを利用すれば、これまで面倒だった作業も手軽に、そして短時間で行うことができ、普段のワークフロー改善にもつながります。用途や目的に応じて、お好みのツールを見つけてみましょう。

 

 

Web制作をもっと快適に!便利な最新オンラインツールまとめ

 

CSS 3D Transform Examples

遠近感を利用した、奥行き感のある3DデザインをCSSで表現するサンプル集。コードをそのままコピーできるので、カスタマイズも自由自在。

 

 

 

BGJar

ウェブサイトの背景デザインに適した、SVG画像をオンライン上で手軽に作成できる無料ツール。ボタン操作のみでカスタマイズを自由に行うことができ、商用利用にも対応しています。

 

 

 

VvvebJS

人気フレームワークBootstrap4をベースに、オンライン上でドラッグ&ドロップでランディングページなどを作成できるHTMLページビルダー。各デバイスでの表示確認や独自スタイルの保存なども可能。

vvvebjs-1

 

 

 

Tooltip Sequence

はじめてサイトを訪れたユーザーに、サイトの機能やつかい方を手順を追って、ガイド用にツールチップを表示するJavaScriptパッケージ。

 

 

 

GreenSock Scroll Trigger Example

スクロールに合わせてアニメーション表示を制御できるScroll Trigger JSの具体的な使い方をまとめたサンプルページ。各サムネイルをクリックすれば、Codepenで実際のコード、動きを確認できます。

 

 

 

Smart Upscaler

画像をアップロードすると、画像のクオリティーを下げることなく最大3,000×3,000pxまで、自動で拡大してくれるオンラインツール。

 

 

 

Filter.CSS

ぼかしやグレースケース、明るさ、コントラストなどをCSSのみで適用できる、1KB以下の軽量CSSライブラリ。

filter-css

 

 

 

Loader Generator

オンライン上で独自のローディングアニメーションを直感的に作成でき、Reactアプリですぐに利用できるコードをコピペできるサービス。

loader-generator

 

 

 

Tailwind Play

ブラウザ上で人気フレームワークTailwindのカスタマイズ、検証を行うことができるウェブツールで、公式サイトによる公開で、ダークモードにも対応しています。

tailwind_play

 

 

 

Tailwind Ink

人工知能をつかった配色カラーツール。お好みの色を選択するだけで、Tailwind CSSのカラーパレットに対応した、新しい色調を瞬時に作成します。

tailwind-ink

 

 

 

Serenade

声をつかったコーディングを行うことができるツールで、タイピングせずにウェブ開発を行うことができます。開発チームと直接、画面共有をしてつかい方、設定を教えてもらうことも可能。Zoomミーティング。

serenade___code_with_voice

 

 

 

Convert SVG to PNG

SVGファイルをアップロードすると、PNGファイルの他に、JPGやPDFファイルに自動変換してくれるオンラインツール。

converter-slug

 

 

 

Arwes UI

映画で出てきそうな、SFやサイバーパンク感満点のウェブサイトやスマホアプリ向けUIフレームワーク。電子的なクリック音も雰囲気抜群。

arwes_-_sci-fi_ui_framework

 

 

 

Synthesia

文字テキストを入力するだけで、人工知能をつかって動画を作成できる。ディープフェイク顔負けの画期的なサービス。

synthesia

 

 

 

Servicebot

オンライン決済サービスStripeをつかって、サブスクリプション課金をほんの数分で実現できます。決済手数料も他の競合サービスに比べ、安い点もポイント。

servicebot

 

 

 

Gazepass

どんなウェブサイトやスマホアプリでも、自分の顔をパスワード代わりとした顔認証システムを実装できる、パフワード不要のログインAPI。Beta版での公開となります。

gazepass

 

 

 

Blacklight

URLを入力すると、そのサイトで利用されているユーザートラッキング技術を調査できるウェブアプリ。広告やCoookie対応状況なども調べることができます。

blacklight_-_the_markup

 

 

 

Shape Illustration

28,000を超えるすべてカスタマイズ可能なアイコンやイラストをセットにした有料アイテムで、無料デモとしてFigma用イラスト、アイコンファイルをダウンロード可能。

shape-illustration

 

 

 

Humans

デザインに立体感を演出できる3Dキャラクターイラスト素材セット。FigmaとBlender用ファイルで収録されており、無料デモ版と有料版があります。

humans_3d_character_pack

 

 

 

40 iPhone 3D Mockups

作成したiOS向けアプリやプロダクトを、iPhone X、XS、11、11 Proをつかって演出する3Dモックアップ集。FigmaとSketchファイルで収録されています。

iphone-3d-mockups

 

 

 

Maze

Adobe XDで作成したプロトタイプを、実際にオンライン上で試すことができるサービス。

maze-design

 

 

 

Radix Icons

限られたスペースでの可読性を考慮した、15x15pxのミニアイコンを集めたオープンソースのフリー素材。SVGやFigma,Sketchなど豊富なファイル形式で公開中。

radix_icons

 

 

 

IconPark

1,200個以上の高品質なSVGアイコンが揃い、カスタマイズも自由に行うことができるデベロッパー向けアイコン素材集。ReactやVue用コンポーネントも揃います。

 

 

 

Mono Icons

ウェブ制作の現場で活躍する、どんなサイトデザインにもふさわしい、シンプルで使い勝手の良いアイコン素材集。24x24pxのSVGファイルで無料ダウンロードできます。

mono-icons

 

 

 

266 FREE responsive icons in 3 sizes

3サイズ(16/20/24px)でそれぞれデザインされた、インターフェースやワイヤーフレームにふさわしいアイコン266個を、FigmaとSketchファイルで収録。

 

 

 

3d Icons from IconShock

立体感たっぷりな3Dアイコンデザイン1250個を揃えており、無料版では50個のデモアイコンをPNGファイル形式でダウンロードできます。

3d-icons-iconshock

 

 

 

Custom Ico

上記サービス同様に、iOS 14のアイコンを変更できるサービスで、美しいミニマルなアイコン150個を揃えています。

custom-ico

 

 

 

Aesthetic App Icons

iPhone用OS、iOS14で利用できるカスタマイズ用アイコンを無料ダウンロードできるサービス。

_aesthetic_%e2%80%89app_icons

 

 

 

Keyboard Simulator

キーボードを自分好みにカスタマイズし、実際のキーパッドの動きがリアルタイムで反映されるシミュレーター。カスタマイズしたキーボードは、そのまま撮影、共有することも可能です。

keyboard_simulator___design_and_test_virtual_keyboards

 

 

これまでのベストツールもチェックしよう

当サイトでこれまでに紹介したその他のツールも確認してみましょう。特に便利なツールのみを厳選し、定期的にまとめています。

 

もっと早く知りたかった!Web制作に便利な最新オンラインツール46個まとめ

Web制作が面白いほどはかどる!便利な最新オンラインツール54個まとめ

便利で爆速!ウェブ制作向け最新オンラインツール、無料素材37個まとめ

ウェブ制作がサクサク捗る!便利な最新オンラインツール37個まとめ

2019年間ベスト!Web制作を変える便利オンラインツール厳選85個

Web制作フローが変わる!便利な最新オンラインツール43個まとめ【2020年版】

Webデザイン制作が変わる!便利な最新オンラインツール45個まとめ

ウェブ制作がすご楽に!便利な最新オンラインツール33個まとめ

ウェブ制作が捗る!便利すぎる最新オンラインツール、無料素材56個まとめ

 

サムネイル@ : Wrroooom! – Illustration Constructor