まーたダブキャンに行ってみた話

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

変な格好したWEBデザイナーです。

今回も【WCAN】に初参加しましたのでその時の覚書みたいなものを残そうと思います。

設計とデザイン

今回のテーマ「ワイヤーフレームとの付き合い方」これデザイナーなら必ず一度はイラっとしたことあるんじゃないですか？

僕のような若輩者はしょっちゅう感じている部分で、テーマを見ただけでだけで刺さりましたね。

あなたもご存知の通り一般的なWEB制作フローとしては、こうでしょう。

①設計 → ②デザイン → ③実装 → ④公開(納品)

そして今回のテーマであるワイヤーフレームは①の設計に当たる部分の中間成果物と言えるでしょう。

それではなぜ中間成果物をつくるのでしょうか。

⇒コンセンサスを得る（合意形成）のため 重要!

ちょっと寄り道して中間成果物の種類とそれぞれの役割・得意分野を見てみましょう。

■ワイヤーフレーム　→　情報構造

■ビジュアルカンプ　→　イメージ（見た目）

■プロトタイプ　→　ビジョン

■モックアップ　→　質感（スペック）

昨今よく耳にする「ワイヤーフレームよりモックアップの方が優れてる！」なんてフレーズがありますが設計段階の中間成果物は手段にすぎず、それぞれの役割・得意分野が違うため使いどころが違うその案件に適した手段を使うべきですよ～ってことですね。

「コンセンサスが取れない中間成果物なら作らないほうがまし」ですよ！その工数が無駄ですもんね…。

わかりやすい例えでは「はさみ」と「カッター」を上げていました。

目的は「紙を切る」と同じですが使うシーンはそれぞれ明確に違いますよね。

 

 UIデザインはワイヤーフレームを超えていけ！

どこまでワイヤーフレーム通りにデザインすればいいの？

ここ変えちゃっていいの？　文字の大きさってこれでいいの？

ディレクター大先生が作ったワイヤーを僕のようなデザイナーが変えちゃっていいのかなって場面あなたもあるでしょ？

先程紹介した通りワイヤフレームは情報構造のコンセンサスを取るのに適した中間成果物なんですねつまりワイヤーでセクション内の細かいレイアウトやブロック内の情報の強弱なんかは詰まっていないと考えていいでしょう。

「この順番でここにこれを入れたい」って程度の設計図なわけですね。そこからみやすい！使いやすい！かわいい！を作るのがデザイナーのお仕事ってところでしょうか。

⇒UIデザインへの落とし込み

⇒ユースケースをデザインフェーズで考える

具体的にどうやるのって部分少し紹介します！

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

…ページ毎だけでなくブロックの中でユーザーが見たいもの（クライアントが見せたいもの）を明確にする

■主役はひとかたまりにする
…必要なものを固める

■主役は脇役よりも目立たせる
…ここだけ見て貰えば成立する を大事に

■コンテキストを反映させる
…ユーザー目線を考える等

■ラベルは行動を明示する
「OK」「 キャンセル」→　わかりにくい
行動をラベルに入れる 「参加する」「参加しない」等
口語に砕くとわかりやすい（砕き過ぎに注意！）

■ユーザー操作を減らす
ページの下の方でのドロップダウンメニュー等
→スクロールしないといけない→操作を減らす

■何もない状態のアドバイスを
お気に入りゼロ件の表示
→お気に入りのおすすめを表示する等

■モーダルとモードレス
モーダルにしていいのかを良く考えよう

■不安を解消するインタラクション
マイクロインタラクション ：保存しました等（無いと保存できた？どこ？等が発生する）
css：active 等

 中間成果物は！

「決まったこと」 と 「デザインの領域」が明確に分けられているとやりやすい。

デザイナー・エンジニアもワイヤーフレームに口出しする事でクライントの熱量がわかる。

ディレクターとデザイナーがワイヤー作成の時点から情報共有するのは必要なことですねでもいつもいつも打ち合わせに同席してたらデザイナー死んじゃいますよね。

そこでコミュニケーションを取りながら作成するのが必要です。

○インビジョン※インビジョンはコメントに色分けができる

○ドロップボックス
等のサービスを利用して情報共有やコメントをつけるのが効果的です。

 まとめ

●中間成果物はコンセンサスを取る手段

●ワークフローに適したものを選ぶ

●何についての合意を得るのかを明確に

●UIデザインはワイヤーフレームを超えていけ

●中間成果物の過程もコミュニケーションする

今回はもやもやしてる部分に答えをもらえたような気持ちになりました。

羽生くん金メダルおめでとうございます。