閲覧中の Web ページ に Thumb Zone Map (親指が届く範囲マップ) をオーバーレイ表示するブックマークレットを作った

Scott Hurff 氏による、「Thumb Zone Map」 を閲覧中の Web ページにオーバーレイ表示するブックマークレットを簡単に作ってみました。

GIZMODO で紹介されていた (日本語版記事はここ)、Scott Hurff 氏による、「Thumb Zone Map」 を閲覧中の Web ページにオーバーレイ表示するブックマークレットを簡単に作ってみました。

役に立つかは不明ですが、自分の Web サイトとか、iPhone だと親指でどの程度のところまで指が届くのかな~ なんて確認するにはいいかもしれませんよ。

使い方は下記のリンク先を見てください。ブックマークレットの使い方を知っている人ならいまさら説明の必要もないと思いますが。

iPhone 4 / 5 / 6 / 6 Plus でブックマークレットが別れているので、必要なものをどうぞ。「choke-up」 というのは画面の上端に親指が届くように持ち方を変えた場合のことです。iPhone 6 / 6 Plus にだけ用意されています。

実際にブックマークレットを起動すると下記のようにオーバーレイされます。リロードすれば消えます。画像をオーバーレイ表示しているので、起動中は画面上のタップなどはできません (スクロールはできますよ)。

「Overlay Thumb Zone map bookmarklet for iOS Safari」 を iPhone 6 上の Safari で起動した例

もちろん、Firefox のレスポンシブモードなどでも使えますので、制作中にちょこっと確認なんてこともできるかも。

「Overlay Thumb Zone map bookmarklet for iOS Safari」 を Firefox のレスポンシブモードで起動した例

Thumb Zone Map について

Thumb Zone Map は Scott Hurff 氏によって 「Thumb Zone Templates」 として Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License の元に配布されているものを使わせていただいています。

テンプレートの画像はここからダウンロードできます (Dropbox)

関連エントリー

記事をここまで御覧頂きありがとうございます。
この記事が気に入ったらサポートしてみませんか?