人気の株主優待

weblovelog

ウェブ業界人のためのウェブ情報サイト。

一瞬でWebサイトからワイヤーフレーム生成してくれる【Wirify】がすごい!

   

はじめに

今見ているWebサイト!

「どういう作りしているんだろ?」

「素敵なレイアウトだなぁ〜」

「デザインの勉強に真似してみたいっ!!」

なんてことありませんか?

そんな時は、今見ているWebサイトからワンクリックでワイヤーフレームを生成してくれるブックマークレット「Wirify」がとっても便利ですよ。

 

私の場合はクライアント様から、

「既存サイトをレスポンシブウェブサイトにしてほしい。でもパソコンサイトはそのままで!!」

との依頼を受けたため、この「Wirify」と出会うことができました。

既存サイトはもともとネット上に存在しているので、ぽんっとワンクリックでワイヤーフレームを作成してしまえば、パソコン用のワイヤーフレームの出来上がりっ!

超ー楽っ!感動したので、この感動をおすそわけです。

使用方法

  1. 「Wirify」http://www.wirify.com/ のサイトへGO!
  2. 「Wirify」をブックマークツールバーに入れるwirify

    図のように太デカ文字で書かれた Wirify by Volkside を自分のブックマークツールバーにドラッグ&ドロップ。(まさしく上記図の要領です)

    ブックマークツールバーが見つからない人は、メニューバーの「表示」>「ブックマークバーを常に表示」で表示されるかと。(Mac の Chromeの場合)

  3. モックアップしたい(ワイヤーフレームを作成したい)Webサイトを表示し、ブックマークツールバーに表示されている「Wirify by Volkside」をクリック。
  4. どうですか?Webサイトがワイヤーフレームになって表示されましたか?
  5. 画面上でマウスカーソルを乗せると、ワイヤーフレームの要素が表示されます。【注意】ワイヤーフレーム上をクリックすると、元のWebサイトに戻ってしまいます。
  6. モックアップを保存、共有したい場合には、スクロールキャプチャできるChrome拡張機能を使うと上手く保存できました!!

 

 

 

 

 - WEB, web便利機能, レスポンシブウェブデザイン

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

  関連記事