Advertisement

 

日頃の忙しい業務を少しでも楽にしたい、効率化したいと考えている人にぴったりな、Web制作で使える最新オンラインツールをまとめてご紹介します。

 

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

 

カテゴリごとに整理しているので、制作フローに新しく追加してみてはいかがでしょう。

 


コンテンツ目次

 

 

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

Web制作便利ツール

クリックで一発コピペできる、120種類以上のCSSボタンを集めたライブラリ。3Dやグラデーション、レトロなどさまざまなスタイルが収録されています。

 

 

 

CSS Buttons App

50種類のボタンスタイルが揃い、こちらもクリックひとつでCSSをコピーできます。

 

この記事では、ウェブサイトを訪れたひとが思わず押したくなるボタンデザインをまとめてご紹介します。どのボタンをHTMLとCSSのみで作成されているので、手軽にコピペで利用でき

 

 

Blobbb Fun

オーガニックでナチュラルな見た目のBlob図形シェイプを作成、カスタマイズできるオンラインツール。グラデーションカラーやパターンを利用したり、お好みのシェイプを変更できます。

 

 

 

Filter CSS

美しいCSS Filterプロパティを集めたライブラリで、気に入ったフィルタはクリックでCSSをコピペできます。

 

 

 

SVG Shape Divider

ユニークな形のSVGシェイプ・ディバイダーを作成できるオンラインツール。ウェブサイトのコンテンツをより魅力的にできる、便利な美しいスタイルが素敵。

 

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

 

 

Ready UI

サンプルコードをコピペしていくだけで、思い通りのウェブデザインに仕上げることができる制作時短アイテム。200以上のUIコンポーネント、ブロックが用意されているので、あとは好きなデザインを選ぶだけ。

 

 

 

Teleport

コーディングの知識が不要で、より素早くウェブサイトを制作できるノーコードツール。

 

 

 

Houdini How

ブラウザのAPIの総称で、Web開発プロセスやCSS標準の開発全般に、大きな改善をもたらすことを目的としたCSS Houdini。利用できるサンプルコードをめとめたミニライブラリ。

 

 

 

Knights of the Flexbox Table

ゲームを通して実際にコードを記述しながら、CSS Flexboxを学ぶことができます。

 

この記事では、CSS FlexboxとGridをつかってお好みのレイアウトを作成するコツやポイントをまとめた使い方ガイドやチートシート、ゲームなどをまとめて紹介して

 

 

Card Generator

BootstrapとMaterial Deisgnでできた、カード型レイアウトを作成できるツールで、完成したHTMLコードのコピペもワンクリック。現在20種類以上のカード型テンプレートがあらかじめ用意されています。

 

 

 

Pretty Maps

Googleマップをお好みの色にカスタマイズできるPythonライブラリ。

 

 

 

Responsivize

一度に複数のデバイスでのサイト表示状態を確認、テストできるデスクトップ用アプリ。

 

 

 

Shaper

各UIデザイン要素に適用しているスタイルをリアルタイムで確認しながら調整できるオンラインツールです。フォントサイズや余白スペース、配色の変更なども可能。右上にある「Randomize」ボタンでいろいろ試してみましょう。

 

 

 

Doppler

各スクリーンサイズに応じたフォントの見え方をまとめて確認、調整できるオンラインツール。調整したCSSはそのままダウンロードできます。

 

 

 

Tailwind Mobile

Tailwindで構築されたモバイル向けUIコンポーネント。iOSとMaterial Designのコンポーネントが収録されています。

 

 

 

Text Pop 3D

文字テキストにカーソルを合わせると、立体的に飛び出すホバーエフェクトを作成できるツール。飛び出す向きや配色、サイズも自由にカスタマイズできます。

 

 

 

UI Deck

デザイン性の高いランディングページ用HTMLファイルを丸ごと無料ダウンロードできます。Bootstrapや話題のTailwindフレームワークを利用しているので、柔軟なカスタマイズが可能。

 

 

 

Windows 7.css

Windows 7のUIインターフェースを完全再現したCSSフレームワーク。XP98もありますよ。

 

 

 

Yofte

TailwindフレームワークでデザインされたUIブロックを組み合わせ、自分だけのショッピングサイトを作成できるUIキット。TRY DEMOで実際にツールを利用できます。

 

 

 

配色ツール

Animated Gradient Background Generator

アニメーションで変化する背景用のグラデーションを作成できるオンラインツール。グラデーションの色や角度、アニメーション速度も細かく調整できます。アイデアが浮かばないときは、「Random」ボタンをクリック。

 

 

 

Couleur.io

統一感のある配色カラーパレットを作成するのに役立つシンプルなツール。お好みの色を選ぶだけのお手軽さ。

 

 

 

Mobile Palette Generator

メインカラーを決めるだけで、セカンダリーカラーやアクセントカラーを自動で提案してくれる配色カラーパレット生成ツール。

 

 

 

Night Palette

ダークモード向けの配色カラーパレットのみを集めた、ニッチですが需要のありそうな配色サービス。

 

 

 

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

自分だけのブランドキットをオンライン上で手軽に作成できる新しいツール。ロゴを決めるだけで、ブランディングに必要なあらゆるアセットを自動生成してくれます。

 

 

 

PixelSquid

超立体的な3Dオブジェクトを手軽にデザインに取り入れることができる、フォトショップ用プラグイン。無料版はウォーターマーク表示付きですが、きっときのツールの凄さが分かるでしょう。

 

 

 

Smart Ads

より手軽に、よりスマートに広告バナーを作成できるデザインツール。テンプレートも充実しており、文字や写真の配置もドラッグのみで簡単。デザインをDIYしたいというひとへ。

 

 

 

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

Boxicons

シンプルで使い勝手の良いベクターアイコン1500個以上を無料配布しています。細かくカテゴリ分けされており、アイコンをクリックすればダウンロード、編集できます。

 

 

 

Flagpack

250を超える世界中の国旗を集めたアイコンライブラリ。FigmaとSketchファイルでダウンロードでき、ReactやVue.js、Svelte向けCLIも無料公開中です。

 

 

 

Scrolling Mockup

縦に長いランディングページなどを、スクロールアニメーション付きのモックアップにしてくれる新サービス。

 

 

 

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

Pop.com

タイムラグのない画面共有や複数人でツールの操作など、リモートワークに便利なサービス。

 

 

 

Mapus

自分だけの旅行スケジュールや日程などを組むことができるGoogleマイマップに、コラボレーション機能を追加し、複数人で地図の編集を行うことができます。

 

 

 

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

Paper Trader

架空取引で株式トレーニングができるミニゲーム。

 

 

 

Alda

アルファベットを入力するだけで音符を表示させ、楽譜をデザインできるテキストベースの作曲用プログラミング言語です。テキストエディタとコマンドラインだけで、音楽の作成と再生が可能です。

 

 

 

Burning Man Experience

世界最大の奇祭と呼ばれる「バーニングマン」をオンラインで体験できるアプリ。期間は過ぎてしまいましたが、イベント会場は歩き回ることができますよ。

 

 

 

みを

江戸時代のくずし字をAIにより認識し、わたしたちが使っている現代の書体に変換できるアプリ。

 

 

 

NFTPort Beta

どんな作品でもNFTアートとして販売することができる、デベロッパー向けのNFTインフラとAPIを提供。より手軽にNFTアートに参入できるようになります。

 

 

 

Poet.so

お好みのTwitter投稿のスクリーンショットを撮影、加工、ダウンロードまで一括でできるオンラインツール。。URLを入力するだけの手軽さが便利です。

 

 

 

Valkyrie

3DやARなどのメディアを組み合わせ、インタラクティブなリアルタイムアプリをコード不要で作成できるプラットフォーム。

 

 

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