兵庫県で開催された
CSS Nite in KOBE, Vol.29へ参加してきました！
お話いただいたことは
「UIデザイン捕物帖 〜デザインフェーズにおけるワイヤーフレームとの付き合い方〜」
講師は株式会社まぼろしの松田 直樹さんです！
Web制作の中で、設計・デザイン・実装・公開という段階があります。
今回は、「設計」と「デザイン」の間で用いられる
ワイヤーフレームの設計についてのお話でした！
この記事はHGP創英角ﾎﾟｯﾌﾟ体でお送りいたします。
ワイヤーフレームの目的
ワイヤーフレームとはそもそも何のために用いられるのか。
それはクライアントとディレクター間では「機能要件」や「情報構造」の設定。
そしてディレクターとデザイナー間では「レイアウト指示」や「完成イメージ」を伝えるために使われるようです。
同じワイヤーフレームでも、読む人によって与えられる情報が違うということに初めて気づかされました。
そしてワイヤーフレームは両者間で同意（コンセンサス）をとるために使われるということで
逆に同意がとれないと感じた場合はワイヤーフレームではなく突然デザインカンプを出したっていいということです！
通過儀礼として使われがちのワイヤーフレームですが、必ずしも必要ではないのでその時々応じたものを使いましょうということでした。
ワイヤーからデザインへ、ワイヤーを超える
デザイナーの仕事といえば、ワイヤーフレームをデザインに仕上げることですが
ディレクター側からすれば「ワイヤーそのままじゃん」という悩みの種もあるそうです。
もちろんデザインをする側からすれば
「わざわざワイヤーでこの形にしていたのは意味があるのでは？」
「後で『ワイヤーと違うよね、なんで勝手に変えたの？』と言われるかも」という悩みがあります。
そんな中で、デザインがワイヤーを超えるための一工夫を教えていただきました！
特に印象に残ったのはこのふたつ。
「主役を目立たせる」ということ。
ひとつめが、掲載内容と機能定義をしたワイヤーを見たままデザインしてはいけないということ。
この場合、あくまでもグラフがメイン。
見出しは、グラフが目に留まった人なら読むだろうし、絞り込みボタンも毎日変更するわけではないだろうから隅にアイコン表示でいい、とのこと。
聞いた瞬間、なるほど、と思いました。
ついつい「アイコン＋文字」でデザインしてしまいがちですが、リテラシーや閲覧者の学習能力を考えると歯車アイコンだけで通じるということです。
なるほど。
また、他にも多いのが、見出しの入れ子ごとに文字サイズが小さくなっていくこと。
もちろん間違っていませんし、マークアップのときは、検索エンジンが相手のときはそれでいいそうです。
むしろコーディングのことをわかっている人ほど文字サイズの入れ子方式に捕らわれてしまうのかもしれません。
しかし人が見るときは、何が一番重要なのかを考えてデザインすることが大切ということでした。
検索エンジンのことを考えるのがマークアップエンジニア。
人のことを考えるのがデザイナーということですね！
ワイヤー通りに「お問い合わせ」が一番大きな文字でいいのか、
一番重要なのは「電話番号」ではないのか。
特にお問い合わせというセクションは電話番号を見た瞬間、「お問い合わせだな」というのがわかるのも特徴です。
わざわざそれほど大きくする必要もない、ワイヤーから1歩進んだ提案が必要だということです！
他にも
- 主役はひとまとまりにする
- 主役を目立たせる
- 主役はわき役よりも引き立てる
- コンテキストを反映させる
- ラベルは行動を明示する
- ユーザーの操作を減らす
- 何もない状態にアドバイスをする
- モーダルとモーダレスを気を付ける
などがありました！
具体例はもっと素敵なイラストで松田さんのスライドをご確認ください。
（どこかで公開されているとよいのですが…！）
ラベルは行動を明示するもわかりやすいですよね。
ワイヤーに「OK」というボタンがあっても
デザイン段階で「申し込みをする」という行動に即した文章に変えるべきだということです！
また文語よりは口語を用いたほうが、よりユーザーの心理に刺さるようです！
例えば松田さんも例に出されていましたが、「寝る」と「就寝する」のような。
いつも頭の中で「我、就寝ス」とか思わないので、「就寝する」ボタンはどうも他人事に思われがちになってしまいますね。
デザインに迷ったら？
UI Flows という考え方で、何が重要かを見極めるのがおすすめだそうです。
塊ごとに、ユーザーが「何をみるのか」「どう行動するのか」を考えると一番大切なコンテンツが見極められるということです！
もちろん
・何を見るのか：電話番号とフォーム
・どう行動するのか：電話をかける
・どう行動するのか：メールを送る
など同じ個所でもどんどん分岐していきます。
とことん書き込んでみたらいいと思います^＾と素敵な笑顔でした。
ワイヤーの在り方
今回松田さんの会社では、
「ワイヤーは要件定義・情報設計に特化」ということで、中途半端にデザインの要素をいれないようにしているとのことでした。
その代わり中に何を載せるか、コンテンツだけはビチッと決める！とのこと。
ディレクターとデザイナー間で「決まったことと自由でいいこと」が明確にされていると両者うまくいくとおっしゃっていました。
しかし要件と設計に特化したワイヤーを見てもデザイナーには伝わらないことが多いはず。
そこで、クライアント向けのワイヤー作成の段階でデザイナーさんも話に加わるそうです。
「ここはデザインでカバーします」
「これはなぜこの位置なんですか？」
「この数は可変ですか？固定ですか？」
など設計段階から加わることで、設計しつつイメージも膨らむそうです！
デザイナーさんの工数が増えますね
あくまでも参考として。
ワークショップ
後半は与えられた架空の企業の求人サイトを作るというワークショップ。
ワイヤーの初校が配られるので、クライアントになった気分で手直しし、またほかのグループが手直ししたワイヤーを自分のグループで再度ブラッシュアップするというものでした。
私のグループは関西圏のベテランの方が多かったのですが、それぞれがワイヤーから読み取れることに対して意見を言い合う。
例えば「新卒でプロジェクトリーダーを任せらる」とか「1年目から経営プロセスを経営したい、独立志向型の学生がほしい」というクライアントの要望に対し
「じゃあ安定志向型の人は避け、福利厚生の項目はもう少し下に記載しましょう」
「独立志向のあるひとならわざわざ（東証一部上場）と書かなくていいのでは」など。
福利厚生は「募集要項」の一環として優劣つけず必ず必要だと思い込んでいた私にとっては目からうろこでした。
あとは社内のワイヤーフレームに慣れすぎていて、
ここまでデザイン要素を含んでいないワイヤーもすごいなと感じました。
本来なら中央揃えであろう箇所も、すべて右揃え。
2カラムにするだろう箇所も箇条書きだったりしました。
ここまでデザインがないと、デザイナーもさすがにこのままデザインにはできない。
ならどう配置するのがいいか、など必ず考えますね…。
とかなり勉強になりました。
私がワイヤーフレームを作るときは参考にしてみたいです。
と、新神戸までえっちらおっちらと移動しながら有意義な半日でした！
最近ワイヤーをいただいてデザインにする業務が多いので、今スグ使える技術として大助かりです！
新しい視点、考え方をもってデザインに落とし込めたらなと思います。
CSS nite 公式のレポートはこちら。
cssnite-kobe.jp
