1月 23, 2010 0
前回に引き続き、ワイヤーフレームと完成サイトの比較みたいな記事をピックアップしてみます。
LEVEL STUDIOSという代理店で働く傍ら、個人事業主としてUXコンサルタントをしているAlexis氏のサイトにも制作したサイトとのワイヤーフレームが対で掲載されています。
Alexis Antonelli | User Experience Consulting | Activision.com
他にも
のプロジェクトの簡単な説明とワイヤーフレームなどがあります。
こういったワイヤーフレームもポートフォリオに掲載しているケースはあまりないので、もっと出てくるといいのになあと思いました。
掲載されているワイヤーフレームは、合番と共に詳細なコメントもついており、こういった補足説明のつけかたによっては混乱のないワイヤーフレームが実現できそうですね。
1月 21, 2010 0
Apt Mediaというアメリカメリーランド州にあるインタラクティブデザインのコンサルタント会社が、ワイヤーフレームの状態と完成したWebサイトを交互に挙げつつ、潜在的な落とし穴3つについて語った、
“Designers who wireframe: pros and cons”
というエントリーがあがっています。（1年近く前の記事ですが。でも公開時にかかわらず良い記事をいろいろ紹介していこうと思っています）
これによると、潜在的な落とし穴は、
だそうで、上記ポイントは、第1回目の研究会@東京でもあがったポイントでした。
様々な経験則から導き出された結論は、参考になるところが多いです。
1月 16, 2010 0
今日はワイヤーフレームのガイドラインに関するネタです。
シアトルにあるSchool of Visual Concepts という学校で行なわれているPRINT2WEBというクラスでJohn Rice氏が教えている内容がWebで公開されており、この中にワイヤーフレームガイドというページがあります。
ここでは、CS2用のデータやPDFをダウンロードすることが出来ます。
自分で使うためにワイヤーフレームの仕様を整理しているという人には参考になるかもしれません。
1月 13, 2010 0
kara_dです
ワイヤーフレームという言葉は、いろいろな業界でいろいろな用途で使われています。
僕はワイヤーフレームというと90年代に一世を風靡したwireframe studioを思い浮かべてしまいます。当時Flashを使っていた人間にとって、羨望の的だったのはないでしょうか。2000年以降にWebデザインを始めた人にはあまりなじみがないかもしれません。当時、いわゆる「Cool」なWebデザインを扱った輸入版の書籍にしょっちゅう取り上げられていた記憶があります。
そのwireframe studioですが、実はまだ続いていて、最も長く続いているWebデザインエージェンシーの一つとなっています。
最近の仕事もabout_usページで見る事が出来ます。
皆さんはワイヤーフレームというと何を思い浮かべますか？
1月 12, 2010 0
第2回目のワイヤーフレームコミュニケーション研究会の構成を検討中なkara_dです
知っている方は今更というかもしれませんが、国内には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サイトのありかたを狭める可能性がある旨が指摘されていますが、そういったデメリットがあると同時に、仕様があることで標準書式を出力可能なツールを作りやすくなるというメリットも考えられます。
ワイヤーフレーム研究会も表記方法や記述メソッドに関する研究をつづけていく予定なので、大いに共感するところがあります。本研究会からもいずれは、皆が自由に使えるガイドラインのようなものを提示できたらと思います。
1月 10, 2010 0
ご無沙汰していますkara_dです。
第1回のワイヤーフレームコミュニケーション研究会以来すっかり間が空いてしまいましたが、また活動を再開していきたいと思います。
第2回目のワイヤーフレームコミュニケーション研究会＠東京はワイヤーフレームに関するライトニングトークをする会にしたいと考えています。ライトニングトークというのは、5分ほどの時間でプレゼンテーションをする小さなセミナーのことで、だいたい1回に数人から十人程度の発表が行なわれます。
ワイヤーフレームはWebサイトの制作において決して主役ではありませんが、それぞれ様々なノウハウを持っていると思うので、ライトニングトークみたいな形式がピッタリだと思いました。（発表する人は会へ優先的に参加できるようにする予定です）
まだ細かな内容は決まっていないので、それまで国内外のワイヤーフレームに関する今の話題や過去のアーカイブなどをまとめてみるということをやってみます。
まずは、オンラインでワイヤーフレームを作ることもできるドローツールサービス「Cacoo」https://cacoo.com/を紹介します。
Cacooは、決してワイヤーフレームのためのツールというわけではなく、Visioなどで普段書いているような作図からUMLに至まで様々な図が書けるサービスです。おまけに、単に作図をするだけでなく、ユーザー同士でコラボレーションして作図したりといったソーシャル的な機能もついています。
もちろんワイヤーフレームも描くことが出来ます。適当に描いてみましたが、こんな図もすぐに作れます。
しかも普通のワイヤーフレームだけでなく手書き形式のワイヤーフレームも描く事が出来ます。手書き用の部品も用意されています。
このCacoo、インスペクタパネルを使って図の要素に細かな設定を行なう事ができるので、かなり自分好みの図を描く事ができます。
小規模なプロジェクトでのメンバー同士のさくっとした情報共有にはピッタリなツールと思いました。
10月 9, 2009 0
前回に引き続き、ワイヤーフレームコミュニケーション勉強会@大阪議事録その2をお届けします。
今回はワイヤーフレームとはなんでしょう？というフリーディスカッションです。
下記に3Sさんのブログに掲載された記事の転載をさせていただきます。
ワイヤーフレームとはなんでしょう？(フリーディスカッション)
10月 9, 2009 0
2009/09/18にワイヤーフレームコミュニケーション勉強会@大阪が行なわれました。
主催の3Sさんは、Twitter上でのワイヤーフレームコミュニケーション研究会のやりとりを見て、開催を思い立ったとのことです。何度かのやりとりを経て、実現となりました。
下記に3Sさんのブログに掲載された記事の転載をさせていただきます。
ワイヤーフレームコミュニケーション勉強会＠大阪は2009/09/18に大阪で開かれた勉強会です。
そもそもの発端は2009/07/24に東京のSINAP様オフィスで株式会社エフエックスビイの原様が発起人となり開催されたワイヤーフレームコミュニケーション研究会の内容をふまえて、大阪でもワイヤーフレームコミュニケーションについて勉強しようという趣旨で開催しました。
この日は総勢11名の方があつまり、「ワイヤーフレームとはなにか？」をベースにフリーディズカッション形式で話し合いを行われました。
流れ自体は東京で行われたワイヤーフレームコミュニケーション研究会のトピックをベースでしたが、そもそもワイヤーフレームとはなにか？というトピックの部分での意見交換が非常に活発に行われ、参加者それぞれの考えているワイヤーフレームの認識の違いや、それに対する想い、現場でのワイヤーフレームを介した作用、問題点などを中心にディスカッションが行われました。
各人にそれぞれのトピックについてポストイットに記載して頂く事を当初は想定していましたが、ディスカッションを続けながらブレスト的に意見を出し合う結果になりました。それ自体は流れをとめるよりはよかったかなと感じています。また人数も少なかったので、face to faceのディカッションに向いている会になったと思います。
先に唯一ポストイットで回収した議事録を掲載いたしますが、現在参加者の話された内容をまとめていますので少々お待ち下さい！（現在約半分。残り鋭意書き起こし中）
9月 10, 2009 0
Web制作におけるワイヤーフレームを使ったコミュニケーションについてあれこれ研究する会である「ワイヤーフレームコミュニケーション研究会」ですが、９月１８日に大阪版が開催されることになりました。
twitterアカウントの3Sさんという方が発起人です。
大阪版の参加申し込みは次のリンクワイヤーフレームコミュニケーション勉強会@大阪より。
また、下記について意見募集をしているとのこと。参加できなくても記入しとくと皆で共有できるかもしれません。ATNDのほうのコメント欄にお気軽に書き込みをしてください。
『特にデザイナーさんにご意見を頂きたい部分で「ワイヤーフレームで理解しにくいところ、助けになるところは？」
またこの会の様子や話し合ったことなどもネット上で公開し、広く皆とシェアしていく予定です。
大阪の皆さん、もしよかったら告知協力よろしくお願いします！！！
9月 6, 2009 1
第1回のワイヤーフレームコミュニケーション研究会にも参加いただいたbookslopeことネットイヤーの坂本さんが書いた感想が皆の参考になると思ったので取り上げます。
ワイヤーフレームコミュニケーション研究会 at bookslope blog
http://www.bookslope.jp/blog/2009/09/wireframecomwg.html
IAとして数多くの経験を持つ坂本さんが書いていることもあり、ワイヤーフレームで悪戦苦闘している人にずんと来る言葉が述べられています。特に
ただ、個人的に言えるのはどの状況においても共通して――
* ワイヤーフレーム作成の後工程をきちんと考慮すべき (誰が行い・どのように進めるのか)
これに尽きるかと思います。
という発言は同感です。ワイヤーフレームを作る人というのはディレクターだけでなく様々な人が作る場面があると思います。その思惑も様々ですが、ワイヤーフレームの後行程について考えていないケースはその後行程の人が苦労することになるのでしょう。
悩みの根本的なところはその後工程のことがわかっていないことに起因するように思います。もちろん後工程のことはわからなくて結構という意見もあるとは思いますが、結局のところ自分がやろうとしている方向性や実現性を担保するためには、実現する方法や手段を知識として身につけるということと、実現する人とのコミュニケーションが最も大事なことなのかも知れません。
会場でも話があったのですが、そもそもワイヤーフレームを作る目的というのが案件に応じて、人に応じて違ったりします。最終的なアウトプットはワイヤーフレームであっても、目的は企画用であったり、指示用であったり、ドキュメント用であったり、ビジュアルの骨組みだったりするわけです。
これら目的まで含めてワイヤーフレームの定義をそろえるのかどうかはいろいろ議論していきたいところですが、何に使うための物で、そこには何が含まれていなければいけないか、逆になにを含まなくてもいいのかを考える事で精度の高いワイヤーフレームの実現が出来そうです。
今回の会のタイトルの「デザイナーが引っ張られる〜」という点で考えてみれば、ワイヤーフレームに含まれている情報のとりちがいから発生しているケースがいくつかあったように感じます。
また、ブログでは下記の参考リンクがありました。これもチェックしておきたいですね。
ウェブサイトの設計図 ワイヤーフレームを活用しよう | DesignWalker
http://www.designwalker.com/2009/04/wireframe-2.html
8月 6, 2009 0
8月 6, 2009 0
8月 6, 2009 0
8月 6, 2009 0
8月 1, 2009 0
