フリーランスでWEBの仕事をしていると、いかに制作効率を上げるかが重要になってきます。ワイヤーフレーム～デザインカンプまでをどれだけ縮められるかが勝負と言っても過言ではありません。
フルスクラッチでWEBサイトを制作する場合は、ワイヤーフレームはPowerPointや、cacooなどのWEBツールを使っていることが多いようです。
そして、デザインカンプはIllustratorかPhotoshopなどがほとんどです。そのデザインを元にマークアップと言って、いわゆるコーディング作業をして完成させる流れになります。
私のWEB制作スタイルは、WordPress上で動作するビジュアルビルダーを使います。簡単にいうとラフデザインさえあればデザインとコーディングが同時に出来てしまいます。（実際にはほとんどノンコーディングです）
※カスタムCSSの追加くらいはしますが。。。
ということで私の場合、お客さまにラフデザインを早くフィックスしてもらうかが決め手になります。そこで、今日は私がワイヤーフレーム（ラフデザイン）に使っているツールを紹介したいと思います。
ずばりそれは、Pingendo（ピンジェンドー） http://pingendo.com/
※現在はβ版としてPingendo4もダウンロードができます。若干インターフェースが違っていますが、新しい分パディングやマージンが設定できるようになっています。
Pingendo4 http://pingendo.com/v4-beta/
このツールは元々、Bootstrapでプロトタイプを制作するためのツールです。
基本操作もドラッグアンドドロップで制作できます。もちろん、ワイヤーフレームに必要はありませんが、HTMLもCSSも吐き出してくれます。（勉強にはなりますね）そりゃ、当然プロトタイピングツールですからね。
また、この手のツールにしては珍しくインストールして使うソフトで、その影響もありサクサクと快適に動作します。
OSはMacの他Windowsも32bit、64bitさらにはLinux版もあり、どなたでもご使用になれると思います。
一般的にワイヤーフレームには写真素材は挿入しないのですが、このPingendoは写真も入れることもできます。従って、状況によってお客さまとの打ち合わせでワイヤーフレームを制作しながらラフデザインまで見せることもできます。
ご自身の制作スタイルに合えばこのツールはとても味方になってくれるはずです。ということで、この記事がワイヤーフレームツールをお探しの方の参考になれば幸いです。
言葉の意味
【ワイヤーフレーム】
デザインの再現度は低。インターフェースはスケッチ／白黒&グレーで手っ取り早いコミュニケーションツール
【プロトタイプ】
デザインの再現度は中～高。インターフェースはインタラクティブ（動的）デザインで再利用可能な制作物
【モックアップ】
デザインの再現度は中～高。インターフェースはインタラクティブ（静的）デザインでコストはプロトタイプよりも安価
【デザインカンプ】
デザインの再現度は高。インターフェースはインタラクティブ（静的）デザインの完成見本
【Bootstrap】
Twitter社が開発したグリッドレイアウトレスポンシブデザインをテンプレート化したフロントエンドツール
