LEVEL STUDIOSという代理店で働く傍ら、個人事業主としてUXコンサルタントをしているAlexis氏のサイトにも制作したサイトとのワイヤーフレームが対で掲載されています。

Alexis Antonelli | User Experience Consulting | Activision.com

他にも

• Acura
• Fandango
• ShopNBC
• Honda

のプロジェクトの簡単な説明とワイヤーフレームなどがあります。

こういったワイヤーフレームもポートフォリオに掲載しているケースはあまりないので、もっと出てくるといいのになあと思いました。

掲載されているワイヤーフレームは、合番と共に詳細なコメントもついており、こういった補足説明のつけかたによっては混乱のないワイヤーフレームが実現できそうですね。

“Designers who wireframe: pros and cons”

というエントリーがあがっています。（1年近く前の記事ですが。でも公開時にかかわらず良い記事をいろいろ紹介していこうと思っています）

これによると、潜在的な落とし穴は、

• デザインされ過ぎたワイヤーフレーム
• 着色されたワイヤーフレームに似てしまう
• ワイヤーフレーム作成とデザイン作業のスイッチング

だそうで、上記ポイントは、第1回目の研究会@東京でもあがったポイントでした。

様々な経験則から導き出された結論は、参考になるところが多いです。

シアトルにあるSchool of Visual Concepts という学校で行なわれているPRINT2WEBというクラスでJohn Rice氏が教えている内容がWebで公開されており、この中にワイヤーフレームガイドというページがあります。

ここでは、CS2用のデータやPDFをダウンロードすることが出来ます。
自分で使うためにワイヤーフレームの仕様を整理しているという人には参考になるかもしれません。

知っている方は今更というかもしれませんが、国内にはWebSig24/7という団体があります。WebSig24/7は、mixiをメインに活動してきたWeb制作に関わる方には特になじみのある団体で、イベントをこれまで30回近く開催してきている他、様々な分科会が存在し、国内の大きなコミュニティとして知られています。

そのWebSig24/7が、『サイトマップ標準書式制定プロジェクト』というプロジェクトを発足しました。

http://smp.websig247.jp/index.php?title =%E3%83%A1%E3%82%A4%E3%83%B3%E 3%83%9A%E3%83%BC%E3%82%B8

サイトマップというのは、Webサイトから見れるナビゲーションのことではなく、主にWebサイトの設計時にやりとりされる検討資料のことで、制作に携わらない人にはあまりなじみがないものといえるでしょう。

ワイヤーフレームが各ページに関する構造をまとめたものとすれば、サイトマップは、Webサイト全体の構造をまとめたものと言う事ができます。これはプロジェクト内で作成されるものであるため、なかなか外部にノウハウが漏れることがなく、従って各制作会社ごとに独自の描き方をしているのが現状です。

これら複雑化したサイト構造の表現方法はドキュメント作成者により異なり、毎回ドキュメントの書式と記載ルールを学習する必要があるため、クライアント、制作者、それぞれのコミュニケーションを非効率なものとしています。例えばUMLはその記述法が制定されているために、誰もが学ぶことが出来ますが、サイトマップに関してはまだその段階にありません。

このプロジェクトにおいても上記のように現状が書かれており、書式を統一することでコミュニケーションロスを減らそうというのが狙いの一つだそうです。

標準書式に関しては、本研究会でも少し議論がされており、例えば標準書式が出来る事によりWebサイトのありかたを狭める可能性がある旨が指摘されていますが、そういったデメリットがあると同時に、仕様があることで標準書式を出力可能なツールを作りやすくなるというメリットも考えられます。

ワイヤーフレーム研究会も表記方法や記述メソッドに関する研究をつづけていく予定なので、大いに共感するところがあります。本研究会からもいずれは、皆が自由に使えるガイドラインのようなものを提示できたらと思います。

第2回目のワイヤーフレームコミュニケーション研究会＠東京はワイヤーフレームに関するライトニングトークをする会にしたいと考えています。ライトニングトークというのは、5分ほどの時間でプレゼンテーションをする小さなセミナーのことで、だいたい1回に数人から十人程度の発表が行なわれます。

ワイヤーフレームはWebサイトの制作において決して主役ではありませんが、それぞれ様々なノウハウを持っていると思うので、ライトニングトークみたいな形式がピッタリだと思いました。（発表する人は会へ優先的に参加できるようにする予定です）

まだ細かな内容は決まっていないので、それまで国内外のワイヤーフレームに関する今の話題や過去のアーカイブなどをまとめてみるということをやってみます。

まずは、オンラインでワイヤーフレームを作ることもできるドローツールサービス「Cacoo」https://cacoo.com/を紹介します。

Cacooは、決してワイヤーフレームのためのツールというわけではなく、Visioなどで普段書いているような作図からUMLに至まで様々な図が書けるサービスです。おまけに、単に作図をするだけでなく、ユーザー同士でコラボレーションして作図したりといったソーシャル的な機能もついています。

もちろんワイヤーフレームも描くことが出来ます。適当に描いてみましたが、こんな図もすぐに作れます。

しかも普通のワイヤーフレームだけでなく手書き形式のワイヤーフレームも描く事が出来ます。手書き用の部品も用意されています。

このCacoo、インスペクタパネルを使って図の要素に細かな設定を行なう事ができるので、かなり自分好みの図を描く事ができます。

小規模なプロジェクトでのメンバー同士のさくっとした情報共有にはピッタリなツールと思いました。