dtp・印刷業界にも必須! webの標準知識...
TRANSCRIPT
![Page 1: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/1.jpg)
クロスメディア・コンファランス
DTP・印刷業界にも必須!Webの標準知識
(Webリテラシー)
![Page 2: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/2.jpg)
自己紹介
![Page 3: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/3.jpg)
![Page 4: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/4.jpg)
![Page 5: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/5.jpg)
![Page 6: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/6.jpg)
http://www.dtp-transit.jp
![Page 7: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/7.jpg)
![Page 8: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/8.jpg)
![Page 9: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/9.jpg)
本編
![Page 10: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/10.jpg)
本日のアジェンダ
紙媒体とWebの違いについてサイトの効果を高めるために模擬試験
![Page 11: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/11.jpg)
![Page 12: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/12.jpg)
Webプロジェクトの3要素
![Page 13: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/13.jpg)
紙媒体とWebの違いについて
![Page 14: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/14.jpg)
紙媒体とWebの「常識」の違い
ブラウザの特性ブラウザの制限インタラクション
![Page 15: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/15.jpg)
![Page 16: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/16.jpg)
ブラウザの種類
OS(Windows、Mac OS9、Mac OS X)種類(IE、Firefox、Safari, Opera)バージョン
ユーザー・エージェント
![Page 17: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/17.jpg)
Mac
FirefoxSafari(デフォルト)
![Page 18: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/18.jpg)
Windows
Internet Explorer 6.0• (依然、シェア高い)Internet Explorer 7.0• Windows VistaのデフォルトInternet Explorer 8.0
![Page 19: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/19.jpg)
さらに
スクリーン音声ブラウザ携帯電話PDA• iPhone• iPod touchNintendo DSWii
![Page 20: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/20.jpg)
![Page 21: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/21.jpg)
![Page 22: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/22.jpg)
![Page 23: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/23.jpg)
![Page 24: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/24.jpg)
![Page 25: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/25.jpg)
![Page 26: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/26.jpg)
![Page 27: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/27.jpg)
ブラウザの制限
フォント指定行頭行末揃え文字ツメ
タイポグラフィ、組版にこだわるときには、
テキストは画像化し、代替テキストを設定
検索対象とならないことがあるので注意
![Page 28: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/28.jpg)
ユニバーサリティ
The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. (Tim Berners-Lee)
Webの力はその普遍性にある。障害(の有無)に関わらない、あらゆる人による利用が本質的な姿なのだ。
![Page 29: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/29.jpg)
サイトの検証
各種ブラウザでの閲覧CSSを切った状態画像をオフJavaScriptをオフ音声ブラウザでブラウズプリントアウト(モノクロ/カラー両方)ディグダグ・テキスト・テスト各種モニタサイズ
![Page 30: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/30.jpg)
Firefox
![Page 31: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/31.jpg)
Firefox + Web Developer
![Page 32: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/32.jpg)
![Page 33: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/33.jpg)
ハイパーリンク
リンク箇所は• 青い文字(訪問済みは紫)• 下線が付いている• マウスオーバーすると「指差アイコン」に
リンク箇所以外には下線をつけない紛らわしい文字のカラーリングは行わない
![Page 34: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/34.jpg)
![Page 35: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/35.jpg)
![Page 36: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/36.jpg)
![Page 37: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/37.jpg)
![Page 38: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/38.jpg)
![Page 39: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/39.jpg)
![Page 40: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/40.jpg)
![Page 41: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/41.jpg)
サイトの効果を高めるために
![Page 42: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/42.jpg)
![Page 43: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/43.jpg)
![Page 44: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/44.jpg)
集客施策
ほとんどのユーザーは、検索サイトを介してサイトに訪れる
![Page 45: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/45.jpg)
SEO
![Page 46: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/46.jpg)
![Page 47: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/47.jpg)
SEM
Yahoo!• オーバーチュアGoogle• アドワーズ
![Page 48: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/48.jpg)
![Page 49: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/49.jpg)
![Page 50: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/50.jpg)
![Page 51: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/51.jpg)
![Page 52: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/52.jpg)
![Page 53: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/53.jpg)
導線、回遊
検索エンジンから「着地」したページからの導線を最適化する
![Page 54: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/54.jpg)
![Page 55: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/55.jpg)
![Page 56: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/56.jpg)
![Page 57: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/57.jpg)
![Page 58: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/58.jpg)
![Page 59: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/59.jpg)
![Page 60: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/60.jpg)
成約の最終ポイント
フォームからの離脱を減らすこと
![Page 61: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/61.jpg)
![Page 62: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/62.jpg)
ユーザーとのコミュニケーション
ブログ、SNStwitter
![Page 63: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/63.jpg)
![Page 64: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/64.jpg)
![Page 65: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/65.jpg)
![Page 66: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/66.jpg)
The Elements of User ExperienceA basic duality: The Web was originally conceived as a hypertextual information space;but the development of increasingly sophisticated front- and back-end technologies hasfostered its use as a remote software interface. This dual nature has led to much confusion,as user experience practitioners have attempted to adapt their terminology to cases beyondthe scope of its original application. The goal of this document is to define some of theseterms within their appropriate contexts, and to clarify the underlying relationships amongthese various elements.
Jesse James [email protected]
Visual Design: graphic treatment of interfaceelements (the "look" in "look-and-feel")
Information Architecture: structural designof the information space to facilitateintuitive access to content
Interaction Design: development ofapplication flows to facilitate user tasks,defining how the user interacts withsite functionality
Navigation Design: design of interfaceelements to facilitate the user's movementthrough the information architectureInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding
Functional Specifications: "feature set":detailed descriptions of functionality the sitemust include in order to meet user needs
User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site
Content Requirements: definition ofcontent elements required in the sitein order to meet user needs
Interface Design: as in traditional HCI:design of interface elements to facilitateuser interaction with functionalityInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design: visual treatment of text,graphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site
This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development)that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within auser experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.
task-oriented information-oriented
30 March 2000
© 2000 Jesse James Garrett http://www.jjg.net/ia/
![Page 67: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/67.jpg)
![Page 68: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/68.jpg)
![Page 69: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/69.jpg)
![Page 70: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/70.jpg)
Web検定 模擬試験
![Page 71: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/71.jpg)
Webで使われるファイル形式
ビットマップベース‒ GIF‒ JPEG‒ PNGベクトルベース‒ SWF
![Page 72: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/72.jpg)
ビットマップ ベクトル
普及している
あまりしていない
![Page 73: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/73.jpg)
GIF形式の特徴
256色以内(8ビットカラー)ベタ面が多い画像向き透過GIFアニメーション(プラグイン不要)
![Page 74: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/74.jpg)
JPEG形式の特徴
フルカラー写真などに向く‒ テキストなどの処理には注意非可逆圧縮透明部分はもてない段階的圧縮
![Page 75: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/75.jpg)
PNG形式の特徴
2つの形式‒ PNG-8(256色)‒ PNG-24(フルカラー)8ビットのアルファチャンネル(半透明の透過)
![Page 76: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/76.jpg)
GIF JPEG PNG-8 PNG-32
拡張子 .gif .jpg .png.png
8bit 24bit 8bit 24bit
色数 256色 1670万色 256色 1670万色
インデックス フルカラー インデックス フルカラー
透過 ○1bit × × ○
8bit
アニメ ○ × × ×
![Page 77: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/77.jpg)
![Page 78: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/78.jpg)
最適化書き出し
画質を保持しながら、ファイルサイズ(バイナリ容量)を小さく書き出すこと
![Page 79: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/79.jpg)
![Page 80: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/80.jpg)
![Page 81: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/81.jpg)
SWF形式の特徴
Flash Playerが必要‒ 普及率は100%近いが、Playerにもバージョンが存在する
![Page 82: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/82.jpg)
![Page 83: DTP・印刷業界にも必須! Webの標準知識 (Webリテラシー)dtp-transit.jp/dl/page2010_crossmedia_webken_takano.pdfクロスメディア・コンファランス DTP・印刷業界にも必須!Webの標準知識](https://reader035.vdocuments.net/reader035/viewer/2022071109/5fe3c7e11336914e1b219533/html5/thumbnails/83.jpg)