ワイヤーフレームからデザインを起こしてみるワイワイ会No.2 2017年04月26日

情報設計視覚化研究会が主催する、
ワイヤーフレームからデザインを起こしてみるワイワイ会No.2に参加してきました。

インフォメーションアーキテクト枠とデザイナー枠があったので、
インフォメーションアーキテクト枠で参加してきました。

インフォメーションアーキテクト側はワイヤーフレームを作成し、
ビジュアルデザイナーは新しいトーンマナーを参考にしてリデザインするというものでした。

会場が新しくなったDMM.comさんで、
部屋までの道のりがすごい、どこを歩いているのかわからない・・・

■ワークショップ

参考サイトとしてソニテック社のサイトを例とし、
サイト設計時のサービスブループリントとサイトマップが提供されたので、
それを元に作業を進めていきます。

1.とりあえずひとりでサイトマップとワイヤーを考えてみる。
 →僕はあえてサイトマップと本番サイトは見ないようにしました。

→KPTで振り返り。

  ・Keep
   ・画面設計する前にサービスブルーブリントに情報をまとめる。
   ・小さい文字をカメラにとって拡大できたこと
   ・サービスブループリントを知ったこと
   ・ユーザー要件を頭に入れておく。
   ・PCでの作業だと画面の増減がかんたん
   ・新規、リピーター。ユーザーアクションを分類
   ・全体をユーザーで把握してからほりさげた
   ・サイト構造を知ることができた。誰に対してのサービスなのか分かった。
   ・限られた時間でできる範囲の作業をまず想定する。
   ・トンマナ資料からキーワードを自分で抽出(不明なのは調べてメモ)
   ・ユーザーの行動を細かく想定できた。 
   ・人の行動が明確
   ・まず全体をざっくりとらえようとしたこと
   ・ユーザーと問題的をまず明確にしようとした。
   ・サービスブループリントからユーザー行動順で検討した
   ・サービスブループリントからサイトマップにひもづけて機能をむすびつけようとした。
   ・ざっくり見て、全体の行動を射て把握した。
   ・要件を自分なりに整理してまとめて、UIの全体イメージした。
   ・絵を描きながら、昨日のイメージを固めていった。足りない要件をメモった。
   ・ユーザー要件を読み込み、本質的なやりたい事を理解しようとした
   ・建築資材という自分に接点のない領域を先入観なく理解するようにした。
   ・ブループリントを見てユーザに最低限必要だと思ったものを手書きする
   ・サービスブループリントを読み込む(というか作る)
   ・ユーザー要件を定義する(設計前に)
   ・サービスブループリントを見る
   ・ユーザーの行動を考える
   ・紙でワイヤーフレームを書く
 
  ・Problem
   ・資料を配るの大変
   ・購入導線の把握がしづらかったので、資料が欲しい
   ・サイト全体の把握が遅かった
   ・ユーザーの導線ストーリがうまく描けていない
   ・商材がわからない
   ・ペルソナもわからない
   ・青と建材がむすびつかない
   ・SP/PCのシェアがわからない、情報の優先順位が分からない。
    ECの経験がないのでこの構造が良いのか分からない。
   ・この後の具体的な作業工程の計画できてない
   ・最初WFだけみてデザインを考えようとしてしまった。
   ・カラーが多すぎるかも
   ・頭の中で整理する前に手を動かしはじめた
   ・こういうときボールペンは書きづらい
   ・全資料を網羅することができなかった
   ・ざっくり見すぎて細かい導線をはしょってしまった。
    部分部分作ってしまったんおで全体の流れを基にして作り変えた。
   ・「りだつ」のシナリオも知りたかった。(SBPの主旨とは異なりますが・・・)
   ・商品数やカテゴリ数の全体像がよく分からない
   ・とりあえず画面設計書きたくなる。
   ・サービスブループリント作らないなー

   ・Try
   ・作業する時に視野を広げる
   ・事前に置いてあると時間短縮!
   ・元サイトの購入ステップの読み込み
   ・ユーザー、企業、全体の理解を深める
   ・タスクごとのグルーピングを明確にしていく
   ・商材の写真、詳細例。業界の情報が必要
   ・建材はグレーなのではないか
   ・他社がどのようなサイト構造になっているか調査する
   ・ワイヤー作った人に口頭でかんたんに説明してもらったら、この後スムーズかも。
   ・最初にWF以外の情報もあつめる。
   ・カラーの数を減らす
   ・頭の中でどうまとめるかイメージが浮かぶまで手を動かさない
    しっかり全体を把握してから動く
   ・最初に全体像を把握するように資料を見るべきだった
   ・ユーザーのニーズ、ビジネス要件など、全体の大枠を理解して政策をする
    ざっくりしたユーザーの行動フローを描く
   ・ステークホルダ、実際のUsrにIntして、事実をもっと集める。
   ・カテゴリー一覧を資料として用意する(商品数を含む)
   ・サービスブループリントから設計図を書く。
   ・サービスブループリントを書こう!

2.ペアになってワイヤーを作ってみる
 (超むずい)

→KPTで振り返り。

  ・Keep
   ・人によって思考が違う
    ペアワイヤーフレーム面白い
   ・最初からふかぼりせずトップに集中して設計を考える
   ・思っていること分からないことを話す
   ・お互いを否定せずに、良いアイデアを広く出すことができた。
   ・役割り分担(お互いの強み)を把握して議論することができた。
   ・要件を自分なりに整理してまとめてUIの全体のイメージした
   ・間違ってることは、間違っていると言って下さいと言ってくれた。
   ・役割り分担ができていた
   ・絞り込みがいい感じでできた
   ・知恵を出し合っていいWFができた。
   ・相手の方とちゃんと相談できた
    手を動かす前に考えられた
   ・まずデザインのポイントを共有→どうしたら実現できるか認識合わせ
   ・色の使い方など目的に合わせ選択。
   ・ユーザーにとってのこのサイトのメリットを定められた。
   ・新規、リピーター。ユーザーアクションを分類
    お互いに相手の意見を聞くことが出来た気がします。
   ・サイト構造を知ることができた
    誰に対してのサービスなのか分かった。
    色々と相談しながら話を進めることができた
   ・大枠のこう進めましょうをすぐ決められた。
   ・話し合いながらのアイデア出しははかどる。
   ・最初に要素を洗い出した。
   ・XDが早い事を発見
    斉藤さんの洞察が深い
    IAはいつも1人だが相手がいると楽しい

  ・Problem
   ・ユーザー中心デザインかな?
   ・結局ワイヤー書きはじめてから足りない要素に気づいた(書き出した)
   ・検索がどうあるべきかが不明確
   ・もう少し手を動かしたかった・・・
   ・ざっくり見すぎて、細かいところをはしょってしまった
   ・時間内でやれることを決めきれなかった(ゴールイメージがなかった)
   ・全体の把握がやっぱりムズカしい、ユーザーのことをあまり考えなかった。
   ・細部の確認がちょっと遅かった
   ・時間内にできる事がしぼり切れない
   ・トップページがLPのようになってしまいそう。
   ・ユーザーの導線ストーリがうまく描けていない
   ・少し思い込みの強い意見を出してしまった。
   ・SP/PCのシェアがわからない、情報の優先順位が分からない。
    ECの経験がないのでこの構造が良いのか分からない。
   ・時間が足りない。話が着地しなかった
   ・最低限なにをするべきか考えられなかった。
   ・2人でやる際の分担が難しい
   ・手を動かすタイミングが遅かった。時間配分ミス
   ・遅い(自分の作業)

  ・Try
   ・ウォークスルーはしたほうがいい
   ・漏れなく考える
   ・検索機能のユーザビリティをよく考えて仮説を出す
   ・要件整理が楽しくなってもゴールを決めてやるとこまでやる。
   ・ユーザーのニーズ、ビジネス要件など全体の大枠を理解して制作をする
    ざっくりしたユーザーの行動フローを描く
   ・全体をもっと見たい!! ユーザーをもう少し意識する。
   ・時間を意識して手を動かす。
   ・決断するタイミングを最初に決める。
   ・ワイヤーにしてより具体的に検証したい
   ・タスクごとのグルーピングを明確にしていく
    もっと相手の話を聞かないといけないと思いました。
   ・他社がどのようなサイト構造になっているか調査する
    とりあえず手を動かす
   ・時間がないときは、最低限何が必要かを意識する。
   ・話し合ってうまい事WFをマージする
   ・たくさん手を動かしてトライ&エラーをくり返す
   ・あらかじめ知っておくべき課題。

3.デザイナーさんがつくったものを共有してもらう。
(ちょっとデザイナーさんが趣旨を理解していなかったようで、お話をして終了。)

▼最後にYWTで振り返り
  (やったこと、わかったこと、次にやること。)

  ・やったこと
   ・ふだんどのように作業をしているか聞いた
    2人で考えたWFをデザイナーに共有
   ・情報の整理、共有
    共有と改善→ワイヤーの下書
   ・情報整理、ワイヤーフレーム作成、目的・ターゲット明確化、導線の確認
   ・お互いの話をよく聞いた。
    なぜそうしたかを質問して答えた。
    ワイヤーに良い点を加えた。
   ・方針を共有した
    サイトの強みを考えた。
    ユーザー行動をイメージして要件にないUIを考えついた。
   ・ペアでワイヤーフレーム
    お互いの考えの共有
    ディレクターさんとデザイナーで考え方の共有
   ・サービスブループリントを初めて読んだ
    サービスブループリントを利用した
    ワイヤーに落とし込む前に要件を洗い出した。
    ユーザー要件を定義してみた
    初めて会った方とペアでデザインした。
    目的と時間にあった範囲にしぼった

  ・わかったこと
   ・思想を共有しないと、作業者と指示者になってしまう
    アウトプットを統一しないと進めない
   ・1つのサイトに来るユーザーにも大きな違いがある。
    デザイナーがいて具体案がました
    他人の意見を知ることで、新たな気づきが多く勉強になった。
   ・デザイナーがワイヤーの情報いの順番を基本守って製作するとわかった。
    サイトのコンセプトのイメージだ絵にデザインがかたよりすぎた
    →機能を重視も合っていた。
    デザイナー、IA 両方から話し合いながらワイヤーを作ると良いものが出来そう
   ・企画の最初から同じ情報でアイデアを出すと視点が広がる。
   ・ユーザー目線が不在
    サイトのプロモーション部分が大きい。又はいらない。
    工程別に買えること。
    IAとデザイナーの分担は、先入観なく都度考える。
    3人で話し合って初めてわかった気づきがあった。
   ・ワイヤーフレームの方法論
    サービスブループリントがよくできている。良い資料
    アウトプットしてから形になるまでの時間が足りない。
   ・大型のサイトだと今のやり方が通用しなそう
    ワイヤーをどこまで作りこんだ方がいいか
    IAの方たちは悩んでいる。
    デザイナーさんとはもっとコアな部分を共有した方が良さそう
    デザインもどこまで変えていいかは話し合いが必要。

  ・次にやること
   ・参加者との意識の共有をやる
    分かりやすい説明を心がけたい
   ・形にしようとする前に情報を整理する
    ワイヤーをチームで話しながら作る
    担当者の嗜好をヒアリングしてデザインに落とし込みたい
   ・デザイナーもIAの領域に踏み込まないと良いデザインができない
    IAとデザイナを最初からチームにして作業したい。
    仮想の担当者をたててみんなで質問(ヒアリング)する時間を作って欲しいです。
    改善なのか?根本的なリニューアルなのか決めたい(ビジネス要件)
   ・実務でもこの形式でやりたい
    ワイヤーを作り込む前にデザイナーと話すとより良いものができる。
   ・ビジネス要件、ユーザー要件と一緒に考える。
   ・ウォークスルーテストしてみたい
    良いブループリントを作れるようになりたい
   ・設計する前にデザイナーとコミュニケーションをとる
   ・IAの人たちの失敗談を聞く。

理想で言えば、IAが作ったワイヤーフレームでデザイナーさんがデザインしてみるのがいいんでしょうけど、
時間的に難しいものがあるので、悩みどころですよね。
ともかく、久しぶりにIA的なことをやったので、とても楽しかったです、
主催者の皆さまありがとうございました。

懇親会はサクッと牛タン屋さんへ行きました。

コメント

タイトルとURLをコピーしました