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

css-wand

 

この記事では、Webデザインやグラフィックデザインの制作が捗る、公開されたばかりの最新便利オンラインツール、無料デザイン素材をまとめています。

 

これらのツールやサービスを利用すれば、デザイン制作で面倒な作業も手軽に、短時間で行うことができ、より効果的にプロジェクトを進めることができます。制作ワークフローに取り入れてみてはいかがでしょう。

 

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

 

404 Illustrations

ウェブサイトの404ページで利用できる、ユニークでかわいいイラストを集めた無料デザイン素材キット。

404-illustration-vers

 

 

 

Adobe XD 19

このアップデートでは大幅に機能が強化され、より使い勝手の良さを追求したプロトタイプツールとなりました。

adobe-xd-19

 

 

 

Amadine

Mac専用のベクター描画アプリで、Illustratorの代替ツールとしても利用できそう。無料トライアルも用意されています。

amadine

 

 

 

Color & Fonts

オシャレな配色カラーパレットと英字フォントの組み合わせをまとめた、デザインに困ったときに覗きたいオンライン無料リソース。

color-and-font

 

 

 

Color Dot Font

ダミー文字テキストの代わりに、美しいカラードットを入力できるユニークなフリーフォント。

color-dot-font

 

商用可で完全無料!2018年公開のフリーフォント素材132個総まとめ

 

 

Colordrop2

スマートフォンのカメラから覗いた色、PSDファイル、撮影した画像イメージなどからそのままHEXカラーコードで表示してくれるiOSアプリ。

colordrop2

 

 

 

Colorinspire.io

配色選びに困ったときに参考にしたい配色カラーパレットコレクションサイト。クリックでHEXカラーをコピーできるのも嬉しいポイント。

colorinspire-io

 

 

 

CSS Wand

ホバーエフェクトやローディングなど、コピペで利用できるCSSスタイルコレクション集。`

css-wand

 

 

 

Darkmode.js

Macではおなじみのダークモードをウェブサイトに導入できるJSプラグイン。参考サイトの右下に表示されたアイコンをクリックすると、実際に切り替わる様子を確認できます。

darkmode-js

 

 

 

Data Populator

ダミー文字テキストではなく、本物のデータを入力置換できるSketchとAdobe XDプラグイン。

data-populator

 

これ便利すぎ!Adobe XDのおすすめ無料プラグイン20個まとめ

 

 

Starter Kit for Sketch

ウェブサイト制作を始めるときの取り掛かりを楽にする、Sketchデザイン素材集。イラストやグラデーション、レイアウトに至るまでどれもトレンドをうまく取り入れたデザインとなっています。

design-starter-kit-for-sketch

 

 

 

Design Gapp

デザインプロジェクトの一貫性を保つスタイルガイドや使い方ガイドを作成できるオンラインツール。チーム内でのコラボレーションツール、増えてますね。

designgapp

 

 

 

Drawow

子供の描いた絵をスキャンしアップロードすれば、24時間でユニークなキャラクターにしてくれるサービス。

drawow

 

 

 

Email Flow

世界のトップブランドから無名のものまで、さまざまなEメールのレイアウト全体のスクリーンショットをまとめたギャラリー集。アイデアが欲しいときにどうぞ。

email-flow

 

 

 

Eyelet

はじめてサービスを使うひとへのツアーガイド機能を、コード不要で作成できるオンラインツール。疑問に思うことやよくある質問などをまとめると良いでしょう。

eyelet

 

 

 

Figma Plus

プロトタイプ作成ツールFigmaに必要なプラグインの検索、インストールをまとめて行うことができる便利サービス。

figma-plus

 

 

 

Flight Icons

アニメーション付きのアイコンライブラリで、iOSやAndroid、Webサイト制作を想定したつくりとなっています。

flight-icons

 

 

 

Framer Playground

Reactを手軽に導入でき、多彩なアニメーションライブラリ、分かりやすい使い方ガイドがアップデートされています。

framer-playground

 

 

 

Icon Scout

SVGアイコンをアップロードすれば、オンライン上で編集できるツール。あらかじめ美しく使いやすい配色が揃っている点もポイント。

free-online-icon-editor

 

 

 

Frontd

コード知識なしでスタイリッシュでモダンなウェブサイトを作成できる新しいカタチのツール。ドラッグ&ドロップで設計できるのもポイント。

frontd

 

 

 

Getting Started with Design System

デザインシステム(英: Design System)を基礎から学ぶことができるeブックが、無料配布されています。

getting-started-with-design-system

 

 

 

Grape Illustration Pack

スタートアップやウェブサイト、アプリなどに利用できるフレンドリーなキャラクターイラストをセットにした素材集。

grape-illustration-pack

 

 

 

Involve Me

ユーザーのエンゲージメントを高めるモバイル対応のクイズや計算機ツール、アンケート、パーソナル設定などを導入できるオンラインサービス。

involve-me

 

 

 

Jaamly

iOSアプリ作成で必要なメタデータの追加、スクリーンショットの作成、アプリアイコン作成などをまとめて行うことができるモバイルアプリ。

jaamly

 

 

 

Marvel Enterprise 3

ワイヤーフレームからプロトタイプ作成、ユーザーテストなど最高のプロダクトづくりに必要なツールを一元管理できるオンラインサービス。

marvel-enterprise-3

 

 

 

Milanote

アイデアやコンセプトをより視覚的にまとめることができるツールで、文字テキストや画像などを自由に配置し、ムードボードを作成する感覚で扱うことができます。

milanote

 

 

 

Mixkit Art

さまざまなスタイルの手描きイラストを無料ダウンロードできるサービスで、毎月定期的に公開アイテムがアップデートされています。

mixkit-art

 

 

 

Mockup Frames

GIFアニメーション付きのモックアップを画像のアップロードだけで完成させるオンラインサービス。Dribbblへの投稿にも自動対応しています。

mockup-frames

 

 

 

Muzli Search

このツールを利用することで、デザインのインスピレーションが欲しいときに、高品質なアートワークやロゴ、イラスト、写真のみを配色カラーパレット付きで検索できる、デザイン制作でも重宝するツールです。

muzli-search

 

ノンデザイナーにおすすめ!センスの良い配色、デザインアイデアを見つける画像検索ツール Muzli Search

 

 

Nural

大変な作業でもあるプロジェクト管理を、うまく整理し、よりコミュニケーションを取りやすく、期限を守りやすくすることを目的に作成されたツール。

nural

 

 

 

Octopus | Untitled Projects

制作を行うウェブサイトの詳しいサイトマップをオンラインで作成し、見積もりも自動で生成してくれるジェネレーターツール。

octopus

 

 

 

One Click Test

サイト名の通り、ワンクリックで作成したレイアウトのユーザーテスト、検証を行うことができるシンプルなオンラインサービス。

one-click-test

 

 

 

Presto

カスタマーサポートとなる動画やスクリーンショットをつかったハウツーガイドを作成し、ライブチャット機能を使うことで顧客とすぐに共有できます。

presto

 

 

 

Remove BG for Sketch

ボタンクリックひとつで人物を背景から切り抜くことができるあのサービスが、ついにSketchにも対応です。

remove-bg-for-sketch

 

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

 

 

Rooki Design

若いデザイナーを主体としたデザイン系オンラインマガジンで、美しいレイアウトや配色、フォント選び、コンテンツ内容も豊富。

rooki-design

 

 

 

Shape by IDEO

IDEOのオープンイノベーションにおける長年の経験をツールにまとめました。アイデアを構築し、テストし、手直しするための共同コラボレーション作業スペース。

shape-by-ideo

 

 

 

Shipright

オンラインショップで購入したユーザーの要望やフィードバックをまとめて管理、整理することができるツール。未来のお客様相談室といったところでしょうか。

shipright

 

 

 

Sketch to Web

Sketchで作成したウェブサイト用のデザインを自動でコード変換してくれる無料ツール。

sketch-to-web\

 

 

 

Spoke by Mozilla

ウェブ上にある3Dモデルや画像、ビデオなどを使って仮想VRスタジオを作成できるツール。リンクを共有するだけで、ハブに公開して友達を招待できるだけでなく、無料オープンソースとなっています。

spoke-by-mozilla

 

 

 

Storefront UI

Vue.JS向けに作成されたショッピングサイトに特化したUIライブラリで、100%自由にカスタマイズできます。

storefront-ui

 

 

 

Streamlabs OBS

ゲームのプレイ実況などストリーミング配信をすぐに行うことができる無料ツール。

streamlabs

 

 

 

Stylish

CSSコンポーネントをReact用コンポーネントに自動変換してくれるツール。

stylish

 

 

 

Taskade 2

リアルタイムコラボレーションやビデオ電話、メッセージなどを瞬時に作成できるツール。Chrome用拡張プラグインも用意されています。

taskade-2

 

ウェブ制作の面倒をズバリ解決!オススメChrome拡張機能23個まとめ

 

 

Top Hunts Time Machine

2013年11月までさかのぼり、Product Huntでヒットしたサービスや商品をまとめたタイムマシン的なまとめサイト。

top-hunts-time-machine

 

 

 

Tweaker

出来上がったデザインのフィードバックが欲しいときに、画像をアップロードするだけで手軽にシェアでき、特定のエリアに対してコメントできるオンラインサービス。

tweakr

 

 

 

UIBot

デザインのサイズや配色、タイポグラフィをランダムに作成するWebアプリケーション。

ui-bot

 

 

 

UI Kitten 4.0

React用のUIスターターキットで、40種類にのぼる画面スクリーンに加え、ライト/ダークモードにも対応、あらゆるバックエンドでの導入を可能にします。

ui-kitten-4

 

 

 

Undesign

デザイン制作で必要になる無料素材やリソースを、カテゴリごとにまとめたライブラリサイト。デザイナーはもちろん、デベロッパーやマーケターのひとにもオススメの内容。

undesign

 

 

 

UnFold

撮影した写真をよりスタイリッシュに魅せることができるテンプレートを多数そろえた有料写真アプリ、ブランディングにも役立つデザインが特長です。

unfold-4

 

 

 

UseAnimation

After Effectsでもカスタマイズできる、高度なアニメーションアイコン素材ライブラリ。マルチプラットフォームはもちろん、レスポンシブに対応できる便利ツール。

useanimation

 

 

 

コーディング開発に取り掛かる前に、プロトタイプでユーザーテストを行うことができるツール。ヒートマップ機能やユーザーフローの録画など細かい分析を行うことができます。

useberry-2

 

 

 

Vieww.me

必要なフォームをステップに続けて入力していくだけで、ものの2分でプロフィール用ウェブサイトを無料で作成できるツール。

vieww-me

 

 

 

Webframe

800種類以上のアプリのランディングページやイントロページなどのスクリーンショットを集めたギャラリーサイトで、カテゴリ別にデザインを確認することもできます。

webdframe

 

 

 

WebOasis

ホームページ作成に必要な情報のみを検索できるツール。

weboasis

 

 

 

Whimsical | Mind Maps

思いついたアイデアやコンセプトをブレインストーミングしやすくし、すばやく整理できるオンラインサービス。

whimsical-mind-maps

 

 

 

ZDog

CanvasとSVGをつかって立体的なアニメーションを作成できる、3D JavaSciptエンジン。

z-dog