#制作効率化のためにツールを活用しよう
この記事ではWeb制作に焦点を絞り、普段からよく使っている（全然使ってないのもありますが／(^o^)＼）
オンラインツール・サイト・ブックマークレットを紹介していきます。
上手く活用すれば制作効率化に繋がりますので、ぜひ参考にしてみてください。
ぶっちゃけ最近だと画像最適化・minify・スプライト画像・アイコンフォント生成あたりは
タスクランナー使ったほうが手っ取り早いですが、一応紹介しています。
##OS、デバイス、解像度のシェア
StatCounter Global Stats
http://gs.statcounter.com/
言わずと知れたStatCounter。Desktop/Tablet/Mobileなどデバイスごとに、
ブラウザや解像度のシェアをグラフで表示できる。
Dashboards | Android Developers
https://developer.android.com/about/dashboards/index.html
Android公式。
App Store - サポート - Apple Developer
https://developer.apple.com/support/app-store/jp/
Apple公式。
OS一覧（Android） | スペック検索とシェア率が役立つ国内スマホ・タブレット機種情報サイト
http://smatabinfo.jp/os/android/index.html
国内のOSシェアを簡単に確認出来る。
Device Metrics - Google Design
https://design.google.com/devices/
Google Designのツール。項目ごとにソート出来るので見やすい。
##バリデーション
The W3C Markup Validation Service
https://validator.w3.org/
言わずと知れたW3CのValidator。
HTML 5 Outliner
https://gsnedders.html5.org/outliner/
HTML5でアウトラインの状態（適切にセクショニングされているか）を確認できる。
##画像最適化など
Compressor.io - optimize and compress your images and photos
https://compressor.io/compress
画像最適化ツール。JPEG/PNG/GIF/SVGに対応し、非可逆と可逆圧縮を選択できる。
TinyPNG – Compress PNG images while preserving transparency
https://tinypng.com/
結構前からある画像最適化ツール。JPEG/PNGに対応。
SVGOMG - SVGO's Missing GUI
https://jakearchibald.github.io/svgomg/
SVGの最適化に特化している。細かくオプション選択で切り替えられる。
Favicon Generator for all platforms: iOS, Android, PC/Mac...
http://realfavicongenerator.net/
Favicon生成。apple touch iconも一緒に生成してくれる。
##CSS関連
Can I use... Support tables for HTML5, CSS3, etc
http://caniuse.com/
言わずと知れたCan I use。
HTMLやCSSプロパティがどの程度ブラウザ対応しているか確認できる。
CSS : Selector Counter
http://snippet.bevey.com/css/selectorCount.php
IE9以下では、1ファイル内にCSSセレクタ数が4096以上ある場合、
認識されなくなる問題があるのでチェックに役立つツール。
css2sass | Convert CSS Snippets to Syntactically Awesome StyleSheets code
http://css2sass.herokuapp.com/
CSSとsassを相互変換できるツール。
Sprite Cow - Generate CSS for sprite sheets
http://www.spritecow.com/
スプライト画像からCSSコードを生成。
PXtoEM.com: PX to EM conversion made simple.
http://pxtoem.com/
pxをemに変換できる。
##HTML関連
HTML Imagemap Generator
http://labs.d-s-b.jp/ImagemapGenerator/
イメージマップ用のコードを生成できる。自分はPhotoshopプラグインで作ることが多いです。
自動でテキストにHTMLルビを付加するエンジンです
http://elephant.ddo.jp/exruby/rubyexpress.html
ルビを振る振る。
##JavaScript関連
Minify - JavaScript and CSS minifier
http://www.minifier.org/
JavaScriptとCSSどっちもMinifyにできる。
jQuery google api and other google hosted javascript libraries. - ScriptSrc.net
http://scriptsrc.net/
ホスティングされているをJavaScriptをコピペできる。
が、全体的に内容が古いので以下公式サイトからのコピペを推奨。
https://developers.google.com/speed/libraries/
##デザイン関連
Gridpx：グリッドデザイン計算ツール | Webデザイン便利ツール
http://www.kenjisugimoto.com/gridpx/
グリッド生成。カラム幅の計算に便利。
Wirify – The web as wireframes
https://www.wirify.com/
Webサイトをワイヤフレームにするブックマークレット。
##その他
Icon Font & SVG Icon Sets ❍ IcoMoon
https://icomoon.io/
言わずと知れたアイコンフォント生成。
Responsive Design Bookmarklet
http://responsive.victorcoulon.fr/
レスポンシブを簡単にチェックできるブックマークレット。
プログラマーのためのネーミング辞書 | codic
https://codic.jp/
ネーミング辞書。
リアルタイムで変換できるのは便利だけど、単語数があまり充実してないので、
ディレクトリ名・ファイル名の翻訳やclassやidを振る目的として使うのはキツイかも。
（ベータのときから何度か様子見で使ってみましたが、毎回10分ぐらいで普段の翻訳サイトに戻ってました。）
一応ユーザー辞書を登録できるので、地道に登録していけば使えるかもしれない。
Sublime textのプラグインもあるようです。
Geocoding - 住所から緯度経度を検索
http://www.geocoding.jp/
Google map設定時に使える。
以前はここがかなり良かったんですが、なくなったぽい。(http://api.knecht.jp/geocoding/)
ページ一覧取得
http://tshinobu.com/lab/get-page-link/
その名の通りページ一覧を取得する。
Codogue - サッと使えるWebの小道具箱
http://codogue.com/
パスワード生成やData URI変換など7種類のツールがあります。
Web便利ツール@ツールタロウ
https://tool-taro.com/
各種エンコード・デコードやテキスト変換など約30種類のツールがあります。