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

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

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

# オンラインエディタ
## コード共有
### [CodePen](http://codepen.io/)
HTML・CSS・JSをブラウザ上でサクッと試すのに便利。
右上の「New Pen」で無料で使える。
scssやless、coffee scriptやtype scriptに対応してたり外部cssや外部jsも読み込めて多機能

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

## Diff
### [ウェブでdiff](https://www.en-pc.jp/tech/diff.php)
オンラインで差分チェックができる

# ブラウザツール
## ブラウザバージョンによる対応状況のチェック
### [caniuse.com](http://caniuse.com/)
cssとかのプロパティでどのブラウザに対応してるかチェックできるやつ
### [iwanttouse.com](http://www.iwanttouse.com/)
↑それによって実際に影響があるユーザ数の割合が見れる
# テストツール
## ブラウザテスト
### [Browserling](https://www.browserling.com/)
クロスブラウザのオンラインチェック
## レスポンシブチェック
### [Screenfly /　レスポンシブチェック](http://quirktools.com/screenfly/)
レスポンシブのオンランチェック
## 閲覧環境チェック
### [Support Details](http://supportdetails.com/)
アクセスしたPCやブラウザのバージョンとかスクリーンサイズやその時のブラウザのサイズを取得してくれる
例えばクライアントの環境情報が欲しい時にリンクを送ってそのままメールしてもらったり

# HTMLツール
## 整形
### [ＨＴＭＬ整形ツール（プチ・デバッグ機能付き）](http://u670.com/pikamap/htmlseikei.php)
HTMLを見やすく整形してくれて、不完全なタグが見つかると、対象タグの一覧を表示するプチデバッグ機能付き
## ジェネレーター
### [HTML Imagemap Generator](https://labs.d-s-b.jp/ImagemapGenerator/)
クリッカブルマップ（イメージマップ）が視覚的に作成できる
## その他
### [HTML特殊文字](https://web-designer.cman.jp/special_string/)
特殊文字の文字コード
### [Graphemica - For people who ♥ letters, numbers, punctuation, &c](https://graphemica.com/)
文字コードの詳細情報が検索できる。
特殊な文字をwebで表示したい時に文字ごとコピーしてここで検索する →　HTML Entity (Decimal)に書いてあるコードを入れる。
### [カラーコード変換ツール](http://tech-unlimited.com/color.html)
ヘックスとかRGBとか調べる時に便利
### [PALX Automatic UI Color Palette Generator](https://palx.jxnblk.com/)
ベースカラーを入れたらいい感じにカラーパレットを生成してくれる




# CSS
## 整形
### [css2sass](http://css2sass.herokuapp.com/)
CSSからSCSSにコンバートしたりできる
### [styleneat](http://www.styleneat.com/index.php)
minifyされたCSSを整形してくれる
## オンラインで作れるCSSパーツ
### [flexplorer](http://bennettfeely.com/flexplorer/)
### [Flexbox Playground](https://scotch.io/demos/visual-guide-to-css3-flexbox-flexbox-playground)
話題のFlexboxをオンラインで試してコードをとってこれるやつ
### [Ultimate CSS Gradient Generator](http://www.colorzilla.com/gradient-editor/)
グラデーションのジェネレーター。画像をアップロードしてコード取得も可能。
### [box-shadowとborder-radiusジェネレーター](http://www.bad-company.jp/box-shadow/)
box-shadowやborder-radiusを視覚的にテストしながらコード生成できる
React Nativeでのコードも生成
### [CSS STRIPE GENERATOR](https://www.coffee-break-designs.com/labs/css_stripe_generator/)
コメ欄で教えていただきました。オンラインでストライプの背景のコードを生成してくれる。
視覚的に操作できてカスタマイズの自由度がかなり高い
SVG版もあるのが嬉しい[SVG STRIPE GENERATOR](https://www.coffee-break-designs.com/labs/svg_stripe_generator/)
## その他
### [Sass Color Generator](http://scg.ar-ch.org)
sassで明るさや彩度を調整して色を出す時に%などを確認する
### [Autoprefixer CSS online](https://autoprefixer.github.io)
ベンダープレフィックス生成

# JavaScript
## 整形
### [Online JavaScript beautifier](http://jsbeautifier.org/)
minifyされたjsを見やすく整形
## チェッカー
### [正規表現チェッカー](http://okumocchi.jp/php/re.php)
苦手な人が多いと言うあの正規表現をオンラインでチェックで動作チェックできる
### [regex101](https://regex101.com/)
コメ欄で教えていただきました。正規表現チェック。リファレンスも多くUIも見やすい
## 変換
### [Unixtime相互変換ツール](https://tool.konisimple.net/date/unixtime)
指定日時をunixtimeに相互変換してくれる。日時をあつかうjsを書く時のデバッグや確認に便利。

# 画像
## 圧縮
### [TinyPNG](https://tinypng.com/)
画像圧縮。jpegも対応
### [Squoosh](https://squoosh.app/)
Google製。画像圧縮、エンコード、リサイズ、減色がブラウザ上でできる。jpegやWebPも対応。

## 比率計算
### [写真の縦横比を固定して拡大縮小値を計算するツール](https://www.web-jozu.com/javascript/size.html)
元画像の縦横比をオンラインで計算してくれる。PhotoShop立ち上げるの重いけど数値だけ欲しい場合に便利
### [web計。](zeller-lab.com/img-width/)
縦横比とか黄金比とか横幅に対する画像数とか算出してくれる
## リサイズ
### [Bulk Resize Photos](https://bulkresizephotos.com/)
ドラッグでサイズや%指定で画像をリサイズしてくれる。pngで試したらjpgで返ってきたので対応はjpgのみっぽい
## ジェネレーター、テスト
### [favicon.cc](http://www.favicon.cc/)
### [半透過マルチアイコンfavicon.icoを作ろう!](https://ao-system.net/alphaicon/)
画像をアップロードしたりしてfavicon作ってくれる
### [Web Clip シミュレータ](http://webclip.xyz/)
iPhoneとかのWeb Clipのシミュレータ
### [OGP画像シミュレータ](http://ogimage.tsmallfield.com/)
OGP画像のシミュレータ
### [Open Graphオブジェクトデバッガー](https://developers.facebook.com/tools/debug/og/object/)
FacebookでOGP画像のキャッシュをクリア
### [Twitter　Card validator](https://cards-dev.twitter.com/validator)
Twitter公式の簡易OGPのデバッグ・スクレイピング

### [Landscape by Sprout Social](https://sproutsocial.com/landscape)
画像をアップロードするとtwitterやFacebook、インスタ、youtubeなどのSNSに最適なリサイズをしてくれる
### [Placehold.jp](https://placehold.jp/)
ダミー画像生成
### [Spritebox](http://www.spritebox.net/)
スプライト画像を生成してくれる
##変換
### [SVG to PNG Converter](http://devcice.com/util/SvgToPng/)
SVG画像をサイズを指定してpngに変換してくれる
### [PNGをJPG、JPGをPNGに変換](http://pngjpg.com/ja/)
その名の通り PNGとJPGのコンバーター。複数の画像をいっぺんに変換してくれる

### [Convert image files online](https://www.aconvert.com/image/heif-to-jpg/)
クライアントからheicファイル（iPhoneで撮った撮影ファイル）が送られてきた時に変換できて助かったやつ。
対応ファイルがとても多い

### [repper](http://repper.studioludens.com/repper.html)
任意の画像を好きなところを切り取ってシームレス画像に変換してくれる。
# 動画
## 変換
### [ファイルコンバーター — Convertio](https://convertio.co/ja/)
ogvやwebmが必要な時にmp4から変換してくれる
### [HTML5 Video Converter](http://converterpoint.com/)
ogvやwebmが必要な時にmp4から変換してくれる （有料になった？）

# フォント
### [Google Fonts](https://fonts.google.com/)
webfont
### [fontawesome](http://fontawesome.io/icons/)
fontawesome

### [[ JavaScript ] フォントサイズ変換（pt↔px）](http://spell.vincent.in/upload/pt-to-px-and-px-to-pt.php)
ptとpxの変換

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


# JSON
## 整形
### [JSON Pretty Linter Ver3](https://lab.syncer.jp/Tool/JSON-Viewer/)
jsonを見やすく整形
## 構文チェック
### [JSON Formatter & Validator](https://jsonformatter.curiousconcept.com/)
jsonの構文チェックしてくれる。エラー箇所に赤くマークが付くので長いjsonでもエラー箇所が見つけやすい
## ダミーデータ
### [{JSON} Placeholder](https://jsonplaceholder.typicode.com/)
テストとプロトタイピングのためのフェイク・オンラインREST API。userデータや投稿のデータなどが使用できる。
### [RANDOM USER GENERATOR](https://randomuser.me/)
顔写真付きのダミーのユーザーデータをランダムで返してくれる。サイト上でコナミコマンド打ったらLOGOになってかわいい。

# SQL
## 整形
### [SQLフォーマッターFor WEB](http://www-atl.blog.so-net.ne.jp/2015-02-08)
SQLを見やすく整形。
NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULLみたいな長いデータを扱っていて項目がわからなくなった際、
整形してSequel ProやphpMyAdminを並べて項目を見比べて特定しやすい。

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

# コミュニケーションツール
### [appear.in](https://appear.in/) →　[Whereby](https://whereby.com/)
~~会員登録もアプリインストールもいらないリンクを押すだけで参加できるビデオ会話ツール
遠隔でmtgとかする時にすごく便利。~~ →Wherebyへ名称と仕様が変更して会員登録必須で制限付きになってました

### [BizMee - WebRTC 無料Web会議サービス](https://bizmee.net/)
appear.inと同じようにWebRTCなweb会議ツールです。ホワイトボード等の機能あり。

# パフォーマンスツール
## 表示速度チェックと改善ヒント
### [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/)
### [Page speed optimization](https://varvy.com/pagespeed/)
### [GTmetrix](https://gtmetrix.com/)
### [Website speed test](https://tools.pingdom.com/)
サイトの表示速度をチェックして改善ヒントを教えてくれます。
### [PERFORMANCE BUDGET CALCULATOR](http://www.performancebudget.io/)
回線と何秒で表示させたいかを指定すると逆算してファイルサイズを計算してくれる
### [Test My Site 日本語版](https://testmysite.withgoogle.com/intl/ja-jp)
モバイルサイトの読み込み速度計測及び業種別平均速度との比較と改善ヒント

# 調査ツール
### [built with](http://builtwith.com/)
urlを入力するとそのサイトが何を使ってるか（Apacheサーバーだとかjsのモジュールは何かとか）教えてくれる

# SEO関連
### [Google Webmasters Search Console](https://www.google.com/webmasters/)
サーチコンソール
### [Keyword Tool](http://keywordtool.io/)
###[関連キーワード取得ツール（仮名・β版）](http://www.related-keywords.com/)
関連キーワードとるやつ
### [専門用語（キーワード）自動抽出サービス 「言選Web」](http://gensen.dl.itc.u-tokyo.ac.jp/gensenweb.html)
urlでサイト全体、または入力した文章からキーワードを抽出してくれる。Metaキーワード選定の参考に。
### [Googleトレンド](https://trends.google.co.jp/trends/)
トレンド状況とか関連キーワードとか
### [Varvy SEO tool](https://varvy.com/tools/)
GoogleのガイドラインからSEOに影響あるとかの内部診断ツール
### [Mobile SEO](https://varvy.com/mobile/)
↑上のスマホ版
###[SEOチェキ!](http://seocheki.net/)
サイトSEOチェック

# その他
### [プログラマーのためのネーミング辞書 | codic](https://codic.jp/)
cssのclass名とか変数名とか迷った時に生成してくれる
### [サイトマップを作成-自動生成ツール「sitemap.xml Editor」](http://www.sitemapxml.jp/)
サイトマップを自動生成
### [.htaccess ファイルを簡単作成「.htaccess Editor」](http://www.htaccesseditor.com/)
.htaccessを自動生成、htpasswd用のパスの生成などの機能もある
### [Make My Persona](https://www.hubspot.com/make-my-persona)
ペルソナ作成ツール（英語）


# 参考にしたやつ
こちらに触発されてフロントエンドやコーダー、マークアップエンジニアや個人制作の方に便利なまとめを作りたくなったのです。
[2017年のフロントエンドエンジニアならこの程度は知ってて当然だよな？](http://qiita.com/rana_kualu/items/cad8dbbe5f5a1f1b3ba1)