Edited at

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年のフロントエンドエンジニアならこの程度は知ってて当然だよな?

  • 開発支援
  • JSON
  • SQL
  • テーブル
  • コミュニケーションツール
  • パフォーマンスツール
  • 調査ツール
  • SEO関連
  • その他
  • 参考にしたやつ