この記事では、Webデザインやグラフィック制作がぐっと快適になる、最新便利オンラインツール、無料デザイン素材をまとめています。
これらのツールやサービスを利用すれば、これまで面倒だった作業も手軽に、そして短時間で行うことができ、普段のワークフロー改善にもつながります。用途や目的に応じて、お好みのツールを見つけてみましょう。
Web制作をもっと快適に！便利な最新オンラインツールまとめ
遠近感を利用した、奥行き感のある３DデザインをCSSで表現するサンプル集。コードをそのままコピーできるので、カスタマイズも自由自在。
ウェブサイトの背景デザインに適した、SVG画像をオンライン上で手軽に作成できる無料ツール。ボタン操作のみでカスタマイズを自由に行うことができ、商用利用にも対応しています。
人気フレームワークBootstrap4をベースに、オンライン上でドラッグ＆ドロップでランディングページなどを作成できるHTMLページビルダー。各デバイスでの表示確認や独自スタイルの保存なども可能。
はじめてサイトを訪れたユーザーに、サイトの機能やつかい方を手順を追って、ガイド用にツールチップを表示するJavaScriptパッケージ。
GreenSock Scroll Trigger Example
スクロールに合わせてアニメーション表示を制御できるScroll Trigger JSの具体的な使い方をまとめたサンプルページ。各サムネイルをクリックすれば、Codepenで実際のコード、動きを確認できます。
画像をアップロードすると、画像のクオリティーを下げることなく最大3,000×3,000pxまで、自動で拡大してくれるオンラインツール。
ぼかしやグレースケース、明るさ、コントラストなどをCSSのみで適用できる、1KB以下の軽量CSSライブラリ。
オンライン上で独自のローディングアニメーションを直感的に作成でき、Reactアプリですぐに利用できるコードをコピペできるサービス。
ブラウザ上で人気フレームワークTailwindのカスタマイズ、検証を行うことができるウェブツールで、公式サイトによる公開で、ダークモードにも対応しています。
人工知能をつかった配色カラーツール。お好みの色を選択するだけで、Tailwind CSSのカラーパレットに対応した、新しい色調を瞬時に作成します。
声をつかったコーディングを行うことができるツールで、タイピングせずにウェブ開発を行うことができます。開発チームと直接、画面共有をしてつかい方、設定を教えてもらうことも可能。Zoomミーティング。
SVGファイルをアップロードすると、PNGファイルの他に、JPGやPDFファイルに自動変換してくれるオンラインツール。
映画で出てきそうな、SFやサイバーパンク感満点のウェブサイトやスマホアプリ向けUIフレームワーク。電子的なクリック音も雰囲気抜群。
文字テキストを入力するだけで、人工知能をつかって動画を作成できる。ディープフェイク顔負けの画期的なサービス。
オンライン決済サービスStripeをつかって、サブスクリプション課金をほんの数分で実現できます。決済手数料も他の競合サービスに比べ、安い点もポイント。
どんなウェブサイトやスマホアプリでも、自分の顔をパスワード代わりとした顔認証システムを実装できる、パフワード不要のログインAPI。Beta版での公開となります。
URLを入力すると、そのサイトで利用されているユーザートラッキング技術を調査できるウェブアプリ。広告やCoookie対応状況なども調べることができます。
28,000を超えるすべてカスタマイズ可能なアイコンやイラストをセットにした有料アイテムで、無料デモとしてFigma用イラスト、アイコンファイルをダウンロード可能。
デザインに立体感を演出できる3Dキャラクターイラスト素材セット。FigmaとBlender用ファイルで収録されており、無料デモ版と有料版があります。
作成したiOS向けアプリやプロダクトを、iPhone X、XS、11、11 Proをつかって演出する3Dモックアップ集。FigmaとSketchファイルで収録されています。
Adobe XDで作成したプロトタイプを、実際にオンライン上で試すことができるサービス。
限られたスペースでの可読性を考慮した、15x15pxのミニアイコンを集めたオープンソースのフリー素材。SVGやFigma,Sketchなど豊富なファイル形式で公開中。
1,200個以上の高品質なSVGアイコンが揃い、カスタマイズも自由に行うことができるデベロッパー向けアイコン素材集。ReactやVue用コンポーネントも揃います。
ウェブ制作の現場で活躍する、どんなサイトデザインにもふさわしい、シンプルで使い勝手の良いアイコン素材集。24x24pxのSVGファイルで無料ダウンロードできます。
266 FREE responsive icons in 3 sizes
3サイズ（16/20/24px）でそれぞれデザインされた、インターフェースやワイヤーフレームにふさわしいアイコン266個を、FigmaとSketchファイルで収録。
立体感たっぷりな3Dアイコンデザイン1250個を揃えており、無料版では50個のデモアイコンをPNGファイル形式でダウンロードできます。
上記サービス同様に、iOS 14のアイコンを変更できるサービスで、美しいミニマルなアイコン150個を揃えています。
iPhone用OS、iOS14で利用できるカスタマイズ用アイコンを無料ダウンロードできるサービス。
キーボードを自分好みにカスタマイズし、実際のキーパッドの動きがリアルタイムで反映されるシミュレーター。カスタマイズしたキーボードは、そのまま撮影、共有することも可能です。
これまでのベストツールもチェックしよう
当サイトでこれまでに紹介したその他のツールも確認してみましょう。特に便利なツールのみを厳選し、定期的にまとめています。
サムネイル@ : Wrroooom! – Illustration Constructor
