• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
MP2011#01
 

MP2011#01

on

  • 676 views

 

Statistics

Views

Total Views
676
Views on SlideShare
619
Embed Views
57

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 57

http://chikoski.info 56
http://1nr0nn12y.tumblr.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    MP2011#01 MP2011#01 Presentation Transcript

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