1クリックで見ているページをワイヤーフレームに変換

はじめに

  • 表示しているページを、1クリックでワイヤーフレームに変換するブックマークレットのご案内です。
  • ページを表示して、ブックマークレットをクリックすると、下記の様なワイヤーフレームに変換します。

見ているページをこのように変換できます

  • ブックマークレットをクリックする毎に、カラー、彩度50%、グレースケールと繰り返し変化します。
元ページ元ページ
カラーカラー
彩度50%彩度50%
グレースケールグレースケール

PC用ページ全体の変換サンプルです

  • Chromeの機能により、もっと長いスクリーンショットを撮ることも出来ます。
  • 画像部分は全てSVGデータなので、PDFのように拡大しても奇麗なまま見られます。
  • 画像部分は、元の作りにより色を変えて表示しており、制作時の参考などに出来ます。
    • 赤 : タグ : img、image、picture、input
    • 緑 : タグ : iframe
    • 橙 : タグ : video、audio、svg、canvas... など
    • 青 : css プロパティ : background
    • 桃 : css 疑似要素 : before、after
Google 検索結果のワイヤーフレーム
Yahoo トップページのワイヤーフレーム
お名前.comのワイヤーフレーム
三井住友銀行のワイヤーフレーム

色々な作りのページに対応しています

ヤフオクのワイヤーフレーム
Yahoo 知恵袋のワイヤーフレーム
クックパッドのワイヤーフレーム
日本経済新聞のワイヤーフレーム
三井住友銀行のワイヤーフレーム
ワイヤーフレーム
日本旅行のワイヤーフレーム
じゃらんのワイヤーフレーム

スマホ用ページも変換できます

  • Chromeのデベロッパーツールにてデバイスを設定して変換しています。
Google 検索結果のワイヤーフレーム
Yahoo トップページのワイヤーフレーム
amazonのワイヤーフレーム
三井住友銀行のワイヤーフレーム

ご利用方法

  1. こちらのリンク →「WF」をブックマークに登録して下さい。
    (ブックマークバーにドラッグ&ドロップで登録すると便利です)
  2. ワイヤーフレーム化したいページを表示します。
  3. 最下部までスクロールしてページの内容を全て表示し、再度スクロールを最上部に戻します。
    ※スライドやフェードなどで表示する内容は、全て表示してからでないと、元が存在しないので変換ができません。
  4. お気に入りに登録したブックマークレットをクリックすると、ワイヤーフレームに変換します。
    マウスアウトでワイヤーフレーム表示、オンマウスで元ページ表示に切り替わります。
    ※クリック時の動作などは、機能しなくなります。
  • 動作確認は、Chrome のみ で行っております。
  • ワイヤーフレーム化すると、ページ内の各機能は、動作しなくなります。
  • 元のページに表示を戻したい場合は、ページをリロードして下さい。
  • スクリーンショットを撮る際は、Chromeに付いている下記の何れかの機能が便利です。
    「Capture screenshot」か「Capture full size screenshot」
    ツール自体への機能追加を試みましたが、上記機能より奇麗に出来ませんでしたので追加致しません。

注意事項など

  • このツールは、ワイヤーフレームを作る際の元となるデータを作る物ではなく、
    ワイヤーフレームを作る際の参考程度にお使い頂けばと考えております。
  • このツールは、必ず、確実、完璧、奇麗に変換できる物ではなく、
    ページにより奇麗に変換できない場合や、ツールを使用拒否しているページもあります。
  • 下記に該当するページは、最初のクリックでは部分的に変換しない場合がありますが、
    殆どのページでは、少しスクロールすると変換されます。
    • スクロールに合わせてコンテンツを表示するページ。
    • 一定時間おきにコンテンツを表示したり切り替えたりするページ。
    • スクロールに合わせて移動するコンテンツがあるページ。
    • その他、css、javascript などで複雑に構成されているページ。