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

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



  • ロゴを様々な角度からテストできるツール「Logo Lab」
  • SVGで背景パターンを作成できる「Hero Patterns」
  • 有名な企業・サービスのロゴをダウンロードできる「Instant Logo Search」
  • マルチカラーグラデーションのコードをコピーできる「gradienta」
  • 【CSS】フォントサイズの単位を相対比較できる「PXtoEM.com」
RELATED POSTS
  • 【CSS】色々と使える疑似クラス:nth-child()の実用例
  • ラフな手書き風デザインのWebコンポーネント「Wired Elements」
  • CSSでスマートフォンなどデバイスのモックアップを実装できる「Devices.css」
  • 様々なホバーエフェクトを実装できる「imagehover.css」
  • SVGでダミー画像を生成できるサービス「Placeholder pics」
  • 【jQuery】プレースホルダにアニメーションを実装できる「FoxHolder」
RECENT POSTS
  • 無料で使えるフリーアイコン素材サイト15選
  • 配色を決める時に役立つカラーパレット22選
  • 無料で使えるハロウィンデザイン・イラスト素材サイト
  • ロゴデザインの参考になるロゴギャラリーサイト16選
PICKUP
  • 無料で使用できる海外のフリー写真素材サイトまとめ
  • 【2020年版】WordPressおすすめレンタルサーバー6選 -初心者向け-
  • WordPressのおすすめテーマ19選【無料版・有料版】
  • CSSで簡単に作れるおしゃれな見出しデザイン20選