makopi23のブログ

makopi23が日々の生活で感じたことを気ままに綴るブログです。

「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アプリの画面を自分で設計できるようになりたいし、日々作成する資料とかも綺麗に作りたいですよね。
そんなわけで、デザインの才能がない1エンジニアがデザインを学ぶべく、参加することにしたのであった。


■講演


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

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

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

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

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

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

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

■基本原則その4「コントラスト」

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

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


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

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

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

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

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

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

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

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


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

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

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

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

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

FC2Ad