さあ、デザインをはじめよう。DevLOVE関西

13,924 views
16,358 views

Published on

DevLOVE関西

Published in: Design

さあ、デザインをはじめよう。DevLOVE関西

  1. 1. 瀬口理恵(せぐちりえ)@rie05 1983年大阪うまれ大阪そだち
 5DGの屋号でフリーランスデザイナーしてます ! Web全般&AppUI&DTP少々/デジハリ講師業 @rie05 /rie.seguchi 制作環境はMac、Photoshopが好きです。 自己紹介
  2. 2. 本日の資料は Slideshareにアップしております http://www.slideshare.net/rie05 自由にお持ち帰りください 本日の資料
  3. 3. さいしょに1 デザイン、知っておくべきこと2 実例から見るデザイン3 時短でプロっぽく見せるコツ4 アジェンダ デザイナーの頭の中5 さいごに6
  4. 4. さいしょに 1 さいしょに
  5. 5. センスがない 自分には さいしょに と思っていませんか?
  6. 6. デザインセンスはつくれます(超重要) さいしょに
  7. 7. センスがない=センスを磨いていない さいしょに 知識をつけましょう、 呼び起こしましょう!
  8. 8. デザイン、知っておくべきこと 2 デザイン、知っておくべきこと
  9. 9. 良いデザイン と聞いて何を思い浮かべますか? デザイン、知っておくべきこと
  10. 10. 1.情報が整理されている 2.機能的である 3.ユーザーフレンドリー デザイン、知っておくべきこと
  11. 11. 答えがない と思っていませんか? デザイン、知っておくべきこと デザインには
  12. 12. デザイン、知っておくべきこと アート ・表現する・万人に理解される必要はない ・ユーザーがすることは特にない・主観的 デザイン ・伝える・万人に理解され機能的であるべき ・ユーザーが触る動かす・客観的
  13. 13. デザイン、知っておくべきこと アーティスト=デザイナー
  14. 14. デザイン、知っておくべきこと アーティスト=デザイナー
  15. 15. デザイン、知っておくべきこと Design is not just what it looks like and feels like. Design is how it works.
 デザインとは、単にどのように見えるか、 どのように感じるかということではない。 どう機能するかだ。 ! ‐ スティーブ・ジョブズ ©Apple
  16. 16. デザイン、知っておくべきこと デザイン基本4原則 なんとなく意識するだけで、ぜんぜん違う。
  17. 17. デザイン、知っておくべきこと 基本4原則 1.近接   関連するものは近づけて関連の薄いものは離す 2.整列   配置は揃えてあげる 3.反復   繰り返すことによって統一感をもたせる 4.コントラスト   色の濃淡やフォントの種類や大小など要素の違うものは差を明確につける
  18. 18. デザイン、知っておくべきこと 近接 6月27日の日記 DevLOVE関西に初めてお邪魔しました。どんな人達と会えるのかな? ちょっと緊張しています。 6月28日の日記 PHPカンファレンス2014が開催されるらしい。デザイナーでもWordPress 使うし興味あるから行ってみよう。 違うもの なので離す 関連しているので近づける ・・・関連するものは近づけ薄いものは離す
  19. 19. デザイン、知っておくべきこと 近接 6月27日の日記 DevLOVE関西に初めてお邪魔しました。どんな人達と会えるのかな? ちょっと緊張しています。 6月28日の日記 PHPカンファレンス2014が開催されるらしい。デザイナーでもWordPress 使うし興味あるから行ってみよう。 違うもの なので離す 関連しているので近づける ・・・関連するものは近づけ薄いものは離す
  20. 20. デザイン、知っておくべきこと 整列 アメリカンショートヘアー スコティッシュフォールド ロシアンブルー コーニッシュレックス ・・・配置を揃えて統一する
  21. 21. デザイン、知っておくべきこと 整列 アメリカンショートヘアー コーニッシュレックス スコティッシュフォールド ロシアンブルー ・・・配置を揃えて統一する
  22. 22. デザイン、知っておくべきこと 整列 アメリカンショートヘアー コーニッシュレックス スコティッシュフォールド ロシアンブルー ・・・配置を揃えて統一する
  23. 23. デザイン、知っておくべきこと 反復 ・・・要素要素を反復(繰り返し使い)    統一性を出す ■フォントは数種類と決めてそれ以外極力使わない ■色も基本カラーセットを決めておく ■特徴があるモチーフなどを繰り返し使う
  24. 24. デザイン、知っておくべきこと コントラスト ・・・要素の違うものは差をつける 仮面ライダーオーズ 私が1番好きなコンボはラトラータです。強いよね! ガタキリバも捨てがたい。それよりアンクかっこいい。
  25. 25. デザイン、知っておくべきこと 仮面ライダーオーズ 私が1番好きなコンボはラトラータです。強いよね! ガタキリバも捨てがたい。それよりアンクかっこいい。 コントラスト ・・・要素の違うものは差をつける
  26. 26. デザイン、知っておくべきこと 時に大胆に、しっかりと大小や明暗を 分けたほうがかっこいい!
  27. 27. デザイン、知っておくべきこと 基本4原則 1.近接   関連するものは近づけて関連の薄いものは離す 2.整列   配置は揃えてあげる 3.反復   繰り返すことによって統一感をもたせる 4.コントラスト   色の濃淡やフォントの種類や大小など要素の違うものは差を明確につける
  28. 28. デザイン、知っておくべきこと 色・配色 色が与えるイメージは絶大です
  29. 29. デザイン、知っておくべきこと 悪い例 こんにちは!こんにちは!×読めない ×うるさい
  30. 30. デザイン、知っておくべきこと デザイナーは ・なぜその色を選んだか ・配色の意図 を説明できるように制作しています
  31. 31. デザイン、知っておくべきこと 生命力・情熱・愛・パワー・刺激・怒り 安全・調和・健康・治療 静けさ・冷静・安らぎ・誠実・リラックス 幸福・喜び・エネルギー・熱意・陽気・活力 好奇心・協力・幸福・栄光 高貴な・威厳・忠誠・優雅
  32. 32. デザイン、知っておくべきこと 青と緑を使った例)病院・・・安らぎ、治療
  33. 33. デザイン、知っておくべきこと 紫を使った例)アパレルブランド・・・高貴な、優雅
  34. 34. デザイン、知っておくべきこと 青を使った例)政治・・・誠実さ、冷静
  35. 35. デザイン、知っておくべきこと ターゲットや用途に合わせて メインカラーを決定する でも落とし穴があるよ
  36. 36. デザイン、知っておくべきこと うちのイメージ緑だから。 みどり使ってね。 クライアント
  37. 37. デザイン、知っておくべきこと
  38. 38. デザイン、知っておくべきこと ×Bad!! Badな理由:緑つかいすぎ。 メインカラーを決めても使いすぎると 素人っぽい垢抜けない感じに…
  39. 39. デザイン、知っておくべきこと ×Bad!! Badな理由:緑がまぶしい。 緑といっても色々な緑があります。 メインに使うカラーとしては明度彩度が高すぎます。
  40. 40. デザイン、知っておくべきこと 4種類の色を決めよう 1.メインカラー   全体のイメージとなるカラー。使いすぎ注意。 2.背景色   白や黒、無彩色かメインカラーと同系統の薄い色が無難 3.基本の文字色   背景色とのコントラストは気をつけて、読みやすさ重視 4.強調色   アクセントになるカラー。メインカラーと補色の関係が吉
  41. 41. デザイン、知っておくべきこと メインカラー選びは慎重に 標準色(明度、彩度が高すぎる色)は避けた方が無難 ☓目にやさしくない ☓安易に選んでいるように見えます ☓PowerPointのカラーパレットから選んだの?
  42. 42. デザイン、知っておくべきこと メインカラー 背景色 基本の文字色 強調色 慣れてきたらもう1色増やしたり、 背景色に少し色をいれてみたりチャレンジ
  43. 43. デザイン、知っておくべきこと Windowsのエクセルとか、パワーポイントの カラーパレットから適当に色をとってくるのは もう卒業しましょう! Color Trends + Palettes :: COLOURlovers http://www.colourlovers.com/
  44. 44. デザイン、知っておくべきこと フォント・文字組み 侮れないフォントと少しの手間で見栄え向上
  45. 45. デザイン、知っておくべきこと 書体選択は、 「視認性」「可読性」「判読性」 を常に意識する
  46. 46. デザイン、知っておくべきこと ゴシック体 太めのゴシック体はタイトルや見出しとしても最適 Webサイトでの標準文字はこちら推奨 明朝体 細い明朝体は長い文書を読ませる時に最適 新聞で使われています。少し高級感が出たりします
  47. 47. デザイン、知っておくべきこと 文字詰めをちゃんとする 1.ひらがなやカタカナ    2.句読点や記号   、や。や「」です 文字間隔を調整すると引き締まります
  48. 48. デザイン、知っておくべきこと 文字詰め前 文字詰め後
  49. 49. デザイン、知っておくべきこと メリハリをつけてみる 1.円・記号・単位など   2.助詞   は、を、が、に、の、など 強調する必要のないものは小さく
  50. 50. デザイン、知っておくべきこと サンプル
  51. 51. デザイン、知っておくべきこと 行動心理学 人はどう見るのか?どう感じるのか?
  52. 52. デザイン、知っておくべきこと 目が受け取る情報と 脳が伝える情報には誤差がある カニッツァの三角形
  53. 53. デザイン、知っておくべきこと ミュラ・リヤー錯視
  54. 54. デザイン、知っておくべきこと 人はパターンを見つけたがる 8個の点より2個ずつ4ブロックに見る
  55. 55. デザイン、知っておくべきこと 人は顔認識専門の脳領域がある 人の目線の先を見る 習性があります
  56. 56. デザイン、知っておくべきこと ⃝ 目線の先に読ませたい文字 ☓! 訴求力が弱い
  57. 57. デザイン、知っておくべきこと 最も訴求力のあるのはこっちを しっかりと見つめている目 笑顔なども効果的
  58. 58. デザイン、知っておくべきこと 一度に処理できる情報には限界がある 人は30%の時間はボンヤリしているそうです りんご バナナ 桃MELON ビワ さくRAんぼ
  59. 59. デザイン、知っておくべきこと 段階的開示 その時必要な情報だけ与える 終わりを見せてSTEPに分ける
  60. 60. 実例から見るデザイン 3 実例から見るデザイン
  61. 61. 最近のデザイントレンド フラットデザイン 実例から見るデザイン
  62. 62. スキューモーフィズムから フラットへ 実例から見るデザイン
  63. 63. 実例から見るデザイン
  64. 64. 最近のデザイントレンド ポリゴンスタイル 実例から見るデザイン
  65. 65. 最近のデザイントレンド ブラーエフェクト 実例から見るデザイン
  66. 66. 最近のデザイントレンド ラージフォト 実例から見るデザイン
  67. 67. 実例から見るデザイン 流行は常にアンテナを張り巡らせておく
  68. 68. 時短でプロっぽく見せるコツ 4 時短でプロっぽく見せるコツ
  69. 69. 黒白しかない、もしくは1色を使いすぎ 悪い例その1 ワイヤーフレーム段階かな?黒と白、 もしくはグレーしかない画面… ※意図的なものは除く ! 配色フェーズでもあった、 メインカラーに頼りすぎたデザインなど 時短でプロっぽく見せるコツ
  70. 70. やりすぎな装飾 悪い例その2 デザインをがんばろうとして てんこ盛りになっているのを たまに見かけますが、 ! 装飾はすればいい というものではありません。 時短でプロっぽく見せるコツ
  71. 71. グラデーションやシャドウかけすぎ 悪い例その3 Photoshopのフィルタやレイヤースタイルなど、 初期値そのまま使ってしまうと強すぎてダサくなります ダメな例 良い例 時短でプロっぽく見せるコツ
  72. 72. 1pxのコダワリ たかが1px、されど1px。 時短でプロっぽく見せるコツ
  73. 73. 時短でプロっぽく見せるコツ 注目
  74. 74. 時短でプロっぽく見せるコツ 拡大中
  75. 75. 時短でプロっぽく見せるコツ
  76. 76. 時短でプロっぽく見せるコツ メインのオレンジカラー ハイライト 境界線に暗めのオレンジカラー 分解すると…
  77. 77. ほのかなグラデ うっすらパターン 入ってる?入ってる入ってる、くらい 時短でプロっぽく見せるコツ
  78. 78. 時短でプロっぽく見せるコツ
  79. 79. 時短でプロっぽく見せるコツ 種明かし グラデはこれくらい ! パターンは白のドットをうっすらかけてます (不透明度で調整)
  80. 80. ふわっとシャドウ さりげなく使わないとダサくなる諸刃効果 時短でプロっぽく見せるコツ
  81. 81. 時短でプロっぽく見せるコツ
  82. 82. 時短でプロっぽく見せるコツ シャドウ=黒じゃなくてもいい この白いボックス(左)の後ろのレイヤーに、 背景より同系色で少し暗めにぼかした レイヤーが隠れています
  83. 83. リスト部分のコツ 単調にならないように 時短でプロっぽく見せるコツ
  84. 84. 時短でプロっぽく見せるコツ アイコンや⃝■などの記号装飾 アイコン要素はメリハリになり、規則性も生まれる万能装飾
  85. 85. ボタン文字に一手間 特に大事なボタンには 時短でプロっぽく見せるコツ
  86. 86. 時短でプロっぽく見せるコツ 文字の下にシャドウをいれる
  87. 87. 時短でプロっぽく見せるコツ
  88. 88. デザイナーの頭の中 5 デザイナーの頭の中
  89. 89. 普段やっていること 良いデザインや発想を磨くために デザイナーの頭の中
  90. 90. なんでもデザイン的な目で見てみる デザイナーの頭の中
  91. 91. 参考になるものを研究する、真似てみる パクリはダメですが、良いデザインのものをたくさん見て感性を磨きます。 生活の中にたくさん良いデザインのものは溢れてます! デザイナーの頭の中
  92. 92. ストックする 気に入ったデザイン、 いいと思ったものは ストックしておきます デザイナーの頭の中 DEMO
  93. 93. デザイナーとの付き合い方 プログラマさんとは歩み寄りたいです デザイナーの頭の中
  94. 94. デザイナーの頭の中 ターゲットは? どんな場面で使われる? 競合のデザイントレンドは? ! 何を解決してほしいのか?
  95. 95. デザイナーの領域 デザイン力 UI エンジニアの領域 プログラム ノウハウ 実装知識 壁 デザイナーの頭の中
  96. 96. デザイナーに言うと   嫌われるセリフ集 デザイナーの頭の中
  97. 97. 11回ざっくり   作ってみてください からの デザイナーの頭の中
  98. 98. なんか違う・・・ デザイナーの頭の中
  99. 99. すごく多いんですが、 1回やってみてからの丸投げは危険です… デザイナーの頭の中
  100. 100. 簡単でいいんで   パパっと   やっちゃって   ください デザイナーの頭の中
  101. 101. パパっとは作れません… (なんだか軽視されてるようで、 悲しくなってしまいます) デザイナーの頭の中
  102. 102. バーンって感じと   キラキラ〜風で、   でもシンプルにして デザイナーの頭の中
  103. 103. 言ってる意味がわかりません… デザイナーの頭の中
  104. 104. デザイナーの頭の中
  105. 105. 「1回作ってみて」は 「見てみないと分からない」から 「なんか違う」は イメージや想像は個人差があるから 原因 デザイナーの頭の中
  106. 106. 「パパっと」は 作る工程や考えを知らないから デザイン要望がうまく伝わらないのは イメージがふんわりしているから 原因 デザイナーの頭の中
  107. 107. デザインは全部 デザイナー任せ!をやめよう デザイナーの頭の中 ふんわりしてるイメージをいかに具体的に 引き出せるかもデザイナーの手腕です! Cute? SIMPLE?
  108. 108. デザイナーの頭の中
  109. 109. デザイナーの頭の中 オペレーターにはならず、 いかにデザインとして提案していけるか、 そこに価値を見てもらえるか。 デザイナーとして日々修行です。
  110. 110. さいごに 6 さいごに
  111. 111. ♥デザインはWebやアプリとユーザーを繋ぐ1番最初 の架け橋。とっても大事! さいごに ♥少しのコツと見る目を養うことで、ダサいデザイン からサヨナラできます ♥デザイナーとエンジニアが少しずつ歩み寄ることで 良い制作物を世に出せれば幸いです

×