WEBのサイトを1クリックでワイヤーフレーム化するブックマークレットWirify
目次
Wirifyとは?
WirifyはWEBのサイトを1クリックでワイヤーフレーム化するブックマークレットです。
ブックマークレットとは?
ブックマークレットとはウェブブラウザのブックマークなどから起動して、簡単な処理を行う簡易的なプログラムです。
Wirifyのインストール方法
Wirifyのインストール方法を説明します。
wirifyにアクセスし、「Wirify by Volkside」をブザウザーのメニューにドラッグして登録します。
ブックマークメニューに追加されした。
事前の設定は以上です。
Wirifyのインストールの使い方
Wirifyの使い方は簡単です。
amazonをワイヤーフレームしてみる
Amazonでためしてみます。
ページを表示した状態で、ブックマークメニューに追加しておいた、ボタンをクリックします。
すると対象のサイトがワイヤーフレーム化されてました?
自サイトをワイヤーフレーム化してみる
元サイト表示はこちらです。



ワイヤーフレーム化されました。



競合サイトの具体化→抽象化に役立てる
で、ワイヤーフレーム化してどうするの?と思った人もいるでしょう。
たとえば、競合サイトのデザイン分析に使います。
商品を販売するためのランディングページを作成するとき、全くの0からではなく、
ほかのサイトを参考にしながら作成するケースも少なくあります。
例えば、の流れで活用します。
- 競合解析を行うとき、参考サイトの具体化された要素を「抽象化」します。
- 次に「抽象化」した情報を自分の作りたい「具体化」に落とし込む。
デザイン、画像、文章をパクのとはとは全く異なります。
そのため、販売対象は「時計」をでも参考にしたWEBサイトは「化粧品」というような場合もあります。
最後に
WEBのサイトを1クリックで簡単にワイヤーフレーム化するブックマークレットWirifyを紹介しました。