1クリックでどんなWebページもワイヤーフレームに変換するWirfly

   

2016-05-28_23h26_47

ワイヤーフレームとは、Webサイトの要素や機能、情報を画面内でどう配置するかを示したサイト設計図面です。商用にWebサイト構築をしている場合はクライアントとの認識合わせ、或いは制作関係者内での共有手段として定着しています。

Web制作者のためのワイヤーフレーム講座「役割と考え方」編 | 株式会社LIG
オハヨウからオヤスミまで。ディレクターの鮫島です。 今回から全3回にわけて「ワイヤーフレーム」の考え方や書き方などをお届けいたします。 第1回となる今回は、ワイ...

こう書くと何か難しいもので普通のWebユーザには関係なさそうと思いますね。筆者もそうです。しかし、実際にWebサイトを使うのはWebユーザです。このサイトは使いやすい、見やすいとか、逆に妙に使い難いかも…とか感覚的なものが、実は要素配置によるところが多かったりします。Webページをワイヤーフレーム表示にすると、視覚的にそれが捉えやすくなります。

今回は1クリックで今見ているどんなWebページをワイヤーフレームに変換するWirflyを紹介します。

Wirflyブックマークレットの設定

  1. WirflyのWebサイトを開きます。
  2. ページ内に大きく表示されている「Wirify by Volkside」のリンクをドラッグしてWebブラウザのブックマークバーにドロップします。Wirflyのボタンが出来ます。
    Wirflyブックマークレットの設定

    Wirflyブックマークレットの設定

Wirflyの使い方

  1. ブックマークバーに出来たWirflyボタンをクリックします。例えばYahooJapanで行ってみました。
    YahooJapan

    YahooJapan

  2. すると以下のように今開いているWebページが即座にワイヤフレーム表示に変換されます。
    ワイヤフレーム化

    ワイヤフレーム化

  3. 右上の囲み部分の左下にあるWirflyと書かれた部分をクリックすると操作用のメニューが表示されます。有償のProであればこのワイヤフレームをSVG形式やVisio形式で出力したりすることが出来ます。
  4. 元に戻したい場合は画面内のいずれかの部分をクリックします。(メニューからCloseを選択でも出来ますが、画面クリックの方が手軽です)

終わりに

ぶっちゃけ筆者はこの手のレイアウトのあるべきとかデザインに無頓着…というか無関心でした。今もありもののテーマをほぼそのまんま使っているくらいですから…。とはいえ、Blogの設置者ではなく、Webユーザとしては無意識ながらWebサイトに対して相当シビアに使用感や利便性を求めています(よくよく顧みてみないと思い至りませんでしたが)。

こういう気軽に使えるツールもある訳ですから、普段よく目を通しているサイトや、一見でも「おっ、これはいい!」と思うようなサイトに出会ったときに構造を見るてみようかなと思いました。

適宜覚書-Fragmentsは、筆者が興味をもった様々な情報やネタを筆者が忘れても後で思い出せるよう覚書として公開するBlogです。Google Chrome拡張、Facebook、Google、Twitter、Windows、各種Webアプリなどを扱うことが多いです。この覚書が、もし何かお役立ちになれば幸いです。

 - Bookmarklet