Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する

Webサイトの骨組み: ワイヤーフレーム

Webサイトのデザインを始める前に、レイアウトやページ内で使われる機能を「設計図」として作っておきます。ワイヤーフレームと呼ばれるWebサイトの骨組みをしっかり作っておくと、デザインする段階でスムーズに仕事がすすみます。またクライアントとの打ち合わせでも大活躍。ここではワイヤーフレームを作る為の便利なオンラインツールと「ワイヤーフレームは手描き派!」という人のためのPDFテンプレートを紹介します。


オンラインで使えるワイヤーフレーム作成ツール

iPlotz

iplotz ワイヤーフレーム作成ツール

iPlotzのWebサイト

とにかく多機能でおすすめ。ワイヤーフレームを作る他にプロジェクトマネージメントもできます。オンラインでシェアしたり、JPG, PNG, PDFでの書き出し可能。

iplotzのトライアル

トライアルをするにはまずトップページから「Get Started」ボタンをクリック。次のページの「try demo」をクリックします。

iplotzのトライアル2

「Try iPlotz」をクリック

iplotzのトライアル3

真ん中の列の「untitled」をクリックした後「Wireframe」を選択

iplotz ワイヤーフレーム作成画面

ワイヤーフレーム作成画面はこんな感じ。左側のツールボックスには画像スペース、ビデオスペース、フォーム用テキストボックスやボタン、マップスペースなどをドラッグするだけで挿入できます。

iplotzにコメントをつける

オンラインでシェアするとコメントをつけたりできます。

ワイヤーフレームをHTMLで表示

一番すごい!と思ったのは出来上がったワイヤーフレームをHTMLで表示できること。ボタンをクリックしたり、jQueryを使ったアコーディオンやタブも実際に動作します。

Gliffy

Gliffy ホームページ

GliffyのWebサイト

前回サイトマップを作るためのツールを紹介した際にも登場した「Gliffy」。ワイヤーフレームも簡単につくれちゃいます。

gliffyでワイヤーフレームを作成

サイトマップ(構成図)と同様、サクサク作れると思います。JPG, PNGで書き出し可能。

mockingbird

mockingbird

mockingbirdのWebサイト

私はこのmockingbirdをいつも使用しています。タグクラウド、広告用バナー、ソーシャルメディアボタン(Twitter, Facebook, RSSなど)、フォーム用ボタン等多くの画像がそろっていてかなり使い易いです!

mockingbirdのワイヤーフレーム作成画面

PNG, PDFで書き出し可能。ただし日本語は書き出す際にOSによっては文字化けするようです。(こちらのサイトでは日本語に問題なしと紹介されているので、登録前に確認してみてください)オンラインでシェアする時は日本語もちゃんと表示されていました。

ワイヤーフレーム作成用 PDFテンプレート

「絶対手描き派!」という人のためのPDFテンプレート。グリット付なので便利です。プリントしてご使用ください。

ワイヤーフレーム作成テンプレート1

時間を短縮して素敵なワイヤーフレームを作ってみてください!その他おすすめツールがあればぜひコメントください!

シェアする

コメント

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)