WCAN 2018年2月

WCANに参加してきました！今回はお話を聞くだけでなくハンズオンもありました！イベントは13時〜17時で登壇者はお一人なのに時間が長いなと思いましたが、ハンズオンでは時間が全然足りませんでした＾＾；
セッションでは、フレームワークをなんの為に作るのかを聞き、ハンズオンではグループワークを通してフレームワークを作っていく過程を体験することができました。

タイトル

デザインフェーズにおけるワイヤーフレームとの付き合い方

セッション

ワイヤーフレームの存在意義の再確認やデザインに落とす際の判断の仕方などを忌憚なく紹介いたします。

ハンズオン

仮のワイヤーフレームを読み解き、グループ内で簡単なデザインを起こしてみましょう。グループ間での違いなどから「気づき」を得られるワークを目指します。

---

セッション

中間成果物とはコンセンサスを得るための手段

Web設計は、設計→デザイン→実装→公開 というフローになっています。そのフローの間には中間成果物が発生します。
中間成果物を作る目的は、「コンセンサスを得る」ことであり、ワイヤーフレームなどはその手段です。中間成果物と言っても、ワイヤーフレーム／ビジュアルカンプ／プロトタイプ／モックアップ など複数の種類があります。これらは特徴の異なる複数の選択肢（手段）であり、優劣はありません。何の合意を得るのかを明確にして適したものを採択する必要があります。

UIデザインとワイヤーフレームをどう繋ぐのか
〜ユースケース（use case）はデザインフェーズで考えます。〜

ユースケースとは、活用事例のことで、 使う人目線で使う人とシステムのやり取りをイメージすることです。
参考元：わわわ辞典 -ユースケース (use case)-

可視範囲ごとの主役を明確にする

そのデザイン（一つのブロック内で）の「主役」は何かを考える。「主役」とは、クライアント側が見せたいものです。クライアントが何を目的（主役）にしているのかを明確にするデザインにするといいです。

主役は脇役よりも目立たせ、ひとかたまりにします。主役を決めたら、他のコンテンツよりも目立たせる必要があります。ひとかたまりにするとは、例えばECサイトでは「買うという意思決定ができるものをひとかたまりにする。」ということです。

コンテキスト（文脈）を反映させる

例えば、カフェのWebサイト。
そのカフェへいくユーザーが体験するフローの一つ目は、内装や外観になります。したがって、ユーザーにとっての初めのコンテキストは「そこに行く」ことです。ユーザーのコンテキスト冒頭となる、内装や外観、住所をWebサイトの上へ記載するとよりユーザーがカフェへ訪れ易くなります。

ユーザーの操作を減らす

例えば、ドロップダウン（ボタンをクリックするとリストが下に出てくるもの）であれば、画面の下に実装すると、ドロップダウンボタンを押した時にスクロールする必要が出てしまいます。画面の上の方に実装しましょう。

何もない状態にアドバイスを

例えばECサイトの場合、初めて会員登録した人の「お気に入りリスト」は0件になっています。そこで、お気に入り0件という表示以外に、「気になった商品を登録してみよう！登録したものは後から買えばいい！」というようなテキストを入れると、お気に入りに登録するハードルが下がります。

ラベルは行動を明示する

行動をボタンにテキストとして明示すると、なんのボタンなのか分かり易くなります。
さらに、文章体よりも口語体の方がWebサイトを見ている人にとっても読みやすいので、なるべく口語体を使うといいです。

不安を解消するインタラクション(interactions)

インタラクションとは、ボタンをクリック（アクション）した時に、ボタンが沈む（リアクション）などの関係性のことです。人間が何かアクション(操作や行動)をした時、そのアクションが一方通行にならず、相手側のシステムがそのアクションに対応したリアクションをすることを意味します。
先ほど例で出したボタンでも、インタラクションがなければ、ボタンを押したのか押してないのかわからなくなります。ユーザーの不安を減らすためにもインタラクションを考えて行く必要があります。
※インタラクション参考元：ferret-インタラクション-

ワイヤーフレームがわかりにくくなる原因

クライアントにも、制作会社にも分かり易く両立しようとするのが原因です。両立しようとすると中途半端になるため、クライアントには要件定義、情報設計のみをワイヤーフレームに反映させます。そして、デザインの領分と、要件定義・情報設計で決まったことを分けるとやり易くなります。
また、クライアントとの打ち合わせにもデザイナーやエンジニアが同行しましょう。クライアントとの合意した過程（文脈）を知っておくと、クライアントがどこに目的を置いているのか、どんな背景があるのか、どんな思いがあるのかなどを知ることができ、資料から読み取りきれない部分もWebサイトへ反映させることができます。
ワイヤーフレーム以上のことを取り入れる時、中間成果物を通すことで、コンセンサスを得るための、コミュニケーションをとることができます。

---

---

ハンズオン感想

---