猫の手も借りたい、クリエイターのマツコです。
今回は、Web制作のスピードアップにつながるような、便利ツールやサイトをご紹介します。
コーディング系
ProCSSor – Advanced CSS Prettifier
http://tools.maxcdn.com/procssor/長くなりがちなCSSのコードを整形、最適化してくれるツールです。不要な改行や不揃いなインデントや記述などもすっきりさせてくれます。忙しくてコードが乱れちゃった！って時に整形すると、メンテナンス性も高まります。
.htaccess Editor
http://www.htaccesseditor.com/Webサイトで必要な「.htaccess」での設定を網羅しています。「.htaccess」の設定を考えると鳥肌が立つ人に優しいです。記述を忘れてしまった時にもオススメです。
※ファイル一覧の拒否、ベーシック認証、エラーページ、デフォルトページ、WWW あり・なし統一、リダイレクト、アクセス制限、モバイルアクセス制限に対応
CSS3 GENERATOR
http://www.css3.me/角丸、ボックスシャドウ、グラデーション、透明度を指定したCSSを自動生成してくれます。スライダーバーを動かして視覚で確認・調整しながらできるので、仕上がりを想像しやすいです。
CSS3系のジェネレーターは色々ありますが、見た目のシンプルさやよく使う機能が対応しているので、一番使ってます。
CSS triangle generator
http://apps.eky.hk/css-triangle-generator/アイコンなどでよく使う、「三角」をCSSだけで作成するジェネレーターです。ボーダーのラインの書き方を利用して、三角を作ります。シンプルな三角であれば古いブラウザでも対応しているので、アイコン系では使う機会が増えてきました。
色の変更などが発生することってあるので、画像よりメンテナンスがしやすいかと思います。
CSS ARROW PLEASE!
http://www.cssarrowplease.com/「CSS triangle generator」の発展系？シンプルな三角付きの吹き出しを作成できるジェネレーターです。
☆お願い☆
便利ツールではありますが、生成されるCSSや仕組みを理解して使って頂きたいです。
CSSを全部手で書くと時間がかかるから、スピーディーに作りたい時や、あれ？どんなコード組めばいいんだっけって時に活用するのがよろしいかと。
独自のツールの場合、間違いや時流（ベンダープレフィックスの対応状況など）に追い付いていない可能性もあります。
完全に頼るのではなく、理解したうえで上手に付き合っていって下さいね。
[参考]ブラウザ毎のCSS/HTMLの実装状況
HTML5 & CSS3 Support
[参考]ベンダープレフィックス対応状況
Can I use… Support tables for HTML5, CSS3, etc
便利ツールではありますが、生成されるCSSや仕組みを理解して使って頂きたいです。
CSSを全部手で書くと時間がかかるから、スピーディーに作りたい時や、あれ？どんなコード組めばいいんだっけって時に活用するのがよろしいかと。
独自のツールの場合、間違いや時流（ベンダープレフィックスの対応状況など）に追い付いていない可能性もあります。
完全に頼るのではなく、理解したうえで上手に付き合っていって下さいね。
[参考]ブラウザ毎のCSS/HTMLの実装状況
HTML5 & CSS3 Support
[参考]ベンダープレフィックス対応状況
Can I use… Support tables for HTML5, CSS3, etc
画像系
CSS Sprite Generator
http://www.ja.spritegen.website-performance.org/Web上でスプライト画像と、表示用のCSSも生成してくれます。
すでに個別に画像があって1つにしたい時に、わざわざPhotoshopなどを立ち上げなくても良いので便利です。
OGP画像シミュレータ
http://ogimage.tsmallfield.com/イマイチ分かりにくい、OGP画像の掲載イメージが確認できます。
ときどき起こる、サイズ仕様変更には対応しているのか分からないので、OGPの仕様は常にチェックしましょう。
Optimizilla
http://optimizilla.com/ja/オンライン画像圧縮ツール。画像の見た目は保持したまま、ファイルサイズを圧縮してくれます。一度に最大20個までファイルをアップロードできて、before / afterを比較しながら微調整も可能です。
特にスマホサイトは軽量化が課題になります。サイト公開前のひと手間如何でしょうか。
※JPEG、PNGに対応
Bulk Resize Photos
http://bulkresizephotos.com/写真を一括でリサイズできるWebサービスです。
デザイン系
0to255
http://www.0to255.com/色の濃淡が一覧になっています。
ピックアップした色の同系色が分かるので、グラデーションやリンクのホバーカラーを検討する場合などに参考になります。
Photo Editor | BeFunky: Free Online Photo Editing and Collage Maker
https://www.befunky.com/ Photoshopが無くても、ある程度美しい画像加工が可能です。ディレクターがイメージを伝えたいときや、簡単な修正が必要ときなどにも使えそうですね。計算系
RQRWD
http://rqrwd.com/レスポンシブWebデザインをするときなど、pxで指定したサイズを%の値に変換する場合に役立つWebツールです。
PXtoEM
http://pxtoem.com/フォントサイズのpx、em、pt、%の相互変換を行ってくれるツールです。
ベースとなるフォントの大きさを15pxとしたら、13pxサイズにするには何%を指定すれば良いかなって時に確認したりします。
その他
QR Code Generator – Erstellen Sie hier kostenlos QR Codes
http://ja.qr-code-generator.com/QRコードを生成ジェネレーターです。
URL用やEmailアドレス用など、様々な用途のQRコードを作成出来ます。長いURLをスマホ表示させたいけど、入力が面倒！という時に使うこともあります。
まとめ
私がコーディング業務が多いのでラインナップがコーディング系に偏りがちでしたが、アイコンやパターン作成など、世の中にはびっくりするほど沢山のジェネレーターやツールがあります。しかもありがたいことに、無料のものが多いです。自分にあったジェネレーターやツールをブックマークしておくと、作業効率がアップします。上手に使って、空いた時間をスキルアップやリフレッシュにあてましょう！
