メディア表現技法 a #01<br />N. Shimizu (chikoski@kaetsu.ac.jp / @chikoski)<br />2011/04/18<br />メディア表現技法a / N. Shimizu (chikoski@k...
今日の内容<br />担当者紹介<br />テーマと目的<br />採点方針<br />スケジュール<br />2011/04/18<br />メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)<br ...
この講義で学べること<br />既存のウェブサイトをユーザインタフェースの視点から分析する体験ができる<br />ユーザインタフェースの設計を体験できる<br />プロトタイピングの経験が持てる<br />2011/04/18<br />メディ...
講義のキーワード<br />Webサイト<br />Webアプリケーション<br />情報デザイン<br />Webユーザインタフェース<br />レイアウトデザイン<br />2011/04/18<br />メディア表現技法a / N. Sh...
課題の方針<br />毎回課す実習<br />2・3時間あれば終わる課題<br />次回までに提出<br />最終課題<br />自分でWebサイトを設計する<br />プロトタイプを作成する<br />設計と実装を報告する<br />2011...
採点方針<br />最終課題の提出がない->D<br />毎回の課題の提出率が3割を切る->D<br />点数による採点<br />F: 最終課題を点数化したもの<br />D: 毎回の課題を点数化したもの<br />(a × F + b * ...
講義スケジュール<br />前半:既存のサイトを分析しよう<br />いろんなサイトを使ってみよう<br />使った感想を分析しよう<br />後半:自分でサイトを設計しよう<br />利用者を決めよう<br />必要な情報と構造を決めよう<b...
講義資料について<br />http://chikoski.info/tagged/mp2011/ で公開<br />閲覧は可能<br />ダウンロードは不可能<br />印刷は不可能<br />2011/04/18<br />メディア表現技法...
2011/04/18<br />9<br />メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)<br />ノートPCを持ってきてください<br />
担当者:N. Shimizu<br />情報メディアセンター勤務<br />ネットワーク管理<br />システム開発(Webサイト、その他システム)<br />興味の対象<br />複数のプログラムをつなげて一つに見せること<br />Web ...
連絡先<br />chikoski@kaetsu.ac.jp<br />chiko@kaetsu.ac.jpから返信が来ます<br />ほぼ毎日みています<br />Twitter: @chikoski<br />情報メディアセンターの事務室...
Webサイト<br />閲覧者に対する情報伝達手段<br />情報の流れ:ページの所有者->閲覧者<br />例:<br />http://www.kaetsu.ac.jp/<br />http://hello.kaetsu.ac.jp/<br...
Webアプリケーション<br />Webページ上で利用者に何らかの手続きを行わせるための仕組み<br />情報の流れ<br />ページ所有者->利用者:指示<br />利用者->ページ所有者:アクション<br />例:http://gakuna...
ユーザインタフェース<br />情報デザイン<br />インタラクションデザイン<br />グラフィカルデザイン<br />アクセシビリティ<br />2011/04/18<br />メディア表現技法a / N. Shimizu (chikos...
インタラクションデザイン<br />どういうやり取りがふさわしいのか<br />例:メールを書く<br />新規作成->メール作成->送信<br />相手サーバを選ぶ->自分のメアドを書く->相手のメアドを書く->本文を書く->送信<br />...
2011/04/18<br />メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)<br />16<br />グラフィカルデザイン<br />まず最初に「メール作成」ボタンを押しましょう。表示される画面...
アクセシビリティ<br />様々な利用者<br />視覚障碍、色覚障碍、聴覚障碍、認知障碍、学習障碍<br />操作が不慣れな人<br />特定の機械しか持っていない人<br />言語的、文化的にマイノリティな人<br />同じ情報にアクセスで...
情報デザイン<br />必要な情報を選び、構造化すること<br />キーポイント<br />だれが必要としているのか<br />いつ必要しているのか<br />なぜ必要としているのか<br />2011/04/18<br />メディア表現技法a...
だれが必要としているの?<br />Webサイトには利用者がいる<br />利用者が決まらないとサービスできない<br />欲しいものがわからない<br />利用者はだれか<br />わかっている場合<br />わかっていない場合<br />2...
いつ必要としているの?<br />使われるのはいつだろうか<br />時間帯:朝?夜?時間帯は関係ない?<br />シチュエーション:家?会社?外出先?<br />使用する端末:携帯?PC?スマフォ?<br />2011/04/18<br />...
どうして必要としているの?<br />情報を得る目的はなにか<br />欲しい情報はなにか<br />そもそも目的がない場合もある<br />目的達成の最短ルートは何か<br />2011/04/18<br />メディア表現技法a / N. S...
情報構造のパターン<br />階層型分類<br />ファセット型分類<br />直線型<br />ハブ・スポーク型<br />などなど<br />2011/04/18<br />メディア表現技法a / N. Shimizu (chikoski@...
情報デザインが必要な理由<br />利用者の使い勝手があがる<br />情報提供者の意図が伝わりやすくなる<br />サイトが情報の追加・更新に強くなる<br />2011/04/18<br />メディア表現技法a / N. Shimizu (...
Webの成り立ち<br />24<br />2011/04/18<br />メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)<br />
Webをなぜつくったか<br />http://www.ted.com/talks/lang/jpn/tim_berners_lee_on_the_next_web.html<br />2011/04/18<br />メディア表現技法a / N...
初期のWebを構成する3つの要素<br />HTTP:Webページの転送方式<br />URL:Webページの場所を示すID<br />HTML:Webページを記述するための言語<br />2010.09.21<br />26<br />メディ...
http://public.web.cern.ch/public/en/About/WebWork-en.htmlより引用<br />2010.09.21<br />27<br />メディア表現技法, N. Shimizu <chikoski@...
Webページの構成要素<br />HTMLで記述されたデータ<br />CSSで定義された見た目<br />JavaScriptで作成したプログラム<br />Flashのムービー<br />画像<br />2010.09.21<br />28...
2011/04/18<br />29<br />メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)<br />
HTMLで記述されたデータ<br />h2<br />img<br />p<br />
11/04/18<br />メディア表現技法a (Web), N.Shimzu<chikoski@kaetsu.ac.jp><br />31<br />CSSの役割<br />適用<br />
2011/04/18<br />32<br />メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)<br />画像<br />画像<br />画像<br />画像<br />画像<br />画像<br ...
World Wide Web<br />URLを指定して、サーバからデータを取得する<br />データをブラウザで処理して利用者に提示<br />HTML, CSS, 画像<br />Flash, JavaScript<br />どのような提示...
まとめ<br />この講義ではユーザインタフェースについて考えていきます<br />最終課題を出さないとDです<br />課題の提出率が3割切ってもDです<br />PCが必要なのでもってきてください<br />2011/04/18<br />...
Upcoming SlideShare
Loading in...5
×

MP2011#01

613

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
613
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

MP2011#01

  1. 1. メディア表現技法 a #01<br />N. Shimizu (chikoski@kaetsu.ac.jp / @chikoski)<br />2011/04/18<br />メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)<br />1<br />
  2. 2. 今日の内容<br />担当者紹介<br />テーマと目的<br />採点方針<br />スケジュール<br />2011/04/18<br />メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)<br />2<br />
  3. 3. この講義で学べること<br />既存のウェブサイトをユーザインタフェースの視点から分析する体験ができる<br />ユーザインタフェースの設計を体験できる<br />プロトタイピングの経験が持てる<br />2011/04/18<br />メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)<br />3<br />
  4. 4. 講義のキーワード<br />Webサイト<br />Webアプリケーション<br />情報デザイン<br />Webユーザインタフェース<br />レイアウトデザイン<br />2011/04/18<br />メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)<br />4<br />
  5. 5. 課題の方針<br />毎回課す実習<br />2・3時間あれば終わる課題<br />次回までに提出<br />最終課題<br />自分でWebサイトを設計する<br />プロトタイプを作成する<br />設計と実装を報告する<br />2011/04/18<br />メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)<br />5<br />
  6. 6. 採点方針<br />最終課題の提出がない->D<br />毎回の課題の提出率が3割を切る->D<br />点数による採点<br />F: 最終課題を点数化したもの<br />D: 毎回の課題を点数化したもの<br />(a × F + b * D + 60)で出た数値をもとに採点<br />2011/04/18<br />メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)<br />6<br />
  7. 7. 講義スケジュール<br />前半:既存のサイトを分析しよう<br />いろんなサイトを使ってみよう<br />使った感想を分析しよう<br />後半:自分でサイトを設計しよう<br />利用者を決めよう<br />必要な情報と構造を決めよう<br />プロトタイプを作ろう<br />2011/04/18<br />メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)<br />7<br />
  8. 8. 講義資料について<br />http://chikoski.info/tagged/mp2011/ で公開<br />閲覧は可能<br />ダウンロードは不可能<br />印刷は不可能<br />2011/04/18<br />メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)<br />8<br />
  9. 9. 2011/04/18<br />9<br />メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)<br />ノートPCを持ってきてください<br />
  10. 10. 担当者:N. Shimizu<br />情報メディアセンター勤務<br />ネットワーク管理<br />システム開発(Webサイト、その他システム)<br />興味の対象<br />複数のプログラムをつなげて一つに見せること<br />Web × 分類<br />2011/04/18<br />メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)<br />10<br />
  11. 11. 連絡先<br />chikoski@kaetsu.ac.jp<br />chiko@kaetsu.ac.jpから返信が来ます<br />ほぼ毎日みています<br />Twitter: @chikoski<br />情報メディアセンターの事務室<br />2011/04/18<br />メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)<br />11<br />
  12. 12. Webサイト<br />閲覧者に対する情報伝達手段<br />情報の流れ:ページの所有者->閲覧者<br />例:<br />http://www.kaetsu.ac.jp/<br />http://hello.kaetsu.ac.jp/<br />2011/04/18<br />メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)<br />12<br />
  13. 13. Webアプリケーション<br />Webページ上で利用者に何らかの手続きを行わせるための仕組み<br />情報の流れ<br />ページ所有者->利用者:指示<br />利用者->ページ所有者:アクション<br />例:http://gakunavi.kaetsu.ac.jp/<br />2011/04/18<br />メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)<br />13<br />
  14. 14. ユーザインタフェース<br />情報デザイン<br />インタラクションデザイン<br />グラフィカルデザイン<br />アクセシビリティ<br />2011/04/18<br />メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)<br />14<br />
  15. 15. インタラクションデザイン<br />どういうやり取りがふさわしいのか<br />例:メールを書く<br />新規作成->メール作成->送信<br />相手サーバを選ぶ->自分のメアドを書く->相手のメアドを書く->本文を書く->送信<br />アドレス帳から相手を選ぶ->メールを書く->送信<br />2011/04/18<br />メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)<br />15<br />
  16. 16. 2011/04/18<br />メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)<br />16<br />グラフィカルデザイン<br />まず最初に「メール作成」ボタンを押しましょう。表示される画面にメールを書きましょう。書いたら送信を押しましょう<br />メール作成ボタンを押す<br />メールを書く<br />送信ボタンを押して送信<br />
  17. 17. アクセシビリティ<br />様々な利用者<br />視覚障碍、色覚障碍、聴覚障碍、認知障碍、学習障碍<br />操作が不慣れな人<br />特定の機械しか持っていない人<br />言語的、文化的にマイノリティな人<br />同じ情報にアクセスできるようにすること<br />2011/04/18<br />メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)<br />17<br />
  18. 18. 情報デザイン<br />必要な情報を選び、構造化すること<br />キーポイント<br />だれが必要としているのか<br />いつ必要しているのか<br />なぜ必要としているのか<br />2011/04/18<br />メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)<br />18<br />
  19. 19. だれが必要としているの?<br />Webサイトには利用者がいる<br />利用者が決まらないとサービスできない<br />欲しいものがわからない<br />利用者はだれか<br />わかっている場合<br />わかっていない場合<br />2011/04/18<br />メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)<br />19<br />
  20. 20. いつ必要としているの?<br />使われるのはいつだろうか<br />時間帯:朝?夜?時間帯は関係ない?<br />シチュエーション:家?会社?外出先?<br />使用する端末:携帯?PC?スマフォ?<br />2011/04/18<br />メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)<br />20<br />
  21. 21. どうして必要としているの?<br />情報を得る目的はなにか<br />欲しい情報はなにか<br />そもそも目的がない場合もある<br />目的達成の最短ルートは何か<br />2011/04/18<br />メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)<br />21<br />
  22. 22. 情報構造のパターン<br />階層型分類<br />ファセット型分類<br />直線型<br />ハブ・スポーク型<br />などなど<br />2011/04/18<br />メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)<br />22<br />
  23. 23. 情報デザインが必要な理由<br />利用者の使い勝手があがる<br />情報提供者の意図が伝わりやすくなる<br />サイトが情報の追加・更新に強くなる<br />2011/04/18<br />メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)<br />23<br />
  24. 24. Webの成り立ち<br />24<br />2011/04/18<br />メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)<br />
  25. 25. Webをなぜつくったか<br />http://www.ted.com/talks/lang/jpn/tim_berners_lee_on_the_next_web.html<br />2011/04/18<br />メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)<br />25<br />
  26. 26. 初期のWebを構成する3つの要素<br />HTTP:Webページの転送方式<br />URL:Webページの場所を示すID<br />HTML:Webページを記述するための言語<br />2010.09.21<br />26<br />メディア表現技法, N. Shimizu <chikoski@kaetsu.ac.jp><br />
  27. 27. http://public.web.cern.ch/public/en/About/WebWork-en.htmlより引用<br />2010.09.21<br />27<br />メディア表現技法, N. Shimizu <chikoski@kaetsu.ac.jp><br />
  28. 28. Webページの構成要素<br />HTMLで記述されたデータ<br />CSSで定義された見た目<br />JavaScriptで作成したプログラム<br />Flashのムービー<br />画像<br />2010.09.21<br />28<br />メディア表現技法, N. Shimizu <chikoski@kaetsu.ac.jp><br />
  29. 29. 2011/04/18<br />29<br />メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)<br />
  30. 30. HTMLで記述されたデータ<br />h2<br />img<br />p<br />
  31. 31. 11/04/18<br />メディア表現技法a (Web), N.Shimzu<chikoski@kaetsu.ac.jp><br />31<br />CSSの役割<br />適用<br />
  32. 32. 2011/04/18<br />32<br />メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)<br />画像<br />画像<br />画像<br />画像<br />画像<br />画像<br />画像<br />画像<br />画像<br />画像<br />画像<br />画像<br />画像<br />
  33. 33. World Wide Web<br />URLを指定して、サーバからデータを取得する<br />データをブラウザで処理して利用者に提示<br />HTML, CSS, 画像<br />Flash, JavaScript<br />どのような提示が効果的か?->ユーザインタフェースの問題<br />2011/04/18<br />メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)<br />33<br />
  34. 34. まとめ<br />この講義ではユーザインタフェースについて考えていきます<br />最終課題を出さないとDです<br />課題の提出率が3割切ってもDです<br />PCが必要なのでもってきてください<br />2011/04/18<br />メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)<br />34<br />

×