クリック一発で既存サイトのワイヤーフレームを作成してくれるブックマークレット「Wirify」

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

公開されているサイトのワイヤーフレーム(ページレイアウト)をクリック一発と手軽に作れるブックマークレットWirifyが面白いツールだったので紹介。

スポンサーリンク
レクタングル(大)広告

Wirifyとは

Wirify – The web as wireframes

Wirifyは、あらかじめブラウザにブックマークレットを登録しておくことにより、既存WEBサイトのページを手軽にワイヤフレームに変換してくれるツールです。

例えば、以下の当サイトトップページでWirifyを使用したとします。

寝ログ 寝ながら出来るコトや使えるモノを紹介

すると、クリック一発で以下のようなワイヤフレームを作成することができます。

Wirify wireframe - 寝ログ 寝ながら出来るコトや使えるモノを紹介

アマゾンとかだと、

Amazon 本, ファッション, 家電から食品まで アマゾン

こんな感じで表示されます。

Wirify wireframe - Amazon 本, ファッション, 家電から食品まで アマゾン

作成したワイヤーフレームは、OmniGraffleBalsamiqVisio、SVG形式で出力することができますが、エクスポートはすべて有料になります。

ワイヤーフレームのエクスポートは有料

無料のまま何かしらに利用する場合は、キャプチャソフトなどでスクリーンショットを撮影する必要があるかもしれません。

Wirifyの使い方

Wirifyを利用するには、事前にブラウザ上で簡単な設定をする必要があります。

まずは、Wirifyに移動してください。

あとは、ページ上にある「Wirify by Volkside」と書かれたブックマークレットリンクを、ブラウザのブックマークバーにドラッグ&ドロップします。

ブックマークレットリンクをブックマークバーにドラッグ&ドロップ

すると、ブラウザのブックマークバーに以下のようなブックマークレットボタンが作成されます。

Wirifyブックマークレットが作成された状態

ブックマークレットは、ブックマークバーではなく、ブラウザのブックマークに登録して利用することもできます。

あとは、ワイヤーフレームを作成したいWEBページを開いて、先程ブックマークバーに登録した、ブックマークレットボタンをクリックします。

楽天ページでWirifyを使う

すると、以下のようなワイヤーフレームをクリック一発で作成することができます。

楽天ページでWirifyを使った結果

Greek Original Page

Wirifyのメニューから「Greek Original Page」を選択することで、

Greek Original Page

以下のような表示にすることもできます。

楽天でGreek Original Page機能を使った状態

ブラウザでスクリーンショットを撮る

ただ先程も書いたように、このWirifyで作成したワイヤーフレームの出力は、有料となっています。

無料利用のまま、画像で出力するので良いのであれば、以下のようなブラウザ拡張を利用するとスクリーンショットを撮影することができます。

Google Chromeベースブラウザの場合

Firefoxの場合

ただし、スクリーンショットのみでは右上のブックマークメニューは表示されたままになります。

まとめ

こんな感じで、Wirifyを利用すれば、結構手軽にワイヤーフレームを作成することができます。

編集できる形式でのエクスポートは、有料になってしまいますが、作成する手間を考えると「購入した方が楽」なんて場合もあるかもしれません。

参考 Wirify – Wirify Pro and Wirify credits

というわけで、「このサイトを参考にモックアップを作成したいな」とか「サイト構造の説明用にワイヤーフレーム状態のスクリーンショットを撮りたい」なんて場合には、良いかも。

サイト Wirify