積んでた「エンジニアのための理論でわかるデザイン入門」を読んだ

デザイナーは永遠にやってこないということがよくわかったので、せめて理屈で画面を構成できる/説明できるようになりたいと思ったので買った積読本を読みました。

ITエンジニアとデザインスキルの"関係"および"現状"と"課題"

  • 情報技術者試験等ではデザインの領域は範囲外 = ITエンジニアがデザインを学ぶ際、しっかりと体系化された"資格のカリキュラム"に頼ることはできない
  • これまで
    • エンジニアがデザインを行っていた -> システムの使い勝手が悪くても「コンピュータなんて、こんなもん」で済まされてきた
    • 使い勝手の悪さから、マニュアルの作成や操作指導の手間が発生していた
  • これから
    • Webデザイナーが手がけるWebシステムを使用することが一般的になってきた -> エンジニアのデザインしたシステムの粗が目立つようになった
    • デザイナーと協力して開発をすすめるようになった -> 今後はこの傾向が加速していく
  • 課題
    • エンジニア自身がデザインスキルを身に着け、システム設計を推進していくのが理想 -> エンジニアもデザインスキルを磨く必要がある

TOC

  • 01: これからのITシステムとデザインの重要性
  • 02: コンセプトからデザインを思考するプロセス
  • 03: デザインの要 タイポフラフィについて
  • 04: 情報整理とワイヤーフレーム
  • 05: ビジュアルが世界観を創造する
  • 06: レイアウトとスペーシングの方法論
  • 07: 色彩の基本と使い方
  • 08: 色彩配色の奥義 色彩調和とテクニック
  • 09: デザイン実施のコツとポイント
  • 10: ライフスタイルとデザイン

01: これからのITシステムとデザインの重要性

割愛。

02: コンセプトからデザインを思考するプロセス

デザインのコンセプトと構成要素

  • コンセプト ; 全体を基本的な概念
    • 例: 生活を少しセンスアップする雑貨を販売しているサイト
  • デザインの方向性を決める重要なものなので、コンセプトを把握するところからスタートする
  • コンセプトからターゲットの理想像をイメージする
  • そのシステムやサイトは誰が見るのか、誰に見てほしいか
  • 「20〜40代女性」では不十分。「33歳結婚4年目、子供3歳、住まいは大都市郊外、2LDKマンション、夫は外資系証券マン、自身もメーカーの営業職だった、趣味はお菓子づくりで〜」といったように、イメージは詳細に。
  • 理想像を想い描く
  • ユニバーサルデザインは意識する
  • 差別化が注目を集め、多くのユーザーを巻き込んでいく

  • デザインの構成要素

    1. ビジュアル
      • これのクオリティがサイトの世界観を決定づける
    2. タイポグラフィ
      • 世界が一つなら、文字も一種
    3. レイアウト
      • 情報の整理
      • 色をつける意図を持つこと
    4. 線、飾り(デザインエレメント)
      • 区分けの機能をもつ
  • まとめ
    • デザインとは、コンセプトを中心に考え、その個性要素に一貫性を持たせることで、世界観を表現する
    • 注意: 意味なく「フォント」「色」「線・飾り」を使わない

コンセプトに基づいたエレメントの選定

  • 選定のために、デザインで分からないキーワードは画像検索する。ちゃんと情報収集しよう
  • ECサイトなら、商品自体でコンセプトが明確。世界観を補完する要素を選ぶ
  • エレメントはいろいろなところで使いまわす。見え方に一貫性をもたせる
  • フォントを選んだ理由を明確にする
    • フォントは現存するサイトを真似る。コンセプトをイメージさせるため
  • デザインの歴史を学ぶ。歴史の知識で厚み・深さが出る
    • 時代でデザインを統一できるように歴史を勉強する必要がある(違和感をなくす
  • コンセプトに沿った情報を集積し、何を選定するかがセンスとなる

03: デザインの要 タイポグラフィについて

タイポグラフィとデザイン

フォントの選定と使い方の基本

  • フォントの持つイメージ
カジュアル フォーマル
ゴシック 明朝
太い 細い
  • 欧文と和文でフォントを合わせる
  • あれこれ使わない。メイン以外は明確な理由がない限り、同じフォント(全体で3種以内)
  • 読みやすい行間
  • テキスト周りの余白
  • 寄せを揃える
  • 見出しと本文のバランス
  • 文字の変形はしない
  • 縦組みでは20〜40字、横組みでは15〜35字

04: 情報整理とワイヤーフレーム

デザインの要”情報整理”で考えるべき4つのこと

  • デザインとは機能的に情報を整理すること
  • 操作説明書がなくても使えるようなUIを目指す
    1. シナリオを作成する
    2. ”言葉”と”ビジュアル”
      • UIに表示する言葉とビジュアルが、使い勝手を決定する
    3. 情報整理で意識すること
      • トップから3ステップで目的の情報にたどり着けること
    4. 利用者の想起する方向に寄せる
  • 本の編集やコピーライティングを勉強しよう
  • これからのITエンジニアには、デジタルサイネージのデザインまで求められる(販促の表現法

情報整理に活かすプレグナンツの法則

  • ゲシュタルト心理学、フレグナンツの法則
    • ゲシュタルト心理学とは; ゲシュタルトを直接的に認識するという事実を強調する、ドイツに起こった形態心理学
      • ゲシュタルトとは; 形態。全体性を持ったまとまりのある構造
      • プレグナンツとは; 「簡素な」の意
    • 近接の要因: 近接したものはグループとして認識される
    • 同類の要因: 色・形など同種のものがまとまりとして認識される
    • 閉口の要因: 「」のように、互いに閉じていることが分かる形態同士は1つのまとまりとして認識される
    • 共通運命の要因: 動作・運動の同時性によって、それらの全体は『共通の運命』をもったまとまりとして認識される
    • 良い連続の要因: 滑らかな動きの芳香性を感じさせるものは、ひとつのまとまりとして認識される。(卍は左右で分かれた形よりは、なめらかな連続した2本の線の重なりに見える
    • 良い形の要因: 簡単な図形を見ようとする働き。単純、規則的、対象的な形になるように1つのまとまった単位として認識される。(ベン図は弧の組み合わせよりは、円の重なりに見える

コンセプトに基づいたワイヤーフレームの設計

  • ワイヤーフレームとは、Webページのレイアウト図。「画面のどこに何を配置するのか」を決めていく設計図。デザイン的な要素は含まない配置図と捉える
  • レスポンシブデザインも意識する
  • 最近の配置の傾向は、”シンプルが一番”

ミニマルデザインとレスポンシブデザイン

  • 情報を最小に絞り込むことでメッセージは強くなる
  • 不要な機能や装飾を避けて必要最小限にしたデザイン、要するに”シンプル・イズ・ベスト”
  • ミニマルにおける装飾: やりすぎない。商品画像にポラロイド写真のフレームを付けるようなイメージ

05: ビジュアルが世界観を創造する

ビジュアルのセレクトとレイアウトの考え方

  • 写真の印象でサイトのイメージは大きく変わる。よく探して比較検討しながら最適な一枚を探す
  • センスの高め方: 比較検討のためできるだけ多くのパターンを作って見比べ、そこからイメージに合ったものを決定する労力を厭わないこと
  • タイポグラフィのレイアウトを行う際は、配置に違和感のあるものを除外していきながら、品質のブラッシュアップをしていく
  • 素人感が抜けない場合は、比較検討の数が少ないかもしれない

ビジュアルトリミングの方法と実践

  • 三分割法; 縦横三分割9ブロックの線を使って、水平線の位置や空と建物との境界を撮影すると美しい構図になる

06: レイアウトとスペーシングの方法論

方法論については割愛。

07: 色彩の基本と使い方

デザインに活かせる"色彩"の基礎知識

  1. 光と色
    • 色を見る行為は光源、物体、視覚の3つの要素で成立する
  2. 混色
    • 光の三原色・加法混色(RGB/CMY/W)
    • 色材の三原色・減法混色(CMY/RGB/K)
  3. 「無彩色」と「有彩色」
    • モノトーンと色味を持つ色彩
  4. 色相
    • 色味そのもの。赤系統など。
  5. 明度と彩度
    • 明度が高いと白みがかり、低いと黒みがかかる
    • 彩度が高いと鮮やかな赤になり、彩度が低いとグレー(モノトーン)に近づく
  6. 色相環
    • Adobeのあの虹色の丸いやつ
  7. 補色
    • 反対色とも。色相環の対角線上の色
  8. 原色
    • RGB / CMY
  9. 純色
    • 彩度が最も高い色(白や黒が混ざっていない色)
  10. 明清色、暗清色、混色(中間色)
    • 純色に城が混ざると明清色、黒が混ざると暗清色、純色にグレーが混ざると混色

色彩のトーンと印象

  • 色には明暗、強弱、濃淡、浅深があり、この調子の違いをトーンという (参考: PCCSトーンマップ
  • トーンの印象
    • Vivid: 鮮やか(最も色彩が高い)
    • Bright: 澄んだ色(白を混ぜた色)
    • Strong: 強い(彩度が高い)
    • Deep: 深く濃い(色彩が高く明度が低い)
    • Light: 澄んだ明るい(明度彩度が高い)
    • Soft: 柔らかい(明度がやや高い)
    • Dull: 鈍い(明度がやや低い)
    • Dark: 暗い(明度が低い)
    • Pale: 薄い(明度が高い)
    • Light Grayish: 明るく灰色がかった(彩度が低く明度がやや高い)
    • Grayish: 濁った(彩度が低い)
    • Dark Grayish: 暗い灰色がかった(明度彩度がやや低い)
  • トーンの心理的効果
    • 暖色/寒色
      • 赤系/青系
    • 重量色/軽量色
      • 高明度/低明度
    • 膨張色/収縮色
      • 高明度・暖色/低明度・寒色
    • 進出色/後退色
      • 暖色・高明度・高彩度/寒色・低明度・低彩度

デザインに活かせる"色の決め方"(配色)

配色はかんがえることがおおい…

デザインに活かせる"色の使い方"

  • 温感を伝える
  • 重さや硬さを伝える
  • 意識や内面を伝える
    • "躍動感"には高彩度の暖色系と対称色彩や黒を組み合わせるとよい、など
  • カラーリングはファッションから学べ

"色の役割"を考える

  • 注意を向けていない対象の発見のされやすさを”誘目性”と呼ぶ。白背景に赤、黒背景に黃など
  • 注意を向けて対象を探している時の発見のしやすさを"視認性"と呼ぶ。背景と図の色に明度差をつける
  • 図のみやすさを"明視性"、文字や数字のみやすさを"可読性"と呼ぶ。注目性の高い色にする必要はないが、明度差をはっきりさせておく
  • 複数対象との区別と認識のしやすさを"識別性"と呼ぶ。路線図やトイレのサインなどを色で分けている
  • ユニバーサルデザイン、カラーリング 意識して街を歩こう

08: 色彩配色の奥義 色彩調和とテクニック

今すぐ使えるシャッドの色彩調和論

  • 4つの原理
    1. 秩序の原理
    2. なじみの原理
    3. 類似性の原理
    4. 明瞭性の原理

色彩配色と面積比

  • ベースカラー70% : メインカラー25% : アクセントカラー5%

色彩対比と同化

  • 明度対比
    • 明度の差がある2色を並べると、明るい色はより明るく、暗い色はより暗く見える
    • 同じ明度でも、背景色が明るいと暗く、暗いと明るく見える
  • 彩度対比
    • 彩度について同上
  • 色相対比
    • 隣接する色どうしが影響しあって、色相が少しずれて見える現象
  • 補色対比
    • 隣接した補色を見た時、互いの彩度が増したように見える。2色間の明度差が少ないほど効果が大きい
  • 縁辺対比
    • 隣接する部分では隣の色との明度差が強調されて、縁のあたりだけ明度対比が起こる
  • 継時対比
    • 今まで見ていた色に影響されて、違う色が見えること
  • 面積対比
    • 面積が大きいと、その色の性質が強く出ること
  • 同化現象
    • 色面が小さかったり、細い線状のときに、隣り合った色が近づいて見える現象(対比現象の逆)

09: デザイン実践のコツとポイント

デザインを実践してみよう

  1. ワイヤーフレーム
  2. レイアウト
  3. カラーの配置
    • なんとなくで配色しない、特に理由がなければレイアウトのままでもいいくらい
  4. デザインのバリエーション
    • バリエーションを作って比較。可読性を意識すること

デザイナーの思考とプロセスを知る

  1. 第1案を作る。デザインはシンプルに。「削除ボタンは注意を引く色」「更新は削除の補色で対比を」などの理由をもとに配色して、視認性を確保する。できるだけ余計な色は使わない
  2. 第2案を作る。コンセプトは変えずに他のバリエーションを考える。
  3. 第3案、第4案を作る。クリアなカラーリング、エレガントな印象など。

  4. バリエーションの試行錯誤が良いデザインを生む

10: ライフスタイルとデザイン

デザインスキルを向上するには

  • 普段からデザインを意識すること。「このデザインからどのような印象を受けたか」を日常的に考える
  • ファッションに目を向ける
  • 街に出て周囲のモノに目を向ける
  • 街そのものに目を向ける。街にもコンセプトがある。テーマパークも良い
  • 美しくないものは、なぜ美しくないのか、美しくするにはどうすればいいのかを考える

仕事に活かすデザインスキルの高め方

  • 気に入ったデザインを分析し、マネて、オリジナルへと変える
    • そのデザインをマネてみて、同じシリーズのデザインに見えれば成功
    • そのまま使うと問題なので、自分が伝えたいことをコンセプトに、要素を置き換えていく
    • 上記をプレゼン資料のテンプレートのようにしていき、オリジナルのデザインテンプレートを増やしていく
  • 雑誌を見る
  • プロのデザインを参考にする

デザインにセンスは不要、誰でもできるようになる

  • デザインはロジック
    • 「将来はAIがWebもデザインできるようになる」これは、デザインが論理的、数学的数値に置き換えられるから
  • なんとなくが最大の敵
  • モノに興味をもって意図を考えることがデザインスキルを向上させる唯一無二の方法

デザインと法律の関係

総評

なんとなくでやってきたデザインについて、理屈や方法を簡潔に説明していて、エンジニアがデザインを学ぶための足がかり~入門の本に適切だと思いました。配色については経験で学ぶところが多いかなと感じ、しんどくなって読み飛ばしてしまったので折りに触れ読み返すようにしたい…あと法律。

おわりに

4月20日に読み始めておおよそ2週。間に他の本に浮気してたので時間かかったけど、内容も結構盛りだくさんだったので読み応えありました。おすすめ