第二回 プログラマ向けデザイン勉強会に参加してきました

デザイン

はじめての欧文書体

  1. 欧文書体には様々な種類がある
  2. 全ての書体にある訳ではないが字幅やウェイトなどがある
  3. 書体はどこかの国で色々な背景を持って生まれている
    1. トラヤヌス帝のの碑文から作られた書体が映画などで使われている
    2. ギャラモン(人物名)、ヘルベチカ(スイスのラテン語名)
    3. 欧文書体はロゴ使用がだいたいOKだが和文はだいたい要お問い合わせ
    4. 日本語だと、proとつく方がいっぱい文字が収納されてる
  4. 書体が持つ雰囲気
    1. セリフ書体は高級感
    2. インパクトがある書体
  5. 実践編: Webサービスで使いやすそうな書体
  6. Helveticaはありふれた感がある
  7. 有料webフォントもありでは？
    1. 色々なフォントが使える
    2. 違った感じがする
  8. 書体を選ぶということは既にデザイン
  9. 専門雑誌もあるよ

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

  1. ノンデザイナーズデザインブックについて
    1. デザインの基本原則が書かれている
    2. パワポとかにも
  2. 基本原則
    1. 近接
      1. 似たものは近くに
    2. 整列
      1. 似たものは並べる
    3. 反復
      1. 同じ特徴を繰り返す
    4. コントラスト
      1. 違いをはっきり出す
  3. なぜ近接がデザインにとって重要なのか？
    1. ゲシュタルト原理
      1. 人間はパーツをまとまりとして理解する
        1. プレグナンツの法則
      2. 互いに閉じあっているものは一まとまりになりやすい
    2. ゲシュタルト原理は機械学習で言うところの枝刈り
  4. 人は分類せずにいられない
    1. 見出しをつけると理解が進む
  5. サビタイジング
    1. 数の認識方法の違い
    2. 4個までは一瞬で把握できる
  6. なぜ整列が重要なのか
    1. 特定の図形のパターンにだけ反応する細胞がある
      1. 無視すると目が泳ぐ
    2. あらましをつかむのは周辺視野の役割
  7. 反復がなぜ重要なのか
    1. 人間はパターンで認識する
      1. ジオン理論
        1. 基本的な幾何パターンで認識する
  8. コントラストが重要なのか？
    1. 三次元認識
      1. 霞んで見える→遠くにある→重要でない
      2. 注意の瞬き
        1. 何かを認識すると、0.5秒間ほかの事を認識できなくなる
    2. 注意は選択的に働く
      1. 何箇所かだけで焦点を合わせ、それ以外を無視できる
    3. wordpressの集中執筆モード

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

  1. まず情報を整理する
    1. アイコンで最も重要なポイントだとおもっている
    2. まず思いつく限りキーワードを出してみる
    3. 出し切ったら絞り込む(4つくらい)
      1. 多すぎるのはNG
  2. 記号化
    1. 見た目の部分をシンプルに
    2. よりプリミティブに
      1. 「まずあるのは視点だけ」(ソシュール)
    3. アフォーダンス
      1. 物理的形状が機能に影響を与える
  3. グラフィックのポイント
    1. 光を意識する
      1. 光源とオブジェクトの関係を意識する
      2. 影といっても色々とある
      3. 陰(グラデーション)と影(光源が物体にあたって直接落ちる影)
      4. 布は微妙にグラデするのでちゃんとつけましょう
  4. 素材は頑張って探してましょう(iPhoto stock exchangeなど)
  5. フォトショでプラグインを購入するのもあり
  6. サイズを変える時の注意事項
    1. 輪郭が不鮮明になって、ぼやけてくる
    2. アンチエイリアスをオフに
    3. 色を補正。コントラストを強めに
    4. アンシャープでぼやけた画像をくっきりと
    5. テクスチャは拡大
    6. 背景とかで演出を

デザイン検討会

　実際にデザイナーにデザインを見て欲しいアプリの検討会が行われました

entakun

http://entakun.co/

  1. タスク管理のツール
    1. redmineよりもシンプルに
      1. ちゃぶ台、円卓のイメージ
      2. イメージカラーはオレンジ
    2. オープンソース
    3. バックエンドはMongo+Sinatra
  2. 会場から
    1. メールのノーティフィケーションは？
      1. 近くの人とメモ的に使うから不要
    2. 複数の人が同時に使うとコリジョンする？
      1. します
    3. デザイナーさんから
    4. 色分けを背景一色で表現せず背景は色を抑え、先頭にコントラストの大きい色を配置したほうが色弱の人には字が見やすいいい
      1. テキストフィールドの見分けがつきにくい
      2. パーツの分け方が弱い
    5. トップページで「ちゃぶ台のイメージ」にするメリットが薄い
      1. たまたま手元にあった画像でイラストを差し替えたサンプルを例示
        1. イラストがもっとはっきりした方がいいのでは?
      2. トップページにもっと実例が欲しい。具体的なスクリーンショット
    6. ボタンはユーザーの導線に合わせて

Nyanstagram

　猫専用のアプリ。(http://www.nyanstagram.com/)

  1. いいフォントはないですか？
    1. 漢字のタグ付けが残念になっている
  2. 毛並みっぽい背景画像が欲しい
  3. アプリを横展開したいので、メインカラーでいいのを教えてください
  4. 毛並みっぽい画像はfurで素材サイトを検索
  5. フォントは難しいのでカタカナでいいのでは？
    1. それか小さく通常のフォントで
  6. 色は共通ではなくアプリごとに
    1. 色は自由に決めればいい。イメージを固定すると地味な色ばかりになる
  7. フォントは遊びが強いものはフリーの方がいい
    1. 視角文化研究所のフォントとかオススメです