Edited at

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

More than 1 year has passed since last update.


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

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