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

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つの基本原則• 情報設計• 視線の流れ• 黄金比、白銀比

31. デザインの4つの基本原則 1. 近接 2. 整列 3. 反復 4. コントラストノンデザイナーズデザインブック Williams Robin著 Layout

33. 近接の原則関連する項目をまとめてグループ化する注）関連しない情報同士を近づけないページの構造と内容の直線的な手がかりをユーザーへ提供するもの Layout

34. 近接の例（メニュー）akiyoshi akiyoshishiro shiroaka akajunkei junkeinegi-ma negi-makushi-katsu kushi-katsuwaka wakahatsu hatsutan tansasami sasami Layout

35. 近接の例（メニュー）akiyoshi akiyoshishiro shiroaka akajunkei junkeinegi-ma negi-makushi-katsu kushi-katsuwaka waka おhatsu す hatsutan す tan めsasami sasami Layout

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-1181 Layout

39. 近接の例（名刺）佐々木敏明個人情報グループTOSHIAKI SASAKI 間隔BaseLine Inc.,〒910-0008 福井市中央2丁目00-0 HOGE BLD2F 会社情報グループTEL 0776-26-1181 Layout

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

45. 整列の原則各要素を意図的に整列して配置する注）すべての項目が他の項目と視覚的に関連しなければならない Layout

46. 整列の例 0776-26-1181BaseLine Inc., 佐々木敏明福井市中央2丁目00-0 TOSHIAKI SASAKI Layout

47. 整列の例 0776-26-1181 BaseLine Inc., 佐々木敏明福井市中央2丁目00-0 TOSHIAKI SASAKIそれぞれの要素が独立したルールで配置されていてまとまりがない Layout

48. 整列の例 BaseLine Inc., 0776-26-1181 佐々木敏明福井市中央2丁目00-0 TOSHIAKI SASAKI他の要素と視覚的に関連させて配置させたほうがまとまりが良い印象を与える Layout

49. 整列の例佐々木敏明 TOSHIAKI SASAKI BaseLine Inc., 〒910-0008 福井市中央2丁目00-0 HOGE BLD2F TEL 0776-26-1181見えない「線」を意識する Layout

50. 整列の例佐々木敏明TOSHIAKI SASAKI BaseLine Inc., 〒910-0008 福井市中央2丁目00-0 HOGE BLD2F TEL 0776-26-1181 こういうのもアリ :-) Layout

51. 整列の例佐々木敏明TOSHIAKI SASAKI BaseLine Inc., 〒910-0008 福井市中央2丁目00-0 HOGE BLD2F TEL 0776-26-1181 Layout

52. 整列の例佐々木敏明TOSHIAKI SASAKI BaseLine Inc., 〒910-0008 福井市中央2丁目00-0 HOGE BLD2F TEL 0776-26-1181 これはナシ :-( Layout

53. http://www.solala.co.jp/ Layout

54. 整列のまとめ• 要素の視覚的なつながりを意識して配置する• 出来上がりを見たときに統一感があるか• あえてルールを破ることで目立つ場合もある Layout

56. 反復の原則デザイン上のなにかの特徴を作品全体を通して繰り返すこと（一貫性を持たせる） Layout

57. 反復の原則これらも反復の法則に則って配置してます Layout

58. http://www.ntmed.co.jp/ Layout

59. メニューボタンを反復 Layout

60. 事業内容（リンク）を反復 Layout

61. トピックステキストの反復 Layout

62. Layout

63. サイト全体で見出しの反復 Layout

64. 反復のまとめ• 特徴的ななにかを反復して使う• 全体に統一感、一貫性を作る• くどくならないような注意も必要 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

75. 情報設計• デザインとは機能するもの• 情報をわかりやすく配置する• 情報に優先度をつける• 要素を配置する場所のセオリーを知る（ユーザーを混乱させないため） Layout

76. http://www.nttdocomo.co.jp/ http://http://mb.softbank.jp/mb/customer.html/ Layout

77. http://store.apple.com/jp Layout http://lotte-shop.jp/shop/default.aspx

79. 視線の流れ• モノを見るとき、視線の流れにルールがある• 流れに則って見せたい情報を配置することでよりわかりやすく情報を伝えられる Layout

80. 視線の流れ（ Z 軸）START 休憩（強） START 休憩（強）休憩（弱） GOAL 休憩（弱） GOAL Layout via un-T BOOTCAMP

81. 視線の流れ（ F 軸・E 軸）START 休憩（強） START 休憩（強） GOAL GOAL Layout via un-T BOOTCAMP

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. 色から受ける印象情熱、勢い、危険さびしい、静かな、固い暖かい、ほがらか、楽しい高貴な、粋、冷静元気、奇抜、注意女性的、ミステリアス、優雅自然、爽やか、春どんより、公平、憂鬱安らぎ、深い、落ち着いた真夜中、厳粛、シック清潔感、涼しい、透明感冬、清潔、神聖 Color via un-T BOOTCAMP

99. トーン明度・彩度の調整により色の明調子を表した度もの彩度 Color via un-T BOOTCAMP

100. 意味（理由）のある色使いを「購入意欲を高めるために赤色のボタンを配置」や「ターゲットユーザーが若者なのでビビッドな色使い」など、意味のある色使いを意識する Color

101. http://colorschemedesigner.com/ Color

102. Fontフォント

103. 書体選びの重要性• 色々な種類の書体がある• 色と同じく、書体も人に印象を与る• コピーに合う書体を選択する YES!! ﬀ  pop Font

104. 書体選びの重要性• 色々な種類の書体がある• 色と同じく、書体も人に印象を与る• コピーに合う書体を選択する YES!! coffee time pop Font

105. 文字の種類セリフ体/明朝体サンセリフ体/ゴシック体Typeface Typeface書体見本書体見本 Font

106. フォントファミリーHelvetica lightHelvetica regularHelvetica boldHelvetica italicHelvetica italic bold Font

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

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

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

Toshiaki Sasaki

Views

Actions

Embeds 0

Report content

Transcript