...

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

by toshiaki-sasaki

on

Report

Category:

Design

Download: 0

Comment: 0

249,447

views

Comments

Description

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

Transcript

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