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

第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日木曜日