エンジニアでもデザインを学ぶべき理由
- クライアント・デザイナーとの話で認識のずれが起こらず、仕事が効率化する
- 市場価値が上がる
コンセプトとターゲット
デザインはコンセプトとターゲットがありき
例えば、都会的なサイトに緑や茶色の配色（コンセプト）、高齢者向けのサイト（ターゲット）に細かい文字が多いなど、適していないデザインは優れていない
コンセプト例
- 賑やかさ
- ポップで楽しい、若年層をターゲット
- 明るい色を中心
- レイアウトも自由に
- 信頼性
- 病院や銀行がターゲット
- 色味はネイビー・ブルー・白を基調にしている
- 乱れなく、揃ったレイアウト
- 明朝体、serif体
- 高級感
- 高級ホテルのサイトやパンフレット
- 余白を十分に持たせる
- メインビジュアルが大きく
- 明朝体、serif体
- 色は同じ系統のものをシンプルに
- 情報量
- ニュースやブログ
- レイアウトを特有のものに
- 余白取らない
- 行間小さい
色の基礎知識
デジタルデータを扱う上で知っておきたいのは「RGB」と「CMYK」というカラーモデル
デザイナーは用途によって使い分ける。webでは基本的にRGB
色の3属性
- 色相
- 青・黄色・赤のような色の違いのこと
- 色相環を参考に
- 明度
- 色の明るさのこと
- 明度が高いと白に近づき、低いと黒に近づく
- 彩度
- 色の鮮やかさのこと
- 彩度を上げるほど原色に近づき、下げるほどくすんだ色になる
落ち着いたイメージなら同じ色相や類似色を使って明度や彩度を低めに、賑やかなイメージなら少し離れた色相を何色か使って明度や彩度を高める
色の組み合わせ
色の組みわせ1つでデザインは全く異なる
キーカラー
webサイトなどの基準になる色。作るもののターゲットやコンセプトに適したものを選定
会社のロゴやイラストがある場合はそれに似た色
サイト内はキーカラーとの類似色を使うことで統一感のあるデザインになる
-
統一感を出す方法
- キーカラーと彩度や明度が同じで、色相が違う色でまとめる
- キーカラーと色相が同じで、彩度や明度が違う色でまとめる
- トーンに共通性を持たせる
- 同じトーンを複数組み合わせる（彩度が高いものを使いすぎると落ち着きがなくなる）
- 同じ色相で異なるトーンを組み合わせる
-
配色の割合
- ベースカラー（背景色）：70％
- メインカラー（キーカラーが多い）：25％
- アクセントカラー（目立つ部分）：5％
タイポグラフィ
文字のデザインのこと。書体や字配り、配置を読みやすくして体裁を整えること
カーニング
文字と文字の間のスペース、字間を調整すること
トラッキング
行や段落全体の調整のこと
レディング
文字列の行送りのことで、行間ともいう
カーニングやトラッキングよりも顕著に表れる
ウェイト
文字の幅、太さのこと
一般的には大見出し、小見出し、本文の順で小さくしていく
フォントデザイン
コンセプト、ターゲットに合わせたフォント選びが重要
-
欧文フォント
- セリフ
- セリフのある書体。小説のように長い文章や、高級感を出す
- サンセリフ
- セリフのない書体。読みやすく視認性が高い
- ハンドライト
- 手書きで書いたようなフォント。柔らかくルーズなイメージ
- スクリプト
- 筆記体。格調高いイメージ
- ディスプレイ
- どれにも含まれない
- セリフ
-
日本語フォント
- 明朝
- 筆で書いたような書体。柔らかく、少し高級感が出る
- ゴシック
- 角張った、直線で構成。視認性が高い
- 丸ゴシック
- ゴシックたいを角丸にしたもの。優しいイメージ
- 明朝
全体のフォントは統一感を出し、見出しと本文でウェイトやサイズでメリハリをつける
san-serifがやっぱり一般的
余白で決まるデザイン
余白の面積や取り方によってデザインイメージを大きく左右する
アクティブホワイトスペース
視線誘導のために意図的に作ったスペース
パッシブホワイトスペース
文字やロゴなどの要素の周りにあるスペース
マクロホワイトスペース
大きなホワイトスペース。具体的には文章や画像など、主要な要素同士の間隔
マイクロホワイトスペース
小さなスペース。具体的には項目同士や行間、文字間のこと
余白テクニック
- 文章周りのスペースは行間より広くする
- 関連する要素同士のスペースは狭くする
- 連続して並べる要素のスペースは規則正しく
- インデントを使って階層をイメージさせる