エンジニアのための理論でわかるデザイン入門
エンジニアのための理論でわかるデザイン入門 ThinkIT Books
インプレス
著者：伊藤博臣
三好康之が語るITエンジニアとデザインスキルの"関係"および"現状"と"課題"
Chapter 01 これからのITシステムとデザインの重要性
01 ITエンジニアとデザイン
はじめに
"デザイン"にセンスや芸術性は不要
"コンセプト"に沿って、デザインの方向性も決まる
システムの中身を一番理解しているからこそいいデザインができる
02 拡大していく情報端末、デザインの未来
デジタルデバイスに触れる時間の増加
誰もが直観で思い通りに動かせる"操作性"
"楽しさ"や"誘引性"－エンターテインメント
ITエンジニアに必要なデザイン力の方向性
Chapter 02 コンセプトからデザインを思考するプロセス
01 デザインのコンセプトと構成要素
デザインの方向性を定めるコンセプトを確認する
コンセプトからターゲットの理想像をイメージする
デザインの構成要素
まとめ
02 コンセプトに基づいたエレメントの設定
世界観の要となるビジュアルの共通要素を選定する
世界観に沿った文字の選定
まとめ
Chapter 03 デザインの要 タイポグラフィについて
01 タイポグラフィとデザイン
日本語フォントの種類と使われ方
欧文フォントの種類
02 フォントの選定と使い方の基本
フォントの持つイメージ
まとめ
Chapter 04 情報整理とワイヤーフレーム
01 デザインの要"情報整理"で考えるべき4つのこと
デザインとは機能的に情報を整理すること！
操作説明書がなくても使えるようなUIを目指す
本の編集やコピーライティングを勉強しよう
これからのITエンジニアに求められていること
02 情報整理に活かすプレグナンツの法則
ゲシュタルト心理学の中核 UIに使えるプレグナンツの法則
03 コンセプトに基づいたワイヤーフレーム
ワイヤーフレームとは
ワイヤーフレームの研究
モデルケースのワイヤーフレーム
最近のワイヤーフレームのトレンド
レスポンシブデザインも意識する
まとめ
04 ミニマルデザインとレスポンシブデザイン
情報を最小に絞り込むことでメッセージは強くなる
Webデザインは"ミニマル"な潮流へ
まとめ
Chapter 05 ビジュアルが世界観を創造する
01 ビジュアルのセレクトとレイアウトの考え方
前章までのおさらい
コンセプトに沿うサイトの顔となるビジュアルを探す
いくつかの写真を仮レイアウトして検討しよう
タイポグラフィの位置や大きさの考え方
まとめ
02 ビジュアルトリミングの方法と実践
構図やレイアウトに多用される"三分割法"
"三分割法"を意識した構図
トリミングに三分割法を意識する
まとめ
Chapter 06 レイアウトとスペーシングの方法論
01 レイアウトを美しく魅せる"均等なスペーシング"
トップページヘッダ内のタイポグラフィの配置を決める
たかが均等、されど均等
均等なスペーシングがレイアウトの要
"均等"の上位概念＝"揃っている"
まとめ
02 スペーシングの奥義"黄金比"を活用する
黄金比：人間が最も美しいと感じる基準の数値
白銀比：日本人にはこちらの方がしっくりくるかも
黄金比をデザインに活かすには
大まかなイメージしながらスペーシングしていく
まとめ
03 もう1つのスペーシングの奥義"三分割法"を活用する
構図やレイアウトに太陽される"三分割法"
"三分割法"を意識した構図
"三分割法"における面積比の比較
Webサイトへの応用
常に三分割法を意識する癖をつけよう
まとめ
Chapter 07 色彩の基本と使い方
01 デザインに活かせる"色彩"の基礎知識
デザインにおいて"色彩"はとても重要
色彩の基本
まとめ
02 色彩のトーンと印象
PCCSの色彩トーン
色彩トーンの印象
心理的効果を与える色
03 デザインに活かせる"色の決め方"(配色)
配色とは
配色の考え方
キーカラーから配色へ
まとめ
04 デザインに活かせる"色の使い方"
周囲の色を意識する
基礎その1 温感を伝えよう！
基礎その2 重さや硬さを伝えよう！
意識や内面を伝えよう
カラーリングはファッションから学べ
05 “色の役割"を考える
デザインの意味
見て！？"誘目性"
見つけやすい！？"視認性"
見やすい！？"明視性""可読性"
分ける！？"識別性"
ユニバーサルデザインを意識する
カラーリングを意識して街を歩こう
Chapter 08 色彩配色の奥義 色彩調和とテクニック
01 今すぐ使えるジャッドの色彩調和論
色彩調和4つの原理
02 色彩配色と面積比
配色と面積比率
03 色彩対比と同化
対比現象と同化現象
Chapter 09 デザイン実践のコツとポイント
01 デザインを実践してみよう！
ワイヤーフレームを設計する
コンセプトに沿って、まずはシンプルに
カラーの配置を決める
デザインのバリエーションを作ってみよう
シンプルなUIだからこそシンプルに
02 デザイナーの思考とプロセスを知る
ワイヤーフレームを作成する
視認性の確保(第1案)
コンセプトは変えずに他のバリエーションを考える(第2案)
クリアなカラーリングに挑戦しよう(第3案、第4案)
バリエーションの試行錯誤が良いデザインを生む
Chapter 10 ライフスタイルとデザイン
01 デザインスキルを向上するには
普段からデザインを意識しよう！
ファッションにも目を向ける
街に出て周囲のモノに目を向けよう
街そのものにも目を向ける
まとめ
02 仕事に活かすデザインスキルの高め方
"文字"を制する！
気に入ったデザインを分析し、マネて、オリジナルへと変えていく
雑誌を見る！
プロのデザインを参考にする
03 デザインにセンスは不要、誰にでもできるようになる！
デザインは"ロジック"でできている
"なんとなく"が最大の敵
デザインスキルを向上させる唯一無二の方法
デザインの基本原則
デザインの未来とUI
04 デザインと法律の関係性
押さえておくべき法律の基礎知識
デザイン(画面デザイン)に関わる法律
フォント(タイプフェイス)に関わる法律
色彩に関わる法律
写真・動画に関わる法律
アイコンに関わる法律
ピクトグラムに関わる法律
商品やサービスの名称・ロゴに関わる法律
ホームページ・ブログに関わる法律
まとめ
おわりに