Help us understand the problem. What is going on with this article?

web制作が捗りそうな便利なwebツール【随時更新】

概要

制作時にブクマしとけばいいのについ毎回検索しちゃうものや
ブックマークに埋もれて「あのサイト便利だったのになんて言うやつだっけ?」みたいなやつを防ぐ為に
自分及び社内用に作ったリンク集です。

ルール

会員登録やインストール無しで使える無料のwebツール等
※例外としてGoogleはログイン可能とします。

オンラインエディタ

コード共有

CodePen

HTML・CSS・JSをブラウザ上でサクッと試すのに便利。
右上の「New Pen」で無料で使える。
scssやless、coffee scriptやtype scriptに対応してたり外部cssや外部jsも読み込めて多機能

CodeSandbox

VanillaJS、React、Vue、Angularなどの環境がサクッと試せる。
Add Dependencyでnpmのパッケージを入れたり、Shareの方法も様々でテンプレートとしてのダウンロードもでき、Githubと連携したらレポジトリを作成したりpushしたりできちゃう。

Diff

ウェブでdiff

オンラインで差分チェックができる

ブラウザツール

ブラウザバージョンによる対応状況のチェック

caniuse.com

cssとかのプロパティでどのブラウザに対応してるかチェックできるやつ

iwanttouse.com

↑それによって実際に影響があるユーザ数の割合が見れる

テストツール

ブラウザテスト

Browserling

クロスブラウザのオンラインチェック

レスポンシブチェック

Screenfly / レスポンシブチェック

レスポンシブのオンランチェック

閲覧環境チェック

Support Details

アクセスしたPCやブラウザのバージョンとかスクリーンサイズやその時のブラウザのサイズを取得してくれる
例えばクライアントの環境情報が欲しい時にリンクを送ってそのままメールしてもらったり

HTMLツール

整形

HTML整形ツール(プチ・デバッグ機能付き)

HTMLを見やすく整形してくれて、不完全なタグが見つかると、対象タグの一覧を表示するプチデバッグ機能付き

ジェネレーター

HTML Imagemap Generator

クリッカブルマップ(イメージマップ)が視覚的に作成できる

その他

HTML特殊文字

特殊文字の文字コード

Graphemica - For people who ♥ letters, numbers, punctuation, &c

文字コードの詳細情報が検索できる。
特殊な文字をwebで表示したい時に文字ごとコピーしてここで検索する → HTML Entity (Decimal)に書いてあるコードを入れる。

カラーコード変換ツール

ヘックスとかRGBとか調べる時に便利

PALX Automatic UI Color Palette Generator

ベースカラーを入れたらいい感じにカラーパレットを生成してくれる

CSS

整形

css2sass

CSSからSCSSにコンバートしたりできる

styleneat

minifyされたCSSを整形してくれる

オンラインで作れるCSSパーツ

flexplorer

Flexbox Playground

話題のFlexboxをオンラインで試してコードをとってこれるやつ

Ultimate CSS Gradient Generator

グラデーションのジェネレーター。画像をアップロードしてコード取得も可能。

box-shadowとborder-radiusジェネレーター

box-shadowやborder-radiusを視覚的にテストしながらコード生成できる
React Nativeでのコードも生成

CSS STRIPE GENERATOR

コメ欄で教えていただきました。オンラインでストライプの背景のコードを生成してくれる。
視覚的に操作できてカスタマイズの自由度がかなり高い
SVG版もあるのが嬉しいSVG STRIPE GENERATOR

その他

Sass Color Generator

sassで明るさや彩度を調整して色を出す時に%などを確認する

Autoprefixer CSS online

ベンダープレフィックス生成

JavaScript

整形

Online JavaScript beautifier

minifyされたjsを見やすく整形

チェッカー

正規表現チェッカー

苦手な人が多いと言うあの正規表現をオンラインでチェックで動作チェックできる

regex101

コメ欄で教えていただきました。正規表現チェック。リファレンスも多くUIも見やすい

変換

Unixtime相互変換ツール

指定日時をunixtimeに相互変換してくれる。日時をあつかうjsを書く時のデバッグや確認に便利。

画像

圧縮

TinyPNG

画像圧縮。jpegも対応

Squoosh

Google製。画像圧縮、エンコード、リサイズ、減色がブラウザ上でできる。jpegやWebPも対応。

比率計算

写真の縦横比を固定して拡大縮小値を計算するツール

元画像の縦横比をオンラインで計算してくれる。PhotoShop立ち上げるの重いけど数値だけ欲しい場合に便利

web計。

縦横比とか黄金比とか横幅に対する画像数とか算出してくれる

リサイズ

Bulk Resize Photos

ドラッグでサイズや%指定で画像をリサイズしてくれる。pngで試したらjpgで返ってきたので対応はjpgのみっぽい

ジェネレーター、テスト

favicon.cc

半透過マルチアイコンfavicon.icoを作ろう!

画像をアップロードしたりしてfavicon作ってくれる

Web Clip シミュレータ

iPhoneとかのWeb Clipのシミュレータ

OGP画像シミュレータ

OGP画像のシミュレータ

Open Graphオブジェクトデバッガー

FacebookでOGP画像のキャッシュをクリア

Twitter Card validator

Twitter公式の簡易OGPのデバッグ・スクレイピング

Landscape by Sprout Social

画像をアップロードするとtwitterやFacebook、インスタ、youtubeなどのSNSに最適なリサイズをしてくれる

Placehold.jp

ダミー画像生成

Spritebox

スプライト画像を生成してくれる

変換

SVG to PNG Converter

SVG画像をサイズを指定してpngに変換してくれる

PNGをJPG、JPGをPNGに変換

その名の通り PNGとJPGのコンバーター。複数の画像をいっぺんに変換してくれる

Convert image files online

クライアントからheicファイル(iPhoneで撮った撮影ファイル)が送られてきた時に変換できて助かったやつ。
対応ファイルがとても多い

repper

任意の画像を好きなところを切り取ってシームレス画像に変換してくれる。

動画

変換

ファイルコンバーター — Convertio

ogvやwebmが必要な時にmp4から変換してくれる

HTML5 Video Converter

ogvやwebmが必要な時にmp4から変換してくれる (有料になった?)

フォント

Google Fonts

webfont

fontawesome

fontawesome

[ JavaScript ] フォントサイズ変換(pt↔px)

ptとpxの変換

開発支援

PWA

PWABuilder

PWAの開発支援サービス。urlを入力するとどのくらいPWA対応されてるかのチェックをしたり、manifest.jsonやService Workerのコード生成、実装スニペットやパッケージング用コードも生成してくれる

JSON

整形

JSON Pretty Linter Ver3

jsonを見やすく整形

構文チェック

JSON Formatter & Validator

jsonの構文チェックしてくれる。エラー箇所に赤くマークが付くので長いjsonでもエラー箇所が見つけやすい

SQL

整形

SQLフォーマッターFor WEB

SQLを見やすく整形。
NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULLみたいな長いデータを扱っていて項目がわからなくなった際、
整形してSequel ProやphpMyAdminを並べて項目を見比べて特定しやすい。

テーブル

Table Convert Online

コメ欄で教えていただきました。オンラインで視覚的なテーブルからcsv,Markdown,json,html,yaml,sql等様々な形式にコード変換ができ、テーブルの構造自体も編集可能。

コミュニケーションツール

appear.in → Whereby

会員登録もアプリインストールもいらないリンクを押すだけで参加できるビデオ会話ツール
遠隔でmtgとかする時にすごく便利。
→Wherebyへ名称と仕様が変更して会員登録必須で制限付きになってました

BizMee - WebRTC 無料Web会議サービス

appear.inと同じようにWebRTCなweb会議ツールです。ホワイトボード等の機能あり。

パフォーマンスツール

表示速度チェックと改善ヒント

PageSpeed Insights

Page speed optimization

GTmetrix

Website speed test

サイトの表示速度をチェックして改善ヒントを教えてくれます。

PERFORMANCE BUDGET CALCULATOR

回線と何秒で表示させたいかを指定すると逆算してファイルサイズを計算してくれる

Test My Site 日本語版

モバイルサイトの読み込み速度計測及び業種別平均速度との比較と改善ヒント

調査ツール

built with

urlを入力するとそのサイトが何を使ってるか(Apacheサーバーだとかjsのモジュールは何かとか)教えてくれる

SEO関連

Google Webmasters Search Console

サーチコンソール

Keyword Tool

関連キーワード取得ツール(仮名・β版)

関連キーワードとるやつ

専門用語(キーワード)自動抽出サービス 「言選Web」

urlでサイト全体、または入力した文章からキーワードを抽出してくれる。Metaキーワード選定の参考に。

Googleトレンド

トレンド状況とか関連キーワードとか

Varvy SEO tool

GoogleのガイドラインからSEOに影響あるとかの内部診断ツール

Mobile SEO

↑上のスマホ版

SEOチェキ!

サイトSEOチェック

その他

プログラマーのためのネーミング辞書 | codic

cssのclass名とか変数名とか迷った時に生成してくれる

サイトマップを作成-自動生成ツール「sitemap.xml Editor」

サイトマップを自動生成

.htaccess ファイルを簡単作成「.htaccess Editor」

.htaccessを自動生成、htpasswd用のパスの生成などの機能もある

Make My Persona

ペルソナ作成ツール(英語)

参考にしたやつ

こちらに触発されてフロントエンドやコーダー、マークアップエンジニアや個人制作の方に便利なまとめを作りたくなったのです。
2017年のフロントエンドエンジニアならこの程度は知ってて当然だよな?

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした