Advertisement

 

この記事では、Webデザイン制作を楽にする最新オンラインツール43個をまとめてご紹介します。

 

コピペで利用できるお手軽CSSツールSVGツール、コード知識不要のノーコードツール、色に困ったときに便利な配色ツールなど、クリエイティブな案件で活用したい新しいツールを揃えています。

 

自分のワークフローにうまくツールを導入することで、制作時間の短縮につながるだけでなく、ストレス少なく作業を行うことができます。

 

カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。

 


コンテンツ目次

 

 

Web制作の効率、生産性アップ!話題の最新オンラインツールまとめ

Web制作便利ツール

Layout Patterns

最新のCSSテクニックでできるレイアウトパターン集。中央揃えや12カラムグリッドなど、ほんの数行のコードで実現できてしまいます。

 

この記事では、普段のホームページ制作で直面しがちな課題を解決するCSSテクニックをまとめて紹介しています。 クライアントからの要望も多いCSSの小技テ

 

 

Pocoloco

Stripeのようなだいなみっくなグラデーションアニメーションをつかった、ウェブサイト用背景デザインを自動生成できるツール。

 

 

 

Grainy Gradient Playground

CSSグラデーションにザラッとしたSVGテクスチャを重ねることで、レトロなエフェクトに仕上げるオンラインツール。作成したコードはそのままコピペで利用できます。

 

 

 

Shadow Palette Generator

ドロップシャドウを重ねることで超リアルな影を作成できるCSSツール。シンプルなインターフェースで、はじめてのひとでも簡単に影をカスタマイズできます。

 

ほんのり影がついたようなドロップシャドウは、「浮いている」ような立体感を演出できる、ウェブサイトでは欠かせないデザイン要素のひとつです。 ドロップシャドウの使

 

 

Box Shadow

複数のbox-shadowプロパティを利用したCSSスタイルを重ねることで、よりユニークでリアルなドロップシャドウ影を作成、調整できるツール。

 

 

 

Annimay

Webサイトのリンクやボタンに適用できる、軽量なCSSアニメーションを集めたコレクション。クリックでエフェクトをコピペでき、SCSS、CSS、LESSファイルでダウンロード可能。

 

 

 

UIUI

ウェブサイトをより魅力的にする、アニメーションを得意とした見出しタイトルやボタンエフェクトなどを揃えたUIコレクション。

 

Webサイトにおける「ボタン」は、使いやすさと分かりやすさが重要です。このバランスがなかなか悩みどころで、いつも同じスタイルのボタンを色を変えて再利用、なんてことも
この記事では、Webデザイン制作の面倒な作業をラクにするCSS便利ツール87個をまとめています。なお、新しいツールを随時アップデートしています。 CS

 

 

SVGcode

JPGやPNG、GIF、WebP、AVIFなどのラスター画像を、SVG形式に変換できるオンラインツール。

 

この記事では、Webデザイン制作の面倒な作業を楽にこなす、便利なSVGツール53個をまとめてご紹介します。 背景テクスチャやSVGシェイプから、オンラインSV

 

 

Web Animation Course

Webアニメーションについて詳しく解説したデザインコースで、アニメーションの基本原則からホバーエフェクト、スクリーンに応じたアニメーションなど、細かい動きをデモと一緒に学びます。

 

海外サイト Medium で公開された The ultimate guide to proper use of animation in UX by Taras S
この記事では、ディズニーによるアニメーションの基本原則を、どのようにWebサイトやUIデザインに適用できるか、具体的なサンプル例と一緒に紹介しています。

 

 

Arco Design

React向けのUIコンポーネントライブラリで、より素早いウェブ制作を実演できる時短アイテムのひとつ。

 

 

 

Nord Design System

一貫性のあるウェブデザイン作成の手助けをするデザインシステムで、CSSフレームワークからウェブフォント、ウェブコンポーネントなど必要な素材がひとまとめになっています。

 

 

 

Startup 5

ウェブ制作がノーコードで完結する、スタートアップのためのウェブサイトビルダー。あらかじめデザインされたブロックを使えば、一瞬でウェブページを作成できます。

 

 

 

Loopple

ドラッグ&ドロップの操作のみで、魅力的なBootstrap製の管理画面、ダッシュボードを作成できる新ツール。デモとして、3スタイルが用意されています。

 

 

 

配色ツール

Color Spectrum

メインカラーを一色えらぶだけで、ウェブデザインからグラフィックアートまで幅広く使える配色カラーパレットを、瞬時で自動生成してくれるオンラインツール。Fimga用プラグインも用意されています。

 

 

 

Gradients Mass Driver

ペジェ曲線の原理を利用して描かれた、より美しいCSSグラデーションを作成できるオンラインツール。

 

 

 

Material Theme Builder

画像や色を選択すると、アルゴリズム機能で自動生成されたUI用のダイナミックカラーが表示されるツール。Material Design 3の新しいカラーシステムに移行したり、コードのエクスポートも可能。Figmaとブラウザ版で利用可能。

 

 

 

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

Canva Video

オンラインデザインツールのCanvaが、ついにビデオ動画の編集にも対応。よりクリエイティブなアイデアを、手軽に表現できるようになりました。

 

 

 

Design Stripe

デザイン知識がなくても、オンライン上で手軽に美しいイラストを作成できるサービス。無料プランもあるので、気になるひとは試してみると良いでしょう。

 

 

 

3D Bay

高品質で超立体的な3Dイラストを無料ダウンロードできる便利ツール。すべての素材は、ロイヤリティフリーで商用利用可能となっています。

 

 

 

bbburst

表示したいシェイプを選び(複数選択可)、配色を決めるだけで、カラフルな紙吹雪デザインをSVGファイルで作成、ダウンロードできます。

 

 

 

SVG Backgrounds

SVGでデザインされたユニークな背景ベースパターンをえらび、お好みの配色やカラーモード、不透明度を調整し、オリジナルのSVG ファイルを作成します。パターンを全画面でプレビューでき便利。

 

 

 

Dddoodle

落書きのようなユルい手書きデザイン120種類を、SVGファイル形式で収録した無料アイテム。CC0で商用利用にも対応しています。

 

 

 

Passion Hacks

420種類を超えるイラスト素材を無料ダウンロードできるコレクションサイトで、PNGまたはSVGファイルでの提供となります。

 

 

 

Olio Illustration

さまざまなビジネスシーンや最新テクノロジーを想定した、テック系イラスト素材集。デモ版はPNGファイルで無料ダウンロード可能。

 

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

 

 

Seek Vectors

あらゆる有名SNSアプリのロゴをベクター形式で無料ダウンロードできるお役立ちツール。ファイル形式はPNG、SVG、JPG、EPS、AIファイルから選択可能。いざというときに便利。

 

 

 

Logo Ipsum

さまざまなスタイルで作成されたロゴデザイン40種類以上が揃っており、クリック一発でSVGファイル形式でダンロードできます。

 

「準備はまだできていないけど、仮のダミー画像を入れておきたい」ウェブ制作中にそんな場面に遭遇することもあるでしょう。 この記事では、ダミー画像を手軽に

 

 

Ssshape

オーガニックなblobシェイプを作成できるオンラインツール。キャンバス上にお好みでドットをうち、右下にあるボタンをクリックすれば完了。SVGファイル、またはSVGコードでダウンロードできます。

 

 

 

Vector Styler

Illustratorに代わるベクターデザインツールで、MacとWindowsどちらでも利用可能。無料トライアルでまずは体験してみましょう。

 

できるだけ予算をかけずに、無料で高品質なデザインを簡単DIYできる方法をお探しですか。 この記事では、デザインの経験がなくても手軽にデザインを作成でき
グラフィックデザイナーにとって、6万円近くする CorelDraw Suite を購入することは、最適な自分への投資と言えないかもしれません。また、Adobe製品の
これまでは絵やマンガを描くには、ペンと紙を使うということが当たり前でしたが、今ではパソコンを使って、手描きと変わらないレベルのイラストを制作することができるようにな

 

 

プロトタイプ、アイコンツール

Animockup

完成したUIデザインやビデオ動画をアップロードするだけで、スマホやノートパソコンなどのガジェットをつかった、アニメーション付きモックアップを手軽に作成できるツール。

 

 

 

Outline to Single Stroke

塗りつぶされたベクターをFigmaキャンバス上から選ぶだけで、ストローク線のみに変換してくれるツール。ラインの太さも自由にカスタマイズ可能。

 

 

 

Sizze – Figma to React Native

Figmaで作成したプロトタイプデザインを、React Nativeに瞬時にエクスポートできる拡張プラグイン。

 

Figmaは、ブラウザ上から利用できるデザインアプリですが、特にチームでの共同デザインプロジェクトに最適なツールと言えます。 さらに、「こんな機能があ

 

 

Bootstrap Icons

これまでFont Awesomeアイコンを使用していた人気CSSフレームワークBootstrapが、ついに公式アイコンライブラリを公開。1500種類を超えるアイテムが揃い、SVGやSVGスプライト、Webフォントとして利用できます。

 

この記事では、ウェブサイトのUIデザインに便利な、無料の人気SVGアイコンライブラリをまとめて紹介しています。 豊富な収録数に加え、サイズや配色などの

 

 

3D Icons

1400以上の3Dアイコンを揃えた無料素材集で、PNGファイルの他、Figmaファイル、3DソフトBlenderと互換性のある.fbxファイル形式が用意されています。

 

メタバース(ネット上の仮想世界)の話題で、3Dグラフィックへの注目が高まっているのかもしれません。 1400以上の3Dアイコンを揃えた無料素材集3D

 

 

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

Microsoft Loop

SlackとNotionとプロトタイプツールを合体させたような、新しいパワフルで柔軟なキャンバスをもったコラボレーションツール。Micrsoft謹製です。

 

 

 

Kosy

リモートワークでつながる同僚との生産性をアップするだけでなく、コミュニケーションも楽しくすることを目的としたコラボツール。矢印キーで椅子に着席できるなど、ゲーム性とリアル性も同時に表現。

 

 

 

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

The 2021 State of Digital Nomads

ウェブデザイナーなどデジタルノマドの実態を調査した特集ページ。32歳前後のアメリカ出身の独身の白人男性が多く、東京に行きたいひとがたくさん。

 

 

 

CodePNG

自分のコードをペーストし、背景グラデーションを選択すれば、美しい画像ファイルに変換してくれるオンラインツール。SNSなどへの投稿にも便利。

 

 

 

Coding Font

画面の左右に表示されたフォントから、自分が好きな方を選択していくと、あなたにもっとも合ったコーディング用フォントを決定することができます。JetBrains Mono、おすすめです。

 

 

 

CowTransfer

無料ユーザーはスピード制限なしで、10GBのクラウドストレージが利用でき、20分までの動画をプレビューできる大型ファイル転送サービス。

 

 

 

Flatmap

地理空間データをベクタータイルに変換し、データの変化と共にマップを変化させることができます。大気汚染のリアルタイムでの警報など、さまざまな使いみちに。

 

 

 

Cleanup.pictures

操作はいたってシンプル。写真の不要な部分をブラシでなぞるだけで、あらゆるものを消去し、違和感なく背景を再描画してくれます。

 

「せっかく良い写真が撮れたのに、背景に不要なものや人が写り込んでしまった。」「シャツにケチャップのしみがついている」「写真にうつった文字を変更したい。」

 

 

Erase BG

写真をアップロードするだけで、自動で背景を透明にしてくれるオンラインツール。ユーザー登録不要で、画像サイズは5,000×5,000pxまで、特に枚数制限などは設けてないよう。Webpファイルにも対応しています。

 

スマホのカメラで身の回りにあるオブジェクトを素早く切り抜き、Photoshopなどのデスクトップアプリに直接配置できる、新しいアプリClipDropが登場しました。

 

 

Shhh Noise

波の音や雨の音、タイピングオンなどをミックス、マッチさせ、仕事に集中したり、リラックできる最適な環境づくりをお手伝いするオンライアプリ。

 

作業に集中したいけど、なかなかできない。誰もが一度はそんな経験があるのではないでしょうか。完全な無音よりも、図書館やカフェなど程よく騒がしい位のほうが集中できたりし

 

 

前回のオンラインツールまとめはこちらからどうぞ。

ホームページやウェブサイトを制作するなかで、「この作業は苦手」「いつも〇〇でつまづく」など日々格闘しているひとも多いでしょう。 この記事では、そんな面