【Webデザイン】Webサイト制作に役立つブックマークレット

 

ブックマークレットとは?

ブックマークレット (Bookmarklet) とは、ユーザーがウェブブラウザのブックマークなどから起動し、ウェブブラウザで簡単な処理を行う簡易的なプログラムのことである。携帯電話のウェブブラウザで足りない機能を補ったり、ウェブアプリケーションの処理を起動する為に使われることが多い。
1

Design

Webサイト上のサイズを測るブックマークレット。グリットを表示させ詳細に設定したり、定規・ルーラーを表示させ横幅・縦幅を測定できます。ルーラーはPhotoShopやIllustratorと同様に左上をドラッグして起点を変更することができます。

2

MRI

ポップアップに調べたいセレクタ名を入力すると、その要素がハイライトで表示されます。(上図はh2を指定した場合)また、同サイトでは要素の縦横サイズ・プロパティを調べられるXRAYもあります。

3

Wirify

ブックマークレットをクリックするだけで閲覧中のサイトがワイヤーフレームで表示されます。

4

VIEWPORT RESIZER

スマホ・タブレット等のデバイスや、任意のカスタマイズサイズで表示確認ができます。レスポンシブ対応サイトなど調べる時に重宝します。

5

Get URL Info

description・Keywordなどのページ情報からページランク・サーバー情報・はてぶのコメントまで調べることができます。

6

WhatFont

フォントをクリックするとフォント情報を表示してくれるブックマークレット。海外サイトで気になる英文フォントがあった時などに重宝します。

7

SEOチェキ!

SEOチェキ!ブックマークレットをクリックするだけで、対象サイトの計測結果が別窓にて表示されます。※SEOチェキ!のブックマークレットのありかは計測結果ページの右下にあります。

7

Web担当者Forum版 ページ速度分析ツール

ページの読み込みスピードを計測できるブックマークレット。



\ Webデザインに関するお役立ち情報を定期的に配信中 /

Follow @webclips_jp

POPULAR POSTS
  • 【2022年版】 無料で使えるフリーイラスト素材サイト41選(商用利用可)
  • 【2022年版】漢字が使える日本語フリーフォント93選
  • フォントを調べる時に役に立つツール・サイト10選
  • 無料で使える日本語・英語のかわいいフリーフォント20選
  • 【2022年版】 Google Fontsの使い方とおすすめ日本語フォント
  • 【2022年版】 無料で使えるフリー画像・写真素材サイト27選(国内/海外)