LoginSignup
654

More than 5 years have passed since last update.

Web制作するならブックマークしておきたいサイト色々

Last updated at Posted at 2016-10-21

制作効率化のためにツールを活用しよう

この記事では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種類のツールがあります。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
654