Advertisement

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

 

free-illustration-collection
この記事は、2019年4月23日の初投稿から再編集、アップデートを随時行っています。2020年2月25日に新しい無料イラストを加え、合計54個のフリー素材サイトを紹介し

 

 

Background Generator

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

 

 

 

配色ツール

CSS Gradient Animator

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

css_gradient_animator___fuze

 

css-gradient-ultimate-collection
デザインでもっとも頭を悩ますことの多い「配色えらび」。配色を決まらずに、時間だけが過ぎてしまったという経験のあるひとも多いでしょう。 そんなときは、無

 

 

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

 

color-tool2015-top
この記事は、2016年8月22日に公開してから再編集、アップデートを随時行っています。新しいツールを加え、サービスが終了しているツールは削除し、合計66個の配色ツールサ

 

 

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

Artify

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

artify

 

online-photo-editor-1
高価なソフトウェアを購入したり、アプリをインストールしたり、プロを雇うことなく自分で写真の編集や加工ができると想像してみましょう。 Photoshop
free-vector-tools-feat-image
グラフィックデザイナーにとって、6万円近くする CorelDraw Suite を購入することは、最適な自分への投資と言えないかもしれません。また、Adobe製品の
medibang-paint-pro
これまでは絵やマンガを描くには、ペンと紙を使うということが当たり前でしたが、今ではパソコンを使って、手描きと変わらないレベルのイラストを制作することができるようにな

 

 

StockSolo

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

 

best-of-free-photo-site-top5
この記事は、2016年12月7日に公開された記事を再編集しています。新しいサービスを16個を追加し、サービスが終了しているものは削除し、合計58個のフリー写

 

 

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

 

latesticon2019sep-feat-image-1
この記事では、無料ダウンロードができて高品質なフリーアイコン素材を厳選してご紹介します。デザインコレクションに加えておくと、ウェブサイトやアプリの制作はもちろん、プ
image
この記事では、ユニークなアニメーションを実装したアイコン素材200個セット「Animated Icons from Icons 8」をご紹介します。ウェブサイトやモ

 

 

プロトタイプツール

Flow

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

flow

 

lottie-logo-1
最近のウェブサイト制作では、アニメーションがますます重要になってきています。 この記事は、Lottieの使い方をまとめた基本ガイドです。Lottieの

 

 

Dark Mode Plugin for Sketch

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

darkmode

 

 

 

Hidden Kittens

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

hidden-kittens-example

 

to-path
Figmaは、現在人気となっているプロトタイプツールのひとつです。 SketchやAdobe XDと比較すると、「リアルタイムで他の人とコラボレーショ

 

 

コラボレーションツール

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_

 

 

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

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

 

the-simpsons-in-css
この記事では、日常行っているWebデザインやグラフィックデザインの制作が捗る、便利な最新オンラインツールをまとめてご紹介しています。 これらの新しいツールやサ
best-of-online-tools-in-2019-1
2019年も残すところわずかとなり、今年もWeb制作を快適にするオンラインツールがたくさん公開されました。 この記事では、今年紹介したツールのなかでも
itg-digital
この記事では、2020年に入ってから公開された、Webデザインを快適にする最新オンラインツールをまとめてご紹介します。 ウェブデザインに限らず、グラフ
fresk-folk
この記事では、Webデザインやグラフィックデザインの制作スピードが爆速になる、便利な最新オンラインツールをまとめています。 うまくツールやサービスを利
free-collection-of-handcrafted-patterns-1
この記事では、日常行っているWebデザインやグラフィックデザインの制作が格段スピードアップする、便利な最新オンラインツールをまとめてご紹介しています。
css-wand
この記事では、Webデザインやグラフィックデザインの制作が捗る、公開されたばかりの最新便利オンラインツール、無料デザイン素材をまとめています。 これら

 

サムネイル@ : Contra Wireframe Kit