More Related Content
What's hot (20)
Viewers also liked (20)
Similar to Webデザインのセオリーを学ぼう (20)
![広研塾（山村）[1]](https://cdn.slidesharecdn.com/ss_thumbnails/1-111019031442-phpapp01-thumbnail.jpg?width=560&fit=bounds)
More from Toshiaki Sasaki (7)
Webデザインのセオリーを学ぼう
- 1. Webデザインのセオリーを学ぼう 佐々木 敏明（Web Designer at BaseLine Inc.,） 2012.02.16 福井工業高等専門学校
- 2. Agenda - 本日の内容 - • デザインとは • Webデザインとは • デザインセオリーについて • まとめ ※今日お話するのは私なりのまとめです。
- 3. Goal - 本日の目的 - • デザインセオリーを知る • デザインを考える力を身につける • 楽しみを知る ※ デザインの手法だけの話ではなくて、考え方の話もします 表面だけのデザインは意味がない場合があります
- 4. Please - お願い - • 聴いて終わりではなく、手を動かす • 作る、そして考える • 考えて、また手を動かす
- 5. About Design
- 7. • 人に伝えるため/ものをよく見せるための技術 • 明確な目的、ターゲットがいて作り手側の意図を 伝えるために行うもの デザイン Design? Art? アート • 自己表現。人に伝わらなくてもよい • 明確なターゲットや目的はなく、 芸術的/美術的感覚によって造形されたもの via un-T BOOTCAMP
- 8. 広義のデザイン コンセプトの具現化、人間の行為をより良いかたちにするための 「設計」「計画」 戦略 制度 組織 プロセス via @nakagawan
- 9. 狭義のデザイン 設計を行う際の形態、特に図案、模様、レイアウト等の計画 造形行為とそのディレクション • グラフィックデザイン • 環境デザイン 視覚 • タイポグラフィ 空間 • インテリアデザイン • 映像・アニメーション • 建築デザイン • 情報デザイン • プロダクトデザイン • サイン計画 • ファッションデザイン 機能 その他 • インターフェースデザイン • テキスタイルデザイン • ゲームデザイン via @nakagawan
- 10. デザインするということ • 情報を整理し、わかりやすく伝えること • もの/サービスの価値を最大限に高めること 意識しながら デザインする
- 11. Design is not just what it looks like and 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
- 34. 近接の例（メニュー） akiyoshi akiyoshi shiro shiro aka aka junkei junkei negi-ma negi-ma kushi-katsu kushi-katsu waka waka hatsu hatsu tan tan sasami sasami Layout
- 35. 近接の例（メニュー） akiyoshi akiyoshi shiro shiro aka aka junkei junkei negi-ma negi-ma kushi-katsu kushi-katsu waka waka お hatsu す hatsu tan す tan め sasami sasami Layout
- 36. 近接の例（名刺） BaseLine Inc., 0776-26-1181 佐々木 敏明 福井市中央2丁目00-0 TOSHIAKI SASAKI Layout
- 38. 近接の例（名刺） 佐々木 敏明 TOSHIAKI SASAKI BaseLine Inc., 〒910-0008 福井市中央2丁目00-0 HOGE BLD2F TEL 0776-26-1181 Layout
- 39. 近接の例（名刺） 佐々木 敏明 個人情報グループ TOSHIAKI SASAKI 間隔 BaseLine Inc., 〒910-0008 福井市中央2丁目00-0 HOGE BLD2F 会社情報グループ TEL 0776-26-1181 Layout
- 42. ? Layout
- 43. 近接のまとめ • 関連する項目のグループ化 • 他のグループとの間に十分な隙間をあける • 視線の流れも意識する Layout
- 44. デザインの4つの基本原則 1. 近 接 2. 整 列 3. 反 復 4. コントラスト ノンデザイナーズデザインブック Williams Robin著 Layout
- 46. 整列の例 0776-26-1181 BaseLine 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
- 55. デザインの4つの基本原則 1. 近 接 2. 整 列 3. 反 復 4. コントラスト ノンデザイナーズデザインブック Williams Robin著 Layout
- 57. 反復の原則 これらも反復の法則に 則って配置してます Layout
- 58. http://www.ntmed.co.jp/ Layout
- 59. メニューボタンを反復 Layout
- 60. 事業内容（リンク）を反復 Layout
- 61. トピックステキストの反復 Layout
- 62. Layout
- 64. 反復のまとめ • 特徴的ななにかを反復して使う • 全体に統一感、一貫性を作る • くどくならないような注意も必要 Layout
- 65. デザインの4つの基本原則 1. 近 接 2. 整 列 3. 反 復 4. コントラスト ノンデザイナーズデザインブック Williams Robin著 Layout
- 68. コントラストの例 福井高専のスクールライフ 近接や整列の原則に則ってるが 学科紹介 コントラストが弱いので 福井高専の大きな魅力の1つは、その充実した工 学教育にあります。ここでは全5学科及び工学基 少し読みにくい 礎コースを紹介します。また、専門科目以外の 授業や行事などについても紹介します。 福井高専のラジオ番組 毎週日曜午前11時∼12時。たんなんFM 79.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/jp Layout http://lotte-shop.jp/shop/default.aspx
- 78. Layout レ イ ア ウ ト • デザインの4つの基本原則 • 情報設計 • 視線の流れ • 黄金比、白銀比
- 80. 視線の流れ（ Z 軸） START 休憩（強） START 休憩（強） 休憩（弱） GOAL 休憩（弱） GOAL Layout via un-T BOOTCAMP
- 81. 視線の流れ（ F 軸・E 軸） START 休憩（強） START 休憩（強） GOAL GOAL Layout via un-T BOOTCAMP
- 82. Layout レ イ ア ウ ト • デザインの4つの基本原則 • 情報設計 • 視線の流れ • 黄金比、白銀比
- 83. 黄金比 1 : 1.618 名刺、カード、写真等 Layout
- 84. 白銀比 1 : 1.414 日本建築や彫刻、用紙のサイズ Layout
- 85. 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
- 101. http://colorschemedesigner.com/ Color
- 102. Font フォ ン ト
- 103. 書体選びの重要性 • 色々な種類の書体がある • 色と同じく、書体も人に印象を与る • コピーに合う書体を選択する YES!! ff pop Font
- 104. 書体選びの重要性 • 色々な種類の書体がある • 色と同じく、書体も人に印象を与る • コピーに合う書体を選択する YES!! coffee time pop Font
- 105. 文字の種類 セリフ体/明朝体 サンセリフ体/ゴシック体 Typeface Typeface 書体見本 書体見本 Font
- 106. フォントファミリー Helvetica light Helvetica regular Helvetica bold Helvetica italic Helvetica 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
- 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. author Toshiaki Sasaki Web Designer at BaseLine Inc., http://nicebaseline.com/ twitter : @shirokuro331 facebook : https://www.facebook.com/shirokuro331