まずは鉄板！コピペプログラマにはhtaccessは敷居が高いのです・・・
.htaccess ファイルを簡単作成「.htaccess Editor」
ローディングgif作成
Loader Generator – Ajax loader
Ajaxload – Ajax loading gif generator
WordPress 一から書くのがめんどくさいやつ作成
GenerateWP » User friendly tools for WordPress developers
loopを作ったり、functions.phpなどよく書くようなコードを簡単に作成できるのでかなり重宝します。
JqueryやMootoolsなどのホスティングURL確認
Google Hosted Libraries – Developer’s Guide – Make the Web Faster — Google Developers
基本的にはローカルに置く派ですがちょっとしたページはホスティングされているところから呼び出すことがあるのですが、毎回ググってるのでこれは便利。
Facebook関係
Facebookデバッガー
単純なデバッグ以外にもFacebookにキャッシュされたデータもクリアできるのでおすすめ。
ボタンジェネレーター
Likeもシェアも作れる！
OGP画像シミュレータ | og:image Simulator
コロコロ使用の変わるOGP画像ですが、ここでFB上でどう表示されるかチェックできます。
ダミーテキストやダミー画像の作成
CMSでも構築やHTMLでモック作成なんかしてるとダミーテキストやダミー画像は本当によく使うので、コーダーは覚えておいて損はありません。
ダミーテキストジェネレータ | Web制作小物ツール – dounokouno.com
すぐ使えるダミーテキスト – 日本語 Lorem ipsum
文字列ジェネレーター – LAZE SOFTWARE
こちらもサイトはとても高機能で助かってます！！
Dynamic Dummy Image Generator – DummyImage.com
個人的使用率No.1。特にクライアントから指定がなければ、CMSでサイト構築するときに欠かなせない「No image」や「Now Printing」とかはここで作ってます。
lorempixel – placeholder images for every case
たぶんすごく有名・・・らしい
Placehold.jp｜ダミー画像生成 モック用画像作成
PlaceIMG | Easy FPO and Dummy Images for Any Project
HTMLからセレクタを自動で作ってくれるやつ。
extractCSS – Online CSS Extractor
OneClickCSS
非デザイナーの味方！色に関するツールいろいろ
CSS Gradient Generator | CSS3 Factory
Paletta – HSV Color palette for every Programmer
色調の近い色を自動で作ってくれるので、これをもとにカラースキームを作ればおかしな色使いになることはありません。ぼくはよく資料作成の際に使用します。パワポとか色も形もごちゃごちゃだと取れる案件も取れなくなる可能性はあるので・・・。
Adobe Kuler
こっちはコーダー向け
Devoth‘s HEX 2 RGBA Color Calculator
Flat UI Colors
フラットデザインっぽい色ってどんなだろーって迷った時はここから。
色色 [:iroiro]
言葉を入れると連想する色を作成する。マジですげぇ。
ロゴをちゃちゃっと作りたい！
Free logo design, Create a logo, Logo Maker, Logos, Business Logo
IE用にrgbaのフィルターを作成！便利！
RGBa & HSLa CSS Generator for Internet Explorer | Journal | Kimili
ただ、なぜか自分の環境(IE11のレンダリングモード)でデバッグすると、IE10がうまくいかなったりするｗ
クライアントのIPアドレスを知りたいときなどにURLを開いてもらいます。
アクセス情報【使用中のIPアドレス確認】
IP制限かけたりすることが多いのですが、ほぼすべてのクライアントは自分のIPアドレスなんか把握してないので、URLを送って表示されてる数字を教えて下さい的なことをやってます。
コードの整形ツール
ぜんぶのせ
Make your code beautiful with Code Beautify
CSS
CSS Beautify
メディアクエリがうまくいかない・・・
HTML/CSS/JS
Dirty Markup · Tidy and Beautify your HTML, CSS, and JavaScript
HTML
ＨＴＭＬ整形ツール（プチ・デバッグ機能付き
個人の方が作ったサイトの更新なんか依頼された際は一度これ通さないとコードが読めないことが多々あります・・・
コード圧縮系
HTML
Compress HTML
CSS/JavaScript
Compress javascript and css. Amazing code compression. Quick,easy
Jsはギチギチに圧縮するのでこっち派
JavaScript Compression – Compress JavaScript Code Free with this
CSSはある程度可視性を求めるのでこっちで。
Webフォント
Google Fonts
Webフォントはとりあえずこれだけで今のところ充分。
CSSはジェネレーターに任せるｗ
CSS見出し-ジェネレーター | WEB道
CSSだけでもけっこういろんな見出しがサクッと作れるので、簡単なランディングページとかに最適。
CSS3プロパティジェネレーター | CSS-EBLOG
Ultimate CSS Gradient Generator – ColorZilla.com
CSS3 Generator
CSS Border Radius Generator
The ultimate CSS tools for web designers | CSSmatic
CSS triangle generator
CSS3で簡単に三角を作ってしまうすごいやつ。
CSS + CSS3 Generator | Generate CSS
なんとなくここを使う率が高い。
超苦手な正規表現はまずここでチェックします。
Rubular: a Ruby regular expression editor and tester
ツールじゃないけど超お世話になっています。
TEST CORDING » JavaScript正規表現 怒濤の100サンプル!!
TABLEIZER! — Spreadsheets to HTML Tables Tool
エクセルを貼り付けるとTable組みができちゃう。
Placeit: Free Screenshot App Marketing Tool & Templates
海外でよく見るサイトを埋め込んだ画像が作成できます。
アプリの紹介とか、レスポンシブでこう見えますよとか、プレゼンとか提案資料に最適。
Feedly購読ボタン作成
feedly. your news. delivered.
最近RSSボタンよりこっちつけてと言われるパターンが多くなってきました。
サイトマップを作成-自動生成ツール「sitemap.xml Editor」
サイトマップ(sitemap.xml)作成ツール
Responsive Checker ｜ レスポンシブデザイン検証サービス
レスポンシブに必須な検証ツール
PageSpeed Insights
ある程度構築が終わったらページの表示スピードにも気を使うために使う。
表示スピードを改善するためにリリース前に一度は確認します。
まとめ
以上、自分のブラウザに実際ブックマークしているWebツールをまとめました。特に圧縮やジェネレーター、整形をするツールなどはサイトによって癖があったり、使い勝手がそれぞれ違ったりするので時間があるうちに試してみて慣れておくと、帰宅時間が大幅に早くなる可能性がありますので、ぜひ使ってみてください。
時短ツールは社畜の味方！作業効率化は早期帰宅に直結します！ｗ
