• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
システムデザインにおける色彩の基本
 

システムデザインにおける色彩の基本

on

  • 516 views

2012年10月27日のhoge駆動で発表しました

2012年10月27日のhoge駆動で発表しました

Statistics

Views

Total Views
516
Views on SlideShare
516
Embed Views
0

Actions

Likes
3
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • 人間で見える色、これを「可視光線」と云いますが、虹の色相のように青から赤の範囲のスペクトルに分割できることがわかっています。 \n大きな色の種類(これを純色といいます)はこれが全てになっています。\n\n
  • 先ほどの「虹の色」といった色みのある色の事を「有彩色」、黒・グレー・白といった色みがない「無彩色」といいます。\nさらに、有彩色は「色相」「彩度」「明度」の3つの属性によって表されています。 一方、無彩色は「明度」のみで表されます。以下にこれをまとめます。 \n\n
  • ちょっとマメ知識で、人の目の構造についてお話します。\n視細胞は錐体細胞と桿体細胞の2種類があり…(スライドを読む)\n\n
  • 色相をスペクトルのように、赤・橙・黄・緑・青・藍・青紫の順に並べて、両端の赤と青紫をつなぐ新しい赤紫をつくり、\nそれを円形にしたもので、「色相環」という図があります。今御見せしている図は「日本色彩研究所」が開発した色相環図で、全部で24色あります。\nこの図はただ色を並べているだけではなく、色の関係を表し ています。\n「日本色彩研究所」とは怪しい名前かも知れませんが、今から80年も前に設立された民間学術研究機関で、\n日本で唯一の公益法人としての色彩の研究所です。基礎研究を始め色彩活用に関する応用分野など、色彩に関するいろいろな情報に答えるために活動を行っているそうです。 \n色相環は知っておくといろいろと便利なので詳しく説明を行います。\n\n\n\n\n
  • 黄色系とオレンジ系といったように色の差が少し感じられる程度の色同士を類似色と言います。色の性質が似ていることからぶつかり合う事がなく、無難にまとまりやすい色の組合せとなります。\n
  • \n
  • 反対色とは、色相環で向かい合っている色のことを指します。反対色は色彩学では「補色」とも呼ばれています。例えば、赤の反対色は青緑です(青ではありません)\n反対色はお互いの持つ性質も全く逆なのですが、お互いの色を引き立てる性質もあります(そのため、補色と呼ばれます)。\n例えば、肉や魚なども背景に緑の葉を添えることで素材の色身を引き立たせれる。 \n\n
  • \n
  • これには補色が深く関係しています。\n手術中というのはずっと血を見てます。血は赤色で、赤色の補色は緑色です。\nつまり、医者はずっと赤色の血を見ていたらぱっと壁とかを見たときに\n白い壁だと緑色の色に見えてしまいます。(人間の目はそうなってます)そしてくらくらっとめまいがしたりチカチカしたりします。\nなのでそういうのを防ぐために、手術服とか手術室の壁とかは初めから緑色になっています。\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 先ほどのお話した色相環をさらに細かく分類すると、図のようになります。\nこの分類も日本色研配色体系で定められているものです。\n\nこのように、同じ色でもトーンによってテイストが大きく変わってくることがわかります。 \n\n
  • では、色相とトーンで配色を考えた見本を紹介します。\nこちらは主にソフトトーンと赤系統の色を組み合わせた配色になっています。\nピンクは「女性的」なイメージなので、この配色はエステやコスメ関連のサイトでよく使われています。\n「かわいい」の配色に入ってるグリーンは反対色をワンポイントで使われていますね。\n\n\n
  • では、色相とトーンで配色を考えた見本を紹介します。\nこちらは主にソフトトーンと赤系統の色を組み合わせた配色になっています。\nこちらは、システム系でよく使われている配色です。\nシック(洗練された・しゃれた・おしゃれな・質のよい・精妙な・さりげない・アンニュイ)なイメージを与えます。\nグレーとブルーのグラデーションの組み合わせにより、明確なトーンが表れます。\n紫が加わるとおしゃれで洗練された感覚となります。 \n
  • \n
  • \n

システムデザインにおける色彩の基本 システムデザインにおける色彩の基本 Presentation Transcript

  • システム開発で使える 色彩の基本 いっさん @issps2009
  • 自己紹介 いっさん(issps2009) フリュー株式会社 UIデザイン HTML5, CSS3, JSコーディング 昔はPython, C#もやってました
  • ちなみに…ミサワアイコン描いてる人です…
  • hoge駆動のアイコンも作成!
  • 色彩の基本 虹の色(可視光線)
  • 色の表現方法 色相 …黄・赤・青といった色の違い。 彩度 …色の鮮やかさの違い     高いほど澄んだ色となる。 明度 …色の明るさの違い。高いほど白に近づき、 低いほど黒に近づく。
  • 人の目の仕組み 錐体細胞 …色(波長)に対し敏感に反応するが、 光量(波幅)に対し鈍感 桿体細胞…単独の視物質のみを発現するため、 色覚には関与しないが、感度が高い※ 暗所では錐体細胞はほとんど働かず、 桿体細胞が働く。このため暗所では、 物の形は判っても色ははっきりとは判らない
  • 色相環図
  • 類似色 左右2つくらいまでの色をさします。 色の性質が似ていて、ぶつかり合うことがない 無難な組み合わせ
  • 類似色を使った例
  • 反対色 お互いの持つ性質も全く逆 お互いの色を引き立てる性質 ワンポイントに使うといい バランスを考えないと派手になりすぎる
  • 類似色を使った例
  • 反対色を使った面白い話 手術服が緑の理由 血の色:赤 → 補色:緑
  • ちょっと思うのが…
  • 荒木飛呂彦のイラストって反対色を上手く使ってる!
  • 色に対するイメージ (1)【赤】愛、情熱、怒り、派手、激しい、命、高いエネルギー、勇気、晴れやか 【黄色】明るい、元気、子供っぽい、無邪気、おおらか、危険、楽観的 【オレンジ】活発、明るい、陽気な、親しみやすい、暖かい、健康的、若々しい、元気、おいしい(食欲アップ) 【ピンク】優しい、可愛い、穏やか、素直、子供らしい、柔らかい、恋愛、女性的 【青】清潔、さわやか、冷静、冷たい、知的、おとなしい、男性的、マジメ、理性沈静、信頼、寂しい、静か、落ち着き、誠実
  • 色に対するイメージ (2)【緑】自然、ナチュラル、癒し、安らぎ、のどか、新鮮、マジメ、和み、安心、安全、中性的、公平、平和 【茶色】大地、田舎、穏やか、地味、渋い、素朴、落ち着き、暖かい、安心感、伝統古典的、クラシック、丈夫、正統派 【紫】エレガント、高貴、気品、セクシー、神秘的、大人っぽい、神聖、心配、ミステリー、派手 【白】清潔、純粋、清らか、無垢、あっさりした、空虚  【黒】暗い、高級、フォーマル、陰気、強い、硬い、思い、孤独、男性的、不安
  • 色に対するイメージを利用した例
  • トーンの種類
  • 色の組み合わせ (1)
  • 色の組み合わせ (2)
  • 色の組み合わせ色の組み合わせによって、様々な雰囲気があることがわかりました色の組み合わせを考えるとき少しでも思い出してもらえると幸いです
  • ご清聴、ありがとうございました