プログラマ向けデザイン勉強会に行ってきた

先日、P4Dというプログラマ向けのデザイン勉強会に行って来ました。
http://prog4designer.github.com/

はじめての欧文書体

http://www.slideshare.net/shoheiitoh/ss-17245066

登壇者

伊藤庄平さん@9d
株式会社シロクロ

様々な書体

セリフ書体

文字の先端にセリフ(端にある小さな飾り)がついた書体のこと。

高級感がある

サンセリフ書体

セリフがない書体のことをサンセリフ書体と言う。
日本ではゴシック体とも呼ぶ。

http://stat001.ameba.jp/user_images/0c/ba/10098095404.jpg

スクリプト書体

手書きのストロークに基づいた書体のこと。
筆記体とも言う。

優雅
カッコイイ
視認性はあまり高くない

ブラックレター書体

クロミが強い書体をブラックレター書体。
海外ではゴシック体とも呼ぶ。

宗教っぽい。

ディスプレイ書体

サインや看板などに用いるために作られた書体をディスプレイ書体と言う。

形は様々
目立つ

スラブセリフ書体

縦線と横線が同じくらいの太さの書体にセリフがついている。
セリフ、サンセリフのいいとこどり。

文字の太さと字幅

文字が太く、字幅が大きいほど、強調される

イタリックとオブリークの違い

オブリークは単純に斜めにしただけ、イタリックは自然に見えるように調整されている

LTとかStdとかNeueとかってなんぞ

  • Neue
    英語で「NEW」の意味。改訂版とか

  • LT
    「Linotype」のこと。フォントファンダリー名。

  • Std
    「Standard」のこと。他に「Pro=Professional」などがある。
    文字の収録数が違う。

Webサービスで使いやすそうな書体を考えてみる

  • Helvetica Neue
  • DIN Next LT Pro
  • Didot LT Std
  • Clarendon LT Std
  • Prism Medium
  • Avenir Next Pro

ノンデザイナーズデザインブックを読み解く

https://speakerdeck.com/monoooki/read-a-non-designers-designbook

登壇者

前田さん@monoooki
フリーランス

ノンデザイナーズデザインブックとは

デザインの基本原則が書かれている
エクセルやパワポなどの資料を作るときにも参考になる

4つの基本原則

近接

関連する項目をまとめてグループ化すること

<ゲシュタルト原理>
人間は各パーツをバラバラに理解するのではなく、ひとまとめにして理解している

〇〇△△〇〇△△〇〇△△ → 〇〇△△が並んでいるとは知覚しにくい。〇〇と△△が並んでいる。

互いに閉じ合っているものはひとまとまりになりやすい。
(^^)(^^) → ^)(^ こういう風に知覚しない

『無意識にグループ化してしまうので、近接は重要!!』

<サビタイジング>

4個までは一瞬で把握できる。
それ以上は数えてしまう。

整列

ページ上のものを意識的に並べること
見えない線で紐付ける

縦横が揃っていないと、見えない線を検知することができず、混乱してしまう。

反復

デザイン城の何かの特徴を全体を通して繰り返すこと
見た目の一体化と視覚的な面白さ

コントラスト

はっきりした違いを出すことで情報の組織化を支援する(強弱をつける)
ページに面白みを出し、退屈させない

何かを認識すると、0.5秒間他のことを認識できなくなる

  • 目立つものが多い
    注意を払った後の硬直時間で見落としが多い
  • 目立つものが少ない
    注意を払うべき場所に意識を向けることができ、見落としが減る

0.1ランク上のアイコンの作り方講座

登壇者

is8r_さん

アイコン作りのおおまかな流れ

情報の整理

まずは対象物のキーワードを並べてみる
例) 熊だったら「三角の鼻」「茶色い毛」etc.

並べた後に、必要な物だけ絞り込む

『デザインには引き算が重要』
『最低限の情報で最大限の情報を伝える』
『見るだけで何をすればよいかを伝える』

光を意識する

  • 光の位置
  • 対象物の位置
  • カメラの位置

『陰と影を使い分ける』

感想

作り方について踏み込んだ内容はやはり手を動かしてみないと難しいですね。
次は、ワークショップをやるらしいのでそれはぜひ参加してみたいです。