dtp・印刷業界にも必須！ webの標準知識...

クロスメディア・コンファランス

DTP・印刷業界にも必須！Webの標準知識

（Webリテラシー）

自己紹介

http://www.dtp-transit.jp

本編

本日のアジェンダ

紙媒体とWebの違いについてサイトの効果を高めるために模擬試験

Webプロジェクトの3要素

紙媒体とWebの違いについて

紙媒体とWebの「常識」の違い

ブラウザの特性ブラウザの制限インタラクション

ブラウザの種類

OS（Windows、Mac OS9、Mac OS X）種類（IE、Firefox、Safari, Opera）バージョン

ユーザー・エージェント

Mac

FirefoxSafari（デフォルト）

Windows

Internet Explorer 6.0• （依然、シェア高い）Internet Explorer 7.0• Windows VistaのデフォルトInternet Explorer 8.0

さらに

スクリーン音声ブラウザ携帯電話PDA• iPhone• iPod touchNintendo DSWii

ブラウザの制限

フォント指定行頭行末揃え文字ツメ

タイポグラフィ、組版にこだわるときには、

テキストは画像化し、代替テキストを設定

検索対象とならないことがあるので注意

ユニバーサリティ

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. （Tim Berners-Lee）

Webの力はその普遍性にある。障害（の有無）に関わらない、あらゆる人による利用が本質的な姿なのだ。

サイトの検証

各種ブラウザでの閲覧CSSを切った状態画像をオフJavaScriptをオフ音声ブラウザでブラウズプリントアウト（モノクロ／カラー両方）ディグダグ・テキスト・テスト各種モニタサイズ

Firefox

Firefox + Web Developer

ハイパーリンク

リンク箇所は• 青い文字（訪問済みは紫）• 下線が付いている• マウスオーバーすると「指差アイコン」に

リンク箇所以外には下線をつけない紛らわしい文字のカラーリングは行わない

サイトの効果を高めるために

集客施策

ほとんどのユーザーは、検索サイトを介してサイトに訪れる

SEO

SEM

Yahoo!• オーバーチュアGoogle• アドワーズ

導線、回遊

検索エンジンから「着地」したページからの導線を最適化する

成約の最終ポイント

フォームからの離脱を減らすこと

ユーザーとのコミュニケーション

ブログ、SNStwitter

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 Garrettjjg@jjg.net

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/

Web検定　模擬試験

Webで使われるファイル形式

ビットマップベース‒ GIF‒ JPEG‒ PNGベクトルベース‒ SWF

ビットマップ ベクトル

普及している

あまりしていない

GIF形式の特徴

256色以内（8ビットカラー）ベタ面が多い画像向き透過GIFアニメーション（プラグイン不要）

JPEG形式の特徴

フルカラー写真などに向く‒ テキストなどの処理には注意非可逆圧縮透明部分はもてない段階的圧縮

PNG形式の特徴

2つの形式‒ PNG-8（256色）‒ PNG-24（フルカラー）8ビットのアルファチャンネル（半透明の透過）

GIF JPEG PNG-8 PNG-32

拡張子 .gif .jpg .png.png

8bit 24bit 8bit 24bit

色数 256色 1670万色 256色 1670万色

インデックス フルカラー インデックス フルカラー

透過 ○1bit × × ○

8bit

アニメ ○ × × ×

最適化書き出し

画質を保持しながら、ファイルサイズ（バイナリ容量）を小さく書き出すこと

SWF形式の特徴

Flash Playerが必要‒ 普及率は100%近いが、Playerにもバージョンが存在する