ローディング中

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

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

JK

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

cacoo(カクー)

ogp_ja

https://cacoo.com/

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

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

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

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

moqups

スクリーンショット 2016-08-18 午後9.32.47

https://moqups.com/

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

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

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

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

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

 

keynote

Keynote

そうです、appleのkeynoteです。

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

http://keynotekungfu.com/

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

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

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

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

adobe comp cc

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

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

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

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

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

最後に

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

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

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

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

ホームページ制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3 E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.