Web制作者向け便利ツールをご紹介!

Web制作者のみなさま、いつもの制作作業の中で「あとちょっとこの作業を効率的にできたら、もっと早く仕事がこなせるのに・・」というような悩み、一度は思ったこと、ありますよね?
そんなあなたに、いくつかの便利ツールをご紹介します!

おすすめのブックマークレット

まずはおすすめしたいブックマークレットをいくつかピックアップ。

ブックマークレットとは、通常、ブラウザでお気に入り(ブックマーク)を選ぶと指定のホームページに飛びますが、登録URLの代わりにJavaScriptで構成されたプログラムをブックマークすることで、それを選んだ時に指定のプログラムがそのページで実行され、早く、簡単に機能が実現できるのです。そういったものをブックマークレットと言います。
インストールもお手軽で、そのコードをブックマークするだけで行えるんですよ。

画像のalt属性を一発で確認出来るブックマークレット

画像を入れて、altが入っているか、最終チェックが必要ですよね。そんな時に便利なのが、こちらのブックマークレット。
例えばYahooのトップのaltを確認しようとすると、このような表示になります。

少し画面が崩れますが、画像のalt属性を全て検証モードで確認するよりは手軽に確認ができますね。

useful-tools-02

▼alt属性を確認するブックマークレット。|trustworks
http://www.trustworks.biz/blog/2008/04/alt.html

HTMLタグの閉じ忘れを教えてくれるブックマークレット

閉じタグ忘れ、よくありませんか?
このブックマークレットは、
閉じタグが多かったり少なかったりするのを教えてくれます。

急なページの崩れが起こったら、
まずこちらで確認してみましょう。

HTMLタグの閉じ忘れを教えてくれるブックマークレット

▼HTML内タグの閉じ忘れをチェックするツール[ブックマークレット]|とっくりばー
http://tockri.blog78.fc2.com/blog-entry-168.html

フォントの名前を知らせてくれるブックマークレット

このサイト、なんのフォント使われてるんだろう?
と気になった方はこちら!

検証モードでcssを探さなくても、その場所が
なんのWebフォントが使われているか教えてくれます。

フォントの名前を知らせてくれるブックマークレット

▼WHATFONT TOOL|Chengyin Liu
http://www.chengyinliu.com/whatfont.html

レスポンシブWebサイトのデバイスサイズ別チェックできるブックマークレット

クロームなどは特に拡張機能でも同じようなものがありますが、
よりデザイン的で、より視覚的で見やすいですね。

デザインも整っているので、
レスポンシブが楽しくなりそうです。

ただし、こちらのブックマークレットは
ブラウザ幅を取得し、viewport(ビューポート)で
デバイスサイズ別に表示させているサイトでのみご使用頂けます。

アクセス時にパソコンかスマートフォンかを
取得して振り分けているサイトにはお使いいただけませんので、
お気をつけて。

レスポンシブWebサイトのデバイスサイズ別チェックできるブックマークレット

▼VIEWPORT RESIZER|maltewassermann
http://lab.maltewassermann.com/viewport-resizer/

画像や要素の幅や高さ、プロパティを表示できるブックマークレット

画像や要素の幅・高さを、いつも検証モードで
調べているのですが、
パッと確認したい時にはオススメです。

背景画像のサイズ取得までできれば最高なのですが、
背景の時はブロック要素のプロパティを取得してしまうようなので
そこはまだ検証モードが必要そうですね・・。

画像や要素の幅や高さ、プロパティを表示できるブックマークレット

▼XRAY: look beneath the skin|westciv
http://www.westciv.com/xray/

META、短縮URLなどのページ情報を一括で表示できるブックマークレット

titleやdescriptionなどのMETA情報をはじめ、
サムネイルなど、ページの基本情報を見ることが出来ます。

こちらで個人的に一番オススメなのは、
短縮URLを表示できることですね。

長いページの短縮URL発行に
いちいちGoogleのサービスページまで飛ばないのは
結構便利な気がします。

META、短縮URLなどのページ情報を一括で表示できるブックマークレット

▼XRAY: look beneath the skin|westciv
http://geturlinfo.com/

おすすめのChrome拡張機能

最近だと、標準ブラウザに動作の早い
Google Chromeをお使いの方も多いのではないでしょうか?

Chromeにはたくさんの便利な拡張機能があります。
拡張機能のインストール自体はとても簡単で、
chromeウェブストアから、欲しい拡張機能を選択するだけ。
クリックしてインストールすれば、もう使うことができます。

さてここからは、いつもの業務がちょっと早くなる、
おすすめChrome拡張機能をご紹介します。

ブラウザにデザインを重ねてコーディングチェックできるChrome拡張機能

htmlページにファーストデザインなどの画像を
うっすらとしたレイヤーで乗せることができる
Chrome拡張機能です。

レイヤーの透明度を変更する箇所や、
矢印キーで細かな位置調整ができる箇所もあるので、
PSDが分かれていたりしても
パーツごとに重ねてチェックもできますね。

デザイン通りにコーディングされているかのチェック以外にも
ブラウザ上で画像を横に置いて比較したい時にも便利です。

ブラウザにデザインを重ねてコーディングチェックできるChrome拡張機能

▼PerfectPixel by WellDoneCode|Chrome拡張機能
https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi

増えすぎたブラウザタブを整理させるChrome拡張機能

個人的な意見ですが、この拡張機能、だいぶ画期的です。

よく調べ物をしていると、ブラウザにタブが増えすぎますよね?

私もよくなります。。
こんな感じになってよく迷子になりますが、
下手にタブを消すと、せっかくの参考サイトが
URLわからなくなったりするので
迷子の中探し回ることがしょっちゅうです。
(都度閉じればいいんですけどね)

この拡張機能があれば、 OneTabのメニューを押すだけで、
1 つのタブにサイトのタイトルとURLを
一覧で見やすく表示してくれるのです!

いつもタブ迷子になっている方、
ぜひこの拡張機能をインストールしてみてください。

増えすぎたブラウザタブを整理させるChrome拡張機能

▼OneTab|Chrome拡張機能
https://chrome.google.com/webstore/detail/onetab/chphlpgkkbolifaimnlloiipkdnihall

1クリックでキャッシュをクリアできるChrome拡張機能

構築中のサイトのキャッシュがきつくて、
画像やcssを差し替えるたびに
キャッシュをクリアしなくてはいけない・・

もしくは、軽微なサイト修正があり、
差し替えたはずのバナー画像が切り替わらない・・

そんな経験、誰しもありますよね?
画像のURLを変えるのがベストですが、
ちょっと修正したいだけなのに!
というときも根強いキャッシュ。

そんなときにはこの拡張機能がおすすめ!

最近Chromeのキャッシュクリアが
設定から2、3クッションおかないとクリアできなくなって、
非常に面倒だと感じていた私には、
これまたかなり便利な拡張機能。

一瞬ボタンを押すと、
アイコンが緑にふわっと切り替わるのですが、
無駄な数秒をコンマ数秒に省けて大変重宝しています。

毎度毎度のキャッシュクリアに辟易しているあなたは、
ぜひこちらのChrome拡張を使ってみてください。

1クリックでキャッシュをクリアできるChrome拡張機能

▼Clear Cache|Chrome拡張機能
https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn/related

まとめ

いかがでしたか?

これらの便利ツールで、毎日の制作が少しでも早くなり、
ストレスフリーな制作に近づけられるといいですね。

ぜひお試しください。

このエントリーをはてなブックマークに追加

筆者

Y.Nakatani

二児の母で、Bigmacに入って2年、Web業界は丸7年。デザイン以外は繊細さのかけらもない杜撰さ。 好きな色は浅葱色とか、新橋色とか、シアン系の色味。好きなタグはsectionとolタグ。ほっとくと擬似要素多用。好きなフォントはヒラギノのW0。今一番してみたいことは、語尾にハートマークをつけてみる。

筆者が最近執筆した記事