Embed Size (px)
Citation preview
Webデザイン実践#1-1 オリエンテーション、情報デザイン
© D.Mitsuhashi 1
地震発⽣時の対応
• 地震が発⽣した場合には、慌てず机の下にもぐりこむなどして揺れが収まるのを待つこと
• 窓ガラス沿いに着席した学⽣は窓ガラスから離れる• 通路沿いに着席した学⽣はドアを開けて避難路を確保する
© D.Mitsuhashi 3
地震発⽣時の対応
• 教員の指⽰に従って落ち着いて避難する• 建物をでる際にはエスカレーター、エレベーターは利⽤しない
こと• 14号館の避難場所は、11号館と14号館の間の広場です
© D.Mitsuhashi 4
この講義のねらい
1. 「情報デザイン」の理解• 情報の整理・まとめ⽅• ユーザビリティ・デザイン
2. Web ライティング技術の習得• Web標準技術についての理解
• HTML5• CSS3
3. 最新の Web 技術に関する知識と理解
© D.Mitsuhashi 5
この講義のねらい
• テキストエディタを⽤いて、タグを記述する古典的な⽅法でWeb ページを構築する
• Web オーサリングソフトウェアを⽤いる現代的な Web サイトの作成法ではない
• Web サイトの基礎的な記述法と構造を理解する上では有⽤• Web ライティング技術の基礎⼒をつける
© D.Mitsuhashi 6
これまでの授業アンケートから
中級者向けと聞いていたのに、途中から難しすぎてついていけない。
• 「情報科学の基礎」の単位を取得できる程度の学⽣を想定しています。
• PC の知識や使い⽅に不安があるレベルの場合は受講をおすすめしません。
© D.Mitsuhashi 7
これまでの授業アンケートから
HTML と CSS だけで Web ページを作るのは現代的ではない。他の知識を学べると思ったのにがっかりだ。
• シラバスに HTML と CSS を扱うと書いてあります。
• サーバーサイドWebプログラミングや、クライアントサイドWebプログラミングについては、GEC設置の講義を受講してください（いずれも初級、中級あり）。
© D.Mitsuhashi 8
（参考）JavaScript 独習サイト
• CODEPREP（⽇本語）https://codeprep.jp/
• Progate(⽇本語）https://prog-8.com/
• ドットインストール（⽇本語）http://dotinstall.com/
• Codecademy（英語）http://www.codecademy.com/
© D.Mitsuhashi 9
これまでの授業アンケートから
講義についてのクレームではありませんが、⼤学のPC環境がひどすぎて作業が困難です
• この環境で対応してください。• 持ち込みのPCを利⽤して構いません（Mac も
可）
© D.Mitsuhashi 10
本講義で扱わないこと
• FLASH, JAVAなどで作成する動的コンテンツ• クライアントサイド・プログラミング（JavaScript）
• * jQuery は簡単に紹介します *• サーバサイド・プログラミング（PHP、Ruby、Python など）
• ⾳声編集• 動画編集• blog、 wiki、 SNS などの設置、構築
© D.Mitsuhashi 11
受講に必要なもの
• 筆記⽤具• ノート• ペン（⾊分けできるものが望ましい）
• USB メモリ• 8GB 程度あれば⼗分• ⼤学⽣協で扱われているもの以外は、学内 PC で使えない場合がある
ので注意すること
© D.Mitsuhashi 12
講義のすすめ⽅
• 講義（60分程度）• PC を⽤いない内容の場合は90分講義をおこなう場合もある• 通常の講義と同様、ノートをとること• スライドは補⾜的に⽤いる
操作実演と板書による講義
• 演習（30分程度）• 講義時間内で作業を完結する余裕はない• 各⾃、講義時間外に作業をすすめること
• 休み時間（10分）• 3限と4限の間の休み時間は15分ですが、連続した講義のため 10 分と
します• 4限は早めに終ります
© D.Mitsuhashi 13
講義のすすめ⽅
• 講義資料について• 講義資料は教室共有フォルダに、講義開始時にアップロードし
ます• 同時に講義資料ページにも添付ファイルとしてアップロードし
ます• http://www.aoni.waseda.jp/mhashi/
• 講義を⽋席した場合は⽬を通しておくこと
© D.Mitsuhashi 14
講義のすすめ⽅
• 質問について• 講義時間中には個別の質問に対応しきれない場合があります
その場合は直接メールにて質問してください
• メールアドレスは [email protected]
• ⼤学のメールアドレスは受信可能にしておくこと• 連絡が取れない場合は、再度連絡を試みることをしません• 転送設定など確認しておくように
• Course N@vi のメッセージ機能は使わないこと
© D.Mitsuhashi 15
単位について
• 出席はとらない（出席は原則）• 出席点はつけません• ⽋席・遅延届けは必要ない
• 課題として作成する「Web ページ」で評価します• Web ページは学内サーバにアップロードしていることが前提です
• アップロードできていない場合には点が付きません• 最終回に講評会を⾏うので、それを受けて改善を施してください
• HTML、CSS が適切に記述されているか（jQuery はオプション）、ユーザビリティやアクセシビリティの配慮がなされているか、情報は適切に整理されているか、講評会でのフィードバックを受けて改善がなされているかなどを評価します。
© D.Mitsuhashi 16
課題 Web ページについて
• 内容は公序良俗に反しない限りにおいて⾃由• 例）サークル，研究室，趣味，お店のサイト…• 政治的、思想的、宗教的、⺠族的な内容は、閲覧者によっては不快に
感じられるものがあるため避けること（どうしても取り扱いたい場合は要相談）
• ⾔語は⽇本語もしくは、英語• ただし講評会での質疑応答は⽇本語で
• テーマは次週までに確定すること• スタートで出遅れると、完成が間に合わなくなります• 4限にテーマの決め⽅について講義します
© D.Mitsuhashi 17
ACPA
• 「Webデザイン実践」の単位を取得すると、ACPA 実務能⼒認定機構より、Web ページ作成能⼒の認定を受けることができます
• ACPA 実務能⼒認定機構• http://www.acpa.jp/
© D.Mitsuhashi 18
Web 技術と情報デザイン
© D.Mitsuhashi 19
講義ではこの部分を扱う
Web 技術の⾒取り図
ハードウェア技術 ソフトウェア技術 ネットワーク技術
情報圧縮技術 暗号化技術
テキスト 画像・動画 ⾳声
© D.Mitsuhashi 20
マルチメディアとしての Web 技術
• マルチメディアとは、複数のメディアが協同的に情報を伝達する仕組みのこと
• Web は情報を伝達するマルチメディアである
実装する技術群
• HTML/XHTML• CSS• JavaScript• SQL• PHP,Ruby,Python…
© D.Mitsuhashi 21
情報デザインの必要性© D.Mitsuhashi 22
情報を伝達するには
• 情報を伝達するには
• 情報を収集し、• 情報を整理し、• 情報を具体化（視聴覚化）
する
• この⼀連の⼿続きを「情報デザイン」とよぶ
具体化
整理
収集
© D.Mitsuhashi 23
情報デザインの⾒取り図
• UXデザイン• ユーザのが利⽤する経験そのものをデザインする• サービスや情報そのものではなく、利⽤した体験すべてを含む
（わかりやすかった！使いやすかった！楽しかった...）• UIデザイン
• ユーザが利⽤するインタフェースのデザイン• ボタンやリンクの配置や、アイコン、⽂字の⼤きさなど
• ユーザビリティデザイン• ユーザが利⽤する上での使いやすさのデザイン
• アクセシビリティデザイン• ユーザが情報に到達できるかどうかを決定するデザイン
© D.Mitsuhashi 24
UXデザイン
情報デザインの⾒取り図
© D.Mitsuhashi 25
アクセシビリティデザイン
ユーザビリティデザイン
UIデザイン
情報デザインケーススタディ
• ⾃治体Web サイトの⽐較• 分かりやすい印象を持たせるサイトはどこだろうか？
• Webサイトで以下の情報を調べてみよう• 地域のゴミ分別についての情報はどこか• 図書館の蔵書検索システムのリンクはどこか• 住所変更⼿続きの詳細はどこか
© D.Mitsuhashi 26
ケーススタディ（厚⽊市）
https://www.city.atsugi.kanagawa.jp/© D.Mitsuhashi 27
ケーススタディ（さいたま市）
© D.Mitsuhashi 28
https://www.city.saitama.jp/index.html
ケーススタディ（豊島区）
http://www.city.toshima.lg.jp/index.html© D.Mitsuhashi 29
ケーススタディ（北区）
http://www.city.kita.tokyo.jp/index.html© D.Mitsuhashi 30
Web サイトを使いにくいと感じさせる要因
• 項⽬が多すぎる• 情報が整理されていない印象
• 情報の包含関係が分からない• ユーザが想定する情報の構造（メンタルモデル）と⾷い違っている
• ⽂字が⼩さすぎる• 詰め込みすぎると⽂字が相対的に⼩さくなる
© D.Mitsuhashi 31
Webサイトを使いやすいと感じさせる要因
• 余⽩が適切にとられている• 情報の包含関係が整理されている• 項⽬が少ない• ⽂字が⼤きい• アイコンや画像などビジュアルで表現されている
• 何の⽤途で⽤意された項⽬なのかがすぐに理解できる（アフォーダンスを抽出しやすいデザインである）
© D.Mitsuhashi 32
アフォーダンスとデザイン
• アフォーダンス（Affordance）• 知覚⼼理学者ギブソンによる造語• afford（〜をすることができる、〜を提供する）
の名詞形• 環境に存在する⾏為の可能性
• 認知⼼理学者ノーマンがデザインに応⽤• アフォーダンスを発⾒しやすい特徴をシグニファイアと名付けた
• 参考• D.A. ノーマン 岡本明、安村通晃、伊賀聡⼀郎、野嶋久雄（訳）2015
「誰のためのデザイン？ 増補・改訂版」新曜社
Donald Norman [1935- ]
© D.Mitsuhashi 33
よりよいUIデザイン
• ケーススタディ：ガスコンロ（使いにくいデザイン）
1 2 3 4
A
B
C
D
© D.Mitsuhashi 34
よりよいUIデザイン
• ケーススタディ：ガスコンロ（使いやすいデザイン）
1 2 3 4
A
B
C
D
© D.Mitsuhashi 35
アフォーダンスの具体化
• アフォーダンス（どのように利⽤できるのかという情報）をすぐに受け取ることができるデザインを検討する
• アフォーダンスが⾒つかりやすい特徴（シグニファイア）をデザインに取り⼊れる
• ケーススタディ：ガスコンロの場合• ⽤途（グリルとバーナー）の別と、バーナー、スイッチの位置関係を
⼀致させている• ケーススタディ：ドアの場合
• 押すと引くという⽤途を具体化できるか？
押PUSH
引PULL
© D.Mitsuhashi 36
よりよいUIデザイン
引く 押す© D.Mitsuhashi 37
Web のUIデザイン
• 押すことができるという⾝体的な情報をデザインに具体化する
• 影やグラデーションをつけたり、押したボタンが凹んで⾊が変わるなどの⼯夫で分かりやすくなる
• スキューモーフィズム現実世界と同じシグニファイアを⽤意すること
フラットデザイン スキューモーフィックデザイン
© D.Mitsuhashi 38
Flat UI Elements Attract Less Attention and Cause Uncertainty:Nielsen Norman Grouphttps://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/
スキューモーフィックデザインとフラットデザイン• 近年、ドロップシャドウや光沢を排したフラットデザインが流
⾏している（iOS や Windows が典型）• 既にコンピュータに何ができるかは周知されているため、不必
要なシグニファイアをなくし、より単純化すべきという考え⽅• 状況によってはアフォーダンスが伝わらないため、ユーザの⾏
動分析が必要
© D.Mitsuhashi 39
iOS 計算機アプリデザインの変遷左から iOS6,iOS10,iOS13
使いやすい Web サイトにするには？
• 冗⻑性の排除• 内容が重複していたり、不必要な情報は排除する
• メンタルモデルの視覚的対応付け• 制作者の（情報の構造に対する）メンタルモデルを、
視覚的に対応付けする
• 利⽤可能性の提供• 情報を伝えやすくするためには、アフォーダンスを発⾒しやすいシグ
ニファイアを取り⼊れる
© D.Mitsuhashi 40
