2015年のこと、システム開発（CMS）を伴うサイト制作を担当しました。
当社が舵取りを行って（サイト設計、運用設計、総企画デザイン）、システム会社がCMS開発を行いました。
こういった分散体制で注意しなければならないのは仕様をぶれさせないことです。
そのためワイヤーフレームツールを導入しました。
Contents
ワイヤーフレームとは
ワイヤーフレームはホームページをどのように構成していくかを具体的に図示するものです。
ボタンはどこにあって、どのような内容の文章が入るか等、プランニングの段階で最も重要なアウトプットになります。
簡単に言うと「HPの設計図」ですね。
「ワイヤーフレーム」はクライアントとの意識あわせばかりではなく、制作プロジェクトの参加スタッフの意識あわせをするために、無くてはならないものです。
クライアントによっては、いきなりデザインを要求してくる場合もありますが、まともな仕事であれば必ずワイヤーフレームの制作からスタートします。
メモ
ワイヤーフレーム（モックアップ）
WEBサイトの各ページ要素の骨組み。アイデアを視覚化する最初の工程で作成するもの。厳密にはワイヤーフレームとモックアップを別物としてとらえる場合もあります。モックアップの方が最終デザインに近いものです。
ワイヤーフレームツール
私が試したのは以下のツールです。
Balsamiq
手書き風のワイヤーフレームが作れるツールです。
ボタンやウインドウ等の手書き風パーツがたくさんそろっています。
出来上がりのワイヤーフレームの雰囲気が好きだったのですが、パーツが少し足りない気がして利用を断念しました。
Wireframe.cc
簡単な図形パターンが用意されていますので、時間をかけずにサクッとワイヤーフレームを作りたい人向きのツールです。
これも有料版を試しました。
しかし、1点欠点があって利用を断念しました。
それはPDFデータで出力した場合に文字化けを起こしてしまうという致命的なものです。
私が使用したのは3年前なので、現在は対応済みかもしれませんが、この点さえなければ使いやすさからいって、魅力的なツールだと思います。
参照 Wireframe.cc
Cacoo
ページ構成も出来るし、ネット共有も出来ます。
さらにメイドインジャパンの安心感。
これに決めた！…と思ったのですが、お客様がこのツールを使えず、ネット共有が宝の持ち腐れに終わりました。
遠隔地プロダクションとの連携は非常にスムーズでした。
参照 Cacoo
moqups
私が仕事でよく使っているツールです。
パーツも十分ありますし、企業のロゴデータ等をアップロードして配置することも出来ます。
共有機能やチャット機能もあります。
PDF出力も文字化けしたりしません。
何より操作性がMacユーザー向きに出来ています。
無料で使用することも出来ます。
私は年会費を支払って有料版にしています。そうすると扱えるプロジェクトの個数が増えます。
パーツも豊富だしネット共有も簡単で、本当に使えるツールです。
参照 moqups
以下があるクライアントのWEBサイト制作で作成したワイヤーフレームです。
こういったものを全ページ作成します。
PDF出力も可能なので、紙ベースでの対面打ち合わせも問題ありません。
私は「moqups」をとっても気にいって使っていました。
ワーヤーフレームツールの問題点
実は現在ではワイヤーフレームツールを使っていません。
第一の理由はツールを使ってワイヤーフレームを作るのにけっこうな時間を要するからです。
構成をまとめ上げるのは手書きが一番速いですし、考えに集中出来ます。
設計費が不十分な案件も多いので、見せるためだけに作るワイヤーフレームの制作が負担になることもしばしばです。
第二はワイヤーフレームに対するお客様の意識の問題です。
デザインカンプはしっかり確認していただけるのですが、ワイヤーフレームはかなり軽く見られます。
設計工程では最も重要なアウトプットだということを口が酸っぱくなるほどお伝えしているつもりです。
しかし、ワーヤーフレームで決定したことを次工程でひっくり返すお客様も少なからず、いらっしゃいます。
第三にネット共有の機能があだになります。
メモで考えを残せることは便利ですが、説明不足で誤解を生むこともあります。
結局、トラブルの元になるのでワイヤーフレームは止めてしまいました。
その代わり、手書きのラフをスキャンしコメントを書いて打ち合わせすることにしています。（冒頭の写真がそれです）
ツールを使用する、しないに関わらず、全体の構成と制作が向かっていく方向性を確認していくことは最も重要です。
しっかりとお客様と企画・デザインを共有しながらモノ作りに取り組んでいくことを心がけています。
by T.Y.
