無料で使える便利ツール

Web制作

2021.05.06 2021.03.08

difff《ﾃﾞｭﾌﾌ》

2つのコードを比較して、その違いを抽出してくれるツール

ファビコン（favicon）とは？作成方法と設定方法について｜Webマーケティング・SEO相談はデジ研

ファビコン（favicon）とは、Webブラウザで新規タブを開いたときにタブに表示される画像またはWebページをブックマークした際に表示される画像などをいいます。今回はファビコン（favicon）の概要や表示される場所・作成方法・作成ツール・設定の方法などを解説します。

登録やダウンロードの必要がないので、すくに使用できる。

Transform between CSS, JS Objects and JSX props.

CSS→JavaScript用にコードを自動変換してくれるツール。

パーツ別デザイン・アニメーションのコード集

パーツ別デザイン・アニメーションコード集マー君Webサイトを作成していて、デザインが思いつかないことがあるんだ・・・ブッ君確かにアイデアを出すのはなかなか大変だよね。そんな時に役立つブックマークを集めたよ！見出しデザイン...

デザインやアニメーションのパーツ作成を行うツールはコチラをチェック！！

目次

LPO
画像関連の無料ツール
配色関連の無料ツール
1. グラデーション
ムービー系ツール
コーディングに役立つツール

LPO

ヒートマップ解析ツール User Heat

ヒートマップ解析ツール開発企業のユーザーローカルが提供する、無料ツール。アイトラッキングを疑似体験。

無料で使えるヒートマップツール。

画像関連の無料ツール

Online Image Vectorizer

Online raster to vector converter. Convert your images (jpeg, jpg or png) into scalable and clear vector art (svg)

jpgやpng画像をアップロードするだけでsvg画像に変換するツール

SVG Artista - SVG Drawing Animation Generator

SVG Artista is a free tool that helps you easily create amazing SVG drawing animations by animating stroke and fill properties of your SVG graphics.

SVGやSVGコードをアップロードすると、オンライン上で、CSSのプロパティを設定しながら実際のアニメーションを確認できるジェネレーター

配色関連の無料ツール

https://duo.alexpate.uk/

2色の配色の組み合わせを100種類以上そろえた、コレクションページ。

Parametric Color Mixer

A color palette composer inspired by audio parametric equalizers. Create beautiful color palettes with a scientific precision.

NIPPON COLORS - 日本の伝統色

The Traditional Colors of Nippon (Japan). This site is optimized to Webkit.

和風のデザインを行いたいときに役立つ配色ツール。

Palette List - Color Palette Generator - 10,000+ Palettes

Palette List is a dynamic palette generator

2つの色を選ぶと、自動で配色の組み合わせを抽出してくれる。

Colormind - the AI powered color palette generator

Generate color combinations in one click. Colormind creates cohesive color schemes using a deep neural net.

ボタン一つで自動で配色の組み合わせを作成してくれる。

グラデーション

Free Gradients Collection by itmeo.com

Free collection of 180 background gradients that you can use as content backdrops in any part of your website.

グラデーションツール。コードもコピペで使用可。

CSS Color Gradient Generator：無料の美しいグラデーション

無料のCSSカラーグラデーションジェネレーター。ウェブサイトのグラデーション背景やUI要素に最適で、使いやすいです。

Gradient Hunt - Beautiful Color Gradients

Thousands of trendy color gradients in a curated collection that is updated daily. Get a fresh color gradient for your next design project and save all the grad...

ムービー系ツール

Remove Video Background – Unscreen

Remove the background of any video - 100% automatically, online & free! Goodbye Greenscreen. Hello Unscreen.

コーディングに役立つツール

Online StyleSheet Generator | OneClickCSS

OneClickCSSはHTMLコードを元に、様々なStyleSheetを自動生成するサービスです。子孫セレクタ、小セレクタ、Less、Sacc、Scssを１クリックで自動生成します。

HTMLをもとにCSSを作成してくれる。作業時間の短縮に役立ちます。CSSだけでなく、SassやLess、Scssにも対応！！！

Css2Sass | Convert CSS Snippets to Syntactically Awesome StyleSheets code

Css2Sass | Convert CSS Snippets to Syntactically Awesome StyleSheets code

CSSをSassやScssに変換してくれるオンラインツール。

SassMeister | The Sass Playground!

SassMeister is a playground for Sass. Add some Sass and SassMeister will show you the rendered CSS.

SassをCSSに変換してくれるオンラインツール。

scss形式をcssに(scss2css) - まごのてツールズ

scss形式をCSSにリアルタイム変換します。scssの制限はありません。

ScssをCSSに変換してくれるオンラインツール。

ノンプログラマーのためのjQuery生成ツール

ノンプログラマーのためのjQuery生成ツールです。

jQueryの知識が不十分でも、条件指定を行うだけでjQueryコードを作成してくれる！！

コメント

タイトルとURLをコピーしました