サイト設計に欠かせないワーヤーフレームをどう作るか。

2015年のこと、システム開発(CMS)を伴うサイト制作を担当しました。
当社が舵取りを行って(サイト設計、運用設計、総企画デザイン)、システム会社がCMS開発を行いました。

こういった分散体制で注意しなければならないのは仕様をぶれさせないことです。
そのためワイヤーフレームツールを導入しました。

ワイヤーフレーム(モックアップ)
WEBサイトの各ページ要素の骨組み。アイデアを視覚化する最初の工程で作成するもの。厳密にはワイヤーフレームとモックアップを別物としてとらえる場合もあります。モックアップの方が最終デザインに近いものです。

スポンサーリンク

試したワイヤーフレームツール

Balsamiq

手書き風のワイヤーフレームが作れるツールです。
ボタンやウインドウ等の手書き風パーツがたくさんそろっています。

参照 https://balsamiq.com

出来上がりのワイヤーフレームの雰囲気が好きだったのですが、パーツが少し足りない気がして利用を断念しました。

Wireframe.cc

とてもMacライクな操作性が気にいって使い始めたのですが…
なぜか紙に出力ができずに使用を断念しました。

参照 Wireframe.cc

Cacoo

ページ構成も出来るし、ネット共有も出来ます。
さらにメイドインジャパンの安心感。
これに決めた!…と思ったのですが、お客様がこのツールを使えず、ネット共有が宝の持ち腐れに終わりました。

遠隔地プロダクションとの連携は非常にスムーズでした。

参照 Cacoo

moqups

試行錯誤の結果、使用したのは「moqups」です。
このツールは無料でも十分使えるのですが、私は有料で利用していました。

パーツも豊富だしネット共有も簡単で、本当に使えるツールです。

参照 moqups

以下があるクライアントのWEBサイト制作で作成したワイヤーフレームです。
こういったものを全ページ作成します。

PDF出力も可能なので、紙ベースでの対面打ち合わせも問題ありません。
私は「moqups」をとっても気にいって使っていました。

ワーヤーフレームツールの問題点

実は現在ではワイヤーフレームツールを使っていません。

第一の理由は手書きによる下書きからワイヤーフレームを作るのにけっこうな時間を要するからです。

構成をまとめ上げるのは手書きが一番速いですし、考えに集中出来ます。
設計費が不十分な案件も多いので、見せるためだけに作るワイヤーフレームの制作が負担になることもしばしばです。

第二はワイヤーフレームに対するお客様の意識の問題です。

デザインカンプはしっかり確認していただけるのですが、ワイヤーフレームはかなり軽く見られます。
設計工程では最も重要なアウトプットだということを口が酸っぱくなるほどお伝えしているつもりです。
しかし、ワーヤーフレームで決定したことを次工程でひっくり返すお客様も少なからず、いらっしゃいます。

第三にネット共有の機能があだになります。

メモで考えを残せることは便利ですが、説明不足で誤解を生むこともあります。

結局、トラブルの元になるのでワイヤーフレームは止めてしまいました。
その代わり、手書きのラフをスキャンしコメントを書いて打ち合わせすることにしています。(冒頭の写真がそれです)

ツールを使用する、しないに関わらず、全体の構成と制作が向かっていく方向性を確認していくことは最も重要です。
しっかりとお客様と企画・デザインを共有しながらモノ作りに取り組んでいくことを心がけています。

by T.Y.

スポンサーリンク

関連記事

  1. ロゴタイプにはドラマがある

  2. ファビコンをつくろう

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

制作実績一覧

おすすめ記事

最近の記事

– このブログを書いてる人 –

 

 

山本 朝次/Yamamoto Tomotsugu

 

クリエイティブディレクター

 

はじめまして。よろしくおねがいします。

 

柴犬が大好きです。

 

プロフィールはFacebookで。

 

Facebook

 
 
 

PAGE TOP