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