webds012の倉庫

今日はWeb系のお仕事をする際に必要になると思われるワイヤーフレーム作成ツールについてのお話です。

ワイヤーフレームとはWebサイトを設計する際に作る骨組みのことです。
今私がやっている仕事はデザインを外注して納品物をもとにHTML・CSSコーディングをするのですが、デザイナーさんとの打ち合わせ用にワイヤーフレームを用意したいとのこと。

普段はガチでこれで作ってます。


手書きだと内部資料としてはまだ許せるけど外部の方との打ち合わせには使えない。メールでやりとりしたいというのもあるので電子データで〜という話になり、使ったのはこれ

意外とExcelでワイヤーフレームを作る人は多いそうで、デザイナーさんに渡したあとも取り込みやすいとかいう話があったりなかったり。

Fireworksとか画像ソフトで作成できればいいんですが、予算節約が叫ばれる今日、職場で与えられた自分のPCにソフトが入ってる保障なんてどこにもない。私の仕事はHTMLコーディングなんですがOfficeが入ってただけでもラッキーという感じでそれ以外はフリーソフトでなんとかしてます。

Officeも入ってない場合はどうしたら？という方におすすめなオンラインサービスがこちら

Cacoo

ワイヤーフレームを作成できるオンラインサービスはたくさんありますが、Cacooを紹介する個人的な理由

1.日本語版サイトがある
この手のサービスは英語オンリーの物が多くて探してて泣けました。
使い方が把握できれば何語で書かれててもいいんでしょうけど仕事でテンパってるときに言語と格闘してる余裕はないのでやっぱり日本語ってのが重要。

2.オンラインで他の人と共有できる
作ったものをメールで送ったりしなくてもログインして確認してもらったりそのまま手直したりできる！

3.無料
作れるワイヤーフレームが25枚までと上限がありますが無料で使えます。
ちょっとしたものを作りたいときとか個人で使う分には十二分だと思います。
学生さんや教員の方なら６月３０日まで無料で使えるアカデミックプランがあります。

4.操作が簡単
仕事でテンパってるときに見つけて余裕のない状況での操作でも抵抗なく使えました。
この手の単調描画とかExcelで充分とか思ってたけどワイヤーフレームを作るだけという点で考えるとセルをいちいち動かしたりしなくていい分こっちのほうが使いやすいと思いました。

ログインするとこんな感じの画面に。


編集画面はこんな感じ

ステンシルの枠内の□とか○とか図形の形をドラッグ＆ドロップすると図形が描けます。

これで慣れたら英語表示のものも使えるようになるかなー？