ワイヤーフレームコミュニケーション研究会

Icon

Wireframe Communication Working Group

渋谷UStreamスタジオにて「Websig 24/7サイトマップ+ワイコミ研」をやります

直前の告知になってしまい申し訳ありませんが、9月29日21時より @threepennie さん「Websig 24/7サイトマップ+ワイコミ研」ということでUStreamを行ないます。
サイトマップとワイヤーフレームの標準ガイドラインを考える会のキックオフ番組となります。
詳細はこちら http://ow.ly/2Js6t
配信は、 http://ow.ly/2Js6u
にて行なわれますのでお楽しみに!

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

ワイヤーフレームのパーツをマグネット化するプロジェクトが始動しました

第2回ワイヤーフレームコミュニケーション研究会が開催される2週間ほど前にTwitter上で、デザイナーの松原慶太さんとやりとりで、ワイヤーフレームのパーツをマグネット化できたらいいよねみたいな話し合いが行なわれました。

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

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

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

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

モックマグ始動に至るまでその1

モックマグ始動に至るまでその2

モックマグ始動に至るまでその3

モックマグ始動に至るまでその4

モックマグ始動に至るまでその5

モックマグ始動に至るまでその6

モックマグ始動に至るまでその7

モックマグ始動に至るまでその8

モックマグ始動に至るまでその9

第2回ワイヤーフレームコミュニケーション研究会@東京終了しました

6月18日金曜日に第2回ワイヤーフレームコミュニケーション研究会@東京が開催されました。
第1回の時は、あらかじめ用意されたトピックに従ってみんなでディスカッションするタイプの会でしたが、今回は講師を交えてのセミナー形式の会となりました。

第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

他にも

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

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

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

誰がどんなワイヤーフレームを作るのがいいのか?

Apt Mediaというアメリカメリーランド州にあるインタラクティブデザインのコンサルタント会社が、ワイヤーフレームの状態と完成したWebサイトを交互に挙げつつ、潜在的な落とし穴3つについて語った、

“Designers who wireframe: pros and cons”

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

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

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

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

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

ミニトピック

フリーのワイヤーフレームアプリケーション10選

10 Completely Free Wireframe and Mockup Applicationsというエントリーにフリーのワイヤーフレーム作成ツールが10個掲載されています。

告知事項

現在、第3回ワイヤーフレームコミュニケーション研究会@東京を企画中です。

内容はワイヤーフレームに関するLL(ライトニングトーク:一人5分程度の持ち時間でプレゼンをする)を中心とした会にしようと考えています。プレゼン内容は、ツールの話から事例紹介、独自に行なっている取り組みや考え方まで自由です。

LLのプレゼンターは優先的に当日の参加権を持てますので、kazuhiroh{at}gmail.comまで【氏名(会社名)】【どんな方向性の話をしたいか】をお送りください。

プレゼンの練習にもなりますのでお気軽にどうぞ!

ワイヤーフレームコミュニケーション研究会とは?

「デザイナーがひっぱられないワイヤーを素早く作る研究会をしたい」というTwitterでのポストから始まった会です。

デザイナーはたまに提示されたワイヤーフレームに引っ張られてしまい、ワイヤーとあまり変わらないようなものをあげたりしてしまいます。

そういうことを防ぐにはどうしたらいいか、そもそもワイヤーフレームの存在の是非も含めて考えつつ、ワイヤーフレームおより周辺の情報をピックアップしたり考察したりしていきます。

運営者情報

原 一浩 ( / mx / / kr )

株式会社エフエックスビイ代表取締役CVO
DesignWedge編集長