デザインの教室でデザインの文法を勉強

Androidアプリをつくるにしても、自分の中で一番ボトルネックになっているのは、デザイン力のなさ。

画面のデザインもどうしても業務システム的になってしまう。凝り方もわからないしコード書くのは楽しいけど、デザイン的なところは面倒。アイコンつくるの面倒くさい。

業務系のシステム開発だと、基本的にデザインセンスなんて求められないし、今まで興味も技術的な分野に向いていたので、デザインなんて学ぼうとも思わなかった。

これまでは、まぁそれでも良かった。でも、今や Android や、iPhone だけでなく、Windows8、Google なんかはWebアプリケーションにも課金システムを導入することを決めている。

これは、プログラマーにとって、凄いチャンスだと思う。

プログラマーで無い場合、なにかしらアイディアを思いついても、かたちにするには、お金を払って作ってもらうか、一からプログラミングを覚えなければいけない。

ところが、プログラマーなら、アイディアをかたちにするのは基本的に自分一人でできてしまう。必要なのは時間の捻出だけだ。

で、自分の中で、このチャンスを活かして、ワンストップでアプリケーションを作成しようと目論んだときに、アイディア以外で一番足りないのは、デザイン力だなーと思った次第。

中学校くらいまでは美術好きで得意な方だったのだが、上記のようなことを想定した場合、必要なのはそんな美術のセンス？ではなくて、「デザインの文法」とでもいえばよいのか、漠然としたセンスと、単なるテクニックを統合する様なデザインの考え方が必要なのではないかと。

そんな気分を前提に手に取ったのが、上記の本だったのだが、まさにぴったり。

これを読むと、デザインも「言語」で、「哲学」なんだなぁと。

・・・あぁ、だから、哲学科に美学専攻があったのか。20年ぶりに納得。

この切り口なら意外ととっつけるかも、。

ということで、Mindmap にまとめた内容をあとで、読み返す備忘用として、以下にメモ。

デザインの教室

デザインの根拠
- 根拠は自分で作り上げる
- デザインの意図を言葉で表現
  - 見ている人に伝わるか？
  - デザイン手法として普遍化
  - デザインのボキャブラリ
- 構成
  - 配置の意図
  - 計画的に配置
    - デザインの役割
  - 配置されたオブジェクト同士が関係し合って互いにその配置の根拠となる
- 論理
  - 内的必然性
    - その配置であることが必然的であるかのように見える。
    - どんなレイアウトも原則的には許される
      - デザインされていると感じられるものと感じられないもの
    - 説明できるデザイン
      - デザインは説明できなくてはいけない
        
        視覚的なものに文学的な物語を貼り付けるのは内的必然性ではない
    - デザイナー自身の問題
    - 一つの世界を矛盾無く美しく構成
    - デザイン内部
  - 揃える
    - 関連性を暗示
      - 人は複数のものの配置から関連性を読み取ろうとする
    - 閉じた世界の法則
      - デザイナーが決めて良い
      - 外の世界から与えられるものではない
    - 計画的
      - デザインはもともと設計
      - 補助線
        
        揃えるを計画的に生じさせる
      - グリッドシステム
        
        揃えることのシステム化
  - 繰り返し
    - 3回を超えると繰り返しを認識しやすくなる
    - 繰り返されないと法則性を認識しにくい
    - 美しく
      - 強弱のバランス
      - アクセント
      - リズム
  - 分割と対比
    - 対比
      - 背景色
      - ビジュアルと文章
    - 分割
      - 対比するためには分割が必要
    - わかりやすく魅力的に
      - 社会との関わり
      - 機能的なデザイン
  - 余白
    - 静かな場所
      - 場所を静かにすることで、普通にはなしても伝わるように
    - スペースの有効活用
    - 緊張感
    - 何を活かすのか
  - デザインする力
    - 黄金比
      - 美意識は時代とともに変わる
      - 18世紀の不協和音も現在では和音
      - 単純な和音では物足りない
    - 自分にとっての解答は自分自身で見つけ出す
基本的な図形による平面構成
- 線
  - 論理に加え感覚を磨く
  - 素材についてよく知る
    - 幾何学的な図形
  - 分ける、揃える、強調する、結びつける
- 面(四角形)
  - 基本は四角形の組合せ
  - 画面を分割
  - 論理的に情報を組み立てる
- 円
  - 論理だけでは美しさに到達できない
  - 自然は直線を嫌悪する
    - 必要なもののみで構成されたデザインはおもしろみに欠ける
    - 曲線
      - 親しみやすい、柔らか
- 斜めの配置
  - 重要性
    - インパクトのある表現
    - 視線の動きを計算
      - 画面に動きが感じられるようになる
  - 緻密な構成が必要
    - よく使われる角度
      - 30度、45度、60度、対角線、約23.4度(地軸の傾き)
- サンセリフの書体を活かす
  - セリフがなく縦と横のラインがほぼ等しい書体を総称してサンセリフ体
  - フォントファミリーを利用して、統一感を損なわずメリハリをつける
  - 20世紀のデザインの歴史は大きな流れで見ると装飾の排除という傾向
- セリフ書体を活かす
  - サンセリフ、伝統的なセリフ
  - セリフ体には、線の端にひげのようなセリフと呼ばれる突起がある
  - 縦の線は太くても横の線は細いまま
    - かたちの美しさやシヤープさ
  - セリフ体の小文字の美しさ
    - 曲線が多く柔らか
    - イタリックにするとさらに美しい曲線
色を使った平面構成
- いきなり多くの色をお使うとバランスをとるのが難しい
- 赤
  - 基本的に目立つ色
  - いろいろな場所で使ってしまうとかえってメリハリがなくなる
  - 基調として使えば重要な事柄というわけではないが、デザインを特徴付ける
- 色相・明度・彩度
  - 色相
    - 色合い
    - 円のように表現
    - 色相環
      - 近くの色を「同系色」
      - 正反対にあり、混ぜると灰色になる色を「補色」
  - 明度
    - 明るさ
  - 彩度
    - 鮮やかさ
- トーン
  - 明度と彩度をあわせた概念
  - 純色に対して、白・黒・グレーを混ぜることで多様な色を作り出す
    - 白を混ぜる
      - ソフトな印象
    - 黒を混ぜる
      - 力強い印象
    - グレーを混ぜる
      - 渋みのある落ち着いた色
- カラーパレットの作成
  - 使いたい場所の都合に合わせて色を決めていたのでは美しい配色は行えない
  - 全体を見通した計画
    - 全体像を検討する段階で、利用できる色をカラーパレットとして用意
    - バランスの良い配色
  - 色相の幅によって雰囲気が変わる
    - 同系色
      - まとまりがありおとなしい
    - 反対色が混在
      - 派手で元気
- カラフル
  - 色相
    - バリエーション
      - 色相の違う色はバリエーションをあらわす
      - 同系色は関係を暗示
  - 並べ方の基本
    - 基本的には色相順
      - 同系色でなだらかに色が変化
      - グラデーション
      - 美しい色の並び
    - インパクトのある表現にしたい
      - 色の並びを入れ替えて、隣同士が補色に近い関係になる様に
      - 色同士でお互い打ち消しあう場合、白や黒を間に挟む
        
        すっきり見せる
- 動きやリズムを感じさせる
  - 時間を感じさせる
    - 逆に静的なのは
      - 左右対称
      - シンメトリー
        
        安定感
    - いい意味でのアンバランスさ
      - 次の瞬間(の動き)を予想させる
      - 偏り、はみ出し
        
        躍動感、動きが感じられる
    - 繰り返しとアクセントからリズムが生まれる