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.

デザインのお話 20131207

1,021 views

Published on

Published in: Design
  • Be the first to comment

デザインのお話 20131207

  1. 1. DESIGN デ ザインのお話 設計∼制作∼引き渡しまでの流れ
  2. 2. DESIGN 自己紹介 稲葉修平 ............................................... Web 制作会社 株式会社フルゲイン 自然が好きです。 01
  3. 3. DESIGN 今日の概要 設計∼制作∼引き渡しまで ど んなことを 考 え て デ ザ イ ン し て い く の か デ ザインにつ い て 曖 昧 な 点 を 明 確 に センスとか、好み が ∼ と か 02
  4. 4. DESIGN 今日の概要 WRIGHT BROTHERS 会員登録すると空を飛べるようになるサービス 03
  5. 5. DESIGN デザイナーの役 割 選択 整頓 装飾 04
  6. 6. DESIGN デザイナーの役 割 センス? ディレクター、アートディレクター 選択 設計 デザイナー 整頓 装飾 ビジュアルデザイン 好み? 05
  7. 7. 選 択 / 設計 DESIGN 選択するもの .......................................................................... ゴシック 明朝 .......................................................................... ・キーカラー ・ベースカラー ・補色 06 (コンセプト、UI、UX) 基本フォント 色 ワイヤーフレーム
  8. 8. DESIGN 選択 / 設計 選択に失敗しないためには 07
  9. 9. DESIGN 選 択 / 設計 08
  10. 10. DESIGN 選 択 / 設計 目的 = 女 性 用 と 伝 え る こ と 形 色 09
  11. 11. DESIGN 選 択 / 設計 情報を伝える 目的 = 女 性 用 と 伝 え る こ と 形 色 伝わりやすいものを選択 10
  12. 12. DESIGN 選 択 / 設計 選択とは 多くのものの中から、 よいもの、目的にかなう ものを選ぶ デジタル大辞泉 11
  13. 13. DESIGN デザイン設計 における 選 択 / 設計 選択とは 多くのものの中から、 ユーザにとって よいもの、目的にかなう ものを選ぶ デジタル大辞泉 12
  14. 14. 選 択 / 設計 DESIGN 決まりました こふりがな ゴシック .......................................................................... 基本フォント 1 カラム .......................................................................... 色 ワイヤーフレーム 13
  15. 15. 選 択 / 設計 色相環 補色 ▼ DESIGN キーカラー 補色(反対色)… 色相環の中で相対する位置にある色 14
  16. 16. DESIGN 整 頓・装 飾 / ビジュアルデザイン 整頓 レイアウト 設計で決まった仕様+ 原稿・素材⇒ 整頓していく 15
  17. 17. DESIGN 整 頓・装 飾 / ビジュアルデザイン まとめて える 16
  18. 18. DESIGN 整 頓・装 飾 / ビジュアルデザイン 整頓方法 HTML を意識して えていく え方が良くわからない場合、デザイナもデザイン時に マークアップしてしまうと効果的です。 17
  19. 19. DESIGN 整 頓・装 飾 / ビジュアルデザイン P ho t o s h o p の レ イ ヤ ー で マ ー ク ア ッ プ 18
  20. 20. DESIGN 整 頓・装 飾 / ビジュアルデザイン </h> <h> <p> <p> </p> </section> <section> <h> こんな感じ <ul> <li> <li> </li> <li> </h> <li> </li> <li> </li> <li> 19
  21. 21. DESIGN 整 頓・装 飾 / ビジュアルデザイン <section> <h></h> <p></p> </section> タグに合わせて <section> <h></h> <p></p> </section> 20
  22. 22. DESIGN 整 頓・装 飾 / ビジュアルデザイン 枠や罫線 使 用 時 は 、 な ぜ か える意識が薄れる 21
  23. 23. DESIGN 整 頓・装 飾 / ビジュアルデザイン 色 ベース キー 補色 22
  24. 24. DESIGN 整 頓・装 飾 / ビジュアルデザイン 色の比率 ベース キー 6 補色 3 1 23
  25. 25. DESIGN 整 頓・装 飾 / ビジュアルデザイン 色を える ベース 3 キー キー 補色 3 + 3 6 1 26
  26. 26. DESIGN 整 頓・装 飾 / ビジュアルデザイン 色を える ベース 6 キー キー 補色 1.5 + 1.5 1 3 25
  27. 27. DESIGN 整 頓・装 飾 / ビジュアルデザイン 装飾 美しく着飾るだけではなく、 説明の補足等の役割も。 27
  28. 28. DESIGN 整 頓・装 飾 / ビジュアルデザイン 27
  29. 29. DESIGN 整 頓・装 飾 / ビジュアルデザイン 整頓・装 飾 ま と め 整頓は、 ま と め て 、 え る こ と HT ML を 意 識 す る と 整 頓 し や す い 配色の比 率 は 6 : 3 : 1 装飾には 説 明 を 補 う 役割 も あ る 感 覚では な く 理 屈 で デ ザ イ ン で き る 26
  30. 30. DESIGN 引 き渡し </section> 100px マ ー ジ ン が 足 さ れて し ま う <section> 30
  31. 31. DESIGN 引 き渡し 会社案内 サービス 「 サービス」 に 合 わ せ て 、 「 会社案内」 も 赤 線 で ス ラ イ ス する 30
  32. 32. DESIGN 引 き渡し マ ークアップしやすいデータを。 どのペ ー ジ の デ ー タ か わ か り や す い 31
  33. 33. DESIGN 引 き渡し マウス オ ン 時 や セ レ ク ト 時 の 状 態 等 が わかり や す い 。 32
  34. 34. DESIGN 最 後に ユーザ 、 ク ラ イ ア ン ト 、 チ ー ム 相 手 の 立場 を考え、デザインする。 33
  35. 35. ご 清 聴ありがとうございました。 34

×