（追記 2016/12/14 adobe comp追加しました）
今日も皆様のアイドルマンノです。
幼い頃、具体的には中学校くらいからの夢が
「生まれ変わったら女子高生に生まれ変わりたい」
一度死んで、人生をやり直さないといけないので今世では実現しなさそうな夢だなぁ。と
死んでも死に切れないほど無念なマンノです。
さて今回のテーマはこちら。
目次
web制作に必須のワイヤーフレーム
web制作のみならずデザイン制作において何かとお世話になるワイヤーフレーム。
制作に取り掛かる前にざっくりと全体像をとらえたり、出来上がりのイメージを捉えるのにとても便利なツールです。
私もここ最近ワイヤーフレームばかり作り続けているくらいお世話になっています。
- 紙に手書きでワイヤーフレームを作っている
- photoshopやIllustratorでワイヤーフレームを作っている。
そんな方も少なくないかと思います。
私は主にCacooを使うのですが、ワイヤーフレーム作成ツールが沢山存在しています。
制作スタイルに合わせてワイヤーフレーム作成ツールも選ぶと作業効率アップにも繋がります。
今回はそんなワイヤーフレームが無料で作れるツールを紹介したいと思います。
ワイヤーフレーム作成に便利なツール４選
cacoo(カクー)
弊社でも導入しているのがcacoo。
複数メンバーでリアルタイムで共同編集が可能なのと、
チャットもできたりするのが特徴です。
他言語対応しているので、外国人スタッフがいても問題なく使えるのが嬉しいポイントです。
moqups
ワイヤーフレームを作り始めるまでに、
うだうだあっち行ったりこっちいったりしなくていいのが嬉しいこちらのツール
日本語には対応していませんが、アイコンの種類が豊富だったり、
会員登録をしなくても使い始めることができたり、
英語がわからなくても直感的に使えるようにレイアウトされているのが嬉しいポイントです。
keynote
そうです、appleのkeynoteです。
プロトタイプやワイヤーフレームを作るのにとても便利なんです。
ツールキットなどを$12で購入することができるので使ってみてはいかがでしょうか。
僕自身プレゼン資料を作る時はkeynoteを使うのですが、
こういうツールキットがあるのであれば、
keynoteでワイヤーフレームや高精度なプロトタイプを作るのも良いんじゃないかなと思いますね。
adobe comp cc
Adobeが無料で提供しているアプリAdobe Comp CC
ipadやiphoneでサクッとカンプを作成することができます。
上記の記事でも詳しく触れていますので興味があるかたはご参照下さい。
今やPCがなくても何でもできるようになったのが驚きですね。
最後に
まだまだ紙でワイヤーフレームを作ることも多いかと思いますが、
こういったツールを使い共有化やデータを残すことで、見返すことも出来るほか。
ワイヤーフレームをしっかりと作り込めばデザイナーとのやりとりが、かなりスムーズになります。
言葉だけで伝えようとせず、こういったツールで作業効率かを計ってみてはいかがでしょうか。
