Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designer's Design Talk「デザインの基礎」

5,624 views

Published on

2019年6月29日に開催された「Interact 2019」の「Designer's Design Talk- Azure / Windows Development 2人のMVPの場合 -」セッションで使用した資料です。
※自身の講義で使用している資料からの抜粋
※内容に一部修正・加筆あり

Published in: Design
  • My brother found Custom Writing Service ⇒ www.WritePaper.info ⇐ and ordered a couple of works. Their customer service is outstanding, never left a query unanswered.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Very nice tips on this. In case you need help on any kind of academic writing visit website ⇒ www.HelpWriting.net ⇐ and place your order
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hi there! I just wanted to share a list of sites that helped me a lot during my studies: .................................................................................................................................... www.EssayWrite.best - Write an essay .................................................................................................................................... www.LitReview.xyz - Summary of books .................................................................................................................................... www.Coursework.best - Online coursework .................................................................................................................................... www.Dissertations.me - proquest dissertations .................................................................................................................................... www.ReMovie.club - Movies reviews .................................................................................................................................... www.WebSlides.vip - Best powerpoint presentations .................................................................................................................................... www.WritePaper.info - Write a research paper .................................................................................................................................... www.EddyHelp.com - Homework help online .................................................................................................................................... www.MyResumeHelp.net - Professional resume writing service .................................................................................................................................. www.HelpWriting.net - Help with writing any papers ......................................................................................................................................... Save so as not to lose
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Designer's Design Talk「デザインの基礎」

  1. 1. 「デザインの基礎」 松本 典子 Noriko Matsumoto 2019/06/29 [Interact 2019] Designer’s Design Talk - Azure / Windows Development MVPの場合 - Designer’s Design Talk
  2. 2. 2 自己紹介 松本 典子 @nori790822 https://www.facebook.com/noriji822 ASCII.jp: 「Azure Logic Apps」超入門 https://ascii.jp/elem/000/001/647/1647224/ ASCII.jp:「Azure Logic Apps」超入門 ~AI編~ https://ascii.jp/elem/000/001/736/1736136/ Blog:https://zuvuyalink.net/nrjlog/
  3. 3. そもそも、デザインって? 3
  4. 4. 4 「デザイナー」をやっていると 一度は言われることがあります。
  5. 5. 5 よく言われる言葉 デザイナーは アーティストでしょ?
  6. 6. 6 よく言われる言葉 デザイナーは アーティストでしょ? デザイナーとアーティストは 役割が明確に違うと思います
  7. 7. デザイナー  与えられた制限の中で最大の 結果を出す  制作物について「何故」を 説明が必須 アーティスト  なるべく制限の無い状態で最 大限の自己表現  制作物について 「なんとなく」の表現が許さ れる 7 デザイナーとアーティストの違い 問題「解決」する人 問題「提起」する人
  8. 8. 8 デザインの語源
  9. 9. レイアウトの基礎 9
  10. 10. 1. 整列 –グリッドシステムの採用 2. 近接 3. 余白 10 レイアウトの基礎
  11. 11.  各要素を見えないラインで揃える  ロゴ(アイキャッチ)と文字情報の揃える  位置を揃えることで、情報が別のグループであることを 認識させやすく  見た目も美しくなる 11 1.「整列」で情報を整理する デザインの基礎は「そろえる」
  12. 12. 12
  13. 13. グリッドシステムを利用 したポスターレイアウト例 13 グリッドシステムの採用 グリッドシステム 網目状の升目にコンテンツを配 置していく手法
  14. 14.  比較的簡単に秩序ある レイアウトに仕上げる ことが出来る  レイアウトが単調になりやすい – 要素に変化をつけることも 考えること 14 グリッドシステムの採用
  15. 15. 15 2.近接で要素をグルーピング 要素の関連性を明確に「正しく伝える」 近接 関連度に応じて要素間の距離を 調整すること。 関連性が高いものは近くにまとめ、 低いものは距離をとって配置する のが基本。 あいまいな近接の度合いを明確にする ことで、関連する要素の結びつきを より強くできる
  16. 16. 16 「近接」を使用した例 要素の近接を意識せずレイアウト した例。 全てが均等に設定されているので、 どこに何が書いてあるかが把握 しにくい。
  17. 17. 17 「近接」を使用した例 どの要素同士を グルーピングするか 検討が必要 情報のカテゴリーを 考慮して近接の度合いを 調整する
  18. 18. 何も要素が置かれていない スペースを「余白」と言う。 つい埋めたくなるが、 余白があるから要素が生きてくる ということを意識する。 18 3.余白をコントロールする – 余白が多い:高級ブランド – 余白が少ない:スーパーのチラシ
  19. 19. フォントの基本 19
  20. 20.  和文フォントは「明朝体」と 「ゴシック体」の2種類に大別  明朝体は伝統的でクラシカルな印象  ゴシック体はシンプルでモダンな印象 20 基本的な和文フォントの種類 明朝体やゴシック体の中でもさまざまな デザインがある。 それぞれの印象も大きくことなるので、 一括りで扱うことはできない。
  21. 21.  欧文フォントは「セリフ体」と 「サンセリフ体」が基本  欧文フォントの場合は うろこのことを「セリフ」と呼ぶ  セリフがある書体はセリフ体、 無い書体はサンセリフ体に分類 – セリフ体は「ローマン体」と 呼ばれることもある。 21 基本的な欧文フォントの種類
  22. 22.  同じフォントでも 目的に応じて太さや形状などの 違いで複数のバリエーションが 存在  同一のデザインに属する フォントのグループを 「フォントファミリー」と呼ぶ  太さや幅のことは「ウェイト」 22 フォントファミリーとスタイル
  23. 23. 23https://fonts.adobe.com/collections
  24. 24. カラーの基礎 24
  25. 25.  RGB:色を混ぜ合わせるにつれて色が明るくなるため 「加法混色」  CMYK:色を混ぜ合わせるにつれて色が暗くなるため 「減法混色」 25 色の三原色とは
  26. 26.  色相(Hue) 赤や青など色の種類 26 色の3属性  明度(Saturation) 明度を上げると白になり、明度 を下げると黒になる。  彩度(Brightness) 色の鮮やかさ。 彩度のない無彩色(白・灰色・黒) 彩度のある有彩色に分けられる。 彩度が高いと派手な印象。
  27. 27. v=ビビッド(鮮やかな) b =ブライト(明るい) s =ストロング(強い) dp =ディープ(濃い) lt =ライト(浅い) sf =ソフト(柔らかい) d =ダル(鈍い) dk =ダーク(暗い) p =ペール(薄い) ltg =ライトグレイッシュ(明るい灰みの) g =グレイッシュ(灰みの) dkg =ダークグレイッシュ(暗い灰みの) 27 トーン 明度と彩度を合わせた呼び方
  28. 28.  補色性 – 他の色との関係性という点から色を見る方法。 色相環の逆端にある色を選ぶことで視覚的な調和をもたらす。 (2種類、3色配色、4色配色)  コントラスト – ユーザーの見るべきポイントを定め視覚への負担を減らす。 要素間でコントラストを適切に調整することによって、テキス トを簡単に読める様にし、読む人の注意をひく。  鮮やかさや力強さ – 色の感情を表現 28 色彩の理論
  29. 29.  色には見た目以上の効能がある  色には人を悲しくさせたり、信頼を構築したり、 ブランドの精神を反映したりする  人の感情に大きなインパクトを与えるような社会的な 意味合いを持つ色もある  国によって色が持つ意味合いは変わる場合がある 29 「色は刺激」という考え方 好きな色=どこでも使っていい色ではない
  30. 30. 30 色には意味がある 赤 黃 青 緑 危険・重要・情熱 太陽・幸福・注意 快適・安心・信頼 自然・成長・成功
  31. 31.  配色イメージスケール – ロマンチック – カジュアル – エレガント etc  言語イメージ・スケール – 可憐な – あどけない – ほがらかな – 優美な etc 31 色を客観的に見える化「イメージスケール」 http://www.ncd-ri.co.jp/about/ image_system/imagescale.html 日本カラーデザイン研究所が研究・開発した感性マッピングツール
  32. 32.  ベースカラー: 背景など広い面積に使う色  メインカラー: テーマとなる色  アクセントカラー: 注目させたいなどのポイントに使う色 32 配色の基本テクニック
  33. 33.  「HSB」を利用して色を作る 33 配色の作り方  事前に配色チップを作る
  34. 34. 34 デザインとは? 問題の本質を考え、 それらを解決するための設計をし、 設計を元に 表現や形を作っていくこと。 センスや思いつきのみで やっている仕事ではない!
  35. 35. ご清聴ありがとうございました

×