Web制作の常識が変わる、便利な最新オンラインツール48個まとめ

palette_list_-_color_palette_generator_-_10_000__palettes

 

この記事では、Webデザインやグラフィックデザインの制作スピードを短縮し、生産性をアップする、便利な最新オンラインツールをまとめてご紹介します。

 

「もっと早く知りたかった」と思わせる、面倒な作業をサクサクこなす時短ツールが勢揃いです。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。

 


コンテンツ目次

 

Web制作の常識が変わる、便利な最新オンラインツールまとめ

Web制作便利ツール

The Hero Generator

ウェブサイトの魅力的なヒーローイメージを作成できるオンラインツール。グラデーションオーバーレイやボタンスタイル、見出しタイトルの余白など細かい部分も手軽に調整できます。

hero-generator

 

 

 

Custom Shape Dividers

波型やジグザグ、矢印などさまざまなシェイプを使い、ウェブサイトのコンテンツわけに便利な境界線デザインを作成するWebアプリ。色やサイズ、シェイプを決定したら、あとはSVGファイルでダウンロードするだけ。

 

 

 

Neumorphic Generator

話題のニューモーフィズム・スタイルをCSSで手軽に再現できる自動生成ジェネレーター。50以上のプリセットを利用することで、自分好みの細かい調整も可能。

 

 

 

Neumorphism UI

新しいデザインスタイル「ニューモーフィズム」を人気定番CSSフレームワークBootstrapで再現し、200種類のUIコンポーネントを揃えたHTMLテンプレート。

neumorphism-ui

 

つまずきやすいBootstrapナビゲーションメニューの基本カスタマイズ方法総まとめ

 

 

Blobs

手書きしたアメーバのようなナチュラルなシェイプをSVGファイルで作成できるWebアプリ。Changeボタンでランダムに形状が変化し、微調整を行うことも可能。MITライセンス。

 

 

 

CSSeffectsSnippets

テキストリンクやボタンをCSSでスタイリングしたスニペットをまとめたライブラリ。クリックするとCSSソースコードをコピーできます。

 

 

 

Responsively App

複数のスクリーンサイズでレスポンシブの確認できるアプリ。表示したすべてのデバイス上で動きがミラーリングされ、個別デバイスごとにインスペクタを表示、スクリーンサイズ撮影にも対応と、ウェブ制作時間を大幅に短縮する無料ツール。

responsively

 

 

 

Keyframe.app

CSSの複雑な@keyframeアニメーションを、タイムライン付エディタで確認しながら調整、作成できるビジュアルツール。

keyframes-app

 

超便利!確認しておきたい最新CSSツール、リソースガイド厳選65個 2020年度

 

 

Rough Notation

Webページにアニメーション付きの注釈メモやハイライトなどを追加できる、3.8KBの軽量JavaScriptライブラリ。アニメーション時間や遅延などの設定も行うことができます。

roughnotation

 

 

 

Grid Cheatsheet

CSS Gridプロパティの使い方をインタラクティブなデモと一緒にまとめたチートシート。レイアウトや要素の並べ方などに困ったときの確認用に便利。

grid_cheatsheet

 

これで分かった!CSS GridとFlexboxの使い方を習得できるチートシート、ゲームまとめ

 

 

SVGOMG

IllustratorやSketchなどで書き出したSVGファイルを、Webサイト表示用に最適化してくれるツール。不要なテキストを削除し、読みやすいコードに変換してくれるので、サイトにSVGファイルを使うときはぜひ。

svgomg

 

 

 

Edit Chrome Extension

ワンクリックするだけで、ブラウザ上でどんなウェブページもリアルタイムで編集することができるChrome拡張プラグイン。コード知識不要で使い勝手も◎。

edit-chrome-extension

 

 

 

Studio

ウェブサイトのデザインから公開、CMS機能までを完結できる、日本発の国産Webデザインツール。

studio-3

 

コーディング不要!国産WebデザインツールSTUDIO 3.0で注目の新機能まとめ

 

 

Zyro

ドラッグ&ドロップであらゆる要素を変更、編集できるウェブサイトビルダー。直感的なグリッドレイアウトを用いたデザインは、スマートフォンを含むあらゆる端末に対応したレスポンシブデザインを作成できます。

zyro

 

 

 

Tailblocks

人気の軽量CSSフレームワークTailwindをベースに、UIコンポーネントで組まれたブロック要素を多数揃えたHTML/CSSビルダーツール。ソースコードのコピペはもちろん、カラースキン変更やレスポンシブレイアウトによる確認、話題のダークモードにも対応。

tailblocks

 

ウェブ開発を爆速に!人気オススメCSSフレームワーク厳選38個まとめ【2018年最新版】

 

 

Good Annotations

アップロードした画像にメモや注釈を追加できるオンラインサービス。

good-annotations

 

 

 

Attention Insight

XDやSketchなどで作成したデザインファイルをアップロードするだけで、ユーザーが注目する部分をヒートマップで表示し、デザインの改善点まで人工知能AIがアドバイスしてくれるツール。サイト公開前に確認しておくと良いでしょう。

attention-insight

 

 

 

Checklist Design

Webサイトが完成したいときに確認したい事項をチェックリスト形式でまとめたサイト。タイポグラフィーや配色、アクセシビリティなど目的別に整理されており、忘れた項目がないか瞬時に確認、具体的な改善アドバイスも提供してくれます。

checklist-design

 

 

 

Deck

Sketchなどのツールで作成したファイルを、Powerpointで編集可能なファイルに変換してくれるツール。プレゼン資料作成に便利なアイテム。

deck

 

 

 

デザインコレクション、UIキット

Image Colorizer

白黒写真をアップロードすると、人工知能テクノロジーによって自動で色付け、ペイントしてくれるサービス。

imagecolorizer

 

 

 

 

remove.bg: Remove Backgrounds 100% Automatically

画像をアップロードしてほんの数秒待つだけで、人物を切り抜いてくれる人気ウェブサービスが、Androidスマートフォンでも可能になりました。新しい背景の追加にも対応。

remove-bg-for-android

 

まるで魔法、画像の切り抜きを1クリックで!Photoshop拡張プラグインRemove.bg使い方ガイド

 

 

Patternico

継ぎ目のないシームレスなパターンデザインをブラウザ上でドラッグ&ドロップの直感的な操作でデザインできるツール。デザイン用に用意されたアイコンの他、画像ファイルをアップロードすることも可能。

seamless_pattern_maker_-_create_unlimited_seamless_patterns_for_free

 

 

 

Gravit Designer

ダウンロード不要、ブラウザ上でベクターグラフィックを編集できるIllustrator代替アプリ。

gravit-designer

 

Illustratorいらず?!ベクター画像作成につかえる無料の代替ツールまとめ【2021年版】

 

 

Rotato100

iPhoneやiPadなどのモックアップを超立体的に作成し、動画ファイルを作成できる新しいサービス。プロモ動画やプレゼンテーション、ポートフォリオなどに。

rotato100

 

 

 

Artvee

世界的に知られる名画から、100年以上前に描かれたイラストや広告向けポスターデザインまで合計12,000点以上が揃い、クレジット表記なしで商用でも自由に利用できます。

artvee

 

商用可なパブリックドメインの名画、イラスト1万枚を無料ダウンロードできるArtvee

 

 

HANDZ

12種類のハンドジェスチャーを、9種類のカラースキンと3つのバリエーションでセットにし、最大320通りのベクターデザインを作成できるキット。Photoshopの他に、IllustratorやSketch、Adobe XD、Figmaに対応。

handz

 

 

 

イラスト系ライブラリ

Avataaars

さまざまなキャラクター、アバターをSketchをつかって自由に作成できるデザインライブラリ。豊富なバラエティは、以下の動画でも確認できます。

 

 

 

Flow Lava

ユニークな自分だけのキャラクターイラストを、SketchとFigmaアプリを使って自由に作成できるデザインライブラリ。デモ版では、9種類のキャラクターがセットに。

flow-lava

 

 

 

Fluent Icons

Microsoftのアイコンスタイルを忠実に再現したアイコン素材965個をセットにしたメガパック。無料版はPNGファイルのみでクレジット表記が必要で、有料版にはSVGファイルもセットとなっているので、サイズ制限がありません。

fluent-icons

 

 

配色ツール

Color Copy Paste

スマートフォンのカメラ越しにリアルタイムで映る映像から、お好みの色を抽出し、FigmaやSketch、Webブラウザ上に直接コピペできる配色ツール。

color-copy-paste

 

 

 

Sorted Colors

スライダーを左右に動かすことで、HEXカラーコードではなく、名前のついたCSSカラーで直感的に配色を選ぶことができるツール。

 

 

 

Palette List

用意された12色の中からお好きな色を2色選ぶだけで、関連するカラーパレットを1万以上も提案してくれるオンラインカラーアプリ。気に入ったカラーパレットは、SVGやSASS、CSSで無料ダウンロードできます。

palette_list_-_color_palette_generator_-_10_000__palettes

 

配色に悩んだと便利なツールを新しく追加しています、こちらも参考にしてみると良いでしょう。

【2021年版】もう配色デザインには迷わない!すごい無料カラーパレットツール83個まとめ

 

 

プロトタイプツール

Origami 3

Facebookが作成したプロトタイプツールで、デザインからアニメーションまですべてをひとつのツールで完結させたサービス。

 

 

 

Grids Generator for Figma

プロトタイプツールFigmaで、あらゆるフレームにグリッドスタイルを追加、作成できる拡張プラグイン。GoogleのElement Inspectorにインスパイアされた使用感。

figma-grids-generator

 

 

 

Pexels for Figma

プロトタイプツールFigmaアプリ上で、フリー写真の検索を行うことができるプラグイン。検索できる写真は、どれもクレジット表記で商用利用にも対応しており、編集も自由自在。

pexel-for-figma

 

 

 

flowin

繰り返し作業の多いフローチャート作成を手助けしてくれる、Figma専用コンポーネント集、$24(およそ2,500円)〜の有料アイテム。

flowin

 

 

 

Figurative

FigmaプロトタイプツールをiPad専用に最適化したアプリ。カスタムフォントやApple Pencil、タッチジェスチャーにも対応。まるでPhotoshop for iPadのよう。

figurative

 

2020年に注目したい人気プロトツール「Figma」のベストプラグイン厳選52個まとめ

本当によく使うFigmaの便利ショートカット厳選36個まとめ

 

 

コラボ、リモートワークツール

Avocode

PhotoshopやIllustrator、Sketch、XD、Figmaなど複数のデザインアプリをまとめて扱うことができ、プロトタイプ作成からコロボ、バージョン管理などあらゆるデザイン業務をこなします。

avocode

 

 

 

Coment

Slackアプリのレビューやコメント、承認などをひと目で確認でき、フィードバックと承認プロセスの時間を節約できるツール。

coment-for-slack

 

 

 

Miro

プロジェクトをチーム間で共有し、リアルタイムで同時編集を行うことができるオンラインコラボレーションツール。コロナ禍でリモートワークが増えているいま、特に注目したいサービスのひとつ。

miro

 

 

 

Sympli

プロジェクトのコラボレーションやワークフローを管理できるサービスで、アップされたSketchファイルのバージョン管理や、自動でスタイルガイドや仕様をまとめて整理してくれます。

sympli

 

 

 

面白、クリエイティブツール

PaperSizes.Guide

世界中のあらゆる用紙サイズをまとめた便利サービス。普段から利用するA4、A3サイズの他に、アメリカやヨーロッパ、カナダなどの地域別サイズ、世界基準となっている用紙サイズをお好みの単位で確認できます。ちなみにA4サイズは、210x297mmだそう。

papersizes-guide

 

 

 

Font In Logo

世界的に有名なブランドのロゴに使用されているフォントをまとめた検索ギャラリーサイト。ロゴからフォントを探すのはもちろん、フォントから使用しているブランドを検索するのにも便利。最後はフォントの購入までサポート。

font-in-logo

 

 

 

Free the Docs!

Googleドキュメントで作成したファイルを、テキストファイルに再構築してくれる自動化ツール。readme.txtなどに便利で、クラウドファイルを利用することで、共同で作業を行うことも可能。

free-the-docs

 

 

 

Hidden Kitten for Figma

フレームを選択し、このFigma拡張プラグインを起動するだけで、ランダムで猫たちが登場する面白ツール。

hidden-kitten-1

 

 

 

3D Photography using Context-aware Layered Depth Inpainting

一枚の静止画を立体的な3D写真に変換するプロジェクト。3Dエフェクトをどのように作成するのか示したソースコードも公開中。

 

 

 

Passport Index

世界中のパスポートを集め、ビザなしで渡航できる国の数などでランキングをつけたサイト。現在199カ国のパスポートがコレクションされており、日本はグローバルランキング18位タイだそう。ちなみに最下位はイラク。

passport-index-1

 

 

 

BLM Badge

Black Lives Matterのサポートを表明するバッジをウェブサイトに追加できるサービス。コピペするだけで完了のお手軽さ。

blm-badge

 

 

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

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

 

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

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

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

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

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

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

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

 

サムネイル@ : Contra Wireframe Kit