Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (17)
Similar to Web design
Similar to Web design (20)
More from kazuko kaneuchi
Web design
- 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
- 10. やってはいけないことを 種類分けしてみました • 情報デザインの欠如 • ユーザビリティーの欠如 • 適切でない技術の使用 • 会社の体制 ←この講義では取り扱いません 10
- 11. 情報デザインの欠如 • 情報が多すぎで探している情報にたどり着けない • 商品一覧などの一覧ページがない • サイトを見ても何を伝えたいかがわからない • 商品の詳細情報がない • 会社案内の地図がわかりにくい • サイトメニューが英語で書いてある 11
- 12. ユーザビリティの欠如 • リンク先がPDFファイル • 問い合わせ先が明記してない • 目に優しくない背景色（黄色、赤色など） • 全体的に文字が小さい 12
- 13. 適切でない技術の使用 • 画像が多くて重い • ポップアップがどんどん開く • 突然音が鳴る • ブラウザのサイズを勝手に変えられる • 右クリック禁止 13
- 14. 会社の体制（ちょっとだけ） • 情報が数カ月更新されていない • 「準備中」のコンテンツだらけ • 公式ブログがスタッフの内輪ネタばかり • 担当者に権限が無い 14
- 15. 誰に何を 誰のためのサイト？ 伝えたいの？ なぜこんなことが 起きるのか？ サイトの目的が 定まってないのに サイト制作を行うから 15
- 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
- 33. これだけは守りたい デザインのルール 33
- 34. デザインのルール 文字編 34
- 35. デザインのルール 文字編 ジャンプ率 出典) 第13回 Webページで読みやすいテキストとは - エンジニアのためのWebデザイン教室：ITpro http://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デザイン教室：ITpro http://itpro.nikkeibp.co.jp/article/COLUMN/20080317/296389/?ST=webdesign&P=3 37
- 38. デザインのルール 文字編 1行の読みやすい文字数 出典) 第13回 Webページで読みやすいテキストとは - エンジニアのためのWebデザイン教室：ITpro http://itpro.nikkeibp.co.jp/article/COLUMN/20080317/296389/?ST=webdesign&P=2 38
- 39. デザインのルール 文字編 1行の読みやすい文字数 39
- 40. デザインのルール 配色編 40
- 42. デザインのルール 配色編 色の三属性 色相 42
- 43. デザインのルール 配色編 色の三属性 明度 43
- 44. デザインのルール 配色編 色の三属性 彩度 44
- 45. デザインのルール 配色編 トーン 明度 X 彩度 45
- 46. デザインのルール 配色編 色彩調和 ヨハネス=イッテンの色彩調和論より 補色配色 dyads 46
- 47. デザインのルール 配色編 色彩調和 ヨハネス=イッテンの色彩調和論より 分裂補色 sprit complementary 47
- 48. デザインのルール 配色編 色彩調和 ヨハネス=イッテンの色彩調和論より 3色配色 triads 48
- 49. デザインのルール 配色編 色彩調和 ヨハネス=イッテンの色彩調和論より 4色配色 tetrads 49
- 50. デザインのルール 配色編 全体のバランスは面積比で 50
- 51. デザインのルール 配色編 実際のサイトで面積比を検証 51
- 52. デザインのルール 配色編 実際のサイトで面積比を検証 52
- 53. デザインのルール 配色編 実際のサイトで面積比を検証 53
- 54. デザインのルール 配色編 実際のサイトで面積比を検証 54
- 55. デザインのルール 配色編 やってはいけないこと •何となく色を決める •あとから色を増やす •各ページで配色を変える 55
- 56. 情報を整理する 56
- 58. 情報を整理する サイトマップ 58
- 59. 情報を整理する サイトマップの作成 ページ数が多い場合は、EXELなどで一覧表を作成して 全体像を把握する。 (EXELの表イメージ) 59
- 61. 情報を整理する 素材準備 • 原稿 • 写真 • イラスト • 図、グラフ • 映像 • 音 61
- 62. ワークショップ実習 62
- 63. ワークショップ実習 お題「FOIC」のサイト • 改善点を考える • サイトマップ • ワイヤーフレーム 63
- 66. ワークショップ実習 ワイヤーフレームを考える 手書きでいいので書いてみましょう ・TOPページ ・詳細ページ 他 66
- 67. ワークショップ実習 完成例 ：サイトマップ 67
- 68. ワークショップ実習 完成例：ワイヤーフレーム(TOP) 68
- 70. Webサイトならでは のデザインの考え方 70
- 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デザイン教室：ITpro http://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