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

contra_wireframe_kit

 

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

 

カテゴリ分けされたこれらのツールやサービスを利用すれば、面倒な作業をラクにこなし、作業の効率化をアップできるでしょう。「なぜ今まで使っていなかったのか」、そんな気持ちにさせる便利ツールが揃いました。

 

 

各ツールはカテゴリごとに整理しています、以下のリストを参考にどうぞ。


コンテンツ目次

 

Web制作フローが変わる!便利な最新オンラインツールまとめ

 

Web制作便利ツール

BrowserFrame

各種ブラウザ付きでスクリーンショットを撮影できるオンラインツール。目的のURLを入力するだけで、複数のブラウザやオペレーティングシステム、テーマに対応します。

browserframe-1

 

 

 

Easings.co

滑らかなアニメーションに欠かせないイージングを、一般的なインターフェースをつかったサンプル例5つで確認、調整できるオンラインツール。カスタムで自分専用のペジェ曲線を試すこともできます。

easings

 

 

 

Pattern.css

CSSスタイルシートをサイトに読み込み、任意のクラス名を追加するだけで、CSSオンリーでスタイリングされた美しいパターンデザインを追加できます。

patterns-css

 

 

 

Dark CSS Generator

ウェブサイトのURLを入力するだけで、ダークモード用CSSを自動で吐き出してくれます。ダークモードを適用したプレビューも同時に確認でき便利。

dark-css-generator

 

 

 

98.css | XP.css

クラシックなWindows 98 とXPのインターフェース・デザインをそのまま再現したCSSライブラリ。ボタンやチェックボックス、テキストボックス、ドロップダウンなどのコンポーネントが揃っているので、懐かしい90年代レトロインターフェースを作成したいときにどうぞ。

98-css

 

 

 

Css Separator Generator

Webサイトのセクション分けで利用できる、CSSのみで作成された境界線デザインを作成、ダウンロードできるオンラインツール。斜めスリット、ギザギザや波ウェーブなどユニークなものが中心。

css_section_separator_generator___wweb_dev

 

 

 

Favicon Generator

文字テキストや画像イメージ、絵文字などからウェブサイト用ファビコンを自動生成できるジェネレーターツール。

favicon

 

 

 

StyleStash

表示しているWebページの任意の要素をCSS調査したり、スタイルをリアルタイムで変更、保存、プレビューなど充実すぎる機能を搭載した、Chrome拡張プラグイン。

stylestash_-_save_your_favorite_css_styles_from_any_website

 

 

 

SVG Path Visualizer

手持ちのSVGパスデータをアップロードすれば、複雑なSVGパス構造をひとつずつ解説してくれるビジュアルツール。

svg_path_visualizer

 

 

 

Pose Animator

あらかじめベクターイラストを取り込み、FaceMeshとPoseNetというカメラ認識技術を使い、リアルタイムでイラストをアニメーション化できるスクリプト。

 

 

 

Naker

コーディング無しで3Dの立体的でインタラクティブなコンテンツを作成できるオンラインプラットフォーム。背景やフォーム、ストーリーテリング向けコンテンツを作成、手軽にサイトに埋め込むことが可能。

naker

 

 

イラスト系ライブラリ

Blush Illustrations

世界中のイラストレーターによるイラストライブラリ集。イラストを作成、組み合わせ、カスタマイズを自在に行うことができ、プロジェクトに手軽にイラストを追加できる便利ツール。

blush-illustrations

 

 

 

Flow Lava

オンライン上で用意されたキャラクターやロボット、不思議な生物を使って、ストーリーデザインを作成するイラストツール。

flow_lava_illustration_constructor

 

 

 

404 Illustrations

退屈な404ページをポップでクリエイティブに仕上げる、404ページ向けのイラスト23種類が揃います。PNGとSVGファイル形式で収録。

404-illustrations-2

 

 

 

Wham! Illustration Kit

美しさとユニークさを両立したイラスト50種類が揃う素材集。無料版ではPNGファイル形式をダウンロードでき、有料版ではSketch、Figma、Ai、SVG、EPSファイル形式も選択可能。

wham

 

 

 

Huumph! Illustration Kit

上記アイテム同様のイラスト素材集で、Webコンテンツのニーズに合わせたキャラクターデザインが特徴。

huumph-illustration-12-may

 

 

 

Self Space Illustrations

ウェブサイト制作で活躍しそうなオリジナルイラストを20種類を揃えたプレミアム素材集。収録ファイル形式も豊富で、無料版では1つのイラストをデモとしてダウンロード可能。

self-space-illustrations-1

 

全て無料、本当は教えたくないフリーイラスト素材サイト83個まとめ【商用OK】

 

 

Background Generator

ユニークな背景デザインを自動生成できる、シンプルでカスタマイズ可能なオンラインツール。さまざまなパターンを読み込むことで、魅力的で素敵な背景イメージを瞬時に作成できます。

 

 

 

配色ツール

CSS Gradient Animator

美しく色が変化するアニメーション付きCSSグラデーションをその場で作成し、CSSコードをコピーできるオンラインツール。Spaceキーでランダムに色を変更できます。

css_gradient_animator___fuze

 

ウェブデザイナー必見!美しいCSSグラデーションをコピペできる無料ツール17選まとめ

 

 

Palette List

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

palette_list_-_color_palette_generator_-_10_000__palettes

 

 

 

Swach

写真やイラストから抽出した色を元に、配色カラーパレットを作成、管理する無料アプリ。Mac OSとWindowsどちらにも対応しています。

swach

 

 

 

Cone 2.0

撮影した写真から色を抽出できるiPhone用カラーピッカーアプリ。Pantoneカラーを見つけ出し、見ている写真からカラーリストを自動生成できます。

cone-2-0-1

 

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

 

 

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

Artify

膨大に揃うデザイン素材をつかって、直感的にデザイン作成できるオンラインベースのデザインエディター。無料ではじめることができ、作成したデザインをPNGファイル形式でダウンロード可能。SVGファイル形式はプレミアム有料プランから。

artify

 

Photoshop 必要なし?無料で使える画像編集、加工オンラインツール26個まとめ

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

無料ではじめよう!おすすめお絵描きソフト、ペイントツールまとめ【2021年版】

 

 

StockSolo

フリーストック写真で人気のUnsplash、Pexels、Pixabayからのコレクション320万枚以上の無料写真を、PhotoshopやIllustrator、InDesign、XDなどのAdobeアプリで検索、利用できるプラグイン。

 

【2021年版】フリー写真素材のおすすめサイト完全まとめ57選【商用利用無料】

 

 

Contra Wireframe Kit

ワイヤーフレームやプロトタイプを手軽に作成できるUIスターターキット。150種類を超えるUIコンポーネントに、50種類のモバイルスクリーン用サンプルが揃います。Figma、Sketch、XDに対応しています。

contra_wireframe_kit

 

 

 

heywires | Adobe XD Wireframe Kit

Webサイトのワイヤーフレーム、プロトタイプ作成に必要な200種類を超えるコンポーネントに、8種類のサンプルレイアウト、60個のカスタムアイコンなどが揃った、Adobe XD専用ワイヤーフレームキット。

heywires

 

 

 

Unit UI Kit

160種類を超えるUIコンポーネントが揃ったUIキットで、再利用しやすいデザインは日常業務のスピードアップにもつながります。Sketch専用ファイル。

unit-ui-kit-1

 

 

 

Line Icons

ウェブサイトやモバイルアプリなどに活用したい、シンプルで使い勝手の良いアウトライン型アイコン2000個セット。

line-icons

 

無料で使いやすい!極上の最新フリーアイコン素材40選

これも動く?!面白アニメーション付き無料アイコン素材200個セット Free Animated Icons from Icons8

 

 

プロトタイプツール

Flow

プロトタイプツールSketchでアニメーションを作成し、LottieやSVG、iOS、HTML、Reactファイルとしてエクスポートできる便利プラグイン。

flow

 

WebアニメーションはLottieがオススメ!基本の使い方完全ガイド【2020年版】

 

 

Dark Mode Plugin for Sketch

ドキュメントまたはライブラリにカラープリセットを追加し、ダークモード用カラーパレットを作成すれば、自動的にダークモードバージョンのWebページデザインが生成されます。

darkmode

 

 

 

Hidden Kittens

Figmaでフレームを選択し、このプラグインを適用すれば、選択したフレームごとにランダムでネコが出現します。ネコ好きのひとへ。

hidden-kittens-example

 

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

 

 

コラボレーションツール

Pixelic for Figma

FigmaとSlackをシームレスに連携した、プロダクトチーム向けのデザインコラボレーションアプリ。

pixelic-for-figma-2

 

 

 

Board

真っ白のホワイトボードを、離れていてもオンライン上で共有できるより直感的なコラボレーションツール。Shiftを押しながらペンで入力すれば、クリックする必要もないなど、使い心地にもこだわったお気に入りツール。

whiteboard

 

 

 

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

Screen Recorder

ログインや会員登録なしでスクリーン録画をできるオンラインツール。マイクの音声も録音できるので、サクッと録音をしたいときにいかがでしょう。

screen_recorder___free__private__no_ads

 

 

 

NoisyLoop

世界中の街なかの喧騒、ノイズをそのままBGMとして試聴できるオンラインサービス。オフィスやカフェ、香港のストリート、インドの野菜市、タイの郵便局などユニークな場所で録音されています。

noisyloop

 

 

 

Coronavirus Country Comparator

新型コロナウイルスの世界各国の感染状況をリアルタイムのグラフで比較できるオンラインツール。グラフに表示したい国を選択でき、期間や完治したひとの数など細かく確認できます。

coronavirus_country_comparator

 

 

 

Practice Your Ukulele!

空き時間をつかってウクレレの弾き方を練習できるシンプルなオンラインツール。

practice_time_

 

 

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

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

 

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

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

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

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

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

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

 

サムネイル@ : Contra Wireframe Kit