この記事では、Web制作が快適に捗る、便利な最新オンラインツールをまとめてご紹介しています。
新型コロナウイルスによる影響で、在宅によるリモートワークが増えたことで、誰かと一緒になにかを行う、コラボレーション関連ツールの公開が多くなっています。
その他にも面倒な作業をワンクリックで完了させる、知っておくと便利なジェネレーター系ツールや配色リソースなどが揃います。
カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。
- 1. デザインコレクション
- 2. Web制作便利ツール
- 3. 配色ツール
- 4. イラスト系ライブラリ
- 5. プロトタイプツール
- 6. アイコンツール
- 7. コラボ、リモートワークツール
- 8. 面白、クリエイティブツール
Web制作が面白いほどはかどる!便利な最新オンラインツールまとめ
デザインコレクション、UIキット
アーティストやチームがリアルタイムでキャンバスを共有、コラボレーションできるツール。プレビューでは、4人のアーティストが異なるスタイルを同時に描いています。
さまざまなレトロスタイルを元にした、美しいおしゃれなパターンを作成、カスタマイズできるオンラインツール。
継ぎ目のないSVGパターンをオンライン上で作成できるジェネレーターツール。現在100種類近くのパターンが公開されており、カスタマイズも可能です。
Adobe Creative Cloudが公開しているオンラインツールで、写真をアップロードするだけで万華鏡のような美しいパターンを作成、カスタマイズできます。
SVGファイルのパスをオンラインで自由に編集できるパスエディター。
ほんの数行追加するだけで、Pexelsの高品質なフォトストック写真を無料で利用できるAPIサービス。
人間の自然な動きを表現したキャラクターを描くのに役立つツール。ポーズやアングル、体型、身長なども自由にカスタマイズできます。
立体的でおしゃれな文字テキスト、タイポグラフィーを高画質なPNGファイルで260種類以上提供中。デモ版として、10個を無料ダウンロードできます。
あらゆる動きをした立体的な「手」のデザインだけ3,000個集めた素材コレクション。BLMデザインにもオススメ。
16万個!以上の3Dシェイプを無料ダウンロードできるオンラインリソース。本物そっくりでリアルな立体感が特長で、金やガラス、紙、セラミックなどあらゆる質感が揃います。
Web制作便利ツール
CSSだけで実装できる背景用パターンを、クリックひとつでコピペ、利用できるオンラインツール。波ウェーブやストライプ柄、ポルカドット、方眼紙など種類も豊富で、サイズや不透明度、配色などのカスタマイズも可能です。
フォントサイズを入力すると、それにふさわしい行間を教えてくれる便利ツール。
デザイナー視点のWebflowとFigma用UIフレームワーク。ノーコードでウェブサイトを開発する、新しい時代がもうすぐそこまで来ています。
Flexboxの仕組みについて、インタラクティブなデモと一緒に学びます。ボタンを切り替えることで、レイアウトを自動的に変化するため、Flexboxを体感的に覚えることができます。
CSS Gridプロパティを活用した、さまざまなレイアウトサンプル例をまとめて確認できるリソースとして。CSSコードのコピペで実装可能です。
SVGでできたファビコンを手軽に作成できるオンラインツール。使用する書体やサイズ、配色なども変更でき、SVGとPNGファイルとしてエクスポート可能。
URLリンクをQRコードに変換してくるサービスで、サイズや色なども自由に指定できます。
HEIC形式の画像ファイルをJPGに変換できるツール。これで、iPhoneで撮影した画像がPCで見ることができます。
Googleスプレッドシートに打ち込んだデータを、コードを書く必要なく、自動でウェブサイトに変換してくれる画期的なサービス。
配色ツール
モダンブラウザ対応の140色をまとめた配色リスト。各色の名前とHEXカラーコード、RGB値を確認したいときにどうぞ。
HEXカラーコードを入力すると、それに合った名前を自動で付けてくれるサービス。CSS VariablesやSCSSのスタイリング命名に便利。
色相や彩度、明るさなどを調整し、お好みの配色を見つけることができるオンラインツール。新しくなってより直感的に色を選ぶことが可能に。
4色の美しい配色カラーパレットを厳選してコレクションしている配色リソースツール。各色をクリックすると、HEXカラーコードをコピーできます。
キーワードを入力すると、その雰囲気にあった色合いを複数まとめて提案してくれる配色オンラインツール。
イラスト系ライブラリ
クレジット表記不要で、商用利用も可能なイラスト素材を無料公開しているサイト。PNGファイルとカスタマイズできるSVGファイルでダウンロードどうぞ。
400種類以上のユニークでかわいいクリスマス向けイラストを、PNGとSVGファイルで無料ダウンロードできます。利用時にはクレジット表記を忘れずに。
トレンドの手描きイラストを手軽に利用できるFigmaおよびSketch用プラグイン。
フリーランスのイラストレーターがビジネスを最適化し、好きなことに集中できる時間を増やすことを目的とした、Airbnbが提供するデジタルツールキット。
プロトタイプツール
自分のデザインをベースにしたチャート図を作成できるFigmaプラグイン。
人気フレームワークTailwind CSSをつかったコンポーネントを、Figma上で編集、カスタマイズできる有料プラグイン。
Figmaでデザインしたコンポーネントを、ReactやVue、HTML用コンポーネントに変換してくれるプラグイン。
ユーザーフローの作成に便利な、柔軟にカスタマイズできる矢印記号をコレクションした素材。SketchとFigmaで利用可能。
アイコンツール
ウェブサイトのアクセントに使いたい、27種類のアニメーションアイコンを揃えた素材セット。お試し版として、50個が無料配布されています。
オープンソースのアイコンをコレクションしており、まとめて検索や、オリジナルのアイコンパックを作成、ダウンロードできるサイト。現在、90以上のプロジェクトに対応中。
操作はいたってシンプルで、お好みのアイコンを見つけて、出力されたコードをコピペするだけ。SVGアイコンを手軽にウェブプロジェクトに追加できるAPIサービス。
Web用インターフェースはもちろん、グラフやチャート図、プレゼン資料作成などあらゆる場面で利用できる、使い勝手抜群のアイコン素材セット。4,000個を超えるアイコンを無料ダウンロードできます。
新しくなったmacOSスタイルに対応した、各種アプリやツールの代替アイコン2,300個以上を無料ダウンロードできます。
コラボ、リモートワークツール
文字や画像、音声、動画などあらゆるファイルを、複数人のチームで同時に編集、デザインできるホワイトボード機能。リアルタイムで共同作業を行うことができ、ドラッグ&ドロップのシンプルな操作性も○。無料版あり。
現在見ているウェブページ上でチャットを開始できるChrome拡張プラグイン。言いたいことをうまく伝える手助けになりそうなツール。
複数のチームで画面を共有しながら書き込みを同時に行ったり、レビューコメントを保存、確認できるコラボツール。
ビデオチャットやライブストリーム用に、自分の顔を世界の偉人に変えてしまうバーチャルツール。
面白、クリエイティブツール
手軽な操作のみで、機械学習や人工知能モデルを訓練させることができる、まさに未来な無料ツール。
動画編集で活用したい、高品質なサウンドエフェクト、効果音を無料ダウンロードできるサイト。この他にも、ハイクオリティな無料動画の配布も行っています。
Googleが発表したビジュアル重視の記事形式、「ストーリー」の効果的な活用事例やサンプルをあつめたサイト。まだ数も少ないですが、今後に期待。
ボタンをクリックするたびに、UIデザインのお題をランダムで出題してくれるオンラインサービス。自分のペースでUIデザイナーを目指します。
数字をアルファベットで表記するローマ数字に変換してくれるサービス。
TR-808ドラムマシーンとTB-303ベースシンセサイザーを、手元のキーボードキーを押しながら、実際に体験できるオンラインサイト。
ピアノやマリンバ、トロンボーンなど楽器をキーボードをつかって演奏できるオンライン猫サービス。
前回の最新ツールまとめも一緒にいかがでしょう。
サムネイル@ : Tyrus | Airbnb Design