Web制作に役立つ便利すぎるブックマークレットのまとめ
Post on:2015年4月2日
Webサイトの制作に役立つ便利なブックマークレットを紹介します。
ブラウザの機能拡張も便利ですが、入れすぎると重くなったり、Chromeで使えるけど他で使えないなどあるので、ブックマークレットもなかなか重宝します。
- ページにグリッドを表示した確認
- レスポンシブWebデザインの確認
- デザインの確認をピクセル単位でできる
- ページで使用しているフォントをチェック
- ページをワイヤーフレーム化
- ページの構造が正しいか確認
- マークアップのいまいちな箇所を指摘してくれる
- 背景を素敵なテクスチャに変えてみたい
- ページのパフォーマンスを確認
- minifyされたCSSを見やすく表示
- SEOやソーシャルメディアに大切な項目を確認
- コードとアクセシビリティをチェック
ページにグリッドを表示した確認
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015040104-01.png)
BootstrapやFoundationで採用されているグリッドを表示します。
※キャプチャに使ったページ:Grid Template for Bootstrap
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015040104-02.png)
左右中央寄せ・天地中央のレイアウトに自由にグリッドを配置できます。グリッドの他に、ルーラー・ユニット・クロスヘアーのツールもついています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015040104-03.png)
ページ幅が960pxに特化したグリッド表示を表示します。
レスポンシブWebデザインの確認
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015040104-04.png)
表示しているページをデスクトップ・スマフォ・タブレットなどのあらゆるサイズに変更して確認できます。カスタマイズも可能。
デザインの確認をピクセル単位でできる
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015040104-05.png)
表示しているページに画像をオーバーレイで表示し、デザインの確認をするためのブックマークレット。画像はローカルのものも指定できるので便利。
ページで使用しているフォントをチェック
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015040104-06.png)
ページで使用しているフォントの種類、サイズ、カラーなどの情報を表示します。日本語フォントもでます。
ページをワイヤーフレーム化
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015040104-07.png)
表示しているページのコンテンツや画像やテキストを使って、ワイヤーフレーム状にします。
ページの構造が正しいか確認
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015040104-08.png)
表示しているページからあらゆる飾りを取り除き、グリッドやレイアウトのバランスや要素の構造など、ページデザインのもっとも大切な基本となるポイントを確認できます。
マークアップのいまいちな箇所を指摘してくれる
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015040104-14.png)
表示しているページの必須属性のない要素、空要素、廃止予定の要素など、アクセシブルではないマークアップ、validでないマークアップ箇所を指摘してくれます。
背景を素敵なテクスチャに変えてみたい
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015040104-09.png)
もしも背景を紙にしたら、ドットにしたら、どうなるか、というのを簡単に試すことができます。
Bootstrapを布地にしてみました。
ページのパフォーマンスを確認
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015040104-10.png)
ページに配置されている画像それぞれのロード時間とタイミングを元にページのパフォーマンスを表示します。
minifyされたCSSを見やすく表示
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015040104-11.png)
改行コードやスペースなど削除されたCSSのコードを見やすいように整形して表示します。ブラウザで表示したコードをさくっと整形するので非常に便利です。
SEOやソーシャルメディアに大切な項目を確認
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015040104-12.png)
タイトルや見出しなど、ページ上のSEOに関連する要素とFacebookやTwitterのOGPやMeta情報が正しく記載されているか表示します。
コードとアクセシビリティをチェック
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015040104-13.png)
表示しているページのHTMLをチェックし、エラー箇所を表示し、WCAG2.0, Section508のアクセスビリティのチェックもできます。
sponsors