ワイヤーフレーム勉強会@大阪(2012/02/19)レポート

  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

遅くなりましたが、2012年2月19日に大阪で開催した「ワイヤーフレーム勉強会」についてのレポートを公開します。

まとめ(抜粋)

  • Webサイトの目的によって、ワイヤーフレームの表現方法には様々なパターンが存在するようです
  • 「誰に向けて」「何のために」によって書く内容やどの程度まで書くのかが変化するようです
  • デザインとの棲み分けがはっきりしていない場合もあるようです
  • 意識や内容を共有するためのツールとして作ることが多いようです
  • 書き方については、条件をハッキリさせた上でないと、ばらつきが多すぎて難しいようです

リンク

当日のおおまかな進行

内容 具体的な項目
1 自己紹介 ・名前
・デザイナー/マークアップエンジニア/ディレクター/リーダー/その他
・日常的なお仕事の内容/したいと思っているお仕事の内容
・どんなことに興味があるのか
2 席替えの理由付け
3 席替え
4 今日勉強したいと思っていることの発表
5 話し合う内容の順番
6 意見交換 実際に作ったWFの紹介、そこからできたデザインの紹介、ツールの紹介など
7 まとめ

当日の発言ピックアップ

時系列に並んでいます。
発言者をクリックすると、プロフィールが閲覧できます。

意見交換前

アダチ>
ワイヤーフレームを書いていくときに、必要となるワイヤーフレームが変わってくるということを経験したことが皆さんあると思う。
という訳で、私なりに一旦こういうことではないかな、ということを考えています。

(ホワイトボードでの説明)
w1

まず、例えばメーカー、代理店、制作会社という『組織』があります。
次に、誰かに頼む、誰かに頼まれる人、自己完結する人などという『立場』があります。
これに加えて、デザイナーであったりマークアップエンジニアであったり、得意とするところで特に変わってくると思う。
なので、なるべく近しい人との方が話もしやすいと思うので、席も近くにしたいと思っています。

ワイヤーフレームの『書き方』『考え方』『そもそもワイヤーフレームとは?』

(ホワイトボードでの説明)
w2

「書き方」の方が具体的、「そもそも」の方が抽象的(漠然としている)。
仕事の流れは、「そもそも」→「考え方」→「書き方」へ流れていく。

(アダチから参加者に質問。今回の進め方として、「そもそも」から進めた方がいいか、「書き方」から進めた方がいいか→「そもそも」からの方がピンときやすい、との意見があったので、そちらから進めていくことに)

意見交換開始

【そもそもワイヤーフレームとは?】

アダチ>
そもそもワイヤーフレームは何のためにあると思いますか?

Iさん(?)>
ウチの場合、直接のクライアントさんには、形のないところから始めるところの、方向性を示してあげるためのもの。
メーカーさんなどは特に「仕様書」という意味合い。

アダチ>
お客さんとの意識共有?

Iさん>
そもそもワイヤーフレームを作ってから話が始まる。次の話へつなげるための基本。見える化みたいなもの。
間に代理店が入る場合は、ある程度仕様の要素を盛り込んでおかないと、言った言わないという話がすごく多い。
ちょっとした注意事項などを入れておく。

アダチ>
(ここでいきなり実例紹介)
「仕様化」のためのワイヤーフレームがあります。
システム会社向けなので、余計細かい。
SEOのことも言われたので、マークアップのことまで。
何件入れるかというのを実際見せないと、ボリューム感(どれだけ長くなるか)が伝わらない。
システム・CMSを構築するときにも、あやふやだとプログラマーが対応できない。
そのためにキチンと確定させるために作った。

ワイヤーフレームは何のために作るか?
今まで出たのは、お客さんとの意識共有、見える化したい、仕様の確定。
他にあると思うんですが?

Dさん>
制作の人にも必要。

アダチ>
ディレクターとデザイナーの……

Dさん>
間の情報共有にも必要。

アダチ>
そこに悩まれてる方も居るのでは?
Fさんなんてどうですか?

Fさん>
三者を共有するための……
共有というより……

(さっきのアダチの実例を指しながら)
僕はこういう段階を踏まずに、デザイナーの邪魔をしないように、レイアウトまで作る。
そこまでしないとお客さんは分からない。

(いろいろ議論ありつつ)

僕の会社では「サイト構築費」という名目でお金をもらっている。
ちゃんと伝えられるものを作らないと仕事としてダメ。

アダチ>
ワイヤーフレームは成果物?

Fさん>
そういう訳ではないけど……。
どの案件でも必ず作る。

アダチ>
「なぜワイヤーフレームを作るか」って言われると、やっぱりその三点(お客さん、ディレクター、デザイナー)を繋ぐために、ということになる?

Fさん>
良いバナーを作れる人は良いサイトも作れるし、成果を出すランディングページを作れる人は数十ページのサイトも良いものを作れると思っている。
ランディングページでは順番がすごく重要。
そういう意味で、方向性を示すためにもワイヤーフレームはすごく重要になる。

アダチ>
効果を出すための確認材料?
プロなりの提案?

Fさん>
ヒアリングしてきて、デザインする前にどこが決め手かを見極める必要がある。

アダチ>
デザインの負担を減らす役割?

Fさん>
それはそうですね。
正直、デザイナーのことは考えてないですけど(笑)。
デザインはデザイナーが考えることで、ディレクターはデザインをこうしてほしいって考えるもんじゃない。

アダチ>
それはAD(アートディレクター)を兼ねている人も居るので一概には言えないが、Fさんの場合は、そこがすごくはっきりしている会社なんですかね。

Fさん>
もちろんADも居るんですけど、そこまでデザイナーの仕事を取るのはどうなのかな……と。

アダチ>
どういう風に分担するか、で変わってきそうですね。

ディレクターで「デザインまでします」っていう人もすごく多い。
そこら辺はどうなんかな……と。

Iさん>
デザイナーの実力次第。
あっぱれなデザイナーには、下手すると手書きラフで簡単な指示だけのときも。
能力の低いデザイナーには、マージンまで盛り込まないといけない場合もある。
その調整はほとんどディレクターがする。
なぜディレクターかというと、お客さんの声を直接聞いているのはディレクターなので、ディレクターが間違えると後が全部間違えてしまう。その感覚を絶対に持たないといけない。

アダチ>
(実例紹介)

これ、カードソーティングをしました。
たぶんランディングページとかでも同じことを頭の中でしてると思います。

誰がターゲットなのか、どこが売りなのか、をまず整理する。
すべてに渡って考えられる、考え方の軸を作りなさい、というのが今回のお題。

整理したものを基に戦略のための商品分布図を作り、それを基に第一ワイヤーを作成。
これは、何のエリアをどこに持って来るかをまず大きく考えて、そこから商品ごとの詳細なワイヤーを考える。

配置のルール、読ませたい言葉を追いかけていけるように。
ユーザー・インターフェースに関して、混乱させないように。

ターゲットに合わせて写真(画像)やデザインを考える。

商品の「紹介」だけでなく「購入」につながることを意識して、そのフックを分かりやすく載せる。

私はあくまでワイヤーフレームは、内容と理由付け(何のためにこの写真を使うのかなど)のためのものだと思っています。
色んな色を使って書いているのは、こちらの意志をきっちり伝えるため(内容で分けたり)。

制作(デザイナーなど)と意識共有できてくると、ワイヤーフレームも雑になってきますw。

途中でだいぶワイヤーフレームの形も書き方も変わってくる。






【ランディングページのワイヤーフレーム】

アダチ>
私が楽しみにしていた、ランディングページのワイヤーフレームを……、見たいです!
どんな風にしてはるのか……。

さっきは私を中心にさせてもらったんですけど、さっき見てもらったようにコーポレート系が多いです。
コーポレートの中の「商品情報」になるので、ランディングページほど成果をはっきりさせないといけない訳ではなく、しかも出しにくいのに対して、非常に成果に直結するランディングページを中心にFさんの会社はされているというところで、Fさんがどういうワイヤーフレームを書いているのか。

Fさん>
僕もまだLPのワイヤーは3本しか書いてないので、謙遜している訳ではなくて、本当の勉強中です。
その上でなんですけど、僕の会社というのは、マーケティングととクリエイティブという風に考えていて、マーケティングで市場や競合を分析したり自社の強みを洗い出した上で、クリエイティブデザインするという風に考えているので、その点からも、ワイヤーをきちんと書くのは大事なことだと考えています。

ランディングページには、ある程度の決められた型みたいなのがあって、まず結論を言うのは絶対。
結論エリアや納得エリアなど、エリアがいろいろあって、その商品によってエリアを入れ替えるのがセオリー。

まずゴールをどうするのか、が結論エリア。

どこからランディングページに来るかというと、一番多いのはリスティング広告。
なので、リスティング広告をちゃんと出稿するかどうかから話を始める。
普通のサイトだと作りっぱなしで成果を測定しないことも多いが、ランディングページの場合は、リスティング広告をセットで提案することが決まっている。
集客する手段にお金を出すところまで考えていないお客さんが多い。
リスティング広告を出すなら、そこから来たときとそうじゃないときのワイヤーを2種類作ることもある。
今回持ってきた例はリスティング広告からのランディング用。

数字を出すと効く。

お客さんの言いたいことだけではなく、本当の強みを聞き出して、ワイヤーフレームに落とし込んでいくことが大事。

ココが共感エリア。

「何で出来るのか」を説明するエリアもある…
(かなり細かく説明してくれました。)

アダチ>
ここまで作り込むんですか?

Fさん>
(ワイヤー載ってる要素について説明)
オペレーターの写真は必須なので……

アダチ>
それ、何で必須なんですか?

Fさん>
電話かけて欲しいと思うときには、ランディングページに限らず、人(の写真)は絶対要ると思ってるんですけど……。

アダチ>
数値化したデータでお客さんに示せた方が良いのでは?
ある場合とない場合でどう違うのか、とか。

これ(Fさんのワイヤーフレーム)って説得するものに近い。
「なぜ」っていうところをもっと説明できると、きっと書いている内容の価値がもっと上がる。
「人物写真があった方が、○倍問い合わせ率が上がったんです。だからこうしてます」とか。





【アプリのワイヤーフレーム】

Aさん>
アプリ寄りのことが多い。
例えば、iPhoneやiPadで見たときに、完全にアプリケーションと見分けが付かない、もしくはブラウザで見たときにもアプリと同じ感覚で使えないといけない、ということがウチの場合は多い。

そうなってくると、「こういうことがしたい」というお客さんにも、完成形のイメージがそもそもない。

「人と人との関係性がどう変わるのかを絵で見たい」という仕事が来た。
いくらヒアリングしても、何を作って欲しいのかまったく分からない。
結果的には分かるけど、それも抽象的で断片的なイメージで、全体的な形は見えていない。

ホワイトボードに図を描く。
最終的に供給したいのはこれ、表現したいのはこれ、という風に。
そこに少しずつ詳しい情報を付け足していく。
それが最初のフレームワーク。

それから、デザインチックなワイヤーフレームを作るための素材を持っているので、それで画面イメージを作る。
それを見て、お客さんは初めて自分たちが作りたいものが何なのかを知る。

僕にとってのワイヤーフレームは、デザイナーも最終的にはそうなんだけども、お客さんと作りたいものを合致させる、目標・ゴールが何なのかを明確にするためのもの。
ゴールは分かってるんだが、何となくやりたいことだけが漠然とあるので、その状態から結果・目的を明確にするためのもの。





【ペルソナ作ってる?】

アダチ>
ペルソナを使ったりはしますか?

Fさん>
ペルソナは、良いと思った時期もあれば、あんまりって思った時期もあって。
ペルソナを作って、本当にこの人(ペルソナ)を中心に考えて良いのかな、っていうのがある。

Aさん>
ズレたときは、作ったペルソナが間違ってる。
山田花子さんじゃなくて、実は田中菊子(?)さんだったかも知れない。
ターゲットが複数の場合もある。
ペルソナがまったく利益にならないパターンというのは、そのペルソナがダメということ。
僕はけっこう重要視してます。

Iさん>
的確な人格を描くためにどうしてます?
私はけっこうずれることが(笑)。

Aさん>
お客さんと話しているときに、一番大事にしているのは、「自分は間違える」ということを最初に自分の中で認めてしまうこと。
クリエイターがいくら想いを込めて作ったとしても、実際に利益を生んでいるかどうかはまた別の話。
アクセス解析などで数字が伸びてなければ、ペルソナが間違えているということ。
だから、割と頻繁にペルソナは作り直している。
方向修正は、「外れた」「まずい」と思わないで、「外れてもしょうがない」くらいの気持ちで、最善のものを提供・提案することが大事。

Iさん>
案件によって、それができるパターンだったらすごい有り難いですけど(笑)。
一発勝負みたいなときは……。

Aさん>
もちろん「修正しちゃいけない」くらいのつもりでは作る。
方向転換とか、自分たちの選択の誤りを恐れない、ということですね。

アダチ>
会社なり組織なりの姿勢なんかがかなり関わってくると思った。
(AさんとIさんに向かって)代表でしょ? (自分と他の人に対して)従業員じゃないですか。
会社の方で「こういうやり方で」となると、一回で成果を出す必要がある案件の場合、最初からなるだけベストに近いものをやりたい、という想いが強くなる。
でも、お客さんによって「PDCAサイクルでやっていこうよ」っていうのが基本なのか、一回目でベストに近いものを作って、あとは軌道修正していくというやり方なのか、によっても変わってくる。

Iさん>
最初の持っていき方がすごく大事。
どこをゴールとするか、をちゃんとお客さんと共有できていれば、途中の軌道修正もしやすい。





【まとめ】

アダチ>
今日は、具体的な書き方は出てこなかった。
それは何故かというと、あまりにもみんなバラバラだから(笑)。

一同>(笑)

アダチ>
今回は大きく三つあった。
ランディングページを中心とされている方、コーポレート系を中心とされている方、アプリを中心とされている方。
それぞれ違うので、ワイヤーフレームの書き方にルールは作りにくい。

誰と一緒にやるのか(「誰に見せるのか」)、によっても内容が違ってくる。
成果物としてお客さんに出すワイヤーフレームもあるけど、外に出さないワイヤーフレームも多いと思う。
お客さん(一般の人)に分かるレベルまで作らないといけないのか、デザイナーなど自分たちが分かればいいのか、によっても違う。

「何のためにワイヤーフレームを書くのか」も人によって変わってくる。
なので、それらを合わせて共通のルールや書き方にまとめることはできない。
「それ(状況、相手、案件など)によって変わってくる」という結論しか今日は出せない。
具体的な書き方などでは参考になった部分はあったと思うが、それぞれで近しい案件や立場の人同士で、ワイヤーフレームだけでなく、その周辺のものも直接やっていった方が良い。
そうでなければ、具体的な落とし込みは難しい。

今回良かったのは、ランディングページのワイヤーフレームの実例が見れたこと。
ランディングページをメインでやっている人は少ない。
コーポレート系しかしていない人にとっても、ランディングページのワイヤーフレームを見ることで吸収できることは多いはず。

勉強会のテーマは、もっと限定的にしないとやっぱり難しい。
「今日はコーポレート系」「今日はランディングページ」とか。
今日の反省点はそこ。
もっと限定しなければ、具体的にHOW TOに落とし込んだところまで勉強していくことは非常に難しい。

限定するパターンとして考えられるもの:コーポレート系、ランディングページ、アプリ、量産系、規模感(ページ数)、目的、UI、体制、内製or外注、ソーシャル

2つくらいは重なっていてもいいけど、何かしら限定しないと難しい。

参加者

Aさん

肩書き:
ディレクターみたいなことを言ってる。内容的にはほぼほぼマークアップエンジニアに近い。HTMLコードに関する研究、HTML5の中でも特にセマンティクスに関係するようなことに関する情報交換なんかを積極的に行っている。
日常的な仕事の内容:
HTML、スタイルシート、JavaScriptのコーディングがほとんど。最近はアプリケーションと見分けがつかないようなサイトの設計も。
どんなことに興味があるか:
やはり次世代関係(笑)。HTML5関係に興味があって研究もしている。

Bさん

肩書き:
デザイナー
日常的な仕事の内容:
デザイン。
どんなことに興味があるか:
NHKでネアンデルタール人とホモサピエンスが〜(面白い話だったので一同爆笑)

Cさん

肩書き:
一応プロジェクトマネージャーとデザイナー
日常的な仕事の内容:
Web全般。デザイン、コーディング、お客様対応、提案書作成など、もろもろなこと。
どんなことに興味があるか:
Webに関してはHTML5。前の会社のときは基礎的なことを勉強せずに「そのとき勝負」みたいな感じでやっていたので、ワイヤーフレームなどの基礎的なことを学ぶことに興味がある。

Dさん

肩書き:
クリエイター
日常的な仕事の内容:
マークアップ、JavaScript、スマートフォンサイトのデザインなどいろいろ
どんなことに興味があるか:
ディレクターやユーザーインターフェース、企画にも興味がある。今までワイヤーフレームはちゃんと書いたことがなく、今日もあまり意見を出せるような気はしないが、勉強させてもらいにきた。

Eさん(Webではなくグラフィックの会社)

肩書き:
基本的にはディレクターな動き、デザイナー的な動きも
日常的な仕事の内容:
最近プランニング的な要素も増えてきて、最終的にプロモーションに落としていくとか、そういうことが増えてきた。そういうキャンペーンものが増えてくると、どうしてもWebってのは切っても切り離せない状況になって、お客さんのところに行ってもWebの話が出てくる。皆さんとは畑違いで、Webに関してはほとんど無知に等しいが、この機会にそういう知識を入れて、お客さんともしっかり話ができるようになりたい。
どんなことに興味があるか:
(無し)

Fさん

肩書き:
ディレクター(元々はデザイナーで、デザインとコーディングメインだった。現在の会社に来てから一年くらい経ってからディレクターみたいなことをやらしてもらえるように)
日常的な仕事の内容:
最近はほとんどワイヤーフレームを書いたり、お客さんと遣り取りしたり
どんなことに興味があるか:
自分でワイヤーとか作るようになってからは、作ってなかったときよりもお客さんの要望がすごく分かってきたり、自分で考えたことを否定されても、ちゃんと説明したら向こうも「あぁなるほど」みたいな感じで、スムーズにいくこともすごい増えてきた。
なおさらちゃんと考えて、ワイヤーフレームを作らないとダメだなと。いろいろ勉強したい。

Gさん

肩書き:
ディレクター。Web業界には去年の10月に入ってきたばかりで、以前はコピーライターとしてWebに携わった。
日常的な仕事の内容:
直接お客様との遣り取りで、ディレクションを最近一つした。初めて自分が作ったワイヤーフレームを基にサイトを作ってもらうということを体験したが、自分の詰めが甘いせいで、作り直してもらったり、お客さんにうまく伝えきれなかったり、てんやわんやすることがあった。誰が見ても、あぁなるほどねと分かりやすく資料にするにはどうしたらいいか、勉強したい。
どんなことに興味があるか:
HTML5。今までと何が違って、それによってみんながどう便利になるのか、というところがまだピンときてないので、その辺を勉強していきたい。

Hさん

肩書き:
ディレクター。この会社に来るまでは主に制作畑で、作り上げるということがすごく好き。
日常的な仕事の内容:
制作ディレクションなど
どんなことに興味があるか:
ディレクションに携わって楽しいと思うのは、お客様との直接の遣り取りで、話し方や伝え方、あとは土台の大切さというのに今すごく興味を持っている。

Iさん

肩書き:
営業だったり、ディレクターだったり(日によって変える)
日常的な仕事の内容:
日常的にやってる仕事は、別にその区切りを持ってるわけではなくて、直接お客様から「こんなことしたいんやけど、どうやったら儲かる?」とか、バックリとしたことを投げられたことを商売に生かすために、Webに落とし込むという仕事。
これはWebちょっと無理よね、っていうときには、パートナーの企業に振って、何かプロモーションをしたりとか。
あんまりお金にならないこともよく……、そっちの方が多いが、そういう相談もされたり、一緒に何か企画したりとかをしている。
どんなことに興味があるか:
元々広告業界出身なので、当初はホームページを広告ツールとして認識していたが、段々Webがアプリケーションと曖昧になってきている中で、企業さんをどうPRしてどうするのが有効なメディアになるのかっていうところに一番興味を持っている。
もちろん日常的にワイヤーフレームを作ることもある。
アイ・ループとは、お仕事をいただいたりしていて、このワイヤーフレームの勉強会を聞きまして、まずぜひ二人を送り込みたいというのと、自分も、見よう見真似というか独学でやってきたところが多かったので、皆さんと意見交換できたら嬉しいなと思っている。

アダチユキ

肩書き:
ディレクター
日常的な仕事の内容:
ディレクションよりも、基本的には企画であったり編集であったりということが多い。お客さんともお話をしながら、そもそもこのサイトが必要なのか、から一緒に考えながら、それを原稿に落とし込んでいって、デザイナーや外部ブレインと一緒にサイトを作っていくという仕事。
どんなことに興味があるか:
インフォメーション・アーキテクト(IA)と、ユーザー・エクスペリエンス(UX)。

小林隆幸

肩書き:
ディレクター(アダチに教えてもらっているところ)。今回はTwitter実況(#iloopwire)もしながら、進行の補助なども。
日常的な仕事の内容:
基本的にはアダチのサポートというかアシスタント的なこと
どんなことに興味があるか:
IA、UX、HTML5、どうやったらWebがお金になるか

Home > Webディレクター・Webディレクション > ワイヤーフレーム勉強会@大阪(2012/02/19)レポート

カテゴリー
アーカイブ
タグクラウド

Return to page top