「Tech Guild - Non Designers Design -」に参加しました

2013/6/5(水) 「Tech Guild - Non Designers Design -」に参加してきました。

DoorKeeper
http://devlove.doorkeeper.jp/events/4059

Togetter
http://togetter.com/li/514036

まえだかずひこさんがP4D デザイナー向けプログラム部で発表された「ノンデザイナーズデザインブックを読み解く」を、今回Devloveで再演いただく、というデザイン系の勉強会です。

ノンデザイナーズ・デザインブック [フルカラー新装増補版] (2008/11/19) Robin Williams 商品詳細を見る

やっぱデザイナーじゃなくても、綺麗なWebアプリの画面を自分で設計できるようになりたいし、日々作成する資料とかも綺麗に作りたいですよね。
そんなわけで、デザインの才能がない１エンジニアがデザインを学ぶべく、参加することにしたのであった。

---

■講演


以下、個人メモ。
---
■DungeonCrawl
・最近、DungeonCrawlというのをやっている。
・「死んで覚える本当のGitの使い方」
　http://d.hatena.ne.jp/mizchi/20120730/1343654602

■デザインをどう学んだか
・就職後、仕事の幅を広げるために書籍とかで独学した。
・「ノンデザイナーズデザインブック」に出会って、デザイナーになろう思った。
・今日はこの本の前半について話す。

■４つの基本原則
・近接　：　関連する項目をまとめてグループ化すること。基本的な目的は組織化。
・整列　：　ページ上のすべてのものを意識的に配置すること。こちらも目的は組織化。
・反復　：　デザイン上の何かの特徴を、作品全体を通して繰り返すこと。目的は組織化の強化。
・コントラスト　：　はっきりした違いを出すことで情報の組織化を支援する。目的は組織化の強化。

■ゲシュタルト原理
・人間は各パーツをバラバラに理解するのではなく、ひとまとめにして理解している。
　→　「近接」は重要な要素。

■人間の特性
・無意識にグループ化する。
・パターンを自動的に見つけ出そうとする。
・物体を４個までは一瞬で把握できる。（サビタイジング）
・縦線横線がないと目が泳ぐ。（文章をセンタリングしたりすると）

■基本原則その２「整列」の重要性
・対象の「あらまし」をつかむのは、中心視野より周辺視野の役目

■基本原則その３「反復」の重要性
・直前まで注意を向けていた物体や場所には「注意を向けにくい」
・例：探し物をしてて、机を一度探したら、机には注意が行かなくなる

■基本原則その４「コントラスト」
・コントラストだけだと楽天みたいなページになってしまうので。。。
・注意の瞬き・・・何かを認識すると、0.5秒間他のことを認識できなくなる
・楽天メソッドだと、目立つものばっかになる。
　→　目立つものが少ない方が本来目立たせたいところに意識が行く。
・WordPressの「集中執筆モード」
　→　タイトルと投稿欄だけになる。（余計なものが排除されて、執筆に集中できるようになる）

■デザインするときどこから手をつけるか
・ワイヤーフレームから作る
・ブロック毎にちょっとずつ変化を足したり引いたりする

---

■グループダイアログ(対話)
ウチのグループは６人くらいでした。みなさんエンジニアばっかりです。
以下、グループダイアログで出た意見。
---
■３年前に「「ノンデザイナーズデザインブック」を読んでみたが、デザインのスキルは上がっていない。
　→　デザインの理論がわかっても、手を動かさないと身に付かない。

■プログラマをやってると、カラーコードを揃えたくなる。
　→　紙に書くとそれを意識しなくて済む。

■デザインするとき、黄金比とかを意識してやってみたことがある。
・きれいに見える比率は　1対1.6 とか。巻貝のようなカンジ。

以下、他のグループで出た意見。
---
■４原則でどれが一番イケてるか。
　→　「整列」がかなりイケてる、という結論になった。

■酷いデザインは気付いて直せたとして、「これは良いな」という評価基準はどうしてるか？
　というのも、見栄えが良くてもアクセシビリティ的に良くないとか、評価基準はいくつかありそう。
・「視線誘導」を意識している。
・ページをぱっと見たとき、目に入って読んだときに、重要なところがぱっとわかって、重要なことが伝わるのが良い。
・細かい子とにひっぱられすぎるのは良くない。
・おしっこ行きたい状態で見てもらって、伝わるかどうか。

■お客さんから「良いカンジで作ってくれ」と曖昧に言われた時にどうするか？
　→　「何がしたいか」を考えてデザインするようにしている。
・お客さんはあんまり考えずに言ってくる。なので、こちらから参考にサイトをいくつか提示したりする。

■フラットデザインに最適な日本語フォントはあるか？
　→　無いです！

■そのページを見る人の気持ちになってデザインする。

---

★感想：
「おしっこ行きたい状態で見てもらって、伝わるかどうか」という表現、良いですね～。
インセプションデッキでいう「エレベーターピッチ」に近い気がしました。
デザインのノウハウや考え方は、エンジニアの仕事にも活かせるのが多いなぁ、と感じた。

あと、デザインがテーマだったからか、女性の参加者が多いように感じました。
分野によってこんなにも男女比が違うのか。。。

デザインの基本４原則、ちょと意識して使ってみよう。

KDDIウェブコミュニケーションズの雲野コアたん、オラクルのワンちゃんの絵、可愛かったなぁ。。。はぁ。

講師のまえだかずひこさん、Devloveのスタッフさん、会場提供の日本オラクルさん、ありがとうございましたー