1. メディア表現技法 a #01 N. Shimizu (chikoski@kaetsu.ac.jp / @chikoski) 2011/04/18 メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp) 1

2. 今日の内容 担当者紹介 テーマと目的 採点方針 スケジュール 2011/04/18 メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp) 2

3. この講義で学べること 既存のウェブサイトをユーザインタフェースの視点から分析する体験ができる ユーザインタフェースの設計を体験できる プロトタイピングの経験が持てる 2011/04/18 メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp) 3

4. 講義のキーワード Webサイト Webアプリケーション 情報デザイン Webユーザインタフェース レイアウトデザイン 2011/04/18 メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp) 4

5. 課題の方針 毎回課す実習 2・3時間あれば終わる課題 次回までに提出 最終課題 自分でWebサイトを設計する プロトタイプを作成する 設計と実装を報告する 2011/04/18 メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp) 5

6. 採点方針 最終課題の提出がない->D 毎回の課題の提出率が3割を切る->D 点数による採点 F: 最終課題を点数化したもの D: 毎回の課題を点数化したもの (a × F + b * D + 60)で出た数値をもとに採点 2011/04/18 メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp) 6

7. 講義スケジュール 前半：既存のサイトを分析しよう いろんなサイトを使ってみよう 使った感想を分析しよう 後半：自分でサイトを設計しよう 利用者を決めよう 必要な情報と構造を決めよう プロトタイプを作ろう 2011/04/18 メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp) 7

8. 講義資料について http://chikoski.info/tagged/mp2011/ で公開 閲覧は可能 ダウンロードは不可能 印刷は不可能 2011/04/18 メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp) 8

9. 2011/04/18 9 メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp) ノートPCを持ってきてください

10. 担当者：N. Shimizu 情報メディアセンター勤務 ネットワーク管理 システム開発（Webサイト、その他システム） 興味の対象 複数のプログラムをつなげて一つに見せること Web × 分類 2011/04/18 メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp) 10

11. 連絡先 chikoski@kaetsu.ac.jp chiko@kaetsu.ac.jpから返信が来ます ほぼ毎日みています Twitter: @chikoski 情報メディアセンターの事務室 2011/04/18 メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp) 11

12. Webサイト 閲覧者に対する情報伝達手段 情報の流れ：ページの所有者->閲覧者 例： http://www.kaetsu.ac.jp/ http://hello.kaetsu.ac.jp/ 2011/04/18 メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp) 12

13. Webアプリケーション Webページ上で利用者に何らかの手続きを行わせるための仕組み 情報の流れ ページ所有者->利用者：指示 利用者->ページ所有者：アクション 例：http://gakunavi.kaetsu.ac.jp/ 2011/04/18 メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp) 13

14. ユーザインタフェース 情報デザイン インタラクションデザイン グラフィカルデザイン アクセシビリティ 2011/04/18 メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp) 14

15. インタラクションデザイン どういうやり取りがふさわしいのか 例：メールを書く 新規作成->メール作成->送信 相手サーバを選ぶ->自分のメアドを書く->相手のメアドを書く->本文を書く->送信 アドレス帳から相手を選ぶ->メールを書く->送信 2011/04/18 メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp) 15

16. 2011/04/18 メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp) 16 グラフィカルデザイン まず最初に「メール作成」ボタンを押しましょう。表示される画面にメールを書きましょう。書いたら送信を押しましょう メール作成ボタンを押す メールを書く 送信ボタンを押して送信

17. アクセシビリティ 様々な利用者 視覚障碍、色覚障碍、聴覚障碍、認知障碍、学習障碍 操作が不慣れな人 特定の機械しか持っていない人 言語的、文化的にマイノリティな人 同じ情報にアクセスできるようにすること 2011/04/18 メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp) 17

18. 情報デザイン 必要な情報を選び、構造化すること キーポイント だれが必要としているのか いつ必要しているのか なぜ必要としているのか 2011/04/18 メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp) 18

19. だれが必要としているの？ Webサイトには利用者がいる 利用者が決まらないとサービスできない 欲しいものがわからない 利用者はだれか わかっている場合 わかっていない場合 2011/04/18 メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp) 19

20. いつ必要としているの？ 使われるのはいつだろうか 時間帯：朝？夜？時間帯は関係ない？ シチュエーション：家？会社？外出先？ 使用する端末：携帯？PC？スマフォ？ 2011/04/18 メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp) 20

21. どうして必要としているの？ 情報を得る目的はなにか 欲しい情報はなにか そもそも目的がない場合もある 目的達成の最短ルートは何か 2011/04/18 メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp) 21

22. 情報構造のパターン 階層型分類 ファセット型分類 直線型 ハブ・スポーク型 などなど 2011/04/18 メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp) 22

23. 情報デザインが必要な理由 利用者の使い勝手があがる 情報提供者の意図が伝わりやすくなる サイトが情報の追加・更新に強くなる 2011/04/18 メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp) 23

24. Webの成り立ち 24 2011/04/18 メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)

25. Webをなぜつくったか http://www.ted.com/talks/lang/jpn/tim_berners_lee_on_the_next_web.html 2011/04/18 メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp) 25

26. 初期のWebを構成する3つの要素 HTTP：Webページの転送方式 URL：Webページの場所を示すID HTML：Webページを記述するための言語 2010.09.21 26 メディア表現技法, N. Shimizu <chikoski@kaetsu.ac.jp>

27. http://public.web.cern.ch/public/en/About/WebWork-en.htmlより引用 2010.09.21 27 メディア表現技法, N. Shimizu <chikoski@kaetsu.ac.jp>

28. Webページの構成要素 HTMLで記述されたデータ CSSで定義された見た目 JavaScriptで作成したプログラム Flashのムービー 画像 2010.09.21 28 メディア表現技法, N. Shimizu <chikoski@kaetsu.ac.jp>

29. 2011/04/18 29 メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)

30. HTMLで記述されたデータ h2 img p

31. 11/04/18 メディア表現技法a (Web), N.Shimzu<chikoski@kaetsu.ac.jp> 31 CSSの役割 適用

32. 2011/04/18 32 メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp) 画像 画像 画像 画像 画像 画像 画像 画像 画像 画像 画像 画像 画像

33. World Wide Web URLを指定して、サーバからデータを取得する データをブラウザで処理して利用者に提示 HTML, CSS, 画像 Flash, JavaScript どのような提示が効果的か？->ユーザインタフェースの問題 2011/04/18 メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp) 33

34. まとめ この講義ではユーザインタフェースについて考えていきます 最終課題を出さないとDです 課題の提出率が３割切ってもDです PCが必要なのでもってきてください 2011/04/18 メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp) 34