拡張機能いらず!Web制作に役立つ便利なブックマークレット12選

UX MILK編集部

モノづくりのヒントになるような記事をお届けします。

今回はWeb制作で使える便利なブックマークレットをまとめてみました。

Webサイトのデザイン時にはデベロッパーツールや拡張機能を使っている方も多いと思います。ブックマークレットの良い点は、クリックひとつで簡単に実行できるところです。

ブックマークレットをうまく活用することでWeb制作を効率化することができます。

ブックマークレットとは

ブックマークレットとはブックマークからスクリプトを起動し、ブラウザ上で処理を行う簡易的なプログラムです。ページの一部を加工したり、ページ内の情報を取得したりすることができます。

ブックマークレットの登録方法

ブックマークレットの登録方法には以下の2通りがあります。

(1)ブックマークレットのリンクをブラウザのブックマークバーにドラッグ&ドロップ
(2)ブラウザのブックマーク追加からリンク先としてブックマークレットのURLを登録

ブックマークレットを使うときは、処理を行いたいページを開いてからブックマークをクリックしてください。

便利なブックマークレット12選

指定要素のハイライト

mri

MRI

フォームで指定したタグ、ID、クラスをもつ要素をハイライトしてくれます。また、要素をクリックすることでその要素の階層やタグなどを確認できます。

配置・サイズ・余白・パディングの確認

xray

XRAY

クリックした要素のposition、width、hight、margin、paddingなどが表示されます。デベロッパーツールを使うよりも視覚的にわかりやすく、手軽に確認することが可能です。

レスポンシブサイトの確認

responsive

VIEWPOER RESIZER

5つの画面サイズの表示を確認することができます。デフォルトでは「320x480, 320x568, 600x800, 768x1024, 1200x800, 1080x1920」の5つのサイズに対応しています。カスタムサイズを設定することも可能です。

フォントチェック

whatsfont

WhatFont

クリックした要素のフォントを確認することができます。指定されているfont-family、font-size、line-heightの確認が可能です。デベロッパーツールを使うより手軽に確認ができます。

ページ読み込み速度の分析

webspeed

ページ表示のどこに時間がかかったかチェックするブックマークレット

ブラウザ表示にかかった時間を確認することができます。サーバーとの通信時間やブラウザの読み込み処理の時間など、各パートごとにかかった時間と改善案を提示してくれます。どの処理で時間がかかっているのか原因を突き止める助けとなるツールです。

alt属性のチェック

alt

alt属性の一覧を表示

ブックマークレットを実行すると画面の左端に画像とalt属性を一覧で表示してくれます。もしalt属性を指定してない場合は、nullと表示されます。alt属性はアクセシビリティの向上やSEO対策としても確認しておきたい点です。

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

wireframe

Wirify

ブックマークレットを実行すると表示しているページをワイヤーフレーム化してくれます。コンテンツが非表示になるので、ページ構造だけに焦点を当てたいときにも便利です。ただし、CSSの実装方法によってはうまく変換されない場合があります。

グリッド・ルーラー表示

ruler

design

ページ上にグリッドやルーラーを表示することができます。レイアウトの確認や表示のずれを修正するときに重宝します。またUnit機能を使えば、ドラッグで2点間の距離を測ることも可能です。 

メタ情報・OGPの確認

meta

OuiSEO

ブックマークレットを実行するとページのメタ情報を表示してくれます。title, meta descriptionなどのメタ情報やFacebook OGPやTwitterカードの情報も確認できます。

グリッドシステムのレイアウト調整

grid

Grid displayer

ブックマークレットを実行すると指定したフレームワークのグリッドを表示してくれます。対応しているフレームワークはFoundation2, 3, 4, 5とBootstrapの2, 3です。グリッドシステムを使用したレイアウトを調整するときに重宝します。

背景パターンを試す

background

Subtle­Patterns

背景パターンを変更して表示を確認することができます。背景パターンは全部で329種類あり、どのような背景が自分のサイトに適しているのか考える手助けとなります。

リアルタイムにテキストを編集

edittext

表示中のウェブページのテキストや画像をその場で編集するブックマークレット

ブックマークレットを実行するとページ内のテキストを直接編集できるようになります。編集したい箇所をクリックすれば、点滅カーソルが現れキーボードで編集可能になります。また、BSキーあるいはDeleteキーで要素の削除も可能です。