Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する
Webサイトのデザインを始める前に、レイアウトやページ内で使われる機能を「設計図」として作っておきます。ワイヤーフレームと呼ばれるWebサイトの骨組みをしっかり作っておくと、デザインする段階でスムーズに仕事がすすみます。またクライアントとの打ち合わせでも大活躍。ここではワイヤーフレームを作る為の便利なオンラインツールと「ワイヤーフレームは手描き派！」という人のためのPDFテンプレートを紹介します。
オンラインで使えるワイヤーフレーム作成ツール
iPlotz
とにかく多機能でおすすめ。ワイヤーフレームを作る他にプロジェクトマネージメントもできます。オンラインでシェアしたり、JPG, PNG, PDFでの書き出し可能。
トライアルをするにはまずトップページから「Get Started」ボタンをクリック。次のページの「try demo」をクリックします。
「Try iPlotz」をクリック
真ん中の列の「untitled」をクリックした後「Wireframe」を選択
ワイヤーフレーム作成画面はこんな感じ。左側のツールボックスには画像スペース、ビデオスペース、フォーム用テキストボックスやボタン、マップスペースなどをドラッグするだけで挿入できます。
オンラインでシェアするとコメントをつけたりできます。
一番すごい！と思ったのは出来上がったワイヤーフレームをHTMLで表示できること。ボタンをクリックしたり、jQueryを使ったアコーディオンやタブも実際に動作します。
Gliffy
前回サイトマップを作るためのツールを紹介した際にも登場した「Gliffy」。ワイヤーフレームも簡単につくれちゃいます。
サイトマップ（構成図）と同様、サクサク作れると思います。JPG, PNGで書き出し可能。
mockingbird
私はこのmockingbirdをいつも使用しています。タグクラウド、広告用バナー、ソーシャルメディアボタン（Twitter, Facebook, RSSなど）、フォーム用ボタン等多くの画像がそろっていてかなり使い易いです！
PNG, PDFで書き出し可能。ただし日本語は書き出す際にOSによっては文字化けするようです。（こちらのサイトでは日本語に問題なしと紹介されているので、登録前に確認してみてください）オンラインでシェアする時は日本語もちゃんと表示されていました。
ワイヤーフレーム作成用 PDFテンプレート
「絶対手描き派！」という人のためのPDFテンプレート。グリット付なので便利です。プリントしてご使用ください。
- ダウンロード – ワイヤーフレーム用テンプレート（横長）
- ダウンロード – ワイヤーフレーム用テンプレート（縦長）
- ダウンロード – ワイヤーフレーム用テンプレート（欄外余白付・A4）
- ダウンロード – ワイヤーフレーム用テンプレート（欄外余白付・A3）
時間を短縮して素敵なワイヤーフレームを作ってみてください！その他おすすめツールがあればぜひコメントください！
記事のトップへ。
関連する記事
コメント
コメントする-
はじめまして。いつもためになる情報ありがとうございます。mockingbird すごく便利ですね。今、ウェブサイトの勉強中なのでこういう情報は助かります。
Katsumi 2010/05/05 at 5:25 pm
トラックバック
トラックバックする-
[...] This post was mentioned on Twitter by Chisei Takenouchi, Kosuke Nagatsu, Naoya Misawa, コーディングヘルパー, Tyto@SEOモード and others. Tyto@SEOモード said: RT @webcreatorbox Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する | Webクリエイターボックス http://tinyurl.com/ybpfryh [...]
Tweets that mention Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する | Webクリエイターボックス -- Topsy.com 2010/01/25 at 11:51 pm
-
[...] Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する |… (tags: design) [...]
links for 2010-01-25 « 個人的な雑記 2010/01/26 at 7:03 am
-
[...] Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する [...]
Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する « DAYBREAK 2010/01/26 at 9:47 am
-
[...] ワイヤーフレーム（Webサイトのレイアウト）を作成 Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する [...]
初心者さんのためのWebサイト制作に役立つリンク集 | Webクリエイターボックス 2010/05/29 at 8:12 pm
-
[...] 「Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する」でも紹介したmockingbird。オンラインでワイヤーフレームを作成することができます。オンラインでシェアしたり、PNG、PDFでの書き出しも可能。いつも使ってます。 [...]
時間の節約になるWeb制作関連ツール 12+1 | Webクリエイターボックス 2010/07/12 at 12:27 pm
Loading ...
始めまして、
いつも拝見させて頂いております。
私は下記のツールをチーム内で使用しております。
「Cacoo」
http://cacoo.com/
複数人での編集作業も可能ですし、
なによりオブジェクトの見た目が可愛いのが素敵です。
もちろん、シンプルなオブジェクトもあるので
用途によって使い分けています。
san_59 2010/01/25 at 3:14 pm