Web制作に役立つ便利すぎるブックマークレットのまとめ

Webサイトの制作に役立つ便利なブックマークレットを紹介します。
ブラウザの機能拡張も便利ですが、入れすぎると重くなったり、Chromeで使えるけど他で使えないなどあるので、ブックマークレットもなかなか重宝します。

ページにグリッドを表示した確認

サイトのキャプチャ

Grid displayer

BootstrapやFoundationで採用されているグリッドを表示します。
※キャプチャに使ったページ:Grid Template for Bootstrap

サイトのキャプチャ

Design

左右中央寄せ・天地中央のレイアウトに自由にグリッドを配置できます。グリッドの他に、ルーラー・ユニット・クロスヘアーのツールもついています。

サイトのキャプチャ

960 Gridder

ページ幅が960pxに特化したグリッド表示を表示します。

レスポンシブWebデザインの確認

サイトのキャプチャ

Viewport Resizer

表示しているページをデスクトップ・スマフォ・タブレットなどのあらゆるサイズに変更して確認できます。カスタマイズも可能。

デザインの確認をピクセル単位でできる

サイトのキャプチャ

maki

表示しているページに画像をオーバーレイで表示し、デザインの確認をするためのブックマークレット。画像はローカルのものも指定できるので便利。

ページで使用しているフォントをチェック

サイトのキャプチャ

Whatfont Tool

ページで使用しているフォントの種類、サイズ、カラーなどの情報を表示します。日本語フォントもでます。

ページをワイヤーフレーム化

サイトのキャプチャ

Wirify

表示しているページのコンテンツや画像やテキストを使って、ワイヤーフレーム状にします。

ページの構造が正しいか確認

サイトのキャプチャ

MIN

表示しているページからあらゆる飾りを取り除き、グリッドやレイアウトのバランスや要素の構造など、ページデザインのもっとも大切な基本となるポイントを確認できます。

マークアップのいまいちな箇所を指摘してくれる

サイトのキャプチャ

DiagnostiCSS

表示しているページの必須属性のない要素、空要素、廃止予定の要素など、アクセシブルではないマークアップ、validでないマークアップ箇所を指摘してくれます。

背景を素敵なテクスチャに変えてみたい

サイトのキャプチャ

Subtle Patterns Bookmarklet

もしも背景を紙にしたら、ドットにしたら、どうなるか、というのを簡単に試すことができます。
Bootstrapを布地にしてみました。

ページのパフォーマンスを確認

サイトのキャプチャ

PerfMap

ページに配置されている画像それぞれのロード時間とタイミングを元にページのパフォーマンスを表示します。

minifyされたCSSを見やすく表示

サイトのキャプチャ

cssprettifier

改行コードやスペースなど削除されたCSSのコードを見やすいように整形して表示します。ブラウザで表示したコードをさくっと整形するので非常に便利です。

SEOやソーシャルメディアに大切な項目を確認

サイトのキャプチャ

OuiSEO

タイトルや見出しなど、ページ上のSEOに関連する要素とFacebookやTwitterのOGPやMeta情報が正しく記載されているか表示します。

コードとアクセシビリティをチェック

サイトのキャプチャ

HTML_CodeSniffer

表示しているページのHTMLをチェックし、エラー箇所を表示し、WCAG2.0, Section508のアクセスビリティのチェックもできます。

sponsors

top of page

©2018 coliss