この記事では、ますます進化するウェブ制作の現場で重宝する、便利な最新オンラインツールをまとめてご紹介します。
「こんなツールが欲しかった」をかたちにした、制作ワークフローを改善できる時短ツールが多数揃っています。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。
前回のオンラインツールまとめと一緒に確認しておくと良いでしょう。
- 1. Web制作便利ツール
- 2. デザインコレクション
- 3. イラスト系ライブラリ
- 4. 配色ツール
- 5. プロトタイプツール
- 6. アイコンツール
- 7. コラボ、リモートワークツール
- 8. 面白、クリエイティブツール
Web制作が面白いほどはかどる！便利な最新オンラインツールまとめ
Web制作便利ツール
デザイン制作で使える美しいSVGシェイプを作成、エクスポートできるオンラインツール。ナチュラルで自然な形状が特長で、ボタンひとつでコードをコピー、保存できます。
お好みのSVGファイルをアップロードし、シェイプを自由に変形ワープできるオンラインツール。スクロールでズームイン・アウトできます。
棒グラフでデータの変化を、まるでレースのようなアニメーション付きで表現できるオンラインツール。サンプルデータとして、新型コロナの感染状況を国別にまとめています。
コード知識不要で美しいウェブデザインを数分で作成できるWordPressテーマ。無料ながら有料版にも負けない高機能さが、圧倒的な読み込み速度をうたっています。
まだベータ版ですが、Instagramのストーリー機能をWordPressにも実装できる、Google謹製プラグイン。使いやすいインターフェース、すぐに使えるテンプレートも用意されています。
何度も同じコードを繰り返し書く必要がなくなる、Bootstrapのスニペットをまとめたライブラリ。統計カードや管理パネル、テーブル用テンプレートなど、デザイン性にも優れたスニペットが多数揃っています。
あらゆるボタンスタイルを簡単に実装でき、CSSでカスタマイズも可能なモジュール形式のCSSボタンシステム。制作だけでなく、プロトタイプ作成にも重宝します。
見出しやボックス、リボン、リストなど100種類以上のデザインを、コピペするだけで簡単に利用できる日本発のサービス。
あらゆるフレームワークと同時に使え、CSSでカスタマイズも可能、アクセシビリティを念頭に作成されたオープンソースのWebコンポーネント。ボタンやテーブル、アラート、バッジなど普段利用するUIが揃います。
Googleのオンラインスプレッドシートをつかって、ウェブサイトのコンテンツを管理、更新できる面白ツール。
ベースとなるフォントサイズを決めるだけで、さまざまな大きさの見出しタイトルを自動計算してくれるオンラインツール。
本や雑誌を立体的なCSSアニメーション付きで作成できるニッチなオンラインサービス。
CSSのbackground-imageプロパティを利用し破線を作成できる、ありそうでなかったジェネレーター。
25を超えるさまざまなスマートフォン端末別にレスポンシブウェブサイトを確認できる、デベロッパーフレンドリーな検証ツール。
写真をCSSフィルタだけでハーフトーンエフェクト風に仕上げることができます。
FlexboxやCSS Gridをつかって、たった1行のコードでさまざまなレイアウトを実現したスニペットライブラリ。
プロジェクトに合ったチャットボット、ボイスアシスタント機能をデザイン、作成できる画期的なツール。MessengerやSlack、Google Assistant、Alexaなど主要アプリに対応しています。
デザインコレクション、UIキット
画像をアップロードして5秒待つだけで、人物などの被写体の切り抜きを自動で行うサービス。remove.bgが有名ですが、切り抜き精度はかなりのもの。
架空の都市をGoogleマップ風地図で作成できる、オープンソースのWebアプリ。画面右側にある詳細パネルを設定し、Generateボタンを押すだけのお手軽さ。STLやHeightmapなどの3Dレンダリングにも対応。
Instagramのストーリー投稿に使えるパノラマスクリーンショットや動画、モックアップなどを作成できるオンラインツール。美しいデザイン性とリアルさが特長で、あらゆるプロジェクトにどうぞ。
Adobe XD用UIデザインキット50種類セットで、どれも魅力的なアニメーションが実装されているのが特長。
商用プロジェクトにも利用できる、デザインシステムのUIキット。基本のスタイルガイドから、５０種類を超えるコンポーネントまで収録し、SketchまたはFigma、Adobe XDどのプロトタイプツールにも対応。
無料ダウンロードできるおしゃれ英語フォントを、サンセリフやセリフ、ディスプレイなどのカテゴリ別にまとめたキュレーションライブラリ。
デザインに優れたフリーフォントやGoogleフォント、Adobeフォントを集めたフォントライブラリで、どれもおしゃれな書体ばかりが揃います。
ソースコードの美しいスクリーンショットを作成できるオンラインサービスで、言語や配色をお好みで選択できます。
イラスト系ライブラリ
無料でダウンロードできるイラスト素材集をコレクションしたサイトで、AiやPSD、Figma、Sketchなどのファイル形式別に探すことも可能。
インド人のライフスタイルに合わせた、６０種類のシンプルなイラストライブラリ。PhotoshopやIllustratorの他、Adobe XDやFigma、Sketchにも対応しています。
美しいグラデーションカラーがアクセントとなった、ユニークなキャラクターのイラストをつかって、ビジネス向けコンテンツを表現できるイラストレーションセット。デモ版として8種類のイラストを無料ダウンロード可能。
顔や髪型、表情などのパーツをランダムに組み合わせ、ウェブサイトやアプリなどに埋め込み可能な人物イラストを生成できます。SVGファイルによるダウンロードの他、Reactコードも生成可能。
配色ツール
ひとつの色を決めるだけで素敵な配色カラーパレットを自動生成してくれるオンラインツール。3色をつかったグラデーションも作成でき、CSSコードもそのままコピペできる便利な機能ばかり。
デベロッパーフレンドリーな配色カラーパレットツールで、手軽にHEXカラーコードをコピペできるChrome拡張機能プラグイン。
スクリーン上から抽出した色をさまざまな形式に変換できたり、よく利用する配色をまとめて管理できたりと、なにかと便利なMac専用アプリ。
配色に悩んだと便利なツールを新しく追加しています、こちらも参考にしてみると良いでしょう。
プロトタイプツール
アニメーションなどの動きも加えたインタラクティブなプロトタイプを作成し、ボタンひとつでHTMLに変換できるツールがFigmaについに対応。Lottieアニメーションなども利用でき、より魅力的なプロトタイプ作成を手軽に行うことができます。
ユーザーフローやダイアグラムをより直感的に手早く仕上げることができるデザインツール。500種類を超えるコンポーネント、216種類のフロー、180以上のスタイルと充実した機能が揃います。
配色や文字スタイルなどを一覧表示で整理できるFigma拡張プラグイン。
作成したデザインを瞬時にコードに変換してくれるFigma専用プラグイン。デザインスタイルをFigmaからXcodeプロジェクト用に簡単変換でき、開発ワークフローを改善します。
Figma上にてコード知識不要でWebアプリを手軽に作成できるツール、最近増えているサービスのひとつ。
Figmaで作成できる、プレゼンテーション用の美しいスライド資料をまとめたライブラリで、今後も継続アップデート予定。
アイコンツール
最新Bootstrapではじめて追加された、Bootstrap専用アイコンライブラリ。SVGアイコンなので自由に拡大でき、CSSで手軽にカスタマイズも可能です。詳細は以下の詳細ドキュメントよりどうぞ。
558個のカスタマイズ可能なSVGアイコンが揃った、MITライセンスで完全無料のライブラリ。シンプルで使い勝手の良いアイコンデザインも素敵。
およそ1,400ものブランドロゴとブランドカラーを揃えた、無料SVGアイコンライブラリ。
300種類のSVGアイコンをまとめた無料ライブラリ。ショッピングサイトや旅行サイト、ソーシャルメディア、アプリデザインなどにも最適なあらゆる素材が揃います。
コラボ、リモートワークツール
継続するプロジェクトやスプリント、タスク、バグなどの問題点を追跡、トラッキングできるオンラインツール。
プロジェクトを複数人のチームで行うときに起こりがちな、ファイルの上書きを防ぐデザイナー向けバージョンコントロールツール。
面白、クリエイティブツール
Excelに負けない高機能のオンライン・スプレッドシートを作成でき、完全フリーのオープンソースプロジェクト。
人工知能を訓練し、自分だけのカスタム・マシーン・ラーニングモデルを作成できる、クリエイター向けツールキット。シンプルで直感的なインターフェースデザインにも注目です。
ランダムな文字テキストの入力に合わせて、ジャズミュージックを即興で再生してくれるユニークなサービス。
ピクセルアートを描くことができるReactアプリ。豊富なパラメータをつかってCSSピクセルイラストを作成できます。SVG、PNG、CSSファイル形式でエクスポート可能。
ウェブサイトのアドレスを入力するだけで、美しいスクリーンショットを作成してくれるオンラインツール。ページまるごとスクショしたり、縦横サイズを指定できるなどカスタマイズ性にも優れたツール。
パソコンで使うUIサウンドは通常、機械的な音ですが、実際に人間が発した音をベースに作成したUXサウンドをまとめたライブラリ。mov4ファイルは無料ダウンロード可能。
Spotify Soundtrack Your Workout
いくつかの質問に答えるだけで、自分にあった最適のワークアウト音楽プレイリストを作成してくれます。
ミッドセンチュリーの時代に活躍した、アメリカを中心とした世界の航空会社のロゴデザインをアルファベット順に集めたレトロコレクション。
これまでのベストツールもチェックしよう
当サイトでこれまでに紹介したその他のツールも確認してみましょう。特に便利なツールのみを厳選し、定期的にまとめています。
サムネイル@ : Warp SVG
