Comments
Transcript
サイトデザインの2大要素 を徹底的にお勉強しよう - CSS Nite LP, Disk 1
サイトデザインの２大要素 を徹底的にお勉強しよう 講師：矢野りん 1 / 50 ２大要素って何？ 文字 配色 すべてのメディアは言語（言 葉）でできている。 だから読みやすくなくちゃ！ すべての形は色でできている。 だからコントロールの方法をし らなくちゃ！ 2 / 50 文字について ー読みやすい書体選びー 書体とは？ 文字に着せる上着のこと 3 / 50 文字について ー読みやすい書体選びー ちょっと脱線して そもそも文字ってなんでしょうか？ 4 / 50 文字について ー読みやすい書体選びー 字体 日本語の正しい有様に対する定義のこと 矢 失 字体が違うと意味が変わる 5 / 50 文字について ー読みやすい書体選びー 字形 日本工業規格が定めた文字の形のこと 字体が違うと意味が変わる 6 / 50 文字について ー読みやすい書体選びー へえ∼ つまり、文字とい う道具は形が意味 を背負っている、 ものなんですね。 7 / 50 文字について ー読みやすい書体選びー では書体の種類と本来の用途を 確認していきましょう 8 / 50 文字について ー読みやすい書体選びー 明朝体 本文むけに作られた、留めに飾りのある 書体 ゴシック 図版の説明むけに作られた、太さの均一 な書体 9 / 50 文字について ー読みやすい書体選びー Webにはゴシックが最適という考え方 は絶対ではない 日本人は単語が集まってできた図像として認識 する傾向がある 明朝体のほうが「頭に入りやすい」「理解でき る」と感じることも 10 / 50 来場者のアンケート結果 地域 1 地域 2 インターネットへのアクセス頻度が増加傾向に あり、今回は8割以上の人が一日に1回以上アク 100 セスすると回答しています。また、アクセス時 75 間をみても、一日 1時間以上インターネットに アクセスする人が4分の3以上にのぼり、イン 50 ターネットがユーザーの生活の一部として根づ 25 0 いてきている様子がうかがわれます。 2004 2005 2006 2007 グラフ１：インターネットが普及している地域の特徴 11 / 50 来場者のアンケート結果 地域 1 地域 2 インターネットへのアクセス頻度が増加傾向に あり、今回は8割以上の人が一日に1回以上アク 100 セスすると回答しています。また、アクセス時 75 間をみても、一日 1時間以上インターネットに アクセスする人が4分の3以上にのぼり、イン 50 ターネットがユーザーの生活の一部として根づ 25 0 いてきている様子がうかがわれます。 2004 2005 2006 2007 グラフ１：インターネットが普及している地域の特徴 12 / 50 アクセス頻度が増加傾向 アクセス頻度が増加傾向 明朝体のほうが、かな と漢字の固まり（熟 語）にメリハリが感じ られる 13 / 50 文字について ー読みやすい書体選びの結論ー 明朝体に適した内容 まとまった文字数のある見出し サイズの大きな本文やリード ゴシックに適した内容 短いフレーズによるナビゲーション キャプション サイズの小さい本文やリード 14 / 50 文字について ー読みやすい書体選びの結論ー ちょっとまって！！ 15 / 50 文字について ー読みやすい書体選びの結論ー 富士通FOMAらくらくホン III（FOMA F882iES）は、 モリサワの教科書体ICA M が表示できる 16 / 50 文字について ー読みやすい書体選びの結論ー 教科書体 文部科学省発行の小学校学習指導要領に準 拠している 字形が正確で読みやすい楷書体 楷書体はゴシックと明朝の長所を兼ね備え ている 17 / 50 文字について ー読みやすい書体選びの結論ー ブラウザで表示できない書体でも、今後 フォントの技術が向上すれば利用可能にな る可能性も 日本語書体が持つ独特な読みやすさのセオ リーは、ウェブ制作者であっても知ってい ると便利だ 18 / 50 配色について ー色をコントロールするー まずは色の３属性を確認 色相 彩度 明度 19 / 50 本来色は波長の長短で表されるもの でもちょっと色の遷移が不自然に見える 20 / 50 3 光の３原色（RGB）に 基づいて配置した色相 環。人間にとって自然 な色の移り変わりが感 じられるパターン ( # 色相環 21 / 50 色相：赤 明度 彩度 マンセルカラーチャートより 22 / 50 配色について ー色をコントロールするー 以上が色相、彩度、明度でした。では具 体的にこの３属性を配色に利用する方法 を確認していきましょう 23 / 50 配色について ー色をコントロールするー 調和する色の３原則 隣接する色相から色を選ぶ 同一の色相で彩度・明度違いの色を選ぶ 有彩色と無彩色を合わせる つまり人間にとって 色の移り変わりが自 然だと感じられる取 り合わせは、相性が よい 24 / 50 25 / 50 配色について ー色をコントロールするー でもそれだけじゃあ コントロールすることに なりませんわな。 26 / 50 配色について ー色をコントロールするー 色の性質を把握する 色には重さがある 色には奥行きがある そのほか、目の錯覚 27 / 50 配色について ー色をコントロールするー 色の性質を把握する 色には重さがあることを、 具体例から感じてみよう 28 / 50 29 / 50 明度が高いと軽く 低いと重くなる 30 / 50 配色について ー色をコントロールするー 色の性質を把握する 色には奥行きがあることを 具体例から感じてみよう 31 / 50 32 / 50 彩度が高いと手前に 低いと奥に見える 33 / 50 モネの例 消失点に近い遠景ほど彩 度が低い（空気遠近 法）。大気が光を反射し て白っぽく見えるから。 悪天候・夕暮れは別 34 / 50 配色について ー色をコントロールするー 色の性質を把握する そのほか、目の錯覚 目の錯覚とは、色の様々な対比効果のこ と。色は現象なので、異なる条件下で見え 方が変化する 35 / 50 色の対比 【色相対比】 背景に影響されて本来の色相が異なって見える例。赤が 背景だとオレンジは黄色っぽく、 黄色が背景だとオレンジは赤っぽく見える。 36 / 50 色の対比 【彩度対比】 背景に影響されて本来の彩度が異なって見える例。 鮮や かな色を背景にすると本来の色 よりくすんで見える。くすんだ色を背景にすると本来よ り鮮やかに見える。 37 / 50 色の対比 【補色対比】 同色相の背景より、補色の関係にある配色では中の色 （とくに外枠部分）が明るく見える。 38 / 50 配色について ー色をコントロールするー サイト制作で色を使う 全体を調和させる 部分を差別化する 部分を調和させる 39 / 50 色の対比 【面積対比】 同色でも面積の広いほうが明るく、狭いほうが暗く、くすんで 見える。 40 / 50 対比効果の具体例 色が移り変わるキワの 部分が暗く見える。結 果的に立体感があるよ うに錯覚する 41 / 50 配色について ー色をコントロールするー サイト制作で色を使う 同一色相の配色で全体を調和させる 42 / 50 トーン違いでバリエーションを作り、コントラストで重要度を示す 43 / 50 配色について ー色をコントロールするー サイト制作で色を使う 同一色相の配色に等色相差の配色を 追加して、部分を差別化する 44 / 50 等色相差の配色でバリエーションを作り、トーンで目立ちを調整する 45 / 50 配色について ー色をコントロールするー サイト制作で色を使う 背景と文字要素のコントラストを調 整して、部分を調和させる 46 / 50 調和する色の3原則 調和する色の3原則 隣接する色相から色を選 ぶことや、同一の色相で 彩度・明度違いの色を選 ぶことに加え、 有彩色と無彩色を合わせ ることも検討したい。 隣接する色相から色を選 ぶことや、同一の色相で 彩度・明度違いの色を選 ぶことに加え、 有彩色と無彩色を合わせ ることも検討したい。 あまりコントロールしていない例 コントロールした例 読みやすくはあるが、見出しと囲 みの一体感はあまり感じられない 囲みの背景に見出し背景と同色相 のグラデーションを使い、囲み文 字色にも見出し背景と近い色相の 色を使った。色の関連があると、 パーツ全体にまとまりが出る 47 / 50 配色について ー色をコントロールするー 色をコントロールするには・・ 色の3属性を理解すること 重さと距離など色の意味に敏感になること 色は条件で見え方が変わることを常に意識 すること 48 / 50 サイトデザインの２大要素 を徹底的にお勉強しよう 講義は以上です 49 / 50 サイトデザインの２大要素 を徹底的にお勉強しよう 宿題を説明します 50 / 50