奥别产デザインのセオリーを学ぼう
- 1. 奥别产デザインのセオリーを学ぼう 佐々木 敏明（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という空間で活きる設計?見せ方 ? ターゲットとなるユーザーを考える ? 笔颁だけではなく、モバイルも意识する
- 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!! ? 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