1. DESIGN
デ ザインのお話
設計∼制作∼引き渡しまでの流れ

2. DESIGN
自己紹介
稲葉修平
...............................................
Web 制作会社 株式会社フルゲイン
自然が好きです。
01

3. DESIGN
今日の概要
設計∼制作∼引き渡しまで
ど んなことを 考 え て デ ザ イ ン し て い く の か
デ ザインにつ い て 曖 昧 な 点 を 明 確 に
センスとか、好み が ∼ と か
02

4. DESIGN
今日の概要
WRIGHT BROTHERS
会員登録すると空を飛べるようになるサービス
03

5. DESIGN
デザイナーの役 割
選択
整頓
装飾
04

6. DESIGN
デザイナーの役 割
センス？
ディレクター、アートディレクター
選択
設計
デザイナー
整頓
装飾
ビジュアルデザイン
好み？
05

7. 選 択 / 設計
DESIGN
選択するもの
..........................................................................
ゴシック
明朝
..........................................................................
・キーカラー
・ベースカラー
・補色
06
（コンセプト、UI、UX）
基本フォント
色
ワイヤーフレーム

8. DESIGN
選択 / 設計
選択に失敗しないためには
07

9. DESIGN
選 択 / 設計
08

10. DESIGN
選 択 / 設計
目的 ＝ 女 性 用 と 伝 え る こ と
形
色
09

11. DESIGN
選 択 / 設計
情報を伝える
目的 ＝ 女 性 用 と 伝 え る こ と
形
色
伝わりやすいものを選択
10

12. DESIGN
選 択 / 設計
選択とは
多くのものの中から、
よいもの、目的にかなう
ものを選ぶ
デジタル大辞泉
11

13. DESIGN
デザイン設計
における
選 択 / 設計
選択とは
多くのものの中から、
ユーザにとって
よいもの、目的にかなう
ものを選ぶ
デジタル大辞泉
12

14. 選 択 / 設計
DESIGN
決まりました
こふりがな
ゴシック
..........................................................................
基本フォント
1 カラム
..........................................................................
色
ワイヤーフレーム
13

15. 選 択 / 設計
色相環
補色
▼
DESIGN
キーカラー
補色（反対色）… 色相環の中で相対する位置にある色
14

16. DESIGN
整 頓・装 飾 / ビジュアルデザイン
整頓
レイアウト
設計で決まった仕様＋ 原稿・素材⇒ 整頓していく
15

17. DESIGN
整 頓・装 飾 / ビジュアルデザイン
まとめて
える
16

18. DESIGN
整 頓・装 飾 / ビジュアルデザイン
整頓方法
HTML を意識して
えていく
え方が良くわからない場合、デザイナもデザイン時に
マークアップしてしまうと効果的です。
17

19. DESIGN
整 頓・装 飾 / ビジュアルデザイン
P ho t o s h o p の レ イ ヤ ー で マ ー ク ア ッ プ
18

20. DESIGN
整 頓・装 飾 / ビジュアルデザイン
</h>
<h>
<p>
<p>
</p>
</section>
<section>
<h>
こんな感じ
<ul>
<li>
<li>
</li>
<li>
</h>
<li>
</li>
<li>
</li>
<li>
19

21. DESIGN
整 頓・装 飾 / ビジュアルデザイン
<section>
<h></h>
<p></p>
</section>
タグに合わせて
<section>
<h></h>
<p></p>
</section>
20

22. DESIGN
整 頓・装 飾 / ビジュアルデザイン
枠や罫線 使 用 時 は 、 な ぜ か
える意識が薄れる
21

23. DESIGN
整 頓・装 飾 / ビジュアルデザイン
色
ベース
キー
補色
22

24. DESIGN
整 頓・装 飾 / ビジュアルデザイン
色の比率
ベース
キー
6
補色
3
1
23

25. DESIGN
整 頓・装 飾 / ビジュアルデザイン
色を
える
ベース
3
キー
キー
補色
3 + 3
6
1
26

26. DESIGN
整 頓・装 飾 / ビジュアルデザイン
色を
える
ベース
6
キー
キー
補色
1.5 + 1.5 1
3
25

27. DESIGN
整 頓・装 飾 / ビジュアルデザイン
装飾
美しく着飾るだけではなく、
説明の補足等の役割も。
27

28. DESIGN
整 頓・装 飾 / ビジュアルデザイン
27

29. DESIGN
整 頓・装 飾 / ビジュアルデザイン
整頓・装 飾 ま と め
整頓は、 ま と め て 、 え る こ と
HT ML を 意 識 す る と 整 頓 し や す い
配色の比 率 は 6 : 3 : 1
装飾には 説 明 を 補 う 役割 も あ る
感 覚では な く 理 屈 で デ ザ イ ン で き る
26

30. DESIGN
引 き渡し
</section>
100px
マ ー ジ ン が 足 さ れて し ま う
<section>
30

31. DESIGN
引 き渡し
会社案内
サービス
「 サービス」 に 合 わ せ て 、
「 会社案内」 も 赤 線 で ス ラ イ ス する
30

32. DESIGN
引 き渡し
マ ークアップしやすいデータを。
どのペ ー ジ の デ ー タ か わ か り や す い
31

33. DESIGN
引 き渡し
マウス オ ン 時 や セ レ ク ト 時 の 状 態 等 が
わかり や す い 。
32

34. DESIGN
最 後に
ユーザ 、 ク ラ イ ア ン ト 、 チ ー ム
相 手 の 立場 を考え、デザインする。
33

35. ご 清 聴ありがとうございました。
34