Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
デザイン課程エキスパートコース
講師:行田尚史
目次
【2】情報デザインとは
【1】デザイン史
本レジュメの目的:教科書を読み進めやすくするため、レジュメに沿いながら授業を進めていきます。
【3】情報デザインのプロセス
【4】ユーザ調査のための手法
計画・情報収集・ユーザ調査・コンセプトデザ...
自己紹介
名前 行田尚史
経歴
資格
美術系の高校に入学し、そのまま美大へ。
2003年頃からフリーでFlash制作・映像編集を業務として活動。
主にWeb・パンフレット制作、インターネットテレビ、
博物館用映像コンテンツなどの制作・編集を行う...
introduction
デザインのことを学ぶ前に…
Design
翻訳してください
計画
これが一般的な翻訳です
が
図案
と翻訳されている時代もありました
これは正式にはビジュアルデザインと言います
西洋の最新の理論を取り入れるために
当時の東京美術学校(現藝大)で
1896年西洋画科・図案科が設立されました。
この図案科というのが今で言う
「ビジュアルデザイン」のことを指します。
が同時に「図案=デザイン」の誤解の基とも
なってしまいまし...
ちなみに絵画もデザインと言えます
日本でデザインが商業になるまで
あくまで事前知識なのでガッツリ端折って簡単にいきます
神との境界線
日本人が最初に「意味」としてのデザインを考えた意匠です
線・平面的な手法
「ジャポニズム」と1900年代初期に海外から注目された手法ですが
日本人の美術源流が平面的であることは「図案」の誤訳の本流ともなりました
華美を良しとしない合理性
着物からトイレ事情まで合理性を追求し
江戸時代の都市計画は当時の世界から見ても最も完成されてたと言われています
開国とデザインの始まり
先ほど説明したように、近世以前にデザインがなかったわけではありません。
あくまでデザインという名称や概念がなかっただけで、歴史・伝統は続いています。
転換期は黒船来航から日清・日露戦争までの半世紀の間です。
1917年の...
戦争とデザイン
満州事変以降、軍国主義に舵を切った日本は報道・情報統制の必要が生じると通信社統合政策をとりました。
その結果当時の国策通信社である同盟信者に広告代理店の日本電報通信社通信部が吸収されました。
これが現在の電通となります。当時、現...
高度成長期とデザイン
戦時中のデザインは「商業」を意識しなかったのですが、戦後は「商業」を意識するようにもなりました。
1956年の経済白書には「もはや戦後ではない」と書かれ、朝鮮戦争の特需の効果や高度成長の凄さが解ります。
プラスチックをはじ...
そして現在は…
というのがテーマになってきます
情報社会とデザイン
情報デザインとは
情報デザインとは
派生
基本
情報デザイン
情報デザイン
Webデザイン
一連の体験=ユーザーエクスペリエンスデザイン
CD ジャケット
ビジュアルデザイン
プロダクトデザイン
情報デザイン
一連の体験=ユーザーエクスペリエンスデザイン
情報デザインとは
情報デザインの代表的な分野
ソフトウェア・アプリケーション
ユーザーインターフェイス
インフォグラフィックス
ユーザーエクスペリエンス
情報デザインは従来のデザイン分野からの派生
グラフィック
デザイン
プロダクト
デザイン
...
情報デザインとは
iTunes は人々の生活をどう変えたか
情報デザインのプロセス
情報デザイン のプロセス
問題
この中で決裁権がある人は誰?
自分 上司 クライアント
情報デザインのプロセス
本当にそう思いますか?
自分 上司 クライアント
情報デザイン のプロセス
本当はユーザー
クライアント ユーザー
情報デザイン のプロセス
ユーザー中心設計
ユーザーをデザインプロセスの
中心に据えることで、適切で使い
やすいシステムなどの提供を目指す手法
ユーザー
クライアント
自分
上司
情報デザインのプロセス
ユーザー中心設計
ISO13407:インタラクティブシステムのための人間中心設計プロセス(国際規格)
人間中心設計の必要性の特定
デザイン活動のための哲学(「人間中心設計による何を実現するのか?」)と、
ヴィジョン(「誰...
情報デザインのプロセス
人間中心設計の必要性の特定
利用の状況の把握と明示
ユーザーと組織の要求事項の明示
設計による解決案の作成
要求事項に対する設計の評価
1
2
3
4
5 ゴール
目的:ゴールの設定
観察法
インタビュー・アンケート
ア...
情報デザインのプロセス
例えば…
受験生増加
学生の意識の向上
広報効果 受験生
学生
親
CMS 化
予算 300 万
スマホ対応
チームで考える時は付箋を使いましょう。
思考を書き出す、誰が書いたかに左右されない、書き出した文章を繋ぎ合わせ...
情報デザインのプロセス
ワーマンの 5 つの帽子掛け
位置による分類
アメリカの本、日本の本、フランスの本
ア行の本、カ行の本、サ行の本
最新刊、2011 年の本、2010 年の本
ビジネス本、児童書、小説
書店がすすめる書籍、店長がすすめる書...
ユーザ調査のための手法
ユーザ調査のための手法
ユーザー調査 
アンケート
人のふるまいを観察することに
主眼を置いたデザイン手法
インタビュー調査
観察
フォーラム
1
2
3
4
教科書 43 ページを参照してください
ファウンドビヘイヒア
アイトラッキング
教科...
ユーザ調査のための手法
アイトラッキング
ユーザー視点を「主観」にしないための調査方法。
専用の機械を使って視線の動きを計測する。
タイトルは写真よりも注目される
タイトルの最初の数単語がさらりと見られる
リストがあったら左側だけ見る
1 秒で...
ユーザ調査のための手法
ペルソナ法
ここで気をつけて欲しいのは、何故「ペルソナ法」を行うのかということ。
教科書 082 ページを参照してください
ペルソナ
架空の人物の設定
ユーザ調査のための手法
シナリオ法 実際に体験してみよう
演習1
ISO13407:インタラクティブシステムのための人間 中心設計プロセス(国際規格)
に基づいて、会津の特産品を販売する EC サイトを企画設計しワイヤーを制作しなさい
演習 2
ユーザーモデル
会津若子
夫が下郷町で自営業をする 50 歳
娘の短大進学を考えている
専業主婦、下郷町の一軒家に住む
iPhone など新しい機器も使いこなす
IT リテラシーは Twitter,facebook を
難なく使いこな...
美術・デザイン学問基礎
デザインポイント
これを抑えておけば最低限のことはできる4項目
Prerequisites of Design(デザインの前提)
Elements of Design(デザインの要素)
Gestalt Principles(ゲシュタルト原則)
Principle...
それでも難しい場合、この3だけでも意識してください
隣接
集合
整理
1
2
3
美術・デザイン学問基礎
センスは無くても大丈夫
観察力 表現力
論理性
美術・デザイン学問基礎
色・フォント・レイアウト
色の基礎的な部分は教科書 38 ページを参照してください
フォントの基礎的な部分は教科書 74 ページを参照してください
レイアウトの基礎的な部分は教科書 105 ページを参照してください
美術・デザイン学問基礎
眼の仕組みと色の仕組み 
眼は何を基に色を判断しているでしょうか
?
美術・デザイン学問基礎
光によって判別しています
美術・デザイン学問基礎
太陽光
プリズム
波長が長い
可視範囲
波長が短い
美術・デザイン学問基礎
太陽光
緑に見える
可視範囲
緑意外を吸収
緑を反射
美術・デザイン学問基礎
杆状体
錐状体
シャープ・アクオス 知っておきたい、色の話より転載
http://www.sharp.co.jp/aquos/technology/color/index.html
美術・デザイン学問基礎
杆状体
錐状体
錐状体の認識に異常=色覚異常
男性の 20 人に 1 人の確率
(UD に関しては後述 )
美術・デザイン学問基礎
色を使う時のコツ
ベースカラー 70% メインカラー 25% アクセントカラー 5%
美術・デザイン学問基礎
色相
彩度
明度
有彩色
無彩色
美術・デザイン学問基礎
美術・デザイン学問基礎
自然・健康・おいしい ポップ・刺激的・こどもっぽい
大手・信頼・実績
信頼・上品・なめらかな手触り
美術・デザイン学問基礎
モノクロマティックカラースキーム
まとまったムード、統一感
スプリットメンタリーカラースキーム
Web の一般的な手法
テトラディックカラースキーム
情報区分、もしくは子供むけ
アナログカラースキーム
隣接的という意味、...
美術・デザイン学問基礎
色の感じ方
どう感じますか?
赤 緑 黒
美術・デザイン学問基礎
色の感じ方
どう感じますか?
桜 ピンク
美術・デザイン学問基礎
色が精神に与える影響は科学的に立証されています
しかし心理的にどう捉えるかは後天的な性質のため、慎重に選びましょう
美術・デザイン学問基礎
informationisbeautiful.net で色々調べてみましょう
演習 2
演習 1 で作成したワイヤーを基にコンセプトカラーを決め
EC サイトのカラーチップを作成しなさい
インターフェイスデザインの心理学
美術・デザイン学問基礎
目から受け取る情報と、脳が受け取る情報は
カニッツァの三角形の応用
違う
美術・デザイン学問基礎
色以外の視覚情報は全く同じなのに…
脳は外界を素早く近くするためこうした図形の「近道」を作成します。
脳は感覚的な情報を大量に ( 推定毎秒 4000 万 ) 受け取り、受け取った
全ての入力から辻褄が合う世界を構築する...
美術・デザイン学問基礎
Web における経験則の知覚を挙げてみましょう
美術・デザイン学問基礎
1. 重要な情報は画面の上から 1/3 までの場所か、画面中央
2. 重要な情報は端にはおいてはならない
3. 左から右、右から左そして上から下の動きを意識する
美術・デザイン学問基礎
中心視野と周辺視野を活用しよう
これはどこでしょう
美術・デザイン学問基礎
中心視野と周辺視野を活用しよう
こっちの方が解りやすいですね
美術・デザイン学問基礎
脳はパターンを認識したがる
視覚野には「横線」「縦線」「端」「斜め 40 度」の
特定の図形パターンだけに反応する細胞があります
人は本能的にパターンを探すので、できるだけパターンを使いましょう
パターンを活用しよう
美術・デザイン学問基礎
美術・デザイン学問基礎
脳には視覚野以外に
顔認識専門の脳領域があります
そして対象の視線の先を見る傾向があります
美術・デザイン学問基礎
何故座れそうなのでしょうか
美術・デザイン学問基礎
どちらがリンクできそうでしょうか
リンクできます
> リンクできます
美術・デザイン学問基礎
手がかりの要素のことをアフォーダンスと言います
何か行動をとらせたいのであれば、そのものが何であるのか
それを使って何ができ何をすべきなのか、見ただけですぐ解るようにしましょう
> リンクできます
美術・デザイン学問基礎
まず分類をします。色で分けるのが一般的ですが、記事や扱い方など他の特性で
わけても良いでしょう。分け終わったら準備完了です。
この別々に分けたグループごとに処理していくことが大切です。
一度にひとつのグループだけをいれて...
美術・デザイン学問基礎
これで解りますね
意味のある表題、見出しをつけるだけで情報の認識は格段に変わります。
これは文章だけでなく、デザインでもそうです。見出しは重要。
まず分類をします。色で分けるのが一般的ですが、記事や扱い方など他の特性で
...
美術・デザイン学問基礎
桃 ぶどう りんご 梨 みかん スイカ メロン 
いちご マンゴー さくらんぼ バナナ ドリアン
パイナップル オレンジ キウイ アボカド 
覚えられますか?
美術・デザイン学問基礎
桃 ぶどう りんご 梨 みかん スイカ メロン 
なんとかいけそうですね
美術・デザイン学問基礎
桃 ぶどう りんご 梨
余裕ですね
桃   ぶどう  りんご   梨
より解りやすいですね
美術・デザイン学問基礎
美術・デザイン学問基礎
・段階的表示をこころがける
・人は例を使うとうまく学べる、言葉の説明だけではいけない
・人はいつも無意識に「自分の名前、食べ物、セックス、危険」に関する情報を集める
・注意力の持続時間は 10 分が限度
・目標に近づけば...
美術・デザイン学問基礎
突然ですがこのフォントは何ですか?
ヒラギノ UD 角ゴシック
UD Font(Universal Design Font:ユニバーサルデザインフォント ) 少し前から注目をされている
「ユニバーサルデザイン」のコンセプトに基づいたフォントです。
※UD(ユニバーサルデザイン)と...
美術・デザイン学問基礎
美術・デザイン学問基礎
一般的にはモリサワ・イワタを購入しておけば
デザインで困る事はありません
美術・デザイン学問基礎
ヒラギノ:読み易さ重視、堅い・王道
小塚:ヒラギノよりは少し柔らかい
新ゴ:ポップよりのゴシック
じゅん:女性・子供向け
リュウミン:和風
一例
「A-OTF」=Adobe Japan Character Collect...
美術・デザイン学問基礎
祖父江慎 Twitter より抜粋
美術・デザイン学問基礎
文字詰め、カーニングはスポーツと同じで練習と慣れが必要です。
教科書を読み進めて、街中でロゴや広告を沢山みて目を養いましょう。
デッサンをするのも効果的です。
美術・デザイン学問基礎
黄金比
グリッドシステム
レイアウトに必要な要素
美術・デザイン学問基礎
黄金比はデザインの基本
何故美しいか、の論点は
http://gakuen.gifu-net.ed.jp/ contents/museum/golden/page62.html を見てみましょう
美術・デザイン学問基礎
黄金比を意識したレイアウトを見てみよう
http://zapanet.info/blog/item/1298 も使ってみましょう
美術・デザイン学問基礎
マージンで使用するパターン
黄金比を見出しの画像に使用黄金比をナビゲーションの画像に使用
5, 8, 13, 21, 34, 55, 89, 144, 233、を適応したスケール 6, 10, 16, 26, 42, 6...
美術・デザイン学問基礎
何でもかんでも黄金比がいいというわけでは
ない
あくまでも指標
グリッドに沿わない所も多々あります
視覚化のための手法
視覚化のための手法
既存サイトからのデザイン分析から表現を読み取る
視覚化のための手法
視覚的なWebデザインとしての評価
立体として意識しているか
レイアウトのバランスがとれているか
色のバランスがとれているか
コンセプトが読み取れるか
情報が読み取り易いか
視線誘導がなされてるか
ユーザビリティに配慮してい...
視覚化のための手法
最新の技術例
レスポンジブルWebデザイン jQuery
視覚化のための手法
HTML5,CSS3など新しい技術は沢山あるが
日本ではブラウザが追いついてない場合が多い
視覚化のための手法
ユニバーサルデザインとは
※障碍者のためのデザインはバリアフリー
一般的・普遍的なデザイン
視覚化のための手法
ユニバーサルデザインの7原則
原則1:誰にでも公平に使えるようにしろ
原則2:自由度を高くしろ
原則3:簡単かつ直感的に使えるようにしろ
原則4:必要な情報をわかりやすくしろ
原則5:間違いが少なくかつ危険でないようにしろ
...
最終的にはデザイナーの
メカタ
デザインが解る
デザインが出来る◎
×
プロポーションの測り方は
メカタの技術を使います
レタリングも「メカタ」です
これもメカタで測ります
何色だかわかりますか?
視覚化のための手法
最後に…基礎力の必要性について
デッサンなどで養う基礎力はこういった「観察力」を身につける為の訓練です
プロが行うWebデザインでは「本物の」ような影や、質感、美しいレイアウトが
必要になってきます。デッサンができる=デザイ...
会津ソフトウェアリンゲージファーム デザイン応用課程講義資料
会津ソフトウェアリンゲージファーム デザイン応用課程講義資料
会津ソフトウェアリンゲージファーム デザイン応用課程講義資料
会津ソフトウェアリンゲージファーム デザイン応用課程講義資料
会津ソフトウェアリンゲージファーム デザイン応用課程講義資料
会津ソフトウェアリンゲージファーム デザイン応用課程講義資料
Upcoming SlideShare
Loading in …5
×

会津ソフトウェアリンゲージファーム デザイン応用課程講義資料

2,126 views

Published on

  • If you want to download or read this book, Copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

会津ソフトウェアリンゲージファーム デザイン応用課程講義資料

  1. 1. デザイン課程エキスパートコース 講師:行田尚史
  2. 2. 目次 【2】情報デザインとは 【1】デザイン史 本レジュメの目的:教科書を読み進めやすくするため、レジュメに沿いながら授業を進めていきます。 【3】情報デザインのプロセス 【4】ユーザ調査のための手法 計画・情報収集・ユーザ調査・コンセプトデザイン・実施デザインのプロセス ユーザ調査 ファウンドビヘイビア アイトラッキング ペルソナ手法 シナリオ手法 【6】視覚化のための手法 既存サイトからのデザイン分析から表現を読み取る 最新の技術例 UDデザインについて 【5】デザイン・美術学問基礎 フォント 心理学 色彩 デザインポイント レイアウト マ ク ロ デ ザ イ ン 論 ミ ク ロ デ ザ イ ン 論
  3. 3. 自己紹介 名前 行田尚史 経歴 資格 美術系の高校に入学し、そのまま美大へ。 2003年頃からフリーでFlash制作・映像編集を業務として活動。 主にWeb・パンフレット制作、インターネットテレビ、 博物館用映像コンテンツなどの制作・編集を行う。 大日本印刷グループにデザイナーとして入社 主に女性誌、少年誌のWebサイトのデザイン、 コーポレートサイトのリニューアル提案を中心に行い、 アイトラッキング(視線調査)の研究を担当する。 2011年アートディレクターとして会津に移り、 医療・自治体の企画デザイン、提案を行う。 出身 東京都新宿区神楽坂 高等学校美術教師免許
  4. 4. introduction デザインのことを学ぶ前に…
  5. 5. Design 翻訳してください
  6. 6. 計画 これが一般的な翻訳です
  7. 7.
  8. 8. 図案 と翻訳されている時代もありました これは正式にはビジュアルデザインと言います
  9. 9. 西洋の最新の理論を取り入れるために 当時の東京美術学校(現藝大)で 1896年西洋画科・図案科が設立されました。 この図案科というのが今で言う 「ビジュアルデザイン」のことを指します。 が同時に「図案=デザイン」の誤解の基とも なってしまいました。
  10. 10. ちなみに絵画もデザインと言えます
  11. 11. 日本でデザインが商業になるまで あくまで事前知識なのでガッツリ端折って簡単にいきます
  12. 12. 神との境界線 日本人が最初に「意味」としてのデザインを考えた意匠です
  13. 13. 線・平面的な手法 「ジャポニズム」と1900年代初期に海外から注目された手法ですが 日本人の美術源流が平面的であることは「図案」の誤訳の本流ともなりました
  14. 14. 華美を良しとしない合理性 着物からトイレ事情まで合理性を追求し 江戸時代の都市計画は当時の世界から見ても最も完成されてたと言われています
  15. 15. 開国とデザインの始まり 先ほど説明したように、近世以前にデザインがなかったわけではありません。 あくまでデザインという名称や概念がなかっただけで、歴史・伝統は続いています。 転換期は黒船来航から日清・日露戦争までの半世紀の間です。 1917年のロシア革命から1931年の満州事変に至るまで、産業工芸と商業美術は一気に進み 「工業・経済的工芸・美術工芸」が分化・発展し、美術学校のカリキュラムが整備されていきました。 これらはヨーロッパ諸国や米国に追いつくための殖産興業政策の一環でした。
  16. 16. 戦争とデザイン 満州事変以降、軍国主義に舵を切った日本は報道・情報統制の必要が生じると通信社統合政策をとりました。 その結果当時の国策通信社である同盟信者に広告代理店の日本電報通信社通信部が吸収されました。 これが現在の電通となります。当時、現在のクリエイティブ局に相当するところは 本社図案文献研究室と呼ばれていました。ここにも「デザイン=図案」の誤訳が浸透していることが解りますね。 大政翼賛会宣伝部、東方社、報道技術研究会などが国家宣伝にかかわり、一部のデザイナーは兵役を 免れましたが、フリーランスの多くは徴兵されました。またフォントの使用なども制限されました。
  17. 17. 高度成長期とデザイン 戦時中のデザインは「商業」を意識しなかったのですが、戦後は「商業」を意識するようにもなりました。 1956年の経済白書には「もはや戦後ではない」と書かれ、朝鮮戦争の特需の効果や高度成長の凄さが解ります。 プラスチックをはじめとする新素材、「三種の神器(洗濯機・冷蔵庫・掃除機)」「3C(カー・クーラー・カラーテレビ)」を 本流とした大量生産・大量消費のデザイン、東京オリンピックによる交通インフラ整備が 日本の経済・生活環境を大きく変えました。またその中商業美術はようやく「グラフィックデザイン」となり、 広告はマスメディアの発達により大きくなります。
  18. 18. そして現在は… というのがテーマになってきます 情報社会とデザイン
  19. 19. 情報デザインとは
  20. 20. 情報デザインとは 派生 基本 情報デザイン 情報デザイン Webデザイン 一連の体験=ユーザーエクスペリエンスデザイン CD ジャケット ビジュアルデザイン プロダクトデザイン 情報デザイン 一連の体験=ユーザーエクスペリエンスデザイン
  21. 21. 情報デザインとは 情報デザインの代表的な分野 ソフトウェア・アプリケーション ユーザーインターフェイス インフォグラフィックス ユーザーエクスペリエンス 情報デザインは従来のデザイン分野からの派生 グラフィック デザイン プロダクト デザイン 情 報 デ ザ イ ン
  22. 22. 情報デザインとは iTunes は人々の生活をどう変えたか
  23. 23. 情報デザインのプロセス
  24. 24. 情報デザイン のプロセス 問題 この中で決裁権がある人は誰? 自分 上司 クライアント
  25. 25. 情報デザインのプロセス 本当にそう思いますか? 自分 上司 クライアント
  26. 26. 情報デザイン のプロセス 本当はユーザー クライアント ユーザー
  27. 27. 情報デザイン のプロセス ユーザー中心設計 ユーザーをデザインプロセスの 中心に据えることで、適切で使い やすいシステムなどの提供を目指す手法 ユーザー クライアント 自分 上司
  28. 28. 情報デザインのプロセス ユーザー中心設計 ISO13407:インタラクティブシステムのための人間中心設計プロセス(国際規格) 人間中心設計の必要性の特定 デザイン活動のための哲学(「人間中心設計による何を実現するのか?」)と、 ヴィジョン(「誰に、どんなものを提供することで、それを実現するのか」 に関する仮説」)を検討。プロジェクトメンバー間での共有を行う。 想定されるターゲットユーザー層の現状の生活における製品/システムの利用状況を把握する。 利用状況の把握により明らかとなった、ユーザーの利用環境やそれに応じた利用の方法や現状の問題点から、 ユーザーセグメントごとにどのような要求事項があるかを検討します。 その際、ターゲットユーザーのモデル化にはペルソナ法(後述)を用います。 前の段階で検討を行った各ユーザーセグメント(ペルソナ)ごとの利用状況とそれに対応した期待と、 シナリオやストーリーボードの形で表現した製品、システムのラフイメージを元に、具体的な製品、 システムのデザインを行う段階です。 ユーザーテスト法などを用いて、ユーザーの要求事項と実際のデザイン案との ギャップがないかを検証するのがこの段階です。 利用の状況の把握と明示 ユーザーと組織の要求事項の明示 設計による解決案の作成 要求事項に対する設計の評価 1 2 3 4 5
  29. 29. 情報デザインのプロセス 人間中心設計の必要性の特定 利用の状況の把握と明示 ユーザーと組織の要求事項の明示 設計による解決案の作成 要求事項に対する設計の評価 1 2 3 4 5 ゴール 目的:ゴールの設定 観察法 インタビュー・アンケート アイトラッキング・ヒューステリック調査 ペルソナ法 ユーザーモデル ユーザビリティテスト ヒューステリック評価 プロトタイピング カードソート 認知的ウォークスルー 制作 前提条件:制約情報の明示 ターゲットの特定
  30. 30. 情報デザインのプロセス 例えば… 受験生増加 学生の意識の向上 広報効果 受験生 学生 親 CMS 化 予算 300 万 スマホ対応 チームで考える時は付箋を使いましょう。 思考を書き出す、誰が書いたかに左右されない、書き出した文章を繋ぎ合わせる…と 付箋を使うと良い事が沢山あります。ユーザー中心設計では特に「誰が言ったか解らないようにする」 ために付箋を使う場合が多いです。
  31. 31. 情報デザインのプロセス ワーマンの 5 つの帽子掛け 位置による分類 アメリカの本、日本の本、フランスの本 ア行の本、カ行の本、サ行の本 最新刊、2011 年の本、2010 年の本 ビジネス本、児童書、小説 書店がすすめる書籍、店長がすすめる書籍、今週のランキング 蝙蝠の分類問題を考えてみよう 名前順による分類 時間による分類 カテゴリによる分類 階層による分類 1 2 3 4 5
  32. 32. ユーザ調査のための手法
  33. 33. ユーザ調査のための手法 ユーザー調査  アンケート 人のふるまいを観察することに 主眼を置いたデザイン手法 インタビュー調査 観察 フォーラム 1 2 3 4 教科書 43 ページを参照してください ファウンドビヘイヒア アイトラッキング 教科書 064 ページを参照してください 次ページへ
  34. 34. ユーザ調査のための手法 アイトラッキング ユーザー視点を「主観」にしないための調査方法。 専用の機械を使って視線の動きを計測する。 タイトルは写真よりも注目される タイトルの最初の数単語がさらりと見られる リストがあったら左側だけ見る 1 秒で興味を引くこと! 小さい文字はよく読まれるに有効 トップナビゲーションが一番良い パラグラフは短い方が読まれる 要約はよく読まれる 広告は左上がベスト 人気コンテンツ近くの広告はよく見られる 画像広告よりもテキスト広告 マルチメディアコンテンツはよく知られていないものに有効
  35. 35. ユーザ調査のための手法 ペルソナ法 ここで気をつけて欲しいのは、何故「ペルソナ法」を行うのかということ。 教科書 082 ページを参照してください ペルソナ 架空の人物の設定
  36. 36. ユーザ調査のための手法 シナリオ法 実際に体験してみよう
  37. 37. 演習1 ISO13407:インタラクティブシステムのための人間 中心設計プロセス(国際規格) に基づいて、会津の特産品を販売する EC サイトを企画設計しワイヤーを制作しなさい
  38. 38. 演習 2 ユーザーモデル 会津若子 夫が下郷町で自営業をする 50 歳 娘の短大進学を考えている 専業主婦、下郷町の一軒家に住む iPhone など新しい機器も使いこなす IT リテラシーは Twitter,facebook を 難なく使いこなすレベル 自動車免許があるので休日には会津若松に来る 最近はバレーボールにはまる 流行には敏感 Amazon でよく買い物をする 娘を溺愛しているが、独り立ちも視野に入れてる
  39. 39. 美術・デザイン学問基礎
  40. 40. デザインポイント
  41. 41. これを抑えておけば最低限のことはできる4項目 Prerequisites of Design(デザインの前提) Elements of Design(デザインの要素) Gestalt Principles(ゲシュタルト原則) Principles of Design(デザインの原則) 1 2 3 4
  42. 42. それでも難しい場合、この3だけでも意識してください 隣接 集合 整理 1 2 3
  43. 43. 美術・デザイン学問基礎 センスは無くても大丈夫 観察力 表現力 論理性
  44. 44. 美術・デザイン学問基礎 色・フォント・レイアウト 色の基礎的な部分は教科書 38 ページを参照してください フォントの基礎的な部分は教科書 74 ページを参照してください レイアウトの基礎的な部分は教科書 105 ページを参照してください
  45. 45. 美術・デザイン学問基礎 眼の仕組みと色の仕組み  眼は何を基に色を判断しているでしょうか ?
  46. 46. 美術・デザイン学問基礎 光によって判別しています
  47. 47. 美術・デザイン学問基礎 太陽光 プリズム 波長が長い 可視範囲 波長が短い
  48. 48. 美術・デザイン学問基礎 太陽光 緑に見える 可視範囲 緑意外を吸収 緑を反射
  49. 49. 美術・デザイン学問基礎 杆状体 錐状体 シャープ・アクオス 知っておきたい、色の話より転載 http://www.sharp.co.jp/aquos/technology/color/index.html
  50. 50. 美術・デザイン学問基礎 杆状体 錐状体 錐状体の認識に異常=色覚異常 男性の 20 人に 1 人の確率 (UD に関しては後述 )
  51. 51. 美術・デザイン学問基礎 色を使う時のコツ ベースカラー 70% メインカラー 25% アクセントカラー 5%
  52. 52. 美術・デザイン学問基礎 色相 彩度 明度
  53. 53. 有彩色 無彩色 美術・デザイン学問基礎
  54. 54. 美術・デザイン学問基礎 自然・健康・おいしい ポップ・刺激的・こどもっぽい 大手・信頼・実績 信頼・上品・なめらかな手触り
  55. 55. 美術・デザイン学問基礎 モノクロマティックカラースキーム まとまったムード、統一感 スプリットメンタリーカラースキーム Web の一般的な手法 テトラディックカラースキーム 情報区分、もしくは子供むけ アナログカラースキーム 隣接的という意味、自然物など コンプリメンタリーカラースキーム インパクトを持たせる
  56. 56. 美術・デザイン学問基礎 色の感じ方 どう感じますか? 赤 緑 黒
  57. 57. 美術・デザイン学問基礎 色の感じ方 どう感じますか? 桜 ピンク
  58. 58. 美術・デザイン学問基礎 色が精神に与える影響は科学的に立証されています しかし心理的にどう捉えるかは後天的な性質のため、慎重に選びましょう
  59. 59. 美術・デザイン学問基礎 informationisbeautiful.net で色々調べてみましょう
  60. 60. 演習 2 演習 1 で作成したワイヤーを基にコンセプトカラーを決め EC サイトのカラーチップを作成しなさい
  61. 61. インターフェイスデザインの心理学
  62. 62. 美術・デザイン学問基礎 目から受け取る情報と、脳が受け取る情報は カニッツァの三角形の応用 違う
  63. 63. 美術・デザイン学問基礎 色以外の視覚情報は全く同じなのに… 脳は外界を素早く近くするためこうした図形の「近道」を作成します。 脳は感覚的な情報を大量に ( 推定毎秒 4000 万 ) 受け取り、受け取った 全ての入力から辻褄が合う世界を構築するのです。この際、過去に 獲得した「経験則」に頼るのです。大体は上手くいきますが、たまに エラーは起きてしまいます。なので形や色を上手に扱うのはデザインで 最も重要なことです。
  64. 64. 美術・デザイン学問基礎 Web における経験則の知覚を挙げてみましょう
  65. 65. 美術・デザイン学問基礎 1. 重要な情報は画面の上から 1/3 までの場所か、画面中央 2. 重要な情報は端にはおいてはならない 3. 左から右、右から左そして上から下の動きを意識する
  66. 66. 美術・デザイン学問基礎 中心視野と周辺視野を活用しよう これはどこでしょう
  67. 67. 美術・デザイン学問基礎 中心視野と周辺視野を活用しよう こっちの方が解りやすいですね
  68. 68. 美術・デザイン学問基礎 脳はパターンを認識したがる 視覚野には「横線」「縦線」「端」「斜め 40 度」の 特定の図形パターンだけに反応する細胞があります 人は本能的にパターンを探すので、できるだけパターンを使いましょう パターンを活用しよう
  69. 69. 美術・デザイン学問基礎
  70. 70. 美術・デザイン学問基礎 脳には視覚野以外に 顔認識専門の脳領域があります そして対象の視線の先を見る傾向があります
  71. 71. 美術・デザイン学問基礎 何故座れそうなのでしょうか
  72. 72. 美術・デザイン学問基礎 どちらがリンクできそうでしょうか リンクできます > リンクできます
  73. 73. 美術・デザイン学問基礎 手がかりの要素のことをアフォーダンスと言います 何か行動をとらせたいのであれば、そのものが何であるのか それを使って何ができ何をすべきなのか、見ただけですぐ解るようにしましょう > リンクできます
  74. 74. 美術・デザイン学問基礎 まず分類をします。色で分けるのが一般的ですが、記事や扱い方など他の特性で わけても良いでしょう。分け終わったら準備完了です。 この別々に分けたグループごとに処理していくことが大切です。 一度にひとつのグループだけをいれてください。 何言ってんだコイツ
  75. 75. 美術・デザイン学問基礎 これで解りますね 意味のある表題、見出しをつけるだけで情報の認識は格段に変わります。 これは文章だけでなく、デザインでもそうです。見出しは重要。 まず分類をします。色で分けるのが一般的ですが、記事や扱い方など他の特性で わけても良いでしょう。分け終わったら準備完了です。 この別々に分けたグループごとに処理していくことが大切です。 一度にひとつのグループだけをいれてください。 洗濯機の使い方
  76. 76. 美術・デザイン学問基礎 桃 ぶどう りんご 梨 みかん スイカ メロン  いちご マンゴー さくらんぼ バナナ ドリアン パイナップル オレンジ キウイ アボカド  覚えられますか?
  77. 77. 美術・デザイン学問基礎 桃 ぶどう りんご 梨 みかん スイカ メロン  なんとかいけそうですね
  78. 78. 美術・デザイン学問基礎 桃 ぶどう りんご 梨 余裕ですね
  79. 79. 桃   ぶどう  りんご   梨 より解りやすいですね 美術・デザイン学問基礎
  80. 80. 美術・デザイン学問基礎 ・段階的表示をこころがける ・人は例を使うとうまく学べる、言葉の説明だけではいけない ・人はいつも無意識に「自分の名前、食べ物、セックス、危険」に関する情報を集める ・注意力の持続時間は 10 分が限度 ・目標に近づけば近づくほど行動力が呼び起こされる ・報酬に変化があるほど人はやる気をおこす ・人は見た目と感じで信用するかどかを決める ・人は信用できないという判断を下すのは早い ・人は「自分の行動には影響力があって、自分は決定権を握っている」と思いたがる ・人は「お金」よりも「時間・体験」に心を動かされる ・人は確信が無い時は人任せにする                                              その他にも行動心理に従った インターフェイスのヒントはたくさんあります
  81. 81. 美術・デザイン学問基礎 突然ですがこのフォントは何ですか?
  82. 82. ヒラギノ UD 角ゴシック UD Font(Universal Design Font:ユニバーサルデザインフォント ) 少し前から注目をされている 「ユニバーサルデザイン」のコンセプトに基づいたフォントです。 ※UD(ユニバーサルデザイン)とは、" できるだけ多くの人が利用可能であるようなデザイン を 基本コンセプトとしたデザインの事で、人が生活する上で「使いやすさ、見やすさ」といった細かい部分にも 配慮・工夫をしたデザインをさします。一般の人はもちろん、お年寄りや障害者の方、外国人の方など皆が 「便利だな、使いやすいな」と思えるデザインです。 (中略) 特に最近では高速道路の標識をはじめ、公共機関の案内版にも視認性が良いものに変更が進められており、 UD フォントが採用されている件数も増えて来ているようです。 http://font.designrs-garage.jp/ud/ より抜粋 美術・デザイン学問基礎
  83. 83. 美術・デザイン学問基礎
  84. 84. 美術・デザイン学問基礎 一般的にはモリサワ・イワタを購入しておけば デザインで困る事はありません
  85. 85. 美術・デザイン学問基礎 ヒラギノ:読み易さ重視、堅い・王道 小塚:ヒラギノよりは少し柔らかい 新ゴ:ポップよりのゴシック じゅん:女性・子供向け リュウミン:和風 一例 「A-OTF」=Adobe Japan Character Collection for CID-Keyed Fonts、平たく言えば Adobe 規格の文字セットのフォント 「U-OTF」=U-PRESS(社団法人共同通信社が全国の新聞社などに国内外の記事を配信するために定めた文字コード)の       文字セットのフォント。 「G-OTF」= 学習参考書用フォント。小学校・中学校で使われる、義務教育用の教科書・学習参考書・副読本などに使用される、       文部省の学習指導要領に準拠したフォント。
  86. 86. 美術・デザイン学問基礎 祖父江慎 Twitter より抜粋
  87. 87. 美術・デザイン学問基礎 文字詰め、カーニングはスポーツと同じで練習と慣れが必要です。 教科書を読み進めて、街中でロゴや広告を沢山みて目を養いましょう。 デッサンをするのも効果的です。
  88. 88. 美術・デザイン学問基礎 黄金比 グリッドシステム レイアウトに必要な要素
  89. 89. 美術・デザイン学問基礎 黄金比はデザインの基本 何故美しいか、の論点は http://gakuen.gifu-net.ed.jp/ contents/museum/golden/page62.html を見てみましょう
  90. 90. 美術・デザイン学問基礎 黄金比を意識したレイアウトを見てみよう http://zapanet.info/blog/item/1298 も使ってみましょう
  91. 91. 美術・デザイン学問基礎 マージンで使用するパターン 黄金比を見出しの画像に使用黄金比をナビゲーションの画像に使用 5, 8, 13, 21, 34, 55, 89, 144, 233、を適応したスケール 6, 10, 16, 26, 42, 68, 110, 178, 288 を適応したスケール 黄金比の実例
  92. 92. 美術・デザイン学問基礎
  93. 93. 何でもかんでも黄金比がいいというわけでは ない
  94. 94. あくまでも指標 グリッドに沿わない所も多々あります
  95. 95. 視覚化のための手法
  96. 96. 視覚化のための手法 既存サイトからのデザイン分析から表現を読み取る
  97. 97. 視覚化のための手法 視覚的なWebデザインとしての評価 立体として意識しているか レイアウトのバランスがとれているか 色のバランスがとれているか コンセプトが読み取れるか 情報が読み取り易いか 視線誘導がなされてるか ユーザビリティに配慮しているか アクセシビリティに配慮しているか 適切なコーディングをしているか 情報区分が正しいか 身体的に問題が無いか バグがないか 適切なライディングがされているか 感情を動かせるか 感動を与えられるか 現実により近いイメージであるか …など
  98. 98. 視覚化のための手法 最新の技術例 レスポンジブルWebデザイン jQuery
  99. 99. 視覚化のための手法 HTML5,CSS3など新しい技術は沢山あるが 日本ではブラウザが追いついてない場合が多い
  100. 100. 視覚化のための手法 ユニバーサルデザインとは ※障碍者のためのデザインはバリアフリー 一般的・普遍的なデザイン
  101. 101. 視覚化のための手法 ユニバーサルデザインの7原則 原則1:誰にでも公平に使えるようにしろ 原則2:自由度を高くしろ 原則3:簡単かつ直感的に使えるようにしろ 原則4:必要な情報をわかりやすくしろ 原則5:間違いが少なくかつ危険でないようにしろ 原則6:身体的の負担を減らせ 原則7:使いやすいサイズと空間をたもて http://waic.jp/docs/jis2010-understanding/
  102. 102. 最終的にはデザイナーの メカタ
  103. 103. デザインが解る デザインが出来る◎ × プロポーションの測り方は メカタの技術を使います
  104. 104. レタリングも「メカタ」です
  105. 105. これもメカタで測ります 何色だかわかりますか?
  106. 106. 視覚化のための手法 最後に…基礎力の必要性について デッサンなどで養う基礎力はこういった「観察力」を身につける為の訓練です プロが行うWebデザインでは「本物の」ような影や、質感、美しいレイアウトが 必要になってきます。デッサンができる=デザインができる、ではありませんが デッサンができる=デザインの力がある、のは間違い有りませんし、 デザインが上手くなる最短距離です。

×