Hatena::ブログ(Diary)

Webデザインの勉強メモ | しまWeb このページをアンテナに追加 RSSフィード Twitter

Webデザインの勉強メモとして書いている、しまWebのブログです。

2013-01-29

表示したWebサイトを一瞬でワイヤーフレーム化するブックマークレット「Wirify」

Webサイトがブックマークレット「Wirify」でモックアップ

Webサイトからワイヤーフレームを生成し、Webデザインの勉強に役立てられるブックマークレット「Wirify」です。

f:id:island-web:20130129033525j:image

使い方
  1. 「Wirify」をブックマークツールバーに入れます
  2. モックアップしたいWebサイトを表示し、「Wirify」をクリック
  3. Webサイトがワイヤーフレームになって表示されます
  4. ワイヤーフレーム上をワンクリックで、元のWebサイトに戻ります
ニューヨークタイムズをワイヤーフレーム化

例えば、New York Times は下図のようにワイヤーフレーム化されます。

f:id:island-web:20130129033523j:image:w600

「Wirify」の利用方法

ワンクリックでワイヤーフレームが作成できる「wirify」には、様々な利用方法が考えられます。

Webデザインの勉強

「ワイヤーフレームって何?」「どうやって作るの?」というレベルでも、実際のWebサイトをワイヤーフレーム化してみることで、リアルサイトとワイヤーフレームの関係がわかります。
自分が実際にワイヤーフレームを制作する際の、有益な参考となります。

既存サイトの分析

新規Webサイト制作の際には、同業の既存サイトを分析する必要があります。
同業サイトを収集し、ワイヤーフレーム化して構成を検証することで、新規サイトのデザインや内容の方針が立てられます。

Webサイトのリニューアル

Webサイトの構成を見直したり修正する際に、「wirify」のワイヤーフレームで資料を作成。それを基にすれば、簡単に指示書を作ることが出来ます。

便利なWebサービスは積極的に利用して、効率的なWebサイト制作の手助けにしたいですね。
有料版のブックマークレット「Wirify」をゲットすると、編集可能になったり、もっと多機能になるようです。

はてなユーザーのみコメントできます。はてなへログインもしくは新規登録をおこなってください。