Download as PDF, PPTX
![自己紹介1
名前：金内 透 [@Garyuten]
役職：コンテンツプロデューサー
＋マークアップエンジニア
blog：我流天性 がらくた屋
http://blog.cgfm.jp/garyu
所属コミュニティ
サト研、FWW、RBC、etc
4](https://image.slidesharecdn.com/webdesignaip20100320-100605021746-phpapp01/75/Web-design-4-2048.jpg)
![自己紹介2
名前：金内 和子 [@mutsuking]
役職：webデザイナー
blog：Mutsulog
http://blog.cgfm.jp/mutsuki
所属コミュニティ
サト研、FWW、RBC、etc
5](https://image.slidesharecdn.com/webdesignaip20100320-100605021746-phpapp01/75/Web-design-5-2048.jpg)
More Related Content
Web design
- 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.
- 7.
- 8.
- 9.
- 10. やってはいけないことを 種類分けしてみました • 情報デザインの欠如 • ユーザビリティーの欠如 •適切でない技術の使用 • 会社の体制 ←この講義では取り扱いません 10
- 11. 情報デザインの欠如 • 情報が多すぎで探している情報にたどり着けない • 商品一覧などの一覧ページがない • サイトを見ても何を伝えたいかがわからない • 商品の詳細情報がない • 会社案内の地図がわかりにくい • サイトメニューが英語で書いてある 11
- 12. ユーザビリティの欠如 • リンク先がPDFファイル • 問い合わせ先が明記してない • 目に優しくない背景色（黄色、赤色など） • 全体的に文字が小さい 12
- 13. 適切でない技術の使用 • 画像が多くて重い • ポップアップがどんどん開く • 突然音が鳴る • ブラウザのサイズを勝手に変えられる • 右クリック禁止 13
- 14. 会社の体制（ちょっとだけ） • 情報が数カ月更新されていない • 「準備中」のコンテンツだらけ • 公式ブログがスタッフの内輪ネタばかり • 担当者に権限が無い 14
- 15. 誰に何を 誰のためのサイト？ 伝えたいの？ なぜこんなことが 起きるのか？ サイトの目的が 定まってないのに サイト制作を行うから 15
- 16.
- 17.
- 18.
- 19. Webサイト制作の流れ 全体の流れ コンセプトワーク グラフィックデザイン サイト構成 HTMLコーディング ワイヤーフレーム 公開（運用/検証) 19
- 20.
- 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.
- 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.
- 40. デザインのルール 配色編 40
- 41.
- 42. デザインのルール 配色編 色の三属性 色相 42
- 43. デザインのルール 配色編 色の三属性 明度 43
- 44. デザインのルール 配色編 色の三属性 彩度 44
- 45.
- 46. デザインのルール 配色編 色彩調和 ヨハネス=イッテンの色彩調和論より 補色配色 dyads 46
- 47. デザインのルール 配色編 色彩調和 ヨハネス=イッテンの色彩調和論より 分裂補色 sprit complementary 47
- 48. デザインのルール 配色編 色彩調和 ヨハネス=イッテンの色彩調和論より 3色配色 triads 48
- 49. デザインのルール 配色編 色彩調和 ヨハネス=イッテンの色彩調和論より 4色配色 tetrads 49
- 50.
- 51.
- 52.
- 53.
- 54.
- 55. デザインのルール 配色編 やってはいけないこと •何となく色を決める •あとから色を増やす •各ページで配色を変える 55
- 56. 情報を整理する 56
- 57.
- 58.
- 59. 情報を整理する サイトマップの作成 ページ数が多い場合は、EXELなどで一覧表を作成して 全体像を把握する。 (EXELの表イメージ) 59
- 60.
- 61. 情報を整理する 素材準備 • 原稿 • 写真 • イラスト • 図、グラフ • 映像 • 音 61
- 62. ワークショップ実習 62
- 63. ワークショップ実習 お題「FOIC」のサイト • 改善点を考える • サイトマップ • ワイヤーフレーム 63
- 64.
- 65.
- 66. ワークショップ実習 ワイヤーフレームを考える 手書きでいいので書いてみましょう ・TOPページ ・詳細ページ 他 66
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 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.
- 91. デザイナーと一緒に仕事をする際に心がける事 デザインには理由がある • 勝手にデザインを変更しない • 担当者の好みで決めない • 優先順位を考えて指示を • 細かい点の作成よりも全体を見渡しを 97
- 92. デザイナーと一緒に仕事をする際に心がける事 修正意図を伝える • デザイナーは意図を汲みとって全体に合わせて、 調整したり表現を考えます。 • ⃝「ここは注意喚起のために目立たせたい。」 • 「ここを赤文字で大きくして。」 98
- 93. デザイナーと一緒に仕事をする際に心がける事 デザイナーがプログラマーから デザイン依頼されて困る事 • 「見栄え良くしてくれたらいいから」 • 「（コンセプトもサイト構成も無しで） とにかくデザイン案を先に見せて」 • デザイナーをオペレーターと勘違い →対等な立場でないとデザインの提案ができない • 制作段階で簡単に仕様（サイト構成等）を変更 99
- 94. デザイナーと一緒に仕事をする際に心がける事 愛のある仕事を • お客さんのための「愛」 • 利用ユーザーのための「愛」 • デザイナーへの「愛」 100
- 95.