Webデザイナー兼フロントエンドエンジニアが実務で使っている便利ツールまとめ

kitchen

2013年締めくくり。
普段使ってる便利ツールたちをまとめてみたよ!!



Chromeプラグイン

もともとはFirefoxラバーだった癖に、最近はめっきりChromeだよ!
Chromeプラグインたちはマジで毎日使っています。

web color picker

 Webデザイナー兼フロントエンドエンジニアが実務で使っている便利ツールまとめ
WebColor Picker
https://chrome.google.com/webstore/detail/webcolor-picker/dhkcagaebpnckdoifoehbflnaimhakea?hl=ja

表示中のWebサイトで使用されている色をRGB形式で取得します


Webサイトを開いたまま、ブラウザ上だけで色を拾えます。
とにかく便利すぎる。過去の履歴も残ります。
わざわざキャプチャを撮って、Psから色を拾ってのは昔の話ですよ。

Window Resizer

 Webデザイナー兼フロントエンドエンジニアが実務で使っている便利ツールまとめ

https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh[ogp] 広大なモニタで作業していると、ついつい忘れがちな画面サイズ。 時々思い出してはResizer一発で切り替えます。 任意のサイズも登録しておけるから超便利。 Windowリサイズ時に現在のサイズも表示してくれます。 Awesome screeshot [ogp]https://chrome.google.com/webstore/detail/awesome-screenshot-captur/alelhddbbhepgpmgidjdcjakblofbmce?hl=ja


スクショ系は渡りに渡り歩いてこれが一番便利でした。
全スクロールして1画面キャプチャがあります。


jsoff

 Webデザイナー兼フロントエンドエンジニアが実務で使っている便利ツールまとめ
jsoff
https://chrome.google.com/webstore/detail/jsoff/kjhbibcocglfnpllfodaiabanmmegomm

This is a chrome extension to disable JavaScript execution with one click.


Javascriptを一発でOFFにできます。
開発中は本当に便利。


W3C HTML5 & CSS3 Validator

 Webデザイナー兼フロントエンドエンジニアが実務で使っている便利ツールまとめ
W3C HTML5 & CSS3 Validator
https://chrome.google.com/webstore/detail/w3c-html5-css3-validator/kobpbiokkobnmnaefmpcodeeficgbfkg

W3C HTML5 & CSS3 quick validation button.


ボタン一発バリデーション。わたくし、わっくはvalidなコードを書きますよ。いつでもお仕事ください。


英辞郎 on the WEB 拡張機能

 Webデザイナー兼フロントエンドエンジニアが実務で使っている便利ツールまとめ
英辞郎 on the WEB 拡張機能
https://chrome.google.com/webstore/detail/%E8%8B%B1%E8%BE%9E%E9%83%8E-on-the-web-%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD/oonalfdoahlmjaoloddjenihohbfodme

アルクが公開している英和・対訳オンライン検索サービス「英辞郎 on the WEB」を、その場で便利に検索できる拡張機能です。「英辞郎 on the WEB Pro / Pro Lite」にも対応。※「英辞郎」は道端早知子氏の登録商標です。



イミフな英単語を選択→右クリックメニューで英辞郎で検索できる、何気に便利なプラグインです。


IEプラグイン

Debug bar


 Webデザイナー兼フロントエンドエンジニアが実務で使っている便利ツールまとめ

クs…もとい貧弱なIEの開発ツールを強力にしてくれるデバックツール。

ブラウザテスト

IE Tester

 Webデザイナー兼フロントエンドエンジニアが実務で使っている便利ツールまとめ
My DebugBar | IETester / Browser Compatibility Check for Internet Explorer Versions from 5.5 to 11
http://my-debugbar.com/wiki/IETester/HomePage

ietester is an application that allows to test on multiple ie versions at the same time in the same application


これ、時々Javascriptが変なところでコケる。ほかにいいのないのかなー。
もうあれじゃね、7とか8とかみんな使うのやめればいいじゃない?

BrowserStack

browserstack logo 600x315 Webデザイナー兼フロントエンドエンジニアが実務で使っている便利ツールまとめ
Cross Browser Testing Tool. 1000+ Browsers, Mobile, Real IE.
http://www.browserstack.com/

Test your website for cross browser compatibility on real browsers. Instant access to multiple desktop and mobile browsers. Get Free Trial.


 Webデザイナー兼フロントエンドエンジニアが実務で使っている便利ツールまとめ

今使ってるままのブラウザで、各種ブラウザのシュミレーションができます。
ちょい重い。


その他Webツール

もじばけらった

ogp Webデザイナー兼フロントエンドエンジニアが実務で使っている便利ツールまとめ
文字化け解読ツール「もじばけらった」
http://lab.kiki-verb.com/mojibakeratta/

文字化け解読ツール「もじばけらった」は、文字化けして読めないメールなどの文書を解読するためのデコードサービスです。


 Webデザイナー兼フロントエンドエンジニアが実務で使っている便利ツールまとめ

うっかりやっちまった!文字化けしちゃった!
なんて時はこれを使ってみるとちょっと良いことが起こる。かもしれない。

color lovers

 Webデザイナー兼フロントエンドエンジニアが実務で使っている便利ツールまとめ
Color Trends + Palettes :: COLOURlovers
http://www.colourlovers.com/

COLOURlovers is a creative community where people from around the world create and share colors, palettes and patterns, discuss the latest trends and explore colorful articles... All in the spirit of love


 Webデザイナー兼フロントエンドエンジニアが実務で使っている便利ツールまとめ

配色保存ツール。どちらかというと、すでにある配色を参考させてもらうことのが多いかな。

htaccess Editor

 Webデザイナー兼フロントエンドエンジニアが実務で使っている便利ツールまとめ
.htaccess ファイルを簡単作成「.htaccess Editor」
http://www.htaccesseditor.com/#a_redirect


 Webデザイナー兼フロントエンドエンジニアが実務で使っている便利ツールまとめ

デザイナーにとってはちょっと面倒くさい、あのファイルを色々いじって作れるツール。
便利ー。

Favicon Converter

 Webデザイナー兼フロントエンドエンジニアが実務で使っている便利ツールまとめ
qfor.info - 
http://favicon.qfor.info/c/

qfor.info はお客様がお探しの全ての情報の原点です。一般的な項目からお客様がお探しのものまで、 qfor.info は全てここにあります。きっとお探しのものが見つかるはずです。


 Webデザイナー兼フロントエンドエンジニアが実務で使っている便利ツールまとめ

毎度お世話になります。ファビコン、忘れがちなんでちゃんと作りましょう。


なんちゃって個人情報

 Webデザイナー兼フロントエンドエンジニアが実務で使っている便利ツールまとめ
なんちゃって個人情報
http://kazina.com/dummy/


 Webデザイナー兼フロントエンドエンジニアが実務で使っている便利ツールまとめ

それっぽい個人情報を作ってくれるツール。これすごい。ただし、本当にいないとも限らないのでご利用は計画的に。



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>