Webサイトを作る時に必ず必要になってくるサイトのワイヤーフレーム。私がサイトをディレクションする際も必ずワイヤーフレームをきっちりと書き起こし、デザイン→コーディングへ入っていきます。
ワイヤーフレームはサイトの設計図
ワイヤーフレームを作らずに感覚的にサイトの設計を行うと、デザインの段階での出戻りが発生したり、ユーザー動線をきっちりと定義できなくなってしまいます。
ワイヤーフレームはいわば後々の作業をスムーズに進めるための設計図であり、デザインをする前にユーザビリティを決定する大きな要素となります。
参考：スマートフォンECサイトのデザイン例とワイヤーフレームの重要性
私は今までこのワイヤーフレームをパワーポイントで作成してきました。しかしパワーポイントは設計図を作る専用のソフトではないので、図を微調整したり、ボタンを作ったりするのには向いていませんでした。
Cacooで簡単にワイヤーフレーム作成
Cacoo – Web上で図の作成とリアルタイムコラボレーション
Cacooでは「シート」という単位でワイヤーフレームを作成することができ、無料プランであれば25枚まで、有料プランは無制限に作ることができます。
使い方はいたって簡単で、エクセルやパワーポイントで図形を作るのと同じ感覚でコンテンツを配置することができます。
Cacooの便利なところはWebサイトに必ず必要になってくるボタンやリストメニュー、タブメニューなどのデザインが既に用意されており、それらを自由に配置することができます。
「ステンシル」というメニューからワイヤーフレームを選択すると様々なパーツが用意されています。
これらを使うことで、ワイヤーフレームからデザインに起こす際にサイトのニュアンスや動線をデザイナーに正確に伝えることができ、よりスムーズにディレクションをすることができます。
さらに他のユーザーともワイヤーフレームを共有することができるので、クライアントへ共有する時にも使えますね。
すごいのは他のユーザーが編集している時にもリアルタイムでその動作が反映される点です。社内で複数人で確認しながら作業するのにも便利です。
編集している人の名前と編集しているパーツが表示されるので分かりやすい！
このCacooに出会う前にも様々なワイヤーフレーム作成のサービスを見て来ましたが、こちらが一番使いやすく、複数人での作業をするには最適でした。
※画像としてエクスポートする機能などもありますが、無料プランでは5枚までに制限されているのでご注意ください。
