Enviar pesquisa
Carregar
配色を楽にするコミュニケーション
•
29 gostaram
•
82,722 visualizações
Kunio Sakamoto
Seguir
大阪・名古屋・東京で開催された出版テキ年セミナーのスライドを一部改変して公開します。
Leia menos
Leia mais
Design
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 59
Baixar agora
Baixar para ler offline
Recomendados
Director's Night 20130921
Director's Night 20130921
Takeshi Yamamoto
イトナブ発表会 ナナ編
イトナブ発表会 ナナ編
ota sayaka
デザイン通りのコーディング!消耗しないまちがい探し【Frontend Nagoya#3】
デザイン通りのコーディング!消耗しないまちがい探し【Frontend Nagoya#3】
Asuka Kobayashi
concrete5 CMS FES 2016(CMS夏祭り2016)
concrete5 CMS FES 2016(CMS夏祭り2016)
Kazuhiro Matsuda
私を迷走させたディレクターの言葉
私を迷走させたディレクターの言葉
Noriko Sakamoto
第1回 Macを自分流に楽しもう:達人が教えるとっておきのカスタマイズ術
第1回 Macを自分流に楽しもう:達人が教えるとっておきのカスタマイズ術
Kotaro Akama
色で失敗しない為に 〜理論に基づく配色フロー〜
色で失敗しない為に 〜理論に基づく配色フロー〜
Yuudai Tachibana
Webデザインのための配色セオリー
Webデザインのための配色セオリー
webcampusschoo
Recomendados
Director's Night 20130921
Director's Night 20130921
Takeshi Yamamoto
イトナブ発表会 ナナ編
イトナブ発表会 ナナ編
ota sayaka
デザイン通りのコーディング!消耗しないまちがい探し【Frontend Nagoya#3】
デザイン通りのコーディング!消耗しないまちがい探し【Frontend Nagoya#3】
Asuka Kobayashi
concrete5 CMS FES 2016(CMS夏祭り2016)
concrete5 CMS FES 2016(CMS夏祭り2016)
Kazuhiro Matsuda
私を迷走させたディレクターの言葉
私を迷走させたディレクターの言葉
Noriko Sakamoto
第1回 Macを自分流に楽しもう:達人が教えるとっておきのカスタマイズ術
第1回 Macを自分流に楽しもう:達人が教えるとっておきのカスタマイズ術
Kotaro Akama
色で失敗しない為に 〜理論に基づく配色フロー〜
色で失敗しない為に 〜理論に基づく配色フロー〜
Yuudai Tachibana
Webデザインのための配色セオリー
Webデザインのための配色セオリー
webcampusschoo
理詰めスライド(色彩編)
理詰めスライド(色彩編)
Awoi Ebinuma
色彩センスのいらない配色講座
色彩センスのいらない配色講座
Mariko Yamaguchi
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
tsukasa obara
フォントの選び方・使い方
フォントの選び方・使い方
k maztani
はじめての欧文書体
はじめての欧文書体
Shohei Itoh
デザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマ
デザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマ
Yasunobu Ikeda
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版
MOCKS | Yuta Morishige
Mais conteúdo relacionado
Destaque
理詰めスライド(色彩編)
理詰めスライド(色彩編)
Awoi Ebinuma
色彩センスのいらない配色講座
色彩センスのいらない配色講座
Mariko Yamaguchi
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
tsukasa obara
フォントの選び方・使い方
フォントの選び方・使い方
k maztani
はじめての欧文書体
はじめての欧文書体
Shohei Itoh
デザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマ
デザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマ
Yasunobu Ikeda
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版
MOCKS | Yuta Morishige
Destaque
(7)
理詰めスライド(色彩編)
理詰めスライド(色彩編)
色彩センスのいらない配色講座
色彩センスのいらない配色講座
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
フォントの選び方・使い方
フォントの選び方・使い方
はじめての欧文書体
はじめての欧文書体
デザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマ
デザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマ
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版
配色を楽にするコミュニケーション
1.
配色を楽にする コミュニケーション フォルトゥナ 坂本邦夫
2.
自己紹介
3.
坂本邦夫 • カラー&Webデザイン フォルトゥナ代表 •
Webデザイナー • カラーコンサルタント
4.
Web制作・コンサルティング
5.
色に関する執筆 コンサルなど
6.
ウェブ配色 決める! チカラ 問題を解決する色彩と コミュニケーション 特別価格です!
入口付近で販売中!
7.
さて本編に行きましょう
8.
Web制作での 色の使いどころ
9.
Webの制作から公開の流れ • ヒアリング • 企画 •
ワイヤーフレーム • カンプ作成・作り込み • 公開後の運用
10.
配色はデザイナーの仕事
11.
デザイナーだけじゃないよね クライアント
ディレクター デザイナー 営業
12.
社内だとこう ディレクター
デザイナー 営業
13.
この人一番大事じゃないの? ディレクター 営業
14.
ヒアリング時の注意
15.
こんなブログがありました クライアントよ、お前の依頼の大変さを思い知れ!これ がデザイナーにとっての「デザイン修正」だ!
16.
ないわ∼
17.
とか言いたくなりますが 言うことを聞く方が問題
18.
なん と あまり配色を知らなくても 少しの努力で楽はできます
19.
「学問に王道なし」と 昔の偉い人は言いました
20.
ではどうすればいいのか?
21.
抽象的な言葉 • すっきりとした感じで • 緑とか青を使って •
暖かみを感じさせる色で ...etc
22.
ここで出てくる疑問 • すっきりってどんな色を? • 緑なの?青なの? •
暖色はわかるけど、赤・オレンジ?
23.
漠然としすぎで 色が絞り込まれていない
24.
最近聞いたのは 綺麗で清潔感があり 斬新なイメージが希望です
25.
で、誰が色を絞り込むの?
26.
デザイナーの私ですか 丸投げですよね
そうですか・・・
27.
無意味に孤独な戦い
28.
そこで演習
29.
演習1 あなたの好きな色を1色教えてください 周囲の人にも聞いてみてください。
30.
演習2 今選んだ色を具体的なものに例えて説明で きますか? またその色から連想される他のものはあり ますか? 良いイメージと悪いイメージの 両方を考えてみましょう。
31.
抽象的な色の指示が来たら • 具体的な色が連想できるまで、 何の色か聞いてみる •
その色のよい面と悪い面の両方を考え、 デメリットがあれば避けることを勧める • 得た情報は共有して文書かメールか みんなが見れるところに置いておく
32.
よい配色は • その色を選んだ合理的な理由がある • 気分によって変わらない •
否定材料をはねのける力がある
33.
制作側からの提案も大事 でもクライアントの想いが どれくらいあるのかを知ろう
34.
悩んでいるうちは デザイナーを動かさない
35.
聞いた情報は 全てデザイナーに!!
36.
制作時の話に移ります
37.
デザインが上がってきたよ • 色の基本知識がなくても、 重要な情報が読めるかどうかくらいは
十分に判断できる • 目立たせたい部分が目立っているか、 見出しがちゃんと読めるかが重要
38.
最低限の配色の知識で もう少し分析できるかも
39.
最低限読みやすくする • 文字と背景のコントラストをチェック • 読めない文字なんて、配置するだけ無駄 •
モノクロでプリントアウトすると わかりやすい
40.
最低限読みやすくする
41.
最低限読みやすくする
42.
目立っている事と 見やすいことは別
43.
私が一番使うのは • カラー・コントラスト・アナライザー (Windows版・Mac版) 職業はスパマーです 職業はスパマーです 職業はスパマーです 職業はスパマーです
44.
このツールを使うと • 背景と文字のコントラスト比を 計算できる •
白と黒の組み合わせは 21:1 同じ色同士の組み合わせは 1:1 • 最低でも 4.5:1 、できれば 6:1 以上 理想は 7:1 以上
45.
基本の配色を見る
46.
補色配色 • 色相環の正反対の 位置にある色同士の
配色
47.
トーンオントーン配色 • 比較的明度差のある 同系色の配色
48.
ドミナントトーン配色 • トーンを揃えた配色
49.
トリコロール配色 • コントラストの強い 3色配色
50.
セパレーション • ぼんやりしたり、鮮やか過ぎる配色を 引き締めたり和らげたりする •
色の分離はコンテンツを見せるのに重要
51.
それ以外にもありますが これくらい知ってれば ある程度の判断はできます
52.
配色チェック • キーカラーを押さえること • 細部は気にせずに、
大事な部分が読めるかどうかを確認 • 全体を見て、それから各パーツへ。 分けて考えるようにする
53.
ここで次の演習
54.
演習3 次のページを見て、キーカラーを探してみ ましょう。 また使われている配色テクニックを探しだ しましょう。
さえき矯正・小児歯科医院
55.
まとめ
56.
細かく細かく聞く • 抽象的な言葉は使わない・使わせない • 色と物をセットで表現できるように •
読めない部分は最優先でつぶす • 配色はあくまで手段 目的が達成できるように 配色テクニックを利用する
57.
打ち合わせで15分頑張れば デザインは楽になります!
58.
http://
www.facebook.com/ websitecolor https://twitter.com/ kunio_sakamoto ありがとうございました Copyright © Kunio Sakamoto, Color & Web Design Fortuna. 58
59.
ウェブ配色 決める! チカラ 問題を解決する色彩と コミュニケーション 特別価格です!
入口付近で販売中!
Baixar agora