HPプランニングにおけるワイヤーフレームの重要性

ux-788002_1280ハイ! リサです。

ホームページ制作において、私の場合は、まずページ構成を行います。
過去記事でExcelでページ階層図を作ることを説明しましたが、企画段階ではその作業が一番です。
ページ階層図があれば、概算で見積もりできますので、クライアントに予算確保の交渉も可能です。

過去記事:「Microsoft ExcelをHPページ構成立案のアウトラインプロセッサとして使用する。」

クライアントの了解を得て、制作がスタートすることが決まったら、最初にやる作業がワイヤーフレームです。

今回はワイヤーフレームとは何かワイヤーフレームのツールを説明します。

スポンサーリンク
スポンサーリンク

ワイヤーフレームとは

ワイヤーフレームはホームページをどのように構成していくかを具体的に図示するものです。
ボタンはどこにあって、どのような内容の文章が入るか等、プランニングの段階で最も重要なアウトプットになります。
簡単に言うと「HPの設計図」ですね。

「ワイヤーフレーム」はクライアントとの意識あわせばかりではなく、制作プロジェクトの参加スタッフの意識あわせをするために、無くてはならないものです。

クライアントによっては、いきなりデザインを要求してくる場合もありますが、まともな仕事であれば必ずワイヤーフレームの制作からスタートします。

ux-787980_1280

ワイヤーフレームツール

過去に人材斡旋サービスのホームページを制作した際、システム会社との連携の必要もあって、様々なワイヤーフレーム制作ツールを試しました。
その中で、私がいいと思った3つのツールを挙げておきます。
どれもWEBブラウザーで作業します。

Cacoo(カクー)

参照:Cacoo(カクー)

cacoo

ワイヤーフレームだけでなく、様々な図表ドキュメントを作ることが出来ます。
日本の企業が作ったツールですので、サポートが必要な場合は安心できると思います。
ネットで書類を共有することも出来ますので、他社との連携やクライアントとの連携も容易になります。

私は有料版を試したのですが、操作性がWindowsライクなので、馴染めませんでした。
Macユーザーには不向きだと思います。

wireframe.cc

参照:wireframe.cc

wireframe簡単な図形パターンが用意されていますので、時間をかけずにサクッとワイヤーフレームを作りたい人向きのツールです。
これも有料版を試しました。

しかし、1点欠点があって利用を断念しました。

それはPDFデータで出力した場合に文字化けを起こしてしまうという致命的なものです。
私が使用したのは3年前なので、現在は対応済みかもしれませんが、この点さえなければ使いやすさからいって、魅力的なツールだと思います。

moqups

参照:moqups

moqups

私が仕事でよく使っているツールです。
パーツも十分ありますし、企業のロゴデータ等をアップロードして配置することも出来ます。
共有機能やチャット機能もあります。
PDF出力も文字化けしたりしません。

何より操作性がMacユーザー向きに出来ています。
無料で使用することも出来ます。
私は年会費を支払って有料版にしています。そうすると扱えるプロジェクトの個数が増えます。

フレキシブルな対応のためには

ここまでは、ワイヤーフレームの意義とツールを紹介しました。
確かに良いツールを上手く使えば仕様のブレをなくすことができると思いますが、デメリットもあります。

それは、ツールによってワイヤーフレームを制作する工数がバカにならないことです。
きちんと見積もり段階で設計工数を経常できれば、絶対に使うべきだと思います。
しかし、予算のない案件も多いので、その場合はツールを使ってきちんと仕様を提出する余裕が無くなります。

さらに、ワイヤーフレームを理解するお客さんは、かなり少数派です。
クライアントは早くデザインを見たがる傾向があります。

そのような、状況でどう対応しているかをお話しします。

私の場合、ワイヤーフレームよりページ階層図の方を重要視します。
過去の記事でExcelによるページ階層の作り方を紹介しましたが、ページ階層図と数ページのデザイン(最低2ページ)でプレゼンします。

過去記事:「Microsoft ExcelをHPページ構成立案のアウトラインプロセッサとして使用する。」

それだけでは難しい案件と判断した場合は、手書きのワイヤーフレームを作ります。

ツールはネットで共有できるメリットがありますが、クライアントにはどうしてもプレゼンが必要です。
クリエイターはデザイン力よりプレゼン力です。
いかにクライアントを納得させるか。それは直に会ってプレゼンすることからはじまります。

どうせ会ってプレゼンするのであれば手書きラフで十分です。
汚いラフを理解させることの方が腕の見せ所だと思います。

まとめ

以上、ホームページ制作のプランニングのお話しをしましたが、簡単にまとめると以下のようなパターンのプランニング・アウトプットを作成し、クライアントの状況に合わせてプレゼンを行うことになります。
予算だけでなくクライアントの性格等も判断材料になります。

  • パターン1:ページ階層図+サンプルデザイン
  • パターン2:ページ階層図+手書きによるワイヤーフレーム(+サンプルデザイン)
  • パターン3:ページ階層図+ツールによるワイヤーフレーム

※ツールによるワイヤーフレームで仕様を詰める場合はデザインは必要ありません。

いかがでしょうか?

いずれにしてもトラブらない制作現場でありたいですね。

See you !

© oh yeah Steve!

スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

フォローする