閲覧ページにグリッドを表示させたりレスポンシブ確認を容易にするものをはじめ、使用されているフォント確認、ページをワイヤーフレーム化するもの、ページの表示速度やHTMLチェックを行ってくれるものなど、サイト制作時や気になるサイトのことをちょっと調べたい時などに便利なブックマークレットを紹介します。中には拡張機能やデベロッパーツール使えば十分というものもありますが、拡張機能を入れすぎて重くなるのを防ぎたいという場合やデベロッパーツールをあまり使っていないという人には手軽で便利ですし、何より様々なブラウザで使用できるのが嬉しいと思います。
ここではもちろんブックマークレットとして紹介していますが、中にはChromeの拡張機能として利用できるものもあったりするので、その場合は自分が使いやすいと思う方を利用してみてください。
また、ブックマークレットによってはPCだけでなくスマートフォンなどでも十分利用できるものもあります。
多くのブックマークレットは紹介サイトで「この部分をブックマークバーにドラッグ」などのような形でボタンなどが設置されていたり登録方法が記載されていますが、一部そういったわかりやすいものがないやつもあります。
その場合は掲載されているコードをコピーして、そのコードをブックマーク登録時にURLの箇所にペーストすれば使えるようになります。
フォント検索・ワイヤーフレーム化・グリッド表示など、Web制作時に便利なブックマークレット 15 目次
- レスポンシブ表示確認に便利な「Viewport Resizer」
- 複数のウィンドウサイズをまとめて表示確認ができる「Responsive Design bookmarklet」
- 閲覧ページをワイヤーフレーム化してくれる「Wirify」
- 使用されているフォント情報を確認できる #1 「WhatFont Tool」
- 使用されているフォント情報を確認できる #2 「Type Sample」
- 指定要素のid・class・サイズ・各種スタイルを表示してくれる「XRAY」
- 閲覧ページに任意のイメージをオーバーレイ表示させる「maki」
- グリッドや定規を表示してくれる「Design」
- 閲覧ページのカラーやスタイルを取り除く「MIN」
- 圧縮・難読化されているCSSを整形変換してくれる「cssprettifier-bookmarklet」
- 閲覧ページに様々な背景テクスチャを適用できる「SubtlePatterns Bookmarklet」
- ページ表示のどこに時間がかかったかチェック
- 閲覧ページのHTMLをチェックしてエラー箇所を表示してくれる「HTML_CodeSniffer」
- alt属性を確認するブックマークレット
- 閲覧ページの様々な情報を表示する「Get URL Info」
1. レスポンシブ表示確認に便利な「Viewport Resizer」
レスポンシブの表示確認に便利なブックマークレットで、見ているページをスマートフォン・タブレット・ラップトップといった様々なウィンドウサイズへ簡単に変更させることができます。
Chromeを使っている場合はデベロッパーツールを使えばって感じになりますが、その他のブラウザがメインでレスポンシブの表示確認を楽にしたい場合はおすすめです。
デフォルトでもiPhone・Small Tablet・iPad・Widescreenとよく利用されるようなものはひと通り用意されていて、表示の向きなどもボタンで簡単に切り替えできるようになっていますが、更に任意のサイズを指定してオリジナルサイズを追加させるといったことも可能です。
とりあえずデフォルトのものでよければページ上部にある「CLICK OR BOOKMARK」と書かれたボタンをブックマークバーにドラッグするなどすれば良いですが、ある程度自分好みにカスタマイズしてからという場合はページ下部に自分が必要だと思うデバイスを選択してオリジナルのブックマークレットを作成できるようになっています。
（ただ、更新自体はしばらくされていないので用意されているデバイスなども若干古めです）
2. 複数のウィンドウサイズをまとめて表示確認ができる「Responsive Design bookmarklet」
同じくレスポンシブの表示確認に便利なブックマークレットで、こちらは使用すると画面内に複数のウィンドウサイズが表示され、見ているページが各ウィンドウサイズでどのように表示されているのかを1ページでまとめて確認することが可能になります。
デフォルトではmobile・small tablet・tablet・desktopと用意されていますが、こちらも任意のサイズで追加したり逆に不要なサイズを削除するといったカスタマイズが可能で、追加する際はサイズだけでなくラベル名も指定することができます。
3. 閲覧ページをワイヤーフレーム化してくれる「Wirify」
使用すると現在閲覧中のページをワイヤーフレーム化して表示するブックマークレットです。
上のイメージは配布サイトでも紹介されているもので、このように通常の見栄えが画像左のようなサイトを画像右のようにワイヤーフレームの見た目に置き換えて表示してくれます。
また、「Greek original page」を選択すると、元のデザインを多少残しつつ画像をダミー化したりテキストをLorem ipsumに置き換えて表示してくれます。（ただし、海外のものなので日本語はダミーテキストに変更されません。）
4. 使用されているフォント情報を確認できる #1 「WhatFont Tool」
その名の通り、使用すると簡単に表示されているのはどのフォントなのかを確認できるブックマークレットで、該当箇所にhoverしてフォント名がわかるようになっています。
また、クリックで更に詳細な情報を確認ができ、そこに指定されているfont-family,font-size,line-heightなどを確認できる他、Google FontsやTypekitのようなAPIを使用しているのかどうかやカラー名なんかも確認できるようになっています。
5. 使用されているフォント情報を確認できる #2 「Type Sample」
同じくページ内で使用されているフォントを調べるのに便利なブックマークレットで、全体的に「WhatFont Tool」の方が高機能な感じはしますが、こちらも該当箇所にhoverしてフォント名がわかるようになっています。
クリックで表示されるパネルではそのフォントで任意の文字を入力して見栄えを確認したり、フォントサイズを調整して確認ということができるようになっています。
6. 指定要素のid・class・サイズ・各種スタイルを表示してくれる「XRAY」
ブックマークレットを使用後、任意の箇所でクリックするとその要素で使用されているidやclass名をはじめ、widthやheightといったサイズ、HTMLの階層、その要素に指定されている各スタイルなどを表示してくれます。
普段からデベロッパーツールを使用していれば不要なものではありますが、使用していない場合で各要素の情報を確認したい時には便利です。
7. 閲覧ページに任意のイメージをオーバーレイ表示させる「maki」
現在見てるページにオーバーレイ表示で任意のイメージを表示させることができるブックマークレットで、例えばコーディング作業などをしていてデザインをいちいち確認するのが面倒な時など、これを利用すれば常にデザインと実際のブラウザの見栄えを同時に確認するといったことが可能です。
画像はローカル画像をそのまま利用することができ、表示させたイメージは移動させたり透過率を変えたりすることもできるようになっています。
8. グリッドや定規を表示してくれる「Design」
使用するとページ上にグリッドを表示してくれるブックマークレットで、サイズ・カラム数・表示位置なども任意で指定することができます。
また、グリッド表示の他にも定規を表示したり、測定やクロスヘアーといった機能も用意されています。
9. 閲覧ページのカラーやスタイルを取り除く「MIN」
見ているページのカラーやスタイルを取り除き、タイポグラフィ・レイアウト・グリッドなどのバランスが取れているかを確認するブックマークレットです。
表示はコンテンツをぼかしたりグレースケールにしたりと4パターン用意されており、ブックマークレットを使用する度に切り替わります。
10. 圧縮・難読化されているCSSを整形変換してくれる「cssprettifier-bookmarklet」
気になるサイトのCSSを見ようとしたら圧縮・難読化されているという時に便利なブックマークレットで、ソース表示などで圧縮・難読化されているCSSを表示している時に使用すると整形して表示してくれます。
ブックマークレットの登録は「Installation」にあるコードをコピーして各自で登録します。
11. 閲覧ページに様々な背景テクスチャを適用できる「SubtlePatterns Bookmarklet」
大量の背景テクスチャを配布しているサイトとしても有名な「Subtle Patterns」のブックマークレットで、見ているページに様々な背景テクスチャを適用してどのような見栄えになるかを確認できます。
12. ページ表示のどこに時間がかかったかチェック
その名の通り、ページを表示する際にどの部分にそれぞれ時間がかかっているかを表示してくれるブックマークレットです。
それぞれかかった時間や全体比率だけでなく、各項目の具体的な説明や対策方法なども出てきます。
13. 閲覧ページのHTMLをチェックしてエラー箇所を表示してくれる「HTML_CodeSniffer」
見ているページのHTMLをチェックしてエラーや注意点などを表示してくれるブックマークレットで、WCAG 2.0やSection 508に基づいたチェックを行うことができます。
項目は「Errors」「Warnings」「Notices」の3項目で、それぞれ詳細も見ることもできて不要であればその項目をオフにすることもできます。
14. alt属性を確認するブックマークレット
ブックマークレット名からもわかるようにalt属性を確認するブックマークレットで、使用すると見ているページで表示されている画像とalt属性を一覧化して表示してくれます。
画像は実際にYahoo!で使用してみたもので、画像左側のような形で表示してくれます。
15. 閲覧ページの様々な情報を表示する「Get URL Info」
使用するとそのページの各SNSシェア数、titleやdescription、短縮URL、サイトのサムネイルなど様々な情報を表示してくれます。