Your SlideShare is downloading. ×
0
MP2011#01
MP2011#01
MP2011#01
MP2011#01
MP2011#01
MP2011#01
MP2011#01
MP2011#01
MP2011#01
MP2011#01
MP2011#01
MP2011#01
MP2011#01
MP2011#01
MP2011#01
MP2011#01
MP2011#01
MP2011#01
MP2011#01
MP2011#01
MP2011#01
MP2011#01
MP2011#01
MP2011#01
MP2011#01
MP2011#01
MP2011#01
MP2011#01
MP2011#01
MP2011#01
MP2011#01
MP2011#01
MP2011#01
MP2011#01
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

MP2011#01

603

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
603
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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です
    課題の提出率が3割切ってもDです
    PCが必要なのでもってきてください
    2011/04/18
    メディア表現技法a / N. Shimizu (chikoski@kaetsu.ac.jp)
    34

×