明日から使える

明日から使える

今ドキッ！

今ドキッ！

ののWeb

Webデザイン

デザイン

オブジェクト倶楽部イベントサイト

オブジェクト倶楽部イベントサイト

全て

全てまるっと

まるっとスリっとゴリっと

スリっとゴリっと

エブリシングお見通しだ！

エブリシングお見通しだ！

自己紹介

自己紹介

��名前：岸田

名前：岸田健一郎

健一郎

��所属：永和システムマネジメント（③年）

所属：永和システムマネジメント（③年）

��仕事：

仕事：プログラミング、ネットワーク構築

プログラミング、ネットワーク構築、、WEB

WEB

デザイン

デザインなど。

など。2006

2006年年夏イベント

夏イベントからは

からはオブオブ

ジェクト倶楽部

ジェクト倶楽部イベント

イベント担当

担当デザイナー

デザイナー

��好きなもの：

好きなもの：Mac

Mac、、スウェーデン

スウェーデン

��夢夢：：IKEA

IKEA御殿に住むこと。

御殿に住むこと。

アジェンダ

アジェンダ

��オブジェクト倶楽部なのに

オブジェクト倶楽部なのにWEB

WEBデザイン？

デザイン？

��デザインにもワークフローやプロセスがある

デザインにもワークフローやプロセスがある

��CSS

CSSはオブジェクト指向

はオブジェクト指向

��Web

Webアプリが

アプリがMVC

MVCならデザインは

ならデザインはSD

SDの分離

の分離

��オブラブサイトを見てみよう

オブラブサイトを見てみよう

��まとめ

まとめ

オブラブなのに

オブラブなのにWEB

WEBデザイン？

デザイン？

��WEB

WEBデザインも構造化からオブジェクト指向

デザインも構造化からオブジェクト指向

��ユーザビリティ重要

ユーザビリティ重要

��インフォメーション・アーキテクチャ

インフォメーション・アーキテクチャ(IA)

(IA) が柱

が柱

��アクセシビリティに配慮

アクセシビリティに配慮

ユーザビリティ

ユーザビリティ

��アクセスしたユーザが目的（オブジェクト）へ

アクセスしたユーザが目的（オブジェクト）へ

到達するための使い勝手

到達するための使い勝手

��情報構造が重要

情報構造が重要

��操作性の高いナビゲーションモデル

操作性の高いナビゲーションモデル

良いユーザビリティとは？

良いユーザビリティとは？

��サイト構造：情報が組織化されている。

サイト構造：情報が組織化されている。

��レイアウト：情報が優先性を持っている

レイアウト：情報が優先性を持っている

��効率性：目的まで容易に到達できる

効率性：目的まで容易に到達できる

��明確性：一目見てページ内容を理解できる

明確性：一目見てページ内容を理解できる

��直感性：利用方法が見ただけで理解できる

直感性：利用方法が見ただけで理解できる

��一貫性：レイアウト、色、導線が一貫している

一貫性：レイアウト、色、導線が一貫している

��認識性：自分のいる場所がわかる

認識性：自分のいる場所がわかる

��ヘルプ：ユーザが迷ったときへの配慮がある

ヘルプ：ユーザが迷ったときへの配慮がある

インフォメーションアーキテクチャ

インフォメーションアーキテクチャ

��今ドキの

今ドキのWeb

Webサイトデザインで重要な技術

サイトデザインで重要な技術

��考え方はオブジェクト図やクラス図と同じ

考え方はオブジェクト図やクラス図と同じ

��つまりオブジェクト分析

つまりオブジェクト分析

��最終的な成果はサイトマップ

最終的な成果はサイトマップ

良い

良いIAIAとは？

とは？

��わかり易いラベリング（名前付け重要！）

わかり易いラベリング（名前付け重要！）

��表記方法の統一（トップ？ホーム？）

表記方法の統一（トップ？ホーム？）

��重要な情報はスクロールしない位置に

重要な情報はスクロールしない位置に

��適切な情報分析

適切な情報分析

��ナビゲーションがそれであるとわかる

ナビゲーションがそれであるとわかる

��サイトマップや検索などで困った時に対応

サイトマップや検索などで困った時に対応

アクセシビリティ

アクセシビリティ

��年齢や障害などに関係なく目的へ到達させる

年齢や障害などに関係なく目的へ到達させる

��WCAG

WCAGととJIS

JISのガイドラインを理解する

のガイドラインを理解する

��チェック方法

チェック方法

��AIS(IE

AIS(IEのツールバーで動作）、各国語版がある

のツールバーで動作）、各国語版がある

��富士通

富士通WebInspector

WebInspector （高齢者・障害者が読み易

（高齢者・障害者が読み易

いか診断できる）

いか診断できる）

デザインにもワークフロー

デザインにもワークフロー

1.

1.コンテンツ作成

コンテンツ作成

��テキストベースの文書作成

テキストベースの文書作成

2.

2.意味づけ

意味づけ

��見出し・段落・リスト・表といった単位で文書を体

見出し・段落・リスト・表といった単位で文書を体

系付ける

系付ける

3.

3.マークアップ

マークアップ

4.

4.名前付け

名前付け

5.

5.レイアウティング

レイアウティング

XHTML

XHTMLとはとは

��なんで

なんでHTML

HTMLじゃぁまずいの？

じゃぁまずいの？

��HTML

HTMLと何が違うの？

と何が違うの？

��XHTML1.1

XHTML1.1とはとは

CSS

CSSはオブジェクト指向

はオブジェクト指向

��セレクタを理解する

セレクタを理解する

��ユニバーサルセレクタ

ユニバーサルセレクタ⇒⇒**で全てのタグに適用

で全てのタグに適用

��シンプルセレクタ⇒

シンプルセレクタ⇒div

divのように特定タグに適用

のように特定タグに適用

��IDIDセレクタ⇒

セレクタ⇒id=

id=““userid

userid””のように適用

のように適用

��クラスセレクタ⇒

クラスセレクタ⇒class=

class=““left

left””のように適用

のように適用

��子孫セレクタ⇒

子孫セレクタ⇒body div h1

body div h1 のように適用

のように適用

��CSS2.0

CSS2.0ではでは

��子供セレクタ、隣接兄弟セレクタ、属性セレクタな

子供セレクタ、隣接兄弟セレクタ、属性セレクタな

ども利用可能

ども利用可能

Web

Webアプリは

アプリはMVC

MVC、デザインは

、デザインはSD

SD

��SD

SDとは構造

とは構造(Structure)

(Structure) とデザイン

とデザイン(Design)

(Design) をを

分離すること

分離すること

��XHTML

XHTMLで構造、

で構造、CSS

CSSでデザイン

でデザイン

��XHTML1.1

XHTML1.1では厳密となる

では厳密となる

オブラブサイトを見てみよう

オブラブサイトを見てみよう

��デモ

デモ

まとめ

まとめ

��WEB

WEBデザインだからといって、侮るなかれ

デザインだからといって、侮るなかれ

��時代は

時代はXHTML1.1+CSS2.0

XHTML1.1+CSS2.0へへ

��みんなもデザインジニアになろう！

みんなもデザインジニアになろう！