Webデザインのセオリーを学ぼう

445,577 views
473,107 views

Published on

2012年2月16日 福井工業高等専門学校で行いましたデザインセミナーでのスライドです。

Published in: Design, Technology, Business
9 Comments
673 Likes
Statistics
Notes
No Downloads
Views
Total views
445,577
On SlideShare
0
From Embeds
0
Number of Embeds
327,538
Actions
Shares
0
Downloads
1,585
Comments
9
Likes
673
Embeds 0
No embeds

No notes for slide

Webデザインのセオリーを学ぼう

  1. 1. Webデザインのセオリーを学ぼう 佐々木 敏明(Web Designer at BaseLine Inc.,) 2012.02.16 福井工業高等専門学校
  2. 2. Agenda - 本日の内容 -• デザインとは• Webデザインとは• デザインセオリーについて• まとめ※今日お話するのは私なりのまとめです。
  3. 3. Goal - 本日の目的 -• デザインセオリーを知る• デザインを考える力を身につける• 楽しみを知る※ デザインの手法だけの話ではなくて、考え方の話もします 表面だけのデザインは意味がない場合があります
  4. 4. Please - お願い -• 聴いて終わりではなく、手を動かす• 作る、そして考える• 考えて、また手を動かす
  5. 5. About Design
  6. 6. Designある問題を解決するために思考・概念の組み立てを行い、それを様々な媒体に応じて表現すること
  7. 7. • 人に伝えるため/ものをよく見せるための技術• 明確な目的、ターゲットがいて作り手側の意図を 伝えるために行うもの デザイン Design? Art? アート • 自己表現。人に伝わらなくてもよい • 明確なターゲットや目的はなく、 芸術的/美術的感覚によって造形されたもの via un-T BOOTCAMP
  8. 8. 広義のデザインコンセプトの具現化、人間の行為をより良いかたちにするための「設計」「計画」 戦略 制度 組織 プロセス via @nakagawan
  9. 9. 狭義のデザイン設計を行う際の形態、特に図案、模様、レイアウト等の計画造形行為とそのディレクション • グラフィックデザイン • 環境デザイン 視覚 • タイポグラフィ 空間 • インテリアデザイン • 映像・アニメーション • 建築デザイン • 情報デザイン • プロダクトデザイン • サイン計画 • ファッションデザイン 機能 その他 • インターフェースデザイン • テキスタイルデザイン • ゲームデザイン via @nakagawan
  10. 10. デザインするということ• 情報を整理し、わかりやすく伝えること• もの/サービスの価値を最大限に高めること 意識しながら デザインする
  11. 11. Design is not just what it looks likeand feels like.Design is how it works.デザインとは、単なる視覚や感覚のことではない。デザインとは、どうやって動くかだ。 Steve Jobs
  12. 12. About Web Design
  13. 13. Webデザインとは• Webという空間で活かされるデザイン表現• 「見る」「感じる」だけでなく、「使う」「コミュニケーションする」• Webサイト、Webアプリケーション、モバイルサイト、モバイルアプリケーション
  14. 14. 見るだけではない• 検索• インタラクション(相互作用)• 発信(ブログ、SNS)• コミュニケーション(ブログ、SNS)
  15. 15. コンテキスト(前後関係)を考える• どのようなユーザーがターゲットなのか• ターゲットに合わせた見せ方、プロモーション• 情報の配置、色、文字 など• ユーザーの背景を考えてデザインをする
  16. 16. Webデザインまとめ• Webという空間で活きる設計・見せ方• ターゲットとなるユーザーを考える• PCだけではなく、モバイルも意識する
  17. 17. Flow制 作 の 流 れ
  18. 18. Flow 制 作 の 流 れ要件定義 情報設計 デザイン コーディング
  19. 19. 要件定義 情報設計 デザイン コーディング• 作る目的を考える(ブランディング、商品販売、プロモーション etc...)• 目的に適した戦略デザイン
  20. 20. 要件定義 情報設計 デザイン コーディング• デザインの前に設計を行い、骨組みを作って全体をイメージする(ワイヤーフレーム)• クライアントワークの場合は、クライアントとの意識共有のために
  21. 21. 要件定義 情報設計 デザイン コーディング• Photoshop, Illustrator, Fireworks などを使い、 仕上がりイメージのデザインを行う• 画像を用意できればソフトは何でもよい• コーディングを効率的に行うことができる
  22. 22. 要件定義 情報設計 デザイン コーディング• DreamWeaver等でHTML,CSSのマークアップ• テキストエディタでよい(補完機能あると良い)• ブラウザで表示されるようにする
  23. 23. Design Theory
  24. 24. Design Theory デ ザイ ンセ オ リ ーデザインするうえで注意するポイントや 体系化されたルールなどのこと
  25. 25. Design Theory デ ザイ ンセ オ リ ー色 レイアウト フォント
  26. 26. レイアウト色 25%50% フォント 25%
  27. 27. 今日は 色 25%レイアウト50% フォント 25%
  28. 28. Layout レ イ ア ウ ト
  29. 29. Layout レ イ ア ウ ト• デザインの4つの基本原則• 情報設計• 視線の流れ• 黄金比、白銀比
  30. 30. Layout レ イ ア ウ ト• デザインの4つの基本原則• 情報設計• 視線の流れ• 黄金比、白銀比
  31. 31. デザインの4つの基本原則 1. 近 接 2. 整 列 3. 反 復 4. コントラストノンデザイナーズデザインブック Williams Robin著 Layout
  32. 32. デザインの4つの基本原則 1. 近 接 2. 整 列 3. 反 復 4. コントラストノンデザイナーズデザインブック Williams Robin著 Layout
  33. 33. 近接の原則関連する項目をまとめてグループ化する注)関連しない情報同士を近づけないページの構造と内容の直線的な手がかりをユーザーへ提供するもの Layout
  34. 34. 近接の例(メニュー)akiyoshi akiyoshishiro shiroaka akajunkei junkeinegi-ma negi-makushi-katsu kushi-katsuwaka wakahatsu hatsutan tansasami sasami Layout
  35. 35. 近接の例(メニュー)akiyoshi akiyoshishiro shiroaka akajunkei junkeinegi-ma negi-makushi-katsu kushi-katsuwaka waka おhatsu す hatsutan す tan めsasami sasami Layout
  36. 36. 近接の例(名刺)BaseLine Inc., 0776-26-1181 佐々木 敏明福井市中央2丁目00-0 TOSHIAKI SASAKI Layout
  37. 37. 近接の原則関連する項目をまとめてグループ化する注)関連しない情報同士を近づけないページの構造と内容の直線的な手がかりをユーザーへ提供するもの Layout
  38. 38. 近接の例(名刺)佐々木 敏明TOSHIAKI SASAKIBaseLine Inc.,〒910-0008 福井市中央2丁目00-0 HOGE BLD2FTEL 0776-26-1181 Layout
  39. 39. 近接の例(名刺)佐々木 敏明 個人情報グループTOSHIAKI SASAKI 間隔BaseLine Inc.,〒910-0008 福井市中央2丁目00-0 HOGE BLD2F 会社情報グループTEL 0776-26-1181 Layout
  40. 40. Layouthttp://www.microsoftstore.jp/Form/Product/ProductCategory.aspx?cat=100&WT.mc_id=windows_productpage_topmodule
  41. 41. Layouthttp://www.microsoftstore.jp/Form/Product/ProductCategory.aspx?cat=100&WT.mc_id=windows_productpage_topmodule
  42. 42. ?Layout
  43. 43. 近接のまとめ• 関連する項目のグループ化• 他のグループとの間に十分な隙間をあける• 視線の流れも意識する Layout
  44. 44. デザインの4つの基本原則 1. 近 接 2. 整 列 3. 反 復 4. コントラストノンデザイナーズデザインブック Williams Robin著 Layout
  45. 45. 整列の原則各要素を意図的に整列して配置する注)すべての項目が他の項目と視覚的に関連しなければならない Layout
  46. 46. 整列の例 0776-26-1181BaseLine Inc., 佐々木 敏明福井市中央2丁目00-0 TOSHIAKI SASAKI Layout
  47. 47. 整列の例 0776-26-1181 BaseLine Inc., 佐々木 敏明 福井市中央2丁目00-0 TOSHIAKI SASAKIそれぞれの要素が独立したルールで配置されていてまとまりがない Layout
  48. 48. 整列の例 BaseLine Inc., 0776-26-1181 佐々木 敏明 福井市中央2丁目00-0 TOSHIAKI SASAKI他の要素と視覚的に関連させて配置させたほうがまとまりが良い印象を与える Layout
  49. 49. 整列の例 佐々木 敏明 TOSHIAKI SASAKI BaseLine Inc., 〒910-0008 福井市中央2丁目00-0 HOGE BLD2F TEL 0776-26-1181見えない「線」を意識する Layout
  50. 50. 整列の例佐々木 敏明TOSHIAKI SASAKI BaseLine Inc., 〒910-0008 福井市中央2丁目00-0 HOGE BLD2F TEL 0776-26-1181 こういうのもアリ :-) Layout
  51. 51. 整列の例佐々木 敏明TOSHIAKI SASAKI BaseLine Inc., 〒910-0008 福井市中央2丁目00-0 HOGE BLD2F TEL 0776-26-1181 Layout
  52. 52. 整列の例佐々木 敏明TOSHIAKI SASAKI BaseLine Inc., 〒910-0008 福井市中央2丁目00-0 HOGE BLD2F TEL 0776-26-1181 これはナシ :-( Layout
  53. 53. http://www.solala.co.jp/ Layout
  54. 54. 整列のまとめ• 要素の視覚的なつながりを意識して配置する• 出来上がりを見たときに統一感があるか• あえてルールを破ることで目立つ場合もある Layout
  55. 55. デザインの4つの基本原則 1. 近 接 2. 整 列 3. 反 復 4. コントラストノンデザイナーズデザインブック Williams Robin著 Layout
  56. 56. 反復の原則デザイン上のなにかの特徴を作品全体を通して繰り返すこと (一貫性を持たせる) Layout
  57. 57. 反復の原則これらも反復の法則に則って配置してます Layout
  58. 58. http://www.ntmed.co.jp/ Layout
  59. 59. メニューボタンを反復 Layout
  60. 60. 事業内容(リンク)を反復 Layout
  61. 61. トピックステキストの反復 Layout
  62. 62. Layout
  63. 63. サイト全体で見出しの反復 Layout
  64. 64. 反復のまとめ• 特徴的ななにかを反復して使う• 全体に統一感、一貫性を作る• くどくならないような注意も必要 Layout
  65. 65. デザインの4つの基本原則 1. 近 接 2. 整 列 3. 反 復 4. コントラストノンデザイナーズデザインブック Williams Robin著 Layout
  66. 66. コントラストの原則異なる要素をはっきりと違わせること注)レイアウトだけに限らず、フォントの大きさ、色にも関わってくる Layout
  67. 67. コントラストの例福井高専のスクールライフ学科紹介福井高専の大きな魅力の1つは、その充実した工学教育にあります。ここでは全5学科及び工学基礎コースを紹介します。また、専門科目以外の授業や行事などについても紹介します。福井高専のラジオ番組毎週日曜午前11時∼12時。たんなんFM79.1MHzにてお届けしています「高専ライブ」!福井高専の得意とする「ものづくり」についてもっと知ってもらおうと、いろんな人に登場してもらうラジオ番組です! Layout
  68. 68. コントラストの例福井高専のスクールライフ 近接や整列の原則に則ってるが学科紹介 コントラストが弱いので福井高専の大きな魅力の1つは、その充実した工学教育にあります。ここでは全5学科及び工学基 少し読みにくい礎コースを紹介します。また、専門科目以外の授業や行事などについても紹介します。福井高専のラジオ番組毎週日曜午前11時∼12時。たんなんFM79.1MHzにてお届けしています「高専ライブ」!福井高専の得意とする「ものづくり」についてもっと知ってもらおうと、いろんな人に登場してもらうラジオ番組です! Layout
  69. 69. コントラストの例福井高専のスクールライフ タイトル、見出し、本文という学科紹介 レベルを区別して文字の大きさ福井高専の大きな魅力の1つは、その充実した工学教育 (コントラスト)を使い分けるにあります。ここでは全5学科及び工学基礎コースを紹介します。また、専門科目以外の授業や行事などについても紹介します。 1ptや1pxのコントラストでは 違いがわからない福井高専のラジオ番組毎週日曜午前11時∼12時。たんなんFM 79.1MHzにてお 臆病にならず、大胆に!届けしています「高専ライブ」!福井高専の得意とする「ものづくり」についてもっと知ってもらおうと、いろんな人に登場してもらうラジオ番組です! Layout
  70. 70. コントラストの例福井高専のスクールライフ小塚ゴシック EL 64pt福井高専のスクールライフ小塚ゴシック H 64pt 文字の大きさだけではなく、太さでもコントラストを表現できる Layout
  71. 71. コントラストの例福井高専のスクールライフK 30%福井高専のスクールライフK 0% 色の濃淡でもコントラストを表現 Layout
  72. 72. コントラストのまとめ• 異なる要素をはっきりと違わせること• 僅かな違いでは気づかない。大胆に!• どの要素をコントラストを強くするかは情報のレベルを考えることが大事• 目立たせるにはコントラストを意識すること Layout
  73. 73. デザインの4つの基本原則 近接 整列 反復 コントラスト 感覚で要素を配置するのではなく、4つの基本原則を意識してレイアウトすることで、まとまりや見やすさを作りだすことができる Layout
  74. 74. Layout レ イ ア ウ ト• デザインの4つの基本原則• 情報設計• 視線の流れ• 黄金比、白銀比
  75. 75. 情報設計• デザインとは機能するもの• 情報をわかりやすく配置する• 情報に優先度をつける• 要素を配置する場所のセオリーを知る(ユーザーを混乱させないため) Layout
  76. 76. http://www.nttdocomo.co.jp/ http://http://mb.softbank.jp/mb/customer.html/ Layout
  77. 77. http://store.apple.com/jp Layout http://lotte-shop.jp/shop/default.aspx
  78. 78. Layout レ イ ア ウ ト• デザインの4つの基本原則• 情報設計• 視線の流れ• 黄金比、白銀比
  79. 79. 視線の流れ• モノを見るとき、視線の流れにルールがある• 流れに則って見せたい情報を配置することでよりわかりやすく情報を伝えられる Layout
  80. 80. 視線の流れ( Z 軸)START 休憩(強) START 休憩(強)休憩(弱) GOAL 休憩(弱) GOAL Layout via un-T BOOTCAMP
  81. 81. 視線の流れ( F 軸・E 軸)START 休憩(強) START 休憩(強) GOAL GOAL Layout via un-T BOOTCAMP
  82. 82. Layout レ イ ア ウ ト• デザインの4つの基本原則• 情報設計• 視線の流れ• 黄金比、白銀比
  83. 83. 黄金比 1 : 1.618 名刺、カード、写真等 Layout
  84. 84. 白銀比 1 : 1.414 日本建築や彫刻、用紙のサイズ Layout
  85. 85. Color 色
  86. 86. 色は印象 を与える Color
  87. 87. 色の3属性• 色相• 明度• 彩度 Color
  88. 88. 色相赤・青・緑・黄...など「色み」のこと Color
  89. 89. 彩度彩度が高い 彩度が低い 色の「鮮やかさ」 Color
  90. 90. 明度彩度が高い 彩度が低い 色の「明るさ」 Color
  91. 91. 光の3原色• 光を加える形で色を合成• Red, Green, Blueの 組み合わせで色を表現• ほぼすべての色を表現 Color
  92. 92. 使う色を決める Color
  93. 93. 3つの色をベースにする アクセントカラー 5%ベースカラー 70% メインカラー 25% Color
  94. 94. メインカラー• デザインのキーとなる色• Webサイトの場合、ロゴマークから取ってくる• ターゲットユーザーによって決めるパターンも Color
  95. 95. ベースカラー• 背景など、広い面積に使う色• 薄い色が扱いやすい• 色で印象づけたいなら濃い色を使う Color
  96. 96. アクセントカラー• アクセントを出す色• リンクテキストやボタンに使うことでクリックされやすくする• メインカラーの反対色など Color
  97. 97. 色の選び方 反対色(補色)差し色 差し色 近似色 近似色 基準色 Color
  98. 98. 色から受ける印象情熱、勢い、危険 さびしい、静かな、固い暖かい、ほがらか、楽しい 高貴な、粋、冷静元気、奇抜、注意 女性的、ミステリアス、優雅自然、爽やか、春 どんより、公平、憂鬱安らぎ、深い、落ち着いた 真夜中、厳粛、シック清潔感、涼しい、透明感 冬、清潔、神聖 Color via un-T BOOTCAMP
  99. 99. トーン 明度・彩度の 調整により色の明 調子を表した度 もの 彩度 Color via un-T BOOTCAMP
  100. 100. 意味(理由)のある色使いを「購入意欲を高めるために赤色のボタンを配置」や「ターゲットユーザーが若者なのでビビッドな色使い」など、意味のある色使いを意識する Color
  101. 101. http://colorschemedesigner.com/ Color
  102. 102. Fontフォ ン ト
  103. 103. 書体選びの重要性• 色々な種類の書体がある• 色と同じく、書体も人に印象を与る• コピーに合う書体を選択する YES!! ff  pop Font
  104. 104. 書体選びの重要性• 色々な種類の書体がある• 色と同じく、書体も人に印象を与る• コピーに合う書体を選択する YES!! coffee time pop Font
  105. 105. 文字の種類 セリフ体/明朝体 サンセリフ体/ゴシック体Typeface Typeface書体見本 書体見本 Font
  106. 106. フォントファミリーHelvetica lightHelvetica regularHelvetica boldHelvetica italicHelvetica italic bold Font
  107. 107. コントラストの例福井高専のスクールライフ小塚ゴシック EL 64pt福井高専のスクールライフ小塚ゴシック H 64pt 文字の大きさだけではなく、太さでもコントラストを表現できる Layout
  108. 108. ジャンプ率• 一番大きい要素と小さい要素の差• ジャンプ率が大きいと「活発・若者」という印象• 小さいと「高級・大人っぽい」という印象 Font
  109. 109. http://www2.gwc.gakushuin.ac.jp/ Font
  110. 110. http://www.charleselena.com.au/ Font
  111. 111. http://www2.panasonic.biz/es/lighting/feu/ Font
  112. 112. 文字詰め、行間にも注意する•も じ の 間 を ゆ っ た り と• 文字感覚を詰めることで緊張感が文字の感覚だけでなく、行 行の間隔が狭いと読みにくの感覚が狭いことによって雰囲気を演出することがで いので、じゅうぶんな間隔きる。 をとって、情報を伝えやす雰囲気だけの問題ではなく「見やすさ」「わかりやす くすることをしっかりと考さ」にも影響を与えるので見た目で判断をする。 慮しましょう。 Font
  113. 113. 文字の間隔を細かく調整コントラストを意識 Font
  114. 114. 文字の間隔を細かく調整コントラストを意識 Font
  115. 115. 文字の間隔を細かく調整コントラストを意識 Font
  116. 116. フォントのまとめ• 書体のもつ雰囲気を理解し、コピーにふさわしい書体を選択する• 文字の大きさ、コントラスト、ジャンプ率、文字間、行間で雰囲気を演出する• ターゲットによって文字の大きさを考える Font
  117. 117. Design Theory デ ザイ ンセ オ リ ー 色 レイアウト フォントセオリーを理解し、情報をわかりやすく伝えよう
  118. 118. Endinf
  119. 119. セオリーを知る• デザインセオリーは今も昔も変わらない• その時代のトレンドも知る → 次のセオリー• アンテナを広く(SNS, RSS, コミュニケーション)
  120. 120. センスを磨く• いろいろな経験をする• 同じカリキュラムでも、出来上がるモノは違う• センスとは経験によって生まれるもの• 見る、使う、感じる、コミュニケーション
  121. 121. 説明できるものづくり• 色やフォントなど、なぜそれを選んだかを説明出来るようにする• セオリーで説明することができる• クリエーターにもプレゼンテーション能力は必要
  122. 122. 手を動かす• 何も思い浮かばなくても、とりあえずは動く• セオリーに沿ってレイアウトや色を決めていけば形にはなる• 次に考えて、それをブラッシュアップさせる
  123. 123. クリエーターに求められるスキルInformation Architects,User Experience Design,Programming, Marketing,Presentation, Manegement,Communication, etc...
  124. 124. デザインを楽しむ• 考えることは多いけど、デザインは楽しい• 楽しくないなら他の人にお願いしてもよい• 楽しむことが、いいものづくりにつながる
  125. 125. Thank you
  126. 126. authorToshiaki SasakiWeb Designer at BaseLine Inc.,http://nicebaseline.com/twitter : @shirokuro331facebook : https://www.facebook.com/shirokuro331
  127. 127. respect!!un-T BOOTCAMPrefarenceノンデザイナーズ・デザインブックhttp://book.mycom.co.jp/book/978-4-8399-2840-7/978-4-8399-2840-7.shtml色彩センスのいらない配色講座http://www.slideshare.net/marippe/ss-9003317photo creditLuc Viatourhttp://www.lucnix.be/main.php

×