公開されているサイトのワイヤーフレーム（ページレイアウト）をクリック一発と手軽に作れるブックマークレットWirifyが面白いツールだったので紹介。
目次
Wirifyとは
Wirifyは、あらかじめブラウザにブックマークレットを登録しておくことにより、既存WEBサイトのページを手軽にワイヤフレームに変換してくれるツールです。
例えば、以下の当サイトトップページでWirifyを使用したとします。
すると、クリック一発で以下のようなワイヤフレームを作成することができます。
アマゾンとかだと、
こんな感じで表示されます。
作成したワイヤーフレームは、OmniGraffle、Balsamiq、Visio、SVG形式で出力することができますが、エクスポートはすべて有料になります。
Wirifyの使い方
Wirifyを利用するには、事前にブラウザ上で簡単な設定をする必要があります。
まずは、Wirifyに移動してください。
あとは、ページ上にある「Wirify by Volkside」と書かれたブックマークレットリンクを、ブラウザのブックマークバーにドラッグ＆ドロップします。
すると、ブラウザのブックマークバーに以下のようなブックマークレットボタンが作成されます。
あとは、ワイヤーフレームを作成したいWEBページを開いて、先程ブックマークバーに登録した、ブックマークレットボタンをクリックします。
すると、以下のようなワイヤーフレームをクリック一発で作成することができます。
Greek Original Page
Wirifyのメニューから「Greek Original Page」を選択することで、
以下のような表示にすることもできます。
ブラウザでスクリーンショットを撮る
ただ先程も書いたように、このWirifyで作成したワイヤーフレームの出力は、有料となっています。
無料利用のまま、画像で出力するので良いのであれば、以下のようなブラウザ拡張を利用するとスクリーンショットを撮影することができます。
Google Chromeベースブラウザの場合
Firefoxの場合
まとめ
こんな感じで、Wirifyを利用すれば、結構手軽にワイヤーフレームを作成することができます。
編集できる形式でのエクスポートは、有料になってしまいますが、作成する手間を考えると「購入した方が楽」なんて場合もあるかもしれません。
参考 Wirify – Wirify Pro and Wirify credits
というわけで、「このサイトを参考にモックアップを作成したいな」とか「サイト構造の説明用にワイヤーフレーム状態のスクリーンショットを撮りたい」なんて場合には、良いかも。
サイト Wirify
