この記事では、日々進化を続けるWeb制作で役立つ、便利な最新オンラインツールをまとめてご紹介しています。
これまではむずかしいと思っていたことや、面倒な作業をボタン一発で完了できるなど、デザイン制作の時間短縮にぴったりなツールから、遠隔でのテレワークにも便利な新機能、ユニークなツールやサービスなどが揃います。
カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。
- 1. Web制作便利ツール
- 2. 配色ツール
- 3. デザインコレクション
- 4. イラスト系ライブラリ
- 5. プロトタイプツール
- 6. アイコンツール
- 7. コラボ、リモートワークツール
- 8. 面白、クリエイティブツール
Web制作の効率、生産性アップ!話題の最新オンラインツールまとめ
Web制作便利ツール
CSSmix-blend-mode
プロパティをリアルタイムでプレビューできるオンラインツール。お好みので配色や画像なども変更できます。
背景用壁紙やUI要素に便利なCSSカラーグラデーションを作成できるツール。完成した配色はそのままCSSコピーしましょう。
よりなめらかなグラデーションの色の混ざり方を調整できるツール。画像の上に文字テキストを重ねるときなどに便利。
グラスモーフィズムCSSエフェクトを手軽に作成できるオンラインツールで、クリックひとつで完成したCSSコードをコピペできます。
Tailwind CSSフレームワークに対応した無料コンポーネント集で、あらゆる要素が揃っているだけでなく、右上ボタンより配色テーマを切り替えることも可能。
よくありがちなCSSの間違いを、模範解答と一緒に解説してくれる小技テクニック集で、定期的にアップデートされています。
CSSを基礎からマスターするGoogle発のオンラインリファレンス。世界中の著名クリエイターがずらり集結した納得のボリュームと内容。
CSS Gridプロパティをゲーム感覚で体感的に学ぶことができる無料オンラインリファレンス。
iPhoneやiPad、Appleウォッチ、Apple TVなどあらゆるAppleデバイスの画面サイズや詳細スペックをまとめて確認できるチートシート。
予約カレンダー機能を作成できるオープンソースのオンラインツール。デモはこちらからどうぞ。
ウィンドウサイズに合わせて拡大・縮小する文字テキストを作成することで、どんな画面でも美しく見出しを表示できます。
まるでコラージュをつくっているように、ドラッグ&ドロップでウェブサイトを作成できるシンプルなツール。右下のアイコンをクリックすると、ページ全体を編集することができます。
コンテンツに応じた画像のリサイズを可能にする魔法のようなJSプラグイン。
顔の写った写真をアップロードすると、一本で描かれたSVGイラストに変換してくれるツール。
フロントエンドエンジニアのスキルアップを目指して、毎回出されるお題ウェブサイトをポイントを押さえながら再現していきます。
デザインコレクション、UIキット
ユーザー名と選択した配色でランダムなSVGシェイプを自動生成できるJavaScript Reactライブラリ。
デスクトップやタブレット、スマホをつかった3Dモックアップをオンラインで作成できる無料ツール。
CC0で自由に利用できる3Dモデルやテクスチャ、HDRISなどを集めたライブラリ。threejsですぐに使えるスターター素材も提供されています。
アルゴリズムをつかって画像をポリゴンアート風に仕上げることができるツール。デモはこちらから試すことができ、最大3000pxの3000ポイントまでが推奨値となります。
画像をアップロードすると、縦長の写真でも16×9に自動調整してくれる便利ツール。
コンテンツ記事に合わせたソーシャルメディア向け画像を自動で作成するWordPressプラグイン。
はじまったばかりのフォントカタログ集ですが、紹介されているフリーフォントはどれもおしゃれなものばかり。サンセリフとセリフ、モノスペース、ディスプレイ書体から選択しましょう。
配色ツール
100種類以上の美しいCSSグラデーションを集めたライブラリで、お好みのグラデーションを選択するとCSSをコピペできます。
イラスト系ライブラリ
100種類以上のアニメーション付きイラストをLottie向けJSONファイルやGIF、After Effectファイル形式でダウンロードできるサービス。無料版ではGIFファイルのみ。
イラストの配色をカスタマイズしたり、アニメーションを追加できる無料オンラインツール。Figma用プラグインも公開されています。
ビジネスやテクノロジー、暗号通貨、サイエンスと言った分野を、モダンでおしゃれなイラストで表現した素材集。無料デモ版ではPNGファイル形式をダウンロード可能。
プロトタイプツール
FlowBite – Tailwind Figma Design Kit (Free Edition)
2020年末ごろから急速に人気が広がっているTailwind CSSに対応したデザインをFigmaで作成できるキット。
アイコンツール
インターフェース向けの24x24pxのミニSVGアイコン190個以上が揃った無料ライブラリ。新しいアイコンが毎週追加中です。
現在900個以上のSVGアイコンが揃った、世界最大規模のオープンソースライブラリ。お好みのアイコンをクリックするだけでダウンロードでき、すべてMITライセンスの商用可。
コラボ、リモートワークツール
チーム内での画面共有だけでなく、あらゆるデスクトップアプリのリアルタイム共同作業ができるコラボツール。ビデオチャットも可能で、無料プランも用意されていますよ。
面白、クリエイティブツール
Googleマップ上を自動車レースのように自由に走り回ることができるサービス。場所を指定すれば世界中のどこでも走ることができます。
設定項目をクリックしていくだけで、まったく架空の人物の表情を作成できるツール、未来すぎます。
下から迫ってくるmargin
をタイミングよくタップするオンラインゲーム。矢印キーでスタートです。
ファイルを20GBまで無料で保存できる新しいクラウドサービスで、データはすべて暗号化されます。Googleフォトの無制限アップロードが終了されることもあり、今後クラウドサービスは増えてくるかも。
ファイルサイズの制限がなくファイルの転送を行うことができる無料オンラインサービス。フィルは第三者のサーバーにアップロードされることはなく、エンドユーザーに直接送信されます。
ピラミッドやダビデ像など世界中のあらゆる貴重な彫刻や文化的工芸品を、そのまま3Dプリントできるデータを無料配布したサイト。実際に作成したユーザーの作品も閲覧できます。
次の満月がいつか教えてくれる、月の情報で満載のメディアサイト。
Facebookカバー写真を手軽に作成できるオンラインツール。画像のアップロードや文字テキストの追加、ステッカーやロゴの追加にも対応しています。
ランダム化されたあるごリムズによってブラウザ上で音を自動作成するツールで、BPMやメロディーなど細かい設定も可能。
前回の便利オンラインツールまとめはこちらから。
サムネイル@ : Boring Avatars