wireframe-zoning.jpg by luc legay, on Flickr

こんにちは、久保田です。

ウェブサイトのデザインやコーディングを始める前にワイヤフレームは作っていますか?ワイヤフレームは、以下の様な内容を設計するのに利用されます。

・ページ間の遷移
・ページの内容
・ページの大まかなレイアウト

これらの項目についてチームやクライアントと予め合意しておくと、後に続くビジュアルデザインやコーディング時の前提を共有でき、作業をスムーズに進めることが出来ます。これからどのようなウェブサイトを作るのか?ということをきちんと共有することでデザイナーやコーダーや関係者と意思統一することができるわけです。

この記事では、このワイヤフレームを書けるツールやウェブサイトを紹介します。

OmniGraffle

古くからある使いやすいMacOSX用のアプリケーションです。ワイヤフレームだけではなく様々な図を書けます。Standard版が$99ドル、Professional版が$199ドルしますが、筆者はワイヤフレーム作りにはこれを使っています。

Cacoo

こちらもワイヤフレームだけではなく図全般を書けるウェブサービスです。こちらはフリーで利用できます。

Balsamiq

ウェブからもローカルからも利用できるワイヤフレーム作成用のツールです。インストール版は$79ドルします。myBalsamiqを利用することで、ブラウザ上でチームでワイヤフレームを作れて便利です。

wireframe.cc

ウェブサイトにアクセスするだけですぐに使える手軽なサービスです。ウェブサイトやツールの雰囲気がポップで魅力的です。フリーで利用できます。

Google Drawing

Google Docsから利用できる図の描画ツールです。こちらもフリーでかつGoogle Docsと同様にチームで共有しながら作業できます。

HotGloo

ワイヤフレーム作成に特化したウェブサービスです。ワイヤフレーム作成だけに特化しているだけあって、チーム作業はもちろんのこと、ワイヤフレームに様々な状態を定義したりインタラクションを付け足したり刷ることが出来ます。SMALLプランだと月$14ドルで利用できます。

終わりに

ワイヤフレームを予め作っておくと後の作業を助けてくれます。チームでも個人でも使いやすいツールを使いたいですね。以上ワイヤフレームを作成できるツールやサービスを紹介しました。