ワイヤーフレーム制作に便利なツールを集めてみました。

(追記 2016/12/14 adobe comp追加しました)

ワイヤーフレーム制作に便利なツールを集めてみました。

今日も皆様のアイドルマンノです。

幼い頃、具体的には中学校くらいからの夢が

「生まれ変わったら女子高生に生まれ変わりたい」

一度死んで、人生をやり直さないといけないので今世では実現しなさそうな夢だなぁ。と

死んでも死に切れないほど無念なマンノです。

さて今回のテーマはこちら。

web制作に必須のワイヤーフレーム

web制作のみならずデザイン制作において何かとお世話になるワイヤーフレーム。

制作に取り掛かる前にざっくりと全体像をとらえたり、出来上がりのイメージを捉えるのにとても便利なツールです。

私もここ最近ワイヤーフレームばかり作り続けているくらいお世話になっています。

  • 紙に手書きでワイヤーフレームを作っている
  • photoshopやIllustratorでワイヤーフレームを作っている。

そんな方も少なくないかと思います。

私は主にCacooを使うのですが、ワイヤーフレーム作成ツールが沢山存在しています。

制作スタイルに合わせてワイヤーフレーム作成ツールも選ぶと作業効率アップにも繋がります。

今回はそんなワイヤーフレームが無料で作れるツールを紹介したいと思います。

ワイヤーフレーム作成に便利なツール4選

cacoo(カクー)

ワイヤーフレーム制作に便利なツールを集めてみました。

弊社でも導入しているのがcacoo。

複数メンバーでリアルタイムで共同編集が可能なのと、

チャットもできたりするのが特徴です。

他言語対応しているので、外国人スタッフがいても問題なく使えるのが嬉しいポイントです。

moqups

ワイヤーフレーム制作に便利なツールを集めてみました。

ワイヤーフレームを作り始めるまでに、

うだうだあっち行ったりこっちいったりしなくていいのが嬉しいこちらのツール

日本語には対応していませんが、アイコンの種類が豊富だったり、

会員登録をしなくても使い始めることができたり、

英語がわからなくても直感的に使えるようにレイアウトされているのが嬉しいポイントです。

 

keynote

ワイヤーフレーム制作に便利なツールを集めてみました。

そうです、appleのkeynoteです。

プロトタイプやワイヤーフレームを作るのにとても便利なんです。

ツールキットなどを$12で購入することができるので使ってみてはいかがでしょうか。

僕自身プレゼン資料を作る時はkeynoteを使うのですが、

こういうツールキットがあるのであれば、

keynoteでワイヤーフレームや高精度なプロトタイプを作るのも良いんじゃないかなと思いますね。

adobe comp cc

【カンプ作成に】Adobe Comp CCの神っぷりがヤバかった。

Adobeが無料で提供しているアプリAdobe Comp CC

ipadやiphoneでサクッとカンプを作成することができます。

上記の記事でも詳しく触れていますので興味があるかたはご参照下さい。

今やPCがなくても何でもできるようになったのが驚きですね。

最後に

まだまだ紙でワイヤーフレームを作ることも多いかと思いますが、

こういったツールを使い共有化やデータを残すことで、見返すことも出来るほか。

ワイヤーフレームをしっかりと作り込めばデザイナーとのやりとりが、かなりスムーズになります。

言葉だけで伝えようとせず、こういったツールで作業効率かを計ってみてはいかがでしょうか。

PR

Instagram Feed

Load More
Something is wrong. Response takes too long or there is JS error. Press Ctrl+Shift+J or Cmd+Shift+J on a Mac.

Instagram

WEB DIRECTOR

マンノカズミチ

バンドマンを経て、台湾で日本語教師をしてましたが、2016年より株式会社AWESOMEにてWEB開発とコンテンツ制作を担当しております。SEO対策と記事執筆が得意分野です。こっそり台湾と日本のハーフです。

他の投稿を見る →