デザイン勉強会2nd 第二部 デザイナーたちの「すごいやり方」

7,374 views

Published on

東京で行なわれた有志の勉強会、デザイン勉強会2ndの第1部の内容です。

Published in: Design, Business, Technology
0 Comments
32 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,374
On SlideShare
0
From Embeds
0
Number of Embeds
2,255
Actions
Shares
0
Downloads
45
Comments
0
Likes
32
Embeds 0
No embeds

No notes for slide

デザイン勉強会2nd 第二部 デザイナーたちの「すごいやり方」

  1. 1. 第2部 パネルディスカッション デザイナーたちの「すごいやり方」 司会 田口 パネラー まめこ ハマダ シラサカ ショウ2009年11月12日木曜日
  2. 2. 仮案件の内容2009年11月12日木曜日
  3. 3. 店舗設定 業種:カフェ 店名:MOCA 住所:渋谷某所 概要 渋谷にあるカフェ。 20代∼30代の人に人気があり、 店内にはボサノヴァが流れ、 ゆったりしたソファでくつろぎながら、 自家焙 で世界のコーヒーが飲める。 音楽はインスト多め または jazzやボサノヴァ2009年11月12日木曜日
  4. 4. 参考店舗(渋谷カフェamber) 業種:カフェ 店名:MOCA 住所:渋谷某所2009年11月12日木曜日
  5. 5. ワイヤー フレーム (レイアウト) ある程度、 文章も仮で 決めました。2009年11月12日木曜日
  6. 6. 予算設定 30万円前後 内訳は、 ■ロゴ…5万(納品) ■トップページデザイン1案・・5万×1P ■下層デザイン…10万 ■オーサリング、フォーム設置、MAP等作成…10万2009年11月12日木曜日
  7. 7. シラサカ案は、こんなかんじになりました2009年11月12日木曜日
  8. 8. 2009年11月12日木曜日
  9. 9. 制作の流れ(目次) 案件情報の整理(どんな案件か) ↓ 作るデザインのイメージ(競合のサイトの調査) ↓ ロゴデザイン ↓ ヘッダーから(上から下の順)作っていく ↓ 完成2009年11月12日木曜日
  10. 10. どんなタイプの案件か2009年11月12日木曜日
  11. 11. 真面目なの?遊びなの?2009年11月12日木曜日
  12. 12. 真面目系で攻めた場合 もちろん白背景 もちろん左上ロゴ ターゲット層が広いので、 あまりトリッキーなことは できない2009年11月12日木曜日
  13. 13. 遊び(がある)系で攻めた場合 お決まりの レイアウトには こだわらない アクが強いので、 好き嫌いが 分かれやすい。2009年11月12日木曜日
  14. 14. 渋谷のカフェなので2009年11月12日木曜日
  15. 15. まずイメージ!2009年11月12日木曜日
  16. 16. 店舗情報は・・・ 渋谷にあるカフェ。 20代∼30代の人に人気があり、 店内にはボサノヴァが流れ、 ゆったりしたソファでくつろぎながら、 自家焙 で世界のコーヒーが飲める。 音楽はインスト多め または jazzやボサノヴァ2009年11月12日木曜日
  17. 17. ボサノヴァといえば!2009年11月12日木曜日
  18. 18. ボサノヴァの神様 セルジオ・メンデス2009年11月12日木曜日
  19. 19. こんな手間暇かけてられません2009年11月12日木曜日
  20. 20. しょうがないから、 イメージしながら 同時進行で作っていきます2009年11月12日木曜日
  21. 21. ジャズとかって、なんとなく 茶系だよね→木の背景2009年11月12日木曜日
  22. 22. ロゴデザインをしますよ 手書き風フォントの小文字、 ジャズっぽい!2009年11月12日木曜日
  23. 23. 見づらいからグロー効果2009年11月12日木曜日
  24. 24. 単調なのでまとめちゃおう2009年11月12日木曜日
  25. 25. 最終調整2009年11月12日木曜日
  26. 26. 次、ヘッダーデザイン 木のぬくもり消さないように 手作り風のアナログ感だす。2009年11月12日木曜日
  27. 27. ボツヘッダー案 ユーザビリティ考えて、 日本語メニュー追加したけど、 だっさ! オシャレカフェに来る客なら、 こんくらい読めるでしょ。2009年11月12日木曜日
  28. 28. 次、メインイメージ部分 イラストは大変なので写真で。 ただ並べてもつまんないのでポラ風に加工2009年11月12日木曜日
  29. 29. ここまででコケなければ、 あとはもう、流れに身を任せれば、 うまいこと行くもんです。2009年11月12日木曜日
  30. 30. 次、コンテンツ部分 白文字ってあんまり好きじゃない。 見づらいよね。2009年11月12日木曜日
  31. 31. 背景きりかえちゃおう2009年11月12日木曜日
  32. 32. コンテンツ作っていきます フォントは、手書き風から、ブレさせない。 気づいたらブラウンばっかりだったので、 アクセントカラーはオレンジに決定!2009年11月12日木曜日
  33. 33. 最後に、フッター コピーライトと一緒に、 住所とか電話番号書くのが 一般的なんだけど、 全体のバランス&デザイン重視で コピーライトのみをシンプルに配置2009年11月12日木曜日
  34. 34. 完 成2009年11月12日木曜日
  35. 35. 提供 Adobe Fireworks CS4(ロゴからフッターまで、すべて) Google先生(悩む前にググる) たくさんのウェブサイトたち(パクリではなく、インスパイアー) デザインセンス(汗と涙の結晶、プライスレス)2009年11月12日木曜日
  36. 36. まめこ案はこちら2009年11月12日木曜日
  37. 37. 2009年11月12日木曜日
  38. 38. 着想 • 写真 • キャッチコピー • 参考サイトなど2009年11月12日木曜日
  39. 39. サンプルサイト をひっくり返す 今まで「作りたいなー」と 思ってとりためておいた キャプチャの中からいくつ かをピックアップ。2009年11月12日木曜日
  40. 40. グーグル様に 聞く 「coffee design」など ざっくりと検索。 画像検索結果を流しみて気に なるものを保存しておく。2009年11月12日木曜日
  41. 41. 集めたものはコレ2009年11月12日木曜日
  42. 42. ロゴを作ろう! 一番のキモになるところ! 楽しい作業のお待ちかねです。2009年11月12日木曜日
  43. 43. 手書き してみる 「moca」 円で描ける要素が 多いことに気付く。2009年11月12日木曜日
  44. 44. ○を作って…2009年11月12日木曜日
  45. 45. 完成2009年11月12日木曜日
  46. 46. サイトを作ろう! その場の思いつきも重要です。2009年11月12日木曜日
  47. 47. 白いキャンバスに置いたらすごくキレイに見えた!2009年11月12日木曜日
  48. 48. たまたま引いた四角の水色がイイ感じに見えた!2009年11月12日木曜日
  49. 49. ヘッダーから作る タグラインには凝らず、場所が分かるように。 メニューは文字を小さく空白を活かす。2009年11月12日木曜日
  50. 50. 次はフッター フッターには地図や住所、電話番号、営業時間2009年11月12日木曜日
  51. 51. 最後に真ん中 キャッチコピー を入れる。 スッキリよりも 寂しい感じが しますね…2009年11月12日木曜日
  52. 52. 写真を入れて完成 おされそうな写真を 入れてポラ風に。 メニューやリード分 を追加して余白のバ ランスを取って完 成。2009年11月12日木曜日
  53. 53. ハマダ案はこちら2009年11月12日木曜日
  54. 54. 2009年11月12日木曜日
  55. 55. 着想 作り始める前に、キーワードを設定しま す。 自分で設定したキーワードは以下。 • こだわりのコーヒー(珈琲でなくコーヒー) • ゆったり • おちついた • 男女問わず • 夜は照明暗め2009年11月12日木曜日
  56. 56. 着想2 現地に行けない場合はキーワードから 具体的なイメージを連想します。 • チェーン系だとスタバよりタリーズかな。 • カップは白でぽってりしている。 • お店に入るとコーヒーのいいにおいがする。 • 照明はペンダント式、色温度低めでオレンジ系だな。 • 本読んでるお客さんが多い。2009年11月12日木曜日
  57. 57. 着想3 ビジュアルの方向性設定 お店に行きたくなる 「空気感」の提供 (ここまでは頭の中です)2009年11月12日木曜日
  58. 58. ここでようやく Macを立ち上げます2009年11月12日木曜日
  59. 59. ロゴ 今回は比較的オーソドックスな雰囲気に したいので、既存の書体をベースに アレンジしていきます。 設定したキーワードに合うものを、 あらかじめ頭の中に(もちろん手描きで も) 描いておくと進めやすいです。2009年11月12日木曜日
  60. 60. ロゴ(2) まず色々並べてみる 書体の選び方のポイントは •どんな音で聴こえそうか •堅いのか柔らかいのか •ちゃんと読めるか2009年11月12日木曜日
  61. 61. ロゴ(3) 1. aだと柔らかすぎるの で、A(aのスモール キャップ)に 2. フィルタをかけて少し 丸くしました 3. 歪んだ箇所を修正 4. すこしがたがたさせ て、味を出す2009年11月12日木曜日
  62. 62. 基本設計(色&書体) 次に基本の色と書体を決めます。 デザインを始める前に、 よりイメージを具体的に固めておきます。2009年11月12日木曜日
  63. 63. 基本設計(色&書体) カラーパレットは ベースとなる色の濃淡 (最低3段階)+アクセント色 で構成。 書体は サイトの雰囲気にあわせて セレクト。2009年11月12日木曜日
  64. 64. 素材をそろえる デザインを始める前に、 必要な素材をそろえておきます。 今回の場合は文字原稿と写真。 http://www.sxc.hu/2009年11月12日木曜日
  65. 65. 素材を加工 シズル感を演出します。2009年11月12日木曜日
  66. 66. Photoshopにて制作 1. グリッド 2. レイアウト 3. 装飾 4. 調整2009年11月12日木曜日
  67. 67. ならべてみた2009年11月12日木曜日
  68. 68. 調整してできあがり2009年11月12日木曜日

×