デザインとサイトイメージ （色・文字・構図）

Presentation on theme: "デザインとサイトイメージ （色・文字・構図）"— Presentation transcript:

1 デザインとサイトイメージ （色・文字・構図）
Webサイト制作　 デザインとサイトイメージ （色・文字・構図）

2 構図とデザイン例① 高級感、信頼感 ＜色＞単色・淡い色の背景、色数は抑え気味
構図とデザイン例① 高級感、信頼感 　　＜色＞単色・淡い色の背景、色数は抑え気味 ＜文字＞フォント小さめ、必要最小限に整理（主役を引き立たせるため） <構図＞安定感を基本に、やや崩して躍動感を出す、広い余白 <画像・動画＞センスの良いものを大サイズで使用、ブランドイメージを強く前面に出す シャネル公式サイト この表現力。シンプルで美しい。圧倒的なデザイン力。製品ースモールレザーグッズ　で鑑賞。

3 構図とデザイン例② 庶民的・親近感 <色＞明るい色使い、多色使い <文字＞情報量多い、やや大きめ
＜構図＞余白少なめ、動きを感じさせる ＜画像＞楽しいキャラクター ドンキホーテオンラインショッピングモール ドンキモード、がいかにもドンキらしくて楽しい。

4 構図とデザイン例③ 清潔感・誠実感 ＜色＞単色・淡い色の背景、色数は抑え気味、明るい色は控えめ
構図とデザイン例③ 清潔感・誠実感 ＜色＞単色・淡い色の背景、色数は抑え気味、明るい色は控えめ ＜文字＞フォント小さめ、整理された十分な情報量、文字が主体 <構図＞動きを抑えた安定した構図、広めの余白 <画像＞センスの良いものをも抑え目に使用 ソフトバンク： シンプルですっきりしているが、情報の可視性(見やすさ）が優れている。 高いデザイン技術力の表れ。

5 Webデザイン悪い例 http://w3q.jp/t/2234 から以下のものを参照 余白の使い方(構図）と情報の整理に注目 （株）キッド
余白の使い方(構図）と情報の整理に注目 （株）キッド Toku’S　Homepage ほっちゃテレビ 阿部寛 プロトラドットコム 格安ホームページ

6 良いWebデザインとは 見やすい 使いやすい（ユーザビリティが高い） 信頼性のあるデザイン
キチンとした感じ 構図が整っている 必要十分な情報が整理されている） 美しいデザインでも、上記が満たされていなければ良いWebデザインとは言えない。 個性・主張が加わればさらに良い

7 色の基本ー無彩色と有彩色 無彩色：色味のない色（白・黒・灰色） 有彩色：色味のある色。無彩色以外のすべての色。
無彩色はどんな有彩色ともなじむので背景に使用することが多い。

8 色の基本ー色相・明度・彩度・トーン 色相：赤色・青色・黄色などの色合いのこと。 このような図を色相環という。縦1列が同じ色相。

9 色の基本ー色相・明度・彩度・トーン 明度：色の明るさ＝黒の入っている割合 白に近いほど明度が高く、黒に近いほど明度が低いという。
明度を下げた色相環の例

10 色彩・配色の基本ー彩度 彩度：色の鮮やかさ 明度と彩度の関係図

11 色の基本ー色相・明度・彩度・トーン トーン：同じような印象やイメージをもつ明度、彩度の領域をまとめてTone（トーン）＝色調（色の調子）という。配色ではトーンを合わせるのが基本。同じトーンは明度と彩度が同じ。

12 なんとなく配色からの脱出 HUE/360 を利用した配色計画
＜用語解説＞ Brightness：明度（黒の度合い、明るさ）Valueは同意 Hue：色相（色合い。赤っぽい、黄色っぽいなど） Chroma：色彩(鮮やかさ） Color Space：色空間。RGBを選択 Hue Step：色相のステップ数 Chroma Step：色彩のステップ数 M&S Judge：　調和しない色を表示するかどうか。ONにしておく。

13 練習：なんとなく配色からの脱出 HUE/360 を利用した配色計画
同じHue（色相）、異なるChroma(彩度）。 半径線上からの選択。同系色となる・・・無難だがつまらない（おとなしい） 同じChroma(彩度）、異なるHue（色相）。 同じ円周上からの選択。変化ある調和。 同一円周上の色相環の反対側は補色。反発し合う調和となる。ハレーション（色の干渉）に注意。間に無彩色を入れる必要がある。注意が必要な配色。

14 演習１：なんとなく配色からの脱出 HUE/360 を利用した配色計画
Brightness(明度）を選ぶ メインカラーを選ぶ メインカラーと合う色が出るのでサブカラーを数色選ぶ。気にいらなければ×で消してやり直す。 Paint　user　color　をクリックして色コードを表示 画面をエクセルにスクリーンショットし、選んだ色と色コードの部分だけを切り取る 以上を5回繰り返し5パターンの配色を作成する 配色パターンというファイル名で各自のフォルダに保存

15 演習２：サイト構造分析 ヘッダ ロゴ メインビジュアル サイドバー コンテンツ フッター グローバルナビゲーション