1.
Webデザイン概論最低限のルールを守れば見やすいサイトはできる 1

2.
講義の流れ10:00- • 会社紹介、自己紹介 • やってはいけないこと、やってませんか？ • そもそもWebデザインとは？ • サイトの目的を決める12:00- • （昼休憩）13:00- • 情報を整理する • Webサイトならではのデザイン • ワークショップ実習 • これだけは守りたいデザインのルール • まとめ 2

3.
会社紹介合同会社CGFM http://cgfm.jp「楽しさを再発見するデザイン」∼見方を変えればネガティブもポジティブに！∼福岡市東区のSOHOスタイル社員：2名 (デザイナー + マークアップエンジニア) 3

4.
自己紹介1名前：金内 透 [@Garyuten]役職：コンテンツプロデューサー ＋マークアップエンジニアblog：我流天性 がらくた屋 http://blog.cgfm.jp/garyu所属コミュニティ サト研、FWW、RBC、etc 4

5.
自己紹介2名前：金内 和子 [@mutsuking]役職：webデザイナーblog：Mutsulog http://blog.cgfm.jp/mutsuki所属コミュニティ サト研、FWW、RBC、etc 5

6.
みなさんも自己紹介3分で周囲の人と自己紹介してください。 6

7.
あなたの自慢の一品は？5分で自慢の一品を紹介を書いてください。 A4用紙1枚の他に手段は問いません。 7

8.
お疲れ様でしたちゃんと伝えることができましたか？ 8

9.
やってはいけないことやっていませんか？出典)企業サイトでやってはいけない事柄TOP20 - BlurBlue-Notehttp://www.blurblue.com/2008/07/ranking_website_embarrassed.html 9

10.
やってはいけないことを種類分けしてみました• 情報デザインの欠如• ユーザビリティーの欠如• 適切でない技術の使用• 会社の体制 ←この講義では取り扱いません 10

11.
情報デザインの欠如• 情報が多すぎで探している情報にたどり着けない• 商品一覧などの一覧ページがない• サイトを見ても何を伝えたいかがわからない• 商品の詳細情報がない• 会社案内の地図がわかりにくい• サイトメニューが英語で書いてある 11

12.
ユーザビリティの欠如• リンク先がPDFファイル• 問い合わせ先が明記してない• 目に優しくない背景色（黄色、赤色など）• 全体的に文字が小さい 12

13.
適切でない技術の使用• 画像が多くて重い• ポップアップがどんどん開く• 突然音が鳴る• ブラウザのサイズを勝手に変えられる• 右クリック禁止 13

14.
会社の体制（ちょっとだけ） • 情報が数カ月更新されていない • 「準備中」のコンテンツだらけ • 公式ブログがスタッフの内輪ネタばかり • 担当者に権限が無い 14

15.
誰に何を誰のためのサイト？ 伝えたいの？ なぜこんなことが 起きるのか？ サイトの目的が 定まってないのに サイト制作を行うから 15

16.
目的が決まってない サイトの全体像が描けない伝えたい内容の優先度がバラバラその場限りの、統一性の無い、わけのわからないサイトができる 16

17.
こんなことにならないためにデザイナーが心がけてる手法を少しだけ教えちゃいます 17

18.
Webサイト制作の流れ デザイナー視点での概略 18

19.
Webサイト制作の流れ全体の流れ コンセプトワーク グラフィックデザイン サイト構成 HTMLコーディング ワイヤーフレーム 公開（運用/検証) 19

20.
いきなり画面デザインは作りません 20

21.
そもそもWebデザインとは？ 21

22.
Web デザイン ¦¦ ¦¦World Wide Web 和訳：設計 双方向の情報 ある対象について、 良い構成を工夫すること。 問題解決の手段 22

23.
全体を 思いやりも広く見渡す 大事！ Web＋デザイン 情報のやり取りを設計する「情報を整理して、相手にわかりやすく正しく伝える事」 目的が大事!! 23

24.
サイトの目的を決めるコンテンツの絞り込みができる 弊社イチオシの商品は… ○○○○ です。 24

25.
サイトの目的を決める• コンセプト 「サイトのありたい姿・あるべき姿」• 5W2H を具体的にイメージしていく• ユーザー層• 成功／成果• キーワード 25

26.
サイトの目的を決めるコンセプトこのサイトは… ⃝⃝⃝で□□□を△△△する サイトです。 単純で明快に一言で。 「キャッチコピー」になり得る 26

27.
サイトの目的を決める5W2H • What（ウェブで何を実行するのか？） • Why（なぜ実行する必要があるのか？） • When（いつ、いつからいつまでに実行するのか？） • Who（誰が、誰と実行するのか？） • Where（どこで実行するのか？） • How（どのように実行するのか？） • How much（いくらで実行するのか？） 27

28.
サイトの目的を決める5W2H • What（スマートフォン向けの顧客管理ソフトを直販） • Why（既存製品よりも優れている自信があるから） • When（2ヶ月後の新バージョン公開に合わせて） • Who（開発担当者１人と新人１人で運営する） • Where（PRサイトを独自ドメインで展開） • How（試用版をFreeで出し、そこから有料版へ） • How much（試用版は無料、有料版は1000円で） 28

29.
サイトの目的を決めるユーザー層 • どんなユーザーに見てもらいたいか （ターゲットユーザー） • 年齢 • 性別 • 地域 • 趣味嗜好 • 年収 • 家族構成 どんな問題を抱えてるか 29

30.
サイトの目的を決める成功／成果 • 具体的な目標 • 「売上 20%UP」 • 「アクセス数 UP」 • 「会員新規登録 UP」 • 「資料請求件数」「お問合せ件数」 • 検索結果の上位表示を最終目標としない • サイトに訪問してもらった後、離脱されないように 30

31.
サイトの目的を決めるキーワード • どんなキーワードで検索してくるサイトなのか？ • 「太宰府天満宮 結婚 挙式」 • 「福岡市東区 歯医者」 • 検索キーワードはユーザーの抱えてる問題を映す鏡 • どんなページもTOPページになりえる 31

32.
サイトの目的を決めるマインドマップの活用 例）ふくおか生涯学習ひろば 32

33.
これだけは守りたい デザインのルール 33

34.
デザインのルール 文字編 34

35.
デザインのルール 文字編ジャンプ率出典) 第13回 Webページで読みやすいテキストとは - エンジニアのためのWebデザイン教室：ITprohttp://itpro.nikkeibp.co.jp/article/COLUMN/20080317/296389/?ST=webdesign&P=3 35

36.
デザインのルール 文字編余白出典) ウェブデザインのクオリティをアップする7つのポイント | コリスhttp://coliss.com/articles/build-websites/operation/design/quality-within-web-design.html 36

37.
デザインのルール 文字編行間出典) 第13回 Webページで読みやすいテキストとは - エンジニアのためのWebデザイン教室：ITprohttp://itpro.nikkeibp.co.jp/article/COLUMN/20080317/296389/?ST=webdesign&P=3 37

38.
デザインのルール 文字編1行の読みやすい文字数出典) 第13回 Webページで読みやすいテキストとは - エンジニアのためのWebデザイン教室：ITprohttp://itpro.nikkeibp.co.jp/article/COLUMN/20080317/296389/?ST=webdesign&P=2 38

39.
デザインのルール 文字編1行の読みやすい文字数 39

40.
デザインのルール 配色編 40

41.
デザインのルール 配色編色の三属性色を3つの属性で分解することにより客観的に色を捉えたり具体的に人に伝えることができます。 41

42.
デザインのルール 配色編色の三属性 色相 42

43.
デザインのルール 配色編色の三属性 明度 43

44.
デザインのルール 配色編色の三属性 彩度 44

45.
デザインのルール 配色編トーン明度 X彩度 45

46.
デザインのルール 配色編色彩調和 ヨハネス=イッテンの色彩調和論より補色配色dyads 46

47.
デザインのルール 配色編色彩調和 ヨハネス=イッテンの色彩調和論より分裂補色spritcomplementary 47

48.
デザインのルール 配色編色彩調和 ヨハネス=イッテンの色彩調和論より3色配色triads 48

49.
デザインのルール 配色編色彩調和 ヨハネス=イッテンの色彩調和論より4色配色tetrads 49

50.
デザインのルール 配色編全体のバランスは面積比で 50

51.
デザインのルール 配色編実際のサイトで面積比を検証 51

52.
デザインのルール 配色編実際のサイトで面積比を検証 52

53.
デザインのルール 配色編実際のサイトで面積比を検証 53

54.
デザインのルール 配色編実際のサイトで面積比を検証 54

55.
デザインのルール 配色編やってはいけないこと •何となく色を決める •あとから色を増やす •各ページで配色を変える 55

56.
情報を整理する 56

57.
サイトの目的を決めるターゲットユーザーは？強調すべき情報が見えてくる 57

58.
情報を整理するサイトマップ 58

59.
情報を整理するサイトマップの作成ページ数が多い場合は、EXELなどで一覧表を作成して全体像を把握する。 (EXELの表イメージ) 59

60.
情報を整理するワイヤーフレームサイトマップ作成時にできたカテゴリーはグローバルメニューの項目にもなる 60

61.
情報を整理する素材準備 • 原稿 • 写真 • イラスト • 図、グラフ • 映像 • 音 61

62.
ワークショップ実習 62

63.
ワークショップ実習お題「FOIC」のサイト • 改善点を考える • サイトマップ • ワイヤーフレーム 63

64.
ワークショップ実習改善すべき点を考える どこがわかりにくいのか？ 64

65.
ワークショップ実習サイトマップを考える グループ別に考えてみましょう 65

66.
ワークショップ実習ワイヤーフレームを考える 手書きでいいので書いてみましょう ・TOPページ ・詳細ページ 他 66

67.
ワークショップ実習完成例 ：サイトマップ 67

68.
ワークショップ実習完成例：ワイヤーフレーム(TOP) 68

69.
ワークショップ実習完成例：ワイヤーフレーム(第二階層以下) 69

70.
Webサイトならではのデザインの考え方 70

71.
webサイトならではのデザインの考え方ユーザーは斜め読みする 71

72.
webサイトならではのデザインの考え方情報を整理して読みやすく 72

73.
webサイトならではのデザインの考え方検索 73

74.
webサイトならではのデザインの考え方ブラウザ環境 2009年10月現在 クライアントのニーズによる チェックすべきバージョン iPhoneと同じ 1 2 3 4 (2010年後半) 1 2 3.5 4 6 7 8 9 10 (2010年後半) 4 5 5.5 6 7 8 9 4 5 forMAC forMAC 4 サポート開発終了 4 6 7 8 9出典) 第13回 Webページで読みやすいテキストとは - エンジニアのためのWebデザイン教室：ITprohttp://itpro.nikkeibp.co.jp/article/COLUMN/20080317/296389/?ST=webdesign&P=3 74

75.
webサイトならではのデザインの考え方ユーザビリティ 特定の利用状況において、特定のユーザーによって、ある製品が、指定された 「目標を達成するために用いられる際の、有効さ、効率、 ユーザの満足度の度合い」 有効さ 目標を達成する上での正確さと完全さ 効率 目標を達成する際に正確さと完全さに費やした資源 満足度 不快感のないこと、及び製品使用に対して肯定的な態度 ユーザー、仕事、装置（ハードウェア、ソフトウェア及び資 利用状況 源）、そして製品が使用される物理的及び社会的な環境出典) デジタルハリウッド Webデザイナー専攻 Web概論② 「Web標準とユーザビリティ」より 75

76.
webサイトならではのデザインの考え方ユーザビリティ ユーザビリティとはシステムとユーザーの関係を考慮し、 人間中心の考えに立って「どのようなものを作るか」 という基本構想の段階から、ユーザーにとって意味のある ものを使えるように提供することが大事である。 「効果」「効率」「満足度」 を共に実現するように設計することが重要 Webユーザビリティの権威 Jakob Nielsen（ヤコブ・ニールセン）博士の Alertbox 76

77.
webサイトならではのデザインの考え方ユーザビリティ 学習のしやすさ ユーザーがすぐ使い始められるよう、簡単に学習できる 77

78.
webサイトならではのデザインの考え方ユーザビリティ 効率性 一度学習すれば高い生産性が上げられるよう、 効率的に使用できる 78

79.
webサイトならではのデザインの考え方ユーザビリティ 記憶しやすさ ユーザーがしばらく使わなくても、 再度利用するときに覚え直す必要がない 79

80.
webサイトならではのデザインの考え方ユーザビリティ 低エラー発生率 エラー発生率が低い、エラー発生時に簡単に回復できる、 致命的エラーがない 80

81.
webサイトならではのデザインの考え方ユーザビリティ 主観的満足度 ユーザが個人的に満足できるよう、 また好きになるよう、楽しく利用できる 81

82.
webサイトならではのデザインの考え方アクセシビリティ 「Webコンテンツを利用するすべての人が、年齢や身体 的制約、利用環境等に関係なく、Ｗｅｂサイトで提供さ れている情報に問題なくアクセスし、コンテンツや機能 を利用できること」 日本国内の標準規格＝JIS X 8341-3 国際的なデファクトスタンダード＝WCAG1.0出典) デジタルハリウッド Webデザイナー専攻 Web概論② 「Web標準とユーザビリティ」より 82

83.
webサイトならではのデザインの考え方アクセシビリティ 高齢者 画面が見えづらい、音声が聞こえづらい、 マウスやキーボードが操作しづらい、 操作を忘れたり混乱しやすい 肢体不自由 マウスやキーボードを操作できない／操作しづらい 83

84.
webサイトならではのデザインの考え方アクセシビリティ 全盲 画面を見ることができない 弱視 画面が見えづらい、画面がぼやける、画面が まぶしい（または暗い）、視野が狭い 84

85.
webサイトならではのデザインの考え方アクセシビリティ 色覚障害 色の違いを区別しづらい 聴覚障害 音声が聞こえない．聞こえづらい 85

86.
webサイトならではのデザインの考え方SEO対策 • 検索エンジンは内部と外部を評価する • 内部要因を構成する４つの要素 • HTML+CSSの文法 • 文章量とページ数 • キーワード • 内部リンク • 外部要因を構成する3つの要素 • 被リンクの質／量／アンカーテキスト出典) デジタルハリウッド Webデザイナー専攻 Web概論② 「Web標準とユーザビリティ」より 86

87.
質問タイム 87

88.
まとめ• デザインはセンスだけはありません。 理論も必要です。• やってはいけないことを知るだけでも 及第点は取れます。• 日々、いろんな物を見て勉強しましょう。• お客様、利用ユーザーの目線を忘れずに。 88

89.
デザイン、厳しいな... と思ったら 餅は餅屋デザイナーさんに相談するのも手です。 89

90.
デザイナーと一緒に仕事をする際に心がける事 96

91.
デザイナーと一緒に仕事をする際に心がける事デザインには理由がある • 勝手にデザインを変更しない • 担当者の好みで決めない • 優先順位を考えて指示を • 細かい点の作成よりも全体を見渡しを 97

92.
デザイナーと一緒に仕事をする際に心がける事修正意図を伝える • デザイナーは意図を汲みとって全体に合わせて、 調整したり表現を考えます。 • ⃝「ここは注意喚起のために目立たせたい。」 • 「ここを赤文字で大きくして。」 98

93.
デザイナーと一緒に仕事をする際に心がける事デザイナーがプログラマーからデザイン依頼されて困る事 • 「見栄え良くしてくれたらいいから」 • 「（コンセプトもサイト構成も無しで） とにかくデザイン案を先に見せて」 • デザイナーをオペレーターと勘違い →対等な立場でないとデザインの提案ができない • 制作段階で簡単に仕様（サイト構成等）を変更 99

94.
デザイナーと一緒に仕事をする際に心がける事愛のある仕事を • お客さんのための「愛」 • 利用ユーザーのための「愛」 • デザイナーへの「愛」 100

95.
まとめのまとめ「デザインは『愛』です」 長時間、ありがとうございました。 101