【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版 ページ速度分析ツール

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


  • パーツを組み合わせるだけで簡単にHTMLを生成できる「Stitches」
  • 【CSS】フォントサイズの単位を相対比較できる「PXtoEM.com」
  • ポリゴンスタイルのイメージやテクスチャを生成できるジェネレーターまとめ
  • サイトで使用していないCSSセレクタを調べられる「Unused CSS」
  • Webサイトのページ表示速度を測定できる無料サービスまとめ
RELATED POSTS
  • 【CSS】CSSだけで作られた簡単に使えるアイコンセット
  • 【JS】物理法則に基づいたアニメーションライブラリ「Dynamics.js」
  • パララックス効果がキレイなスライダー「PIGNOSE ParallaxSlider」
  • 【jQuery】プレースホルダにアニメーションを実装できる「FoxHolder」
  • 魅力的なチルトホバーエフェクトを実装できる「Tilt Hover Effects」
  • 【jQuery】チルトホバーエフェクトを実装できる「Tilt.js」
POPULAR POSTS
  • 【無料】漢字が使える日本語フリーフォント59選
  • 似たフォントを探したい!フォントを調べる時に役に立つツール・サイト10選
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
  • 無料で使える日本語・英語のかわいいフリーフォント20選
  • CSSグラデーションの作成に役立つジェネレーター・Webサービスまとめ
RECENT POSTS
  • Neumorphismを簡単に作れるジェネレーター「Neumorphism.io」
  • マルチカラーグラデーションのコードをコピーできる「gradienta」
  • SNSで使用する画像・動画サイズのテンプレート集「SocialSizes」
  • やわらかいタッチのイラストをダウンロードできる「Open Doodles」
  • 簡単にホバーエフェクトを実装できるCSSライブラリ「Izmir Hover Effects」