どんなサイトも一発で「ワイヤーフレーム」に変換してしまうブックマークレット「Wirify」

他のサイトのデザインを研究するために、画像や文章のレイアウトを直線や四角などの簡単な記号で描いたワイヤーフレームに起こすことがありますが、この「Wirify」ブックマークレットを使えば、クリック一発でワイヤーフレームに変換してくれます。

インストールは公式ページから、赤丸のリンクをブックマークツールバーにドラッグ＆ドロップしましょう。
Volkside | Wirify homepage – The web as wireframes [Temporary mirror]

こんな感じになればインストール完了です。

後は目標のページでボタンをクリックするだけ。

このようにワイヤーフレーム表示となります。

以前紹介したサイトのスクリーンショットをキャプチャするためのFirefoxプラグイン「Screengrab」と組み合わせるとサイト全体のワイヤーフレームを取得することもできます。

よい学習はまず師匠を真似ることからといいます。色々なサイトのデザインを研究してみると何か発見があるかもしれません。

ソース：Volkside | Wirify homepage – The web as wireframes [Temporary mirror]

関連記事

人類の敵「IE6」のレンダリングを再現しレイアウトを崩壊させるブックマークレット「IE6ify」 – DNA

ウェブページ製作者は必見、HTMLやJavascript等のチートシート19個 – DNA

PCサイト上の画像をモバイル機器向けサイト用に自動変換、配信までしてくれるサービス「tinySrc」 – DNA

無料で簡単に画像データを最適化、がっつり容量を削減できるウェブアプリやフリーウェア26個 – DNA

あのトラウマがよみがえる……！Internet Explorerの「あのエラー」をJavaScriptで見事に再現 – DNA

iPhone経由でWi-Fi iPadでもネットサーフィンが楽しめるようになる「非テザリング」アプリ「CoBrowser」 – DNA

Tumblrをバックアップするためのツールやウェブサービス、スクリプトなどまとめ – DNA

縦横にスクロールしないと表示できないような巨大なWebページでも楽々キャプチャできるFirefoxアドオン「Screengrab」 – DNA

フリーウェア「iris」で「ファイルの保存」を限りなくラクにする – DNA

SSH接続でよく使われる「ユーザー名」と「パスワード」を収集し、1時間ごとにタグクラウドにして公開しているサイト – DNA

ネット上の画像やニュースを切り貼りして、記事を簡単に生成できるマイクロソフトのブログサービス「Montage」 – DNA

CUI環境のLinuxでDropboxを動作させる方法 – DNA

複雑に絡み合うコード……プログラムの進化を視覚化すると大変なことに – DNA

「本当に人気のあるプログラミング言語」ランキングを計測する方法と結果 – DNA