Submit Search
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
313 likes
272,403 views
Sasaki Kouhei
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
Design
Read more
1 of 33
Download now
Downloaded 427 times
1
2
3
4
Most read
5
6
7
8
9
10
Most read
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Most read
31
32
33
More Related Content
PDF
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
Ayaka Sumida
PDF
いいデザインのために組織の一人ひとりができること
Masahiko Yoshikawa
PDF
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)
Concent, Inc.
PDF
心地よいUIの温度 - 言葉と気遣いで高めるUI -
wariemon
PDF
デザイン提案の参考資料
Tsutomu Sogitani
PDF
デザインのためのデザイン
Masayuki Uetani
PDF
デザイナーがクライアントワークをうまく進める方法 先生:中野 由貴
schoowebcampus
PDF
事例で学ぶデザインの原則 by Life is Tech !
Naoki Kanazawa
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
Ayaka Sumida
いいデザインのために組織の一人ひとりができること
Masahiko Yoshikawa
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)
Concent, Inc.
心地よいUIの温度 - 言葉と気遣いで高めるUI -
wariemon
デザイン提案の参考資料
Tsutomu Sogitani
デザインのためのデザイン
Masayuki Uetani
デザイナーがクライアントワークをうまく進める方法 先生:中野 由貴
schoowebcampus
事例で学ぶデザインの原則 by Life is Tech !
Naoki Kanazawa
What's hot
(20)
PDF
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
takaaya
PDF
好みや多数決で決めない、デザインとの正しい付き合い方
Yasuhisa Hasegawa
PDF
0528 kanntigai ui_ux
Saori Matsui
PDF
UIデザインの基本
Roy Kim
PDF
〜デザイン初心者向け〜 デザイン時に気をつけると幸せになれる事
kenji goto
PDF
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
Akiko Kurono
PDF
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Tomoyuki Arasuna
PDF
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
schoowebcampus
PDF
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
Yoshiki Hayama
PDF
サービスデザインとUXDそしてデザインプロセス
Masaya Ando
PDF
人間中心設計の国際規格ISO9241-210:2010のポイント
Masaya Ando
PDF
UXデザインとコンセプト評価~俺様企画はだめなのよ
Masaya Ando
PDF
女子の心をつかむUIデザインポイント - MERY編 -
Shoko Tanaka
PDF
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
PDF
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
Kazuki Yamashita
PDF
サービスにおけるビジュアルデザインの役割
Kenichi Suzuki
PDF
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
Akiko Ohtsuka
PDF
デザインの要件定義
Shin Iiboshi
PPTX
20161122_How to start Recruiting Engineers_mercari_ishiguro
Takaya Ishiguro
PDF
ユーザエクスペリエンス~それは何か・どう捉え・どう開発につなげるのか?
Masaya Ando
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
takaaya
好みや多数決で決めない、デザインとの正しい付き合い方
Yasuhisa Hasegawa
0528 kanntigai ui_ux
Saori Matsui
UIデザインの基本
Roy Kim
〜デザイン初心者向け〜 デザイン時に気をつけると幸せになれる事
kenji goto
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
Akiko Kurono
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Tomoyuki Arasuna
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
schoowebcampus
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
Yoshiki Hayama
サービスデザインとUXDそしてデザインプロセス
Masaya Ando
人間中心設計の国際規格ISO9241-210:2010のポイント
Masaya Ando
UXデザインとコンセプト評価~俺様企画はだめなのよ
Masaya Ando
女子の心をつかむUIデザインポイント - MERY編 -
Shoko Tanaka
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
Kazuki Yamashita
サービスにおけるビジュアルデザインの役割
Kenichi Suzuki
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
Akiko Ohtsuka
デザインの要件定義
Shin Iiboshi
20161122_How to start Recruiting Engineers_mercari_ishiguro
Takaya Ishiguro
ユーザエクスペリエンス~それは何か・どう捉え・どう開発につなげるのか?
Masaya Ando
Ad
Viewers also liked
(20)
PPT
色彩センスのいらない配色講座
Mariko Yamaguchi
PDF
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
Ryoji Fujishita
PDF
アクセシビリティとこれからのWebデザイン
力也 伊原
PDF
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
schoowebcampus
PDF
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
schoowebcampus
PDF
いまさら訊けないWebフォント入門
Yuki Ishikawa
PDF
【デザイン・ノイズ論】~ Webデザインにおけるノイズ的手法を考える ~
玄 中野
PDF
コンバージョン心理学によるウェブ・デザイン
Toshihiko Yamakami
PDF
イラスト制作のためのIllustrator〜ベクターでもっと自由に描いてみよう〜
hamko ig
PDF
グッドパッチのデザインカルチャーの作り方
Satoru MURAKOSHI
PDF
SketchがAndroidのUIデザインに向いているワケ
Asami Yamamoto
PDF
CAMPFIRE DESIGN #1 「デザインの力」でビジネスにコミットする
Yahoo!デベロッパーネットワーク
PDF
デザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマ
Yasunobu Ikeda
PDF
UXの考え方とアプローチ
Masaya Ando
PDF
ウェブデザインに応用する4つの基本原則
Tomoyuki Arasuna
PDF
Adobe MAX Japan 2016「ベテランほど知らずに損してるIllustratorの新常識 あ、それ、今のIllustratorならこうします!...
swwwitch inc.
PDF
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
schoowebcampus
PDF
Webデザインのセオリーを学ぼう
Toshiaki Sasaki
KEY
ノンデザイナーのための配色理論
tsukasa obara
PDF
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
Ayaka Sumida
色彩センスのいらない配色講座
Mariko Yamaguchi
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
Ryoji Fujishita
アクセシビリティとこれからのWebデザイン
力也 伊原
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
schoowebcampus
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
schoowebcampus
いまさら訊けないWebフォント入門
Yuki Ishikawa
【デザイン・ノイズ論】~ Webデザインにおけるノイズ的手法を考える ~
玄 中野
コンバージョン心理学によるウェブ・デザイン
Toshihiko Yamakami
イラスト制作のためのIllustrator〜ベクターでもっと自由に描いてみよう〜
hamko ig
グッドパッチのデザインカルチャーの作り方
Satoru MURAKOSHI
SketchがAndroidのUIデザインに向いているワケ
Asami Yamamoto
CAMPFIRE DESIGN #1 「デザインの力」でビジネスにコミットする
Yahoo!デベロッパーネットワーク
デザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマ
Yasunobu Ikeda
UXの考え方とアプローチ
Masaya Ando
ウェブデザインに応用する4つの基本原則
Tomoyuki Arasuna
Adobe MAX Japan 2016「ベテランほど知らずに損してるIllustratorの新常識 あ、それ、今のIllustratorならこうします!...
swwwitch inc.
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
schoowebcampus
Webデザインのセオリーを学ぼう
Toshiaki Sasaki
ノンデザイナーのための配色理論
tsukasa obara
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
Ayaka Sumida
Ad
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
1.
ノンデザイナーの「デザインの判断」は とりあえずコレだけ押さえよう MODERN??? Traditionnal Classic Retro ? Bauhaus Kouhei Sasaki
2.
デザインで最も重要なこと コントラストが重要 簡単な書体の選び方 良いロゴの見方 簡単な色の選び方 写真素材の選び方 ホントに基本だけCHECK
3.
も そ も そ ? か す で ん な
4.
design }伝えること
5.
art design 伝えるための技術 作り手側の意図を明確に 見た人に伝えるのがデザイン。 自己表現の技術 美的感覚によって作られ 見た人が感じるのがアート。
6.
Point カッコ良く見えても 伝わらないなら デザインじゃない。 最初は「カッコイイ」必要はないんです。 何よりも「機能美」を優先しましょう。 その先が「カッコイイ」になります。 ふーん
7.
ん じ ゃ ・ ・ ・ 伝 わ る デ ザ イ ン っ て ど う す れ ば い い の ?
8.
順番や近接距離を考える 伝えたいものを先に置くなど、優先順位を決める。 より関連している情報は近づけて行く。 デザインの伝播力を考える 装飾や情報が足りていない場合もあるし、 多すぎる場合もある。 千葉 栃木 群馬 埼玉 東京 神奈川 千葉 栃木 群馬 埼玉 東京 神奈川
9.
身近な例で、名刺とか 情報を置いただけだと、強弱がなく、 どこから読めばいいのか分かりません。 株式会社 ナゾペール 〒151-0053 東京都渋谷区代々木2-XX-Y TEL
03 6300 0779 新規事業開発部 デザイナー 佐々木 恒平 kouhei.sasaki@nazopel.jp FAX 03 6300 0556 景虎ビル 40F http://nazopel.jp/ NAZO PEL 株式会社 ナゾペール 〒151-0053 東京都渋谷区代々木2-XX-Y TEL 03 6300 0779 新規事業開発部 デザイナー 佐々木 恒平 kouhei.sasaki@nazopel.jp FAX 03 6300 0556 景虎ビル 40F http://nazopel.jp/ NAZO PEL
10.
株式会社 ナゾペール 〒151-0053 東京都渋谷区代々木2-XX-Y TEL
03 6300 0779 新規事業開発部 デザイナー 佐々木 恒平 kouhei.sasaki@nazopel.jp FAX 03 6300 0556 景虎ビル 40F http://nazopel.jp/ NAZO PEL 身近な例で、名刺とか 情報の距離と文字にコントラストをもたらすだけで、 読みやすくなって、キレイに見えます。 株式会社 ナゾペール 〒151-0053 東京都渋谷区代々木2-XX-Y TEL 03 6300 0779 新規事業開発部 デザイナー 佐々木 恒平 kouhei.sasaki@nazopel.jp FAX 03 6300 0556 景虎ビル 40F http://nazopel.jp/ NAZO PEL
11.
ふーん Point 優先して 伝えたい事は何か。 あれもしたい、これもしたいでは 何も伝えられません。 しっかりコンセプトを最初に決めましょう。 判断に迷ったらコンセプトを思い出しましょう。
12.
何 で フ ォ ン ト を い ち い ち 選 ば な い と い け な い の ?
13.
使う書体は状況で変わる 伝わる書体を選ぶ。 easy to read
by design デザインは私たちが作る全てのものの中にあるが、それは工芸、科学、物語、プロバガンダ、 及び哲学のミックスの間に存在する。グッドデザイン イズ グッドビジネス。デザインの基 本的な役割は、問題の解決者であるということ。 タイトルや小見出しは、全体の内容を理解す る上で重要な役割を果たします。小見出しは、 セクションを明確にすることも出来るので視 認性や情報の伝播力、興味や関心を高めるこ とができます。 伝わる小見出しの秘密 デザインは私たちが作る全てのものの中にあるが、それは工芸、科学、物語、プロバガンダ、 及び哲学のミックスの間に存在する。グッドデザイン イズ グッドビジネス。デザインの基 本的な役割は、問題の解決者であるということ。 デザインは私たちが作る全てのものの中にあるが、それは 工芸、科学、物語、プロバガンダ、及び哲学のミックスの 間に存在する。デザインは私たちが作る全てのものの中に あるが、それは工芸、科学、物語、プロバガンダ、及び哲 学のミックスの間に存在する。デザインは私たちが作る全 てのものの中にあるが、それは工芸、科学、物語、プロバ ガンダ、及び哲学のミックスの間に存在する。 見出しは見やすい書体を。 じっくり読んでもらう長い文章には、細い 書体が向いています。太いフォントで長い文 章を書くと圧迫感や緊張感が出てしまうの で、可読性や持続性が下がります。 文章は読みやすい書体を。
14.
ふーん Point 書体選びは 文字の見やすさと 読みやすさが重要。 簡単に言ってしまえば、 ゴシック体は可視性が高く見やすいので、見出し向きです。 明朝体は可読性が高く読みやすいので、文章に向いています。 新聞が良い例ですね。
15.
デ ザ イ ナ ー に ロ ゴ を 提 案 し て も ら っ た ら な ん だ か 全 部 良 く 見 え ち ゃ う ん だ け ど ?
16.
商品のロゴ、覚えていますか? お い し い 牛 乳 お い し い 牛 乳 お い し い 牛 乳 A B C
D
17.
B ネーミングの堂々とした感じを明解な色調で表現。 牛乳の安全を伝える清潔感。 学校給食に代表される大衆的な飲み物であることを 伝える正当性。 商品が持つメッセージをシンプルながらも的確に伝 えているロゴです。 (当たり前ですが)そのまま書体を使っているわけ ではないと思いますが、「楷書体」です。 良いロゴには伝わるものがある 簡単そうなものほど、奥が深いです。
18.
(上記では少し乱暴に扱ってますが)左側のロゴは文字の間の余白を適度に持つ ことで、文字に緊張を与えて、高級感や繊細さを出しているのに対して、右側の ロゴは丸みや文字をくっ付けたり、斜体にすることで親近感、躍動感を出してい ます。ロゴは誰に一番見て欲しいか(ターゲット)や企業の思想(コーポレート アイデンティティ)を表していなければなりません。 良いロゴには伝わるものがある
19.
日本人なら見慣れたシンプルなロゴですが、食欲をそそる赤の半円は「いつも 人の口に(清潔な白い文字の)日清の食事が入る」「ラーメンの丼ぶり」「日清食 品を食べていつも笑顔」「社会を円とするなら、その半分を日清が担いたい」と様々 な意味が込められてます。 良いロゴには深い意味がある 込められた意味が企業やサービスのブランドになります。
20.
ふーん Point そのロゴは 本当に本質を 捉えているか? かなり修正の難易度が高い場所なので、 何度も何度も見直しましょう。 良いロゴを作ったときの嬉しさは一生モノです。
21.
色 を 適 当 に つ け た ら ダ サ く な っ た ん だ け ど ?
22.
使用する色を3色に絞る ベースカラー メインカラー 70% 25%
5% アクセントカラー 必ず 3 色でなければいけないということでは無いんですが、色を増やせば 増やすほどまとめるのが難しくなるので、配色に自身が無い人は無理に多様 しなくても良いと思います。
23.
最初にメインカラーから決める メインカラー 25% サービスの意味を為す色なので、基本的にはハッキリ とした濃い色(明度が低い色)が選ばれやすいですが、 ロゴなどでも使用する確率が高いため、 後々変えにくいため色の意味が非情に重要です。 「なんで青なの?」 「清潔感と安心感を表現するサイトだからです!」 メインカラーは作ったデザイナーにしっかり聞いておきましょう。
24.
次にベースカラーを決める Web だと背景などで使用するケースが多いので、白や薄い色(明度が高い色) が使いやすいと思います。明確な理由が無ければ、無彩色かメインカラーの 明度を上げた色を使うのが無難です。 ベースカラー 70%
25.
最後にアクセントカラーを決める メインカラーと色相が対比になるような色を選びましょう。 色相環(右図)を用いて色の位置が分かると言うことは、 配色を説明する際に、スムーズに行えるメリットがあります。 メインカラー アクセントカラー 5% アクセントカラー 色相環 CMYK
26.
ふーん Point その色彩に 理由はあるか? パターンは無限なのですが、 無限であるがゆえに、理由は必要です。 理由がないと選びきれません。
27.
写 真 の 選 定 に 自 信 が な い ん だ け ど ?
28.
写真素材の判断基準 大 事 な 人 に ふ る さ と の お 米 を た べ て ほ し く て 連 れ て き ち ゃ い ま し た お い し い 日 本 の お 米 ウッチー好きだけどドイツなんてお金も無いし仕 事(学校)もあるしぃ。。結婚はしたいけどそん な簡単に行けないよぉう (́・_・`) ってゆーそこの あなたへ。ウッチー好きだけどドイツなんてお金 も無いし仕事
(学校 )もあるしぃ。。結婚はした いけどそんな簡単に行けないよぉう (́・_・`)って ゆーそこのあなたへ。ウッチー好きだけどドイツ なんてお金も無いし仕事 ( 学校 ) もあるしぃ。。 結婚はしたいけどそんな簡単に行けないよぉう (́・_・`) ってゆーそこのあなたへ。ウッチー好き だけどドイツなんてお金も無いし仕事 ( 学校 )も あるしぃ。。結婚はしたいけどそんな簡単に行け 広告を見た時にまず人の眼に視線が誘導されることが多く、 視線の近くにコピーを置くのはセオリーだったりします。 上海なら夜景、カナダなら雪山など、その土地をひと目で分かる場所だと良いです 外した写真は狙った上でやらないと、だいたい笑えないギャグになります 覚えてもらわないと意味が無いです 印象に残りやすい写真 コピーで謳われている内容に合う写真 風景の写真は特徴を最も表す写真 モデルの写真は視線の先がある写真
29.
ふーん Point 訴求する点を 理解して 選んでるか? 見た人の印象にズレはないか、 目的を的確に表している写真か …は、勿論なのですが、 意外と勘違いしたまま進んでしまうケースも多々あります。 周りにも意見をきちんと聞いて見ましょう。
30.
ざっくり基本だけでしたね。 デザインで最も重要なこと コントラストが重要 簡単な書体の選び方 良いロゴの見方 簡単な色の選び方 写真素材の選び方 伝えること。 伝えることの優先順位。 見やすさと読みやすさで選ぶ。 本質を捉える。 色彩の理由を考える。 訴求する点を理解する。 CHECK
31.
結局、何が「デザインの判断」で重要かというと・・・ ちゃんと伝わってますかね・・・ いつも不安です・・・
32.
そのデザインは、 表現に触れた人を幸せにしたか? 実は、意外と本質的な部分をデザイナーは常に考えているので、 デザイナーとデザインの話をする機会を増やしてみてはいかがでしょうか ? I don't
think that design needs theory, but I think designers need theory. Johanna Drucker デザインにセオリーは必要ないが、デザイナーには理論が必要だ。
33.
Thank you! @CHINNEN_no3 sasaki.kouhei.1 ご 感 想 、 ご 質 問 は こ ち ら ま で
Download