【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

PopularPosts
  • 漢字が使える日本語フリーフォント97選(商用利用可)
  • 無料で使えるフリーイラスト素材サイト55選(商用利用可)
  • 無料で使える日本語・英語のかわいいフリーフォント20選
  • 無料で使えるデジタル風フォント13選
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
  • ビジネス系イラストをダウンロードできるフリー素材サイト7選
WordPress対応! 初心者におすすめのレンタルサーバー特集
RecentPosts
  • 【2024年10月版】WordPress対応のおすすめレンタルサーバー比較 ( 初心者向け )
  • Adobeのセール時期はいつ頃? Adobeセールの最新情報
  • 【2024年度】Adobe CC(Creative Cloud)を安く買う方法
  • Photoshopで使用できる“水しぶき系”ブラシ8選
  • 無料で使えるフリーイラスト素材サイト55選(商用利用可)
  • アイソメトリックイラストをダウンロードできるフリー素材サイト6選