ハッシュタグは#websigです。

ホワイトボードとかに貼ったりしてアナログな状態でいろいろなブレストをやるためのアイテムという雰囲気です。

松原慶太さんは、標準Webデザイン講座 基礎編など書籍の執筆でも有名なデザイナーで、古くはオンラインマガジンShiftのライターをされていて僕のShiftの先輩でもあります。

このつぶやきを見て、つぶやきだけで終わらせず実現化したらきっと面白いんじゃないだろうかと思い、Twitter上でのやりとりを含めて第2回ワイヤーフレームコミュニケーション研究会にて紹介させていただきました。今後どんな展開になっていくのかまだ不明ですが、いろいろな人を巻き込んで展開していけたらと考えています。

以下やりとりを記述した当日のスライドです。

第2回目は「マークアップエンジニアからインフォメーションアーキテクトへのキャリアパス　～マークアップはマイクロIA（インフォメーションアーキテクチャ）だ～」と題して、マークアップエンジニアとインフォメーションアーキテクトを兼任する株式会社ビジネスアーキテクツの伊原 力也さんと元株式会社ビジネスアーキテクツ、iA incで現nodot代表をつとめる小久保 浩大郎さんをゲストに迎えるかたちでの開催となりました。（伊原さんにより「ワイコミ研」という略名もつけていただきました）

当初、第1部は「マークアップエンジニアをベースにしたインフォメーションアーキテクトへのキャリアパス」という題目で伊原さんによるご自身のキャリアパスの紹介、第2部では「マークアップはマイクロIAだ!!」という題で小久保さんも交えてのディスカッションとなる予定でしたが、第1部と第2部の区別はあまりなく、小久保さんの適度なツッコミを交えて会は進行しました。

最後のほうは少し時間が足りなくなってしまい、駆け足になってしまいましたが、内容のほうはぎっしりと詰まったいい会になったような気がします。

伊原さんのスライド

前回は企業のWeb担当者から制作側のデザイナー、コーダー、ディレクター、プログラマーまで幅広い層の参加者がいました。今回はあらかじめ対象者をマークアップエンジニアを中心とした人に絞ってあったため、参加者の中にマークアップを仕事のメインとする方が多かったように感じます。

前回も、あっという間に募集人数に達してしまったのですが、対象者を限定した今回もあっと言う間に定員オーバーになってしまいました。

第2回ワイヤーフレームコミュニケーション研究会@東京のATND

さて、今回もSINAPさんの綺麗なオフィスにて開催させていただいたのですが、今回は前回とは違う新しい試みをしました。確かに参加希望者が多いことは素晴らしいことですが、参加できない人がまったく情報を共有できないというのはもったいないことです。

そこで、SINAPさんにご協力いただいて（SINAPさんでは、Ustreamの配信代行サービス「UstStart」というサービスもされています）Ustream配信を行ないました。配信のお知らせはTwitter上で呼びかけ、目視で確認した範囲の報告では最高150名が同時に閲覧していたとのことでした。

Ustream収録版は、SINAPチャンネルのアーカイブにて観ることが出来ます。ただし、一部の内容はネット上への外部流出禁止な書類も含まれているため、その箇所は音声のみで収録しております。

また、今回もTwitterのハッシュタグ #wireframecomwg をつけての開催だったため、開場やUstreamの視聴者により様々なフィードバックが行なわれました。

その結果は、@bitgleams 氏によって togetterにまとめられ、一覧可能になっています。Ustreamとtogetterと公開されたスライドを合わせ読むことで、なんとなく全体像はつかめると思います。

以上、第2回ワイヤーフレームコミュニケーション研究会@東京終了のお知らせでした。

ご参考までに開催情報についてATNDに記載したものをここにも挙げておきます。

第2回の開催情報

マークアップエンジニアのキャリアパスには様々なものが考えられます。幅広い、あるいは深い実装スキルを求めて、よりフロントエンドエンジニアとして強まっていく方向や、プロジェクトマネージメント方面のスキルを強めて実装面のディレクターになっていくという道はよく聞くキャリアパスですが、マークアップエンジニアを土台としてインフォメーションアーキテクトとして設計に関わっていくというキャリアパスも存在します。

一見、マークアップとIAというあまり接点のなさそうに見えるスキルを比較し、設計の終盤と実装の前半を結びつける「ワイヤーフレームの作成」という観点からIA的な視点、設計スキルを身につけていくための気づきを得られる場を提供します。

第1部：マークアップエンジニアをベースにしたインフォメーションアーキテクトへのキャリアパス

第1部では、マークアップエンジニアとインフォメーションアーキテクトを務めるビジネス・アーキテクツの伊原 力也さんに、インフォメーションアーキテクトの仕事、これまでの軌跡、葛藤、苦労した点などと共に、マークアップエンジニアとしての強みを生かしてインフォメーションアーキテクトとして案件に関わっていく方法や、その為に大切なことは何かを講義します。

出演：伊原 力也（ビジネス・アーキテクツ）

第2部：スペシャルディスカッション「マークアップはマイクロIAだ!!」

第2部では、伊原さんに加え、ビジネス・アーキテクツ、iA incを経て、現nodot代表をつとめる小久保 浩大郎さんをスペシャルゲストに加えて、マークアップとIA、そしてワイヤーフレームとの関係性などを、会場の参加者を交えて各々の視点からディスカッションしていきます。自身の将来を考えた場合、これから何をしていくべきかのヒント満載のディスカッションとなる予定です。

出演：伊原 力也（ビジネス・アーキテクツ）、小久保 浩大郎（nodot）

出演者

伊原 力也（ビジネス・アーキテクツ）
@magi1125
http://mokuva.com/

マークアップデザインエンジニア、インフォメーションアーキテクト。大規模プロジェクトのCSSサイト構築・製品プロモーションサイトの設計・モバイルコンテンツ構築も手がけるデバイス非依存実装のスペシャリスト。クリエイティブ集団mokuva所属。

小久保 浩大郎（nodot）
@kotarok
http://nodot.jp/

2002年、ビジネス・アーキテクツに参加。マークアップエンジニアとして多数の企業Webサイトの構築に関わり、実装設計やガイドラインの執筆、コンポーネント駆動開発スタイルの推進などを行う。2009年にiA incにインターフェイスデザイナーとして参加した後、2010年、個人事務所“nodot”を起ち上げ独立。幅広い知識と視野を持ったフロントエンドアーキテクトとして大規模サイトの実装設計などを行っている。

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をダウンロードすることが出来ます。
自分で使うためにワイヤーフレームの仕様を整理しているという人には参考になるかもしれません。

ワイヤーフレームという言葉は、いろいろな業界でいろいろな用途で使われています。
僕はワイヤーフレームというと90年代に一世を風靡したwireframe studioを思い浮かべてしまいます。当時Flashを使っていた人間にとって、羨望の的だったのはないでしょうか。2000年以降にWebデザインを始めた人にはあまりなじみがないかもしれません。当時、いわゆる「Cool」なWebデザインを扱った輸入版の書籍にしょっちゅう取り上げられていた記憶があります。

そのwireframe studioですが、実はまだ続いていて、最も長く続いているWebデザインエージェンシーの一つとなっています。

最近の仕事もabout_usページで見る事が出来ます。

皆さんはワイヤーフレームというと何を思い浮かべますか？

知っている方は今更というかもしれませんが、国内には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、インスペクタパネルを使って図の要素に細かな設定を行なう事ができるので、かなり自分好みの図を描く事ができます。

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