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