6/05(水)、「Tech Guild - Non Designers Design」に参加してきました。 #devlove
はじめに
ずいぶん前の話なんですが、先月6/05(水)はDevLOVEのイベント「Tech Guild - Non Designers Design」に参加してきました。
プログラマってのは大体デザインセンスが壊滅的な状況にありまして、それはオレも例外ではなく。そうはいってもある程度ドキュメントやら管理画面やら自分でデザインっぽいことをしなきゃならんシーンも仕事ではあるので、逃げては通れないわけです。そんなときちょっとでも見栄え良いものが作れないかなぁと思ったのが参加のきっかけ。
あと職場から会場のオラクル青山センターに行き易かったのも理由のひとつだったり。
オープニング
…はいつもの@papandaさん。だいたいいつもとおんなじことを喋ってたのでざっくり省略。
ノンデザイナーズデザインブックを読み解く。
今回の主題である「ノンデザイナーズデザインブック」について、まえださんに解説して頂きます。今回の発表は以前別の場所で発表したものの再演という形で、とはいえ今回用にボリュームをUPしているのだそうです。スライドは以下。
- ノンデザイナーズデザインブックを読み解く
自己紹介
書籍紹介
- デザインの4つの基本原則
- 近接
- 整列
- 反復
- コントラスト
- 参考書籍
- ノンデザイナーズデザインブック
- MIND HACKS
- インタフェースデザインの心理学
基本原則1 近接とは
- バラバラなものは、似たようなものは近くに寄せるまとめる
- 関連する項目をまとめるグループ化する
- →組織化
- なぜ近接が重要か？
●●▲▲●●▲▲●●▲▲
- ex3) 顔文字の連続
m9(^Д^) (#^ω^) (´・ω・`) c⌒っﾟДﾟ)っ
- 互いにに閉じあっているものはひとまとまりになり易い
- 「メ」←とがったものが二つ重なっているようには見えにくい
- なぜこうなる
- 外界を素早く知覚するための脳のショートカット機能。
- 無意識にグループ化してしまう。
- 人は分類せずにはいられない
- 視覚野：ゲシュタルト原理により知覚したもののパターンを自動的に見つけ出そうとする
- 見出しを付けると理解が進む
基本原則その2：整列とは
- バラバラなものを揃える
- ページ上の全てのものを意識的に配置すること
- 余所が離れていても整列していれば見えない線で紐付けることが出来る
- →組織化
- なぜ重要か
- 特定の図形パターンだけに反応する細胞がある
- ex)大量の文字
- →上端のライン
- →サイドのライン
- 中央ぞろえにしてしまうと
- →縦線横線が無い
- →目が泳ぐ
- →意図的な厳粛な表現の場合はおｋ
- なぜ整列が重要なのか
- 対象の「あらまし」を掴むのは中心視野より周辺視野の役目
- →真ん中が見えてなくても状況は理解できる
- 顔は変わらないのにいやらしい顔に見える
- 穴空き画像
- →ピンクの方が卑猥
via : http://matome.naver.jp/odai/2131434192086229601:
※滝川注：まえださんが実際にプレゼンに使われたのは男性の画像なので、あくまで参考画像として下さい。(ネットで探しても女性のグラビアしか出て来なかった)
- ウェブサイトをパッと見たときに
- 縦横が揃っている
- →周辺情報が整理し易い
- →揃っていないと情報が整理できない
- 人間の祖先がサバンナで生き残れたのは周辺視野のおかげ
基本原則その3：反復とは
- デザイン上の何かの特徴を作品全体を通して繰り返すこと
- →装飾
- なぜ重要か
- 人はパタン認識で物事を式別する
- ジオン理論
- 目の前にあるものを式別する時には基本的な立体一幾何形体(ジオン)で認識する
- 複数の単純な形態の組み合わせで物の形を理解する
- 単純な図形を利用するとジオンを見分けやすくなる(説明イラストとか)
- 目に入った情報は2次元情報として脳に伝えられる
- 3次元情報は変換時のオーバーヘッドがちょっとある
- →フラットデザインの方が良いのか？ (※適材適所
- 後ろは振り返らない
- 直前まで注意を向けていた物体や場所には「注意を向けにくい」
- 食べ物探しの効率化？
- 復帰抑制
- 一度見たところにはもう一回目が向けにくい、脳が勝手に情報を捨ててしまう
- ex1) ヒートマップ
- レイアウトが単調な場合、変化が乏しく刺激も少なく退屈、見ていてつまらない
- →見落とす原因
- ex2) 字の多いリファレンス
- レイアウトに変化がある場合
- 要所要所に刺激があって見てて楽しい、見てて飽きない
- →初めてですよここまで私に読ませたページは。
- ex3) http://agile.esm.co.jp/userstorymapping/startup_userstorymapping.html
- 反復は重要だがあまりこだわらない
- 重要な部分であえて反復を崩すことで注意を引くことが出来る
- 反復は添え物的な部分に使うと効果が高い
- 読んでる時に邪魔にならない程度に視界に入る
基本原則4：コントラスト
- なぜ重要か？
- 三次元認識
- 遠くのものはくすんで見え、近くのものははっきり見える
- →くすんで見える≒遠い、背景、重要じゃない
- →はっきり見える≒ちかい、はっきり見える、重要
- 実際の画像：くすんで見える
- 雲野コア
- 濃い
- KDDIのエイプリルフールネタ
- http://www.cloudcore.jp/vps/kumonocoa2012/index.html
- クラウディア窓辺
- オラクルサポートキャラ
- 今は犬
- 犬なのに難しいこと呟いてる
- Oracle Support Japan ←更新止まってる、サポートしてないじゃん！
- http://www.oracle.com/jp/corporate/candy-177057-ja.html
- 三次元認識
- 交通標識
- 赤は重要な標識
- 青はあまり重要じゃない、緊急じゃない情報
- 注意は選択的に働く
- ex) 夏目漱石：こころ？ 恥の多い生涯を送ってきました。
- →太字のところだけ拾い読みをすることが出来る
- →何か所かだけ焦点を合わせ、それ以外を無視できる
- →カクテルパーティ効果
まとめ
- 基本的なデザイン技術にも科学的な裏付けがあった
- エディタでもやってた
- Speaker Deckにも情報があるよ
QA
続いて参加者からまえださんへの質問タイム。
何にも関係ない話から入ったのは意味があった？
- →ないです！自分の緊張をほぐすため
ダイアログ
休憩を挟んで、DevLOVE恒例のダイアログ。前後4人一組になって今回のテーマについてグループで話します。
今回は前振りで「まえださんに質問したい事があったら」とあったので、ダイアログで暑かった内容からそのまま再度質問タイムになりました。
我々のグループはオレも含め5名、お一方企画を専任されている方と、女性のデザイナーの方がいた以外は全員がPG・SEでした。中にはサーバサイド専任のエンジニアもいたので、普段デザインに触れない方がどうしてこの会に興味を持ったのかが個人的には気になりました。
- 自分やお客さんが気持ちいい に収束するはず
- →最終的な判断材料
- 他のアプリから参考に
- フラットやんないとなぁー。
- 自分の好きな感じ
- ←説明はできない
- 説明はできるとかっこいい
- 紙のものをどうWebに移すか
- 基本原則4つをすべて導入できない場合は？
- どれが一番キてるか？
- 整列
- 縦とか横とか整理すればそれだけでかなりいけるのでは？
- デザインをしたときに自分にとって「良い」と思う評価基準ってなに？
- いいかんじで作って下さい、カッコよく作って下さい と言われたときにどうデザインを進めて行くのか
- →何を伝えたいのか考える
- →自分の好きだと思うサイトをいくつか挙げて貰う
- →いくつかまぜていい感じに出す
- フラットデザインに最適な日本語フォント
- (質問者)自転車貰い損ねた人
- プログラマ＝理論を積んでいくのは得意、でもそれじゃ足りないのでは？
- カラーコードの数字を揃えたくなる
- paddingとかの数字に意味を持たせたくなる
- 縦横比を気にしたくなる
- 見る人に愛を持って
- お客さんが修正すると愛が無くなっちゃう
- →お客さんとフィーリングが合うと愛があるサイトになることも
- 色とかは色見本を参考にした方がよい、カラーコードに気を取られない方が良い
- →シフト矢印で1px、10の倍数でやってる
- →紙でやってる人も
クロージング
まえださんから最後にひとこと。
- 特にまとめとかは無くて
- スライドを音読しただけになってしまった
- テキトーに印刷所に頼んで名刺作ったら厚い紙で作られちゃった
- ←コースター用らしい
- ↑良かったら貰ってやって下さいw
その後@papandaさんと会場をご提供頂いたオラクルさんからご挨拶があって、この勉強会は終了となりました。
総評
この本を事前に読んでいたわけじゃないんですが、それでもわりかし「予想通りの内容だったなぁ」というのが、まえださんの話を聞いていた感想です。デザインとかセンスとかいったフワッとしたものを、プログラマ、というよりは、理系人間に理解し易いように、過去事例やデータや人間の構造・生物としての歴史なんかも踏まえて「なぜそのデザインの手法を選ぶと人間は見易いのか」という点が非常に分かり易く説明して頂けたと思います。ああいうバックグラウンドの知識がきちんとあるってのはいいですね。単純に自分が自信を持って使える、というのも強みなんですけど、それ以上に「他者になぜそれを採用したのか」をきちんと説明出来る、説得出来る材料が持てるというのが素晴らしいと思います。「なんとなくだけどこっちの方がカッコイイじゃん」なんて説明もなってない説明、したくありませんもんね。
ただ、今回の勉強会、ちょっと不満も残りました。これはまえださんやイベントに、ではなく、ダイアログの進行についてです。
我々のグループは主にオレがファシリテーターを務めたんですが、ちっともダイアログが盛り上がらなかったんですよ。コンテキストの違う中で皆の話題を引き出して盛り上げ、一定方向に回答なり疑問なりを導き出す、DevLOVEでダイアログをやる時にはオレは出来るだけ自身がファシリテーターをつとめて、それを実現出来るように心がけています。まぁ尤も上手く行った事の方が圧倒的に少なくはあるんですけど、今回は特別に上手く行かなかった。参加された方のコンテキストがあまりに違い過ぎて話がまとめられず、話題も転がらなかった。
特に、デザイナーの女性の方と我々エンジニアとの会話の接点がほとんど無かったように感じました。今までオレが勉強会で出会うデザイナーさんというのは、ある程度システム寄りの部分に持っていたり、あるいはもっとユーザー体験(UI・UX)を意識していたりする人が多かったので、一般的なイメージの「デザインを専任にされるデザイナー」さんとちゃんと話したのはこれが初めてな気がします。
そこから感じたのは「デザイナーさんってのは、もしかして自分の仕事以外に興味が無いのか？」ということ。綺麗なデザインが作れたり、PhotoshopやCSSのテクニックだったり、といったことには興味があっても、それがユーザーにとって使い易いのか、エンジニアと協業する上でどうすればいいか、みたいなことはあんまり興味なさそうに感じました。言われた依頼をそのまま受け取って、余計な事には手を出さず、自分の職務範囲の中で120%頑張ってお客さんの要望を叶える。今回の勉強会も、新しいテクニックを＋１する為にやってきたのであって「ノンデザイナーズ・デザイン」の「ノンデザイナーズ」の部分には、興味を持ってなかったんじゃないかなぁ、と感じてしまいました。
もちろん、たまたまオレがお話した人がそういう人だった、というだけかもしれませんし、その人にしたって実は人見知りで上手くその辺が伝えられなかった、という可能性もあります。でも、少ないケーススタディだけ取り出して考えると、なんとなくデザイナーって人達はそういう人達なのかなぁ、って感じてしまいますね。
そういう意味ではUI・UXっていう要素は、デザイナーからもエンジニアからも興味が持ち易く、共通言語になり易いものなんじゃないかな、と思いました。もっとUI・UXが広く浸透すれば、また違った議論が出来るようになるのかもしれませんね。
