2009年1月アーカイブ

今日のポイント

Flashに標準で用意されている外部テキスト入力のフォーマットはURLエンコードされた変数の形式が使われている。

Flashでは，XMLを読み込んでデータを解析し動的に処理できる。

Flashは，GETもしくはPOSTメソッドでサーバーにデータを送信し，返り値を受け取ることができる。

Flashとサーバーの連携で可能になること

Flashの標準出力形式－SWFは，画像やデータなどがまとまったパッケージで構成されており，新しく情報をFlash内に取り込む場合は外部テキストより取得することが必要である。

Flashとサーバー間の通信データ形式

Flashとサーバーとの連携で多く利用されているのがPOST形式やGET形式を使ったテキスト形式でのデータ送受信である。

その他の通信方法

FLASHでは，URL円コーディングされた変数の書式やXML以外にも，プログラミング次第で様々な形式を読み込むことが可能。

サーバー連携で制作が可能になるコンテンツ

現在，Flashとサーバーが連動したコンテンツとして，不動産のエリアナビゲーションや格安航空券チケットの購入手続きなど，ユーザー主導で直感的に検索を行いたいリサーチタイプのコンテンツや，アンケートやクイズなどエンターテインメント性の高いコンテンツが浸透している。

サーバー連動型Flashの仕組み

多くのコンテンツがXML形式を採用している理由のひとつに文法が厳格であるため，エラーをチェックしやすいことが挙げられる。

今日のポイント

Flashに限らず，UIの設計は，既存ユーザーの習慣を踏まえたものが望ましい。

ボタンは，マウスでの操作が中心となるFlash上で展開されるナビゲーションの基本概念である

Flashを使った複雑な画面遷移を伴うGUIは，スクリプトを使って実現される。

Flashによるユーザーインターフェイスの基本

Flashは，バージョン5以降で実装されたActionScriptにより本格的なスクリプト実行環境が整い，FlashをUIとしても扱われる機会も増えてきた。

FlashのUI設計で気をつける点

Flashはクリックによるアクションがベースにあり，タッチパネルデバイスとの相性が良い。

Flash UIの用途

• サイトイメージ
• フォーム
• メディアプレーヤー

設計の際に把握しておく事柄

Adobe FlexはFlashで行うが，SWFはサーバーサイドで生成される。

Flash UIの仕組み

• ActionScript
• レイヤー
• タイムライン
• リンケージ

Flash UIの制作の効率化

Flash UIとHTMLに埋め込まれたJavaScriptと連携したり，SharedObjectに現在のUIの状態を随時記録することで，よりフレキシブルな使い勝手を実現できる。

今日のポイント

Flashの塗りは，線よりも再生パフォーマンスが高い。線は太いほど再生に負荷がかかり，パフォーマンスは下がる。

高品質なビットマップ画像やサウンドおよびビデオは，SWFに含むとファイルサイズが大きくなるため，外部から読み込むこともある。

アニメーションは複数のSWFファイルで構成することができる。長いムービーなどは分割して制作・配信を行う。

Flashアニメーションの仕様

フレームレートが高いほどスムーズにアニメーションが動くが，Web用の場合，12fls－30flsあたりが妥当。

Flashアニメーションの制作

• フレームとトゥイーン
• イメージの作画とシンボル変換
• オーサリング

Flashにおけるモーショングラフィックス

広告の分野，画面遷移や，インターフェイスの出現時にも，モーショングラフィックスがよく使われる。

モーショングラフィックスの制作手法

ActionScriptで用意されているTweenクラスで，モーショングラフィックスの制御が可能

今日のポイント

FlashはWebページ内に埋め込まれている形で表示されるが，表示できないデバイスがある点にも配慮する

Flashで使われているスクリプト言語は，JavaScriptと同様の文法を持つActionScriptである

Flashは高機能で様々なことができてしまうため，目的に合わせた使い方が重要となる

Flashの日本語処理状況

^{Flashは文字コードをUTF-8で内部処理しているため，日本語の処理が可能である。ただし，プレーヤーでのダイナミックテキストへのフォントの表示という点ではまだ英語圏に追い付いていない。ダイナミックテキストとは，処理によって内容が変化するタイプのテキストフィールドである。Flashはフォントの埋め込みが可能である。ダイナミックテキストにフォントを埋め込む場合，英字であれば数十－百文字程度のフォント情報で済む。
日本語の場合，使用頻度の高い第一水準で3,489文字であるためフォント情報だけで数MBのサイズになってしまう。多くの日本語が使用されるダイナミックテキストではデバイスフォントと呼ばれるシステムで使われているフォントを使用することが多い。}

今日のポイント

使用するチェックツールや動作確認に用いる音声読み上げソフトウェアをあらかじめ決めて統一しておく

ガイドライン各項目ごとの具体的な事例を蓄積していき，そのノウハウをWebサイトの運用者や制作者で共有する

ユーザーテストなどを通じて，できるだけ多くのユーザーの生の声を収集して，Webサイトの改善に役立てる

主なアクセシビリティのチェック（例）

（X）HTMLソースコード

CSS

アクセシビリティ・ガイドライン

コントラスト（色）

各種チェック／シュミレーション

音声読み上げ

JIS X 8341-3 第6章

6.情報アクセシビリティの確保・向上に関する全般的要件

6.1企画・制作に関する要件

^{Webコンテンツの情報アクセシビリティが容易に維持できるよう企画・制作しなければならない}

6.2保守及び運用に関する要件

^{Webコンテンツを保守及び運用するときは，情報アクセシビリティの品質を確保し，向上させなければならない}

6.3検証に関する要件

^{Webコンテンツの企画・制作を行う者は，Webコンテンツがこの規格の要件を満たしていることを検証しなければならない}

6.4フィードバックに関する要件

^{Webコンテンツの企画・制作を行う者は，利用者の意見を収集する窓口を用意し，利用者からの意見をWebコンテンツの情報アクセシビリティの確保・向上に活かさなければならない}

6.5サポートに関する要件

^{利用者とコミュニケーションが取れるよう，問い合わせ先をWebコンテンツ上の分かりやすい位置に明示しなければならない}

今日のキーワード

JIS X 8341-3 の第6章の適用

特に，ユーザーからの意見や要望を収集するための仕組み（フォーム，電話，FAX，郵送など）を提供するこが大切。また，ユーザーテストを定期的に実施するなどして，ユーザー中心設計という手法を取り入れるべきである

JIS X 8341-3 と WCAG2.0

JIS X 8341-3には，日本語特有の問題など，従来のWCAG1.0や米国リハビリテーション法508条のガイドラインにはなかった独自の項目もある。しかし，W3CのWCAGワーキンググループとの"国際協調"で，WCAG2.0にも適用される方向で進められている。

今日のポイント

JIS X 8341-3などの公的なガイドラインをベースにして，Webサイトに合わせた独自のガイドラインを作成する

ガイドラインの内容は，Webサイトの運営者やコンテンツの制作者・開発者などを中心に，関係者全員で正しく理解して共有する

Webサイト全体のアクセシビリティ確保レベルは，初期段階の基本設計および詳細設計で決まる

Flashのアクセシビリティ（例）

ポイント

1. 代替テキストを提供する
2. 画面の状況を伝える
3. 音声読み上げ順序に注意する
4. アニメーションを制御する
5. キーボードだけでも操作可能にする
6. 段階的に操作オプションを提供する
7. コンポーネントのアクセシビリティを有効にする
8. 音声にはキャプション（字幕）を提供する
9. 音声の再生を制御できるようにする
10. 注意をもって色を使用する
11. 弱視ユーザーをサポートする

^{Flashのアクセシビリティは，バージョンアップごとに向上している，常に最新情報をアドビ システムズのサイトで確認するとよい}

アドビ システムズ：アクセシビリティ リソースセンター

今日のポイント

画面上の文字情報やソースコードのテキスト情報は，合成音声や点字に変換できる
_{（ただし，画面上の文字等は除く）}

OS標準のアクセシビリティ機能で，画面拡大，白黒反転表示，スクリーン・キーボードの使用などができるほか，専用の支援技術ソフトウェアもある

マウスを使用できなくても，キーボードのみ，あるいはトラックボール，スイッチやセンサーなどの支援技術で操作できる

支援技術に関するリソース

こころリソースブック

みんなの公共サイト 運用モデル

OS標準のユーザー支援機能

マイクロソフト アクセシビリティ

アップル Mac OS X ユニバーサルアクセス

今日のポイント

JIS X 8341-3は，Webサイトの制作者・開発者だけでなく，運営者も理解すべきガイドラインである

JIS X 8341-3の「6.情報アクセシビリティの確保・向上に関する全般的要件」も理解しておくことが望ましい

海外のWebサイトでは，W3CのWCAGがデファクトスタンダードである

国際的なデファクトスタンダード「WCAG」

海外では，W3C／WAIが策定しているWCAGがデファクトスタンダードとして，世界各国で採用されている

W3Cでは，以下のガイドラインを提供している

• WCAG
• UAAG
• ATAG

JIS X 8341-3の構成

序文

1. 適用範囲
2. 引用規格
3. 定義
4. 一般的原則
5. 開発及び制作に関する個別要件
6. 情報アクセシビリティの確保・向上に関する全般的要件

• 附属書1（参考）ウェブコンテンツに関する例示
• 附属書（参考）関連規格

^{W3CのWCAGや米国リハビリテーション法508条などのガイドラインに相当するのが，「5.開発及び制作に関する個別要件」，「6.情報アクセシビリティの確保・向上に関する全般的要件」は，従来のアクセシビリティガイドラインにはなかったガイドラインである}

JIS X 8341-3の適用範囲

－高齢者・障害者および一時的に障害のある人

－"ウェブコンテンツ"とは利用者がウェブブラウザを用いて利用する情報・サービスを指す

・インターネット

・イントラネット

・ウェブ技術を用いて操作する機器

－国および自治体，公共団体のウェブは必須

－企業には自主的な取り組みが望まれる

^{JIS X 8341-3における"ウェブコンテンツ"は，インターネット上で公開されているWebサイトのコンテンツに限らず，Webブラウザで閲覧・操作できるコンテンツすべてを指す}

Webコンテンツは，画面表示だけでなく，音声や点字にも変換することができる

Webコンテンツは，マウスを使わなくても，キーボードだけで同じ操作が可能な状態にする

ユーザーの様々な利用特性を踏まえ，多くのユーザーが利用できるようにして機会損失を防ぐ

Webページの制作では，重要事項をあらかじめルール化した「ルールセット」を用意し，それに基づいて作業することが品質確保のために重要

Webページのひな形である「テンプレート」は，Webオーサリングツールで作成するのが一般的。ページごとに異なる部分を「編集可能領域」とする

ソースコードの構文的な正しさを検証することを「バリデーション」という。

（X）HTMLの設計には，「フィールド化からはじめるアプローチ」と「マークアップからはじめるアプローチ」がある

CSSの設計では，スタイルブロックごとにまとめて記述し，途中にコメントを入れて，管理に工夫する

CSSをどのようにコンポーネント化するかは案件ごとに異なる。基本的な設計方針や手法を理解しておくことが重要

さまざまなセレクタを柔軟に組み合わせることが，スタイルの効率的・効果的な設計には不可欠

プロパティは，ボックスモデル，視覚整形モデル，視覚効果，文字色・背景，フォント，テキスト，リスト，表，ユーザーインターフェイスなどに分類

ボックスモデルの理解が大切。内容，パディング，ボーダー，マージンの関係を押さえること。幅・高さ指定や背景の塗りつぶしの仕組みも重要。

擬似クラス・擬似要素の種類

• 擬似クラス
  
  • :link｜未訪問クラス
  • :visited｜既訪問クラス
  • :hover｜ダイナミック擬似クラス（カーソルなどのポインティングデバイスで指定されている状態のみに適用）
  • :active｜ダイナミック擬似クラス（クリックやキーを押した状態で適用）
  • :focus｜ダイナミック擬似クラス（フォーカスを受けている状態で適用）
  • :lang｜特定の言語コードがしている要素にスタイルを適用する
• 擬似要素
  
  • :first-line｜要素の1行目のみにスタイルを適用
  • first-letter｜要素の1文字目のみにスタイルを適用
  • :before｜要素の前に何らかの内容を生成
  • :after｜要素の後に何らかの内容を生成

ボックスモデルのプロパティ

1. 内容（content）｜要素に含まれる内容
2. パディング（padding）｜内容とボーダーとの余白
3. ボーダー（border）｜枠線
4. マージン（margin）｜ボーダーと他の要素との間隔

視覚整形モデルのプロパティ

• display
  「block」「inline」「list-item」「none」
• position
  「static」「relative」「absolute」「fixed」
• float
  「left」「right」「both」
• line-height，vertical-align
  インラインをボックス化

CSSはWebページの「見栄え」を指定するための言語。（X）HTMLで構造化されたページに「見栄え」という視覚的な価値を与える。

「セレクタ」はスタイルの適用対象，「プロパティ」はスタイルの種類，「値」は与える効果の具体的な種類や程度。

CSSの4つの適用と適用と適用メディアの指定方法。スタイルの「継承」のしくみ，スタイルが適合時の「カスケード処理」のしくみを押さえることが大切。

CSSの書式

CSSによるスタイル設定では，「セレクタ（selector）」「プロパティ（property）」「値（value）」の3つがポイント

CSSの適用方法

1. link要素で外部ファイルを参照
2. @importルールで外部ファイルを参照
3. style要素でCSSソースを指定
4. style属性でCSSソースを指定

CSSの適用メディア（メディアタイプ）

• テレビ「tv」
• プロジェクター「projection」
• 音声出力「aural」（CSS2.1では「speech」）
• 点字ディスプレイ「braille」
• 点字プリンタ「embossed」
• 固定ピッチフォント端末「tty」
• すべてのメディア「all」

スタイルの継承

CSSには，ある要素に適用したスタイルは子孫要素に引き継がれる「継承，inheritance」という特徴があり，スタイルの値に「inherit」を指定することで明示的に引き継ぎが行われる

「inherit」はほとんどのプロパティで指定可能

スタイルの優先順位

• ユニバーサルセレクタ（*）:0点
• タイプセレクタ（要素）:1点
• クラスセレクタ／属性セレクタ（class／属性）:10点
• IDセレクタ（id）:100点

後に書かれているほうが優先して適用される

head要素に含める内容として，title要素，meta要素，link要素，style要素，script要素などがある

body要素に含める内容は，1つの独立したまとまりである「ブロックレベル要素」と，行内の一部である「インライン要素」の2つに分けられる

div要素・span要素・class要素の利用で，文書構造の補完・拡張や，スタイルシートの適用対象やスクリプトの操作対象とすることができる

今日のポイント

（X）HTMLはWebページの「構造」を指定するための言語。Webページ内のコンテンツそれぞれに役割を与える作業が「マークアップ」である

文書型宣言とは「そのWebページはどのバージョンの（X）HTMLに準拠して制作されているのか」を，ページ最上部で明示すること

（X）HTMLのルート要素はhtml要素。子要素としてhead要素とbody要素を置く。head要素に基本情報，body要素に本文にあたる内容を含める

（X）HTMLの役割

人間のみならず検索エンジン・クローラーがWebページを処理したりするのが当たり前の今日では，（X）HTML仕様に基づく正しいマークアップが，環境対応性を高めるという認識が広がりつつある

（X）HTMLの書式

（X）HTMLによるマークアップでは以下の3つが重要である

• 要素｜elements
• 属性｜attributes
• 属性値｜attributevalues

（X）HTMLの全体像

（X）HTMLは以下の4つに分類される

1. 文書型宣言
   （X）HTMLでは文書型宣言の前にXML宣言を記述することが推奨されているが，Webブラウザ側で対応していない場合，XML宣言の部分は無視される。IE6ではXML宣言を解釈できないため「過去互換モード」でレンダリングを実行する
2. html要素
   （X）HTMLは，html要素をルート（親）としたツリー構造になっている
3. head要素
   title要素，meta要素，link要素などを含める
4. body要素
   見出し要素（hx），パラグラフ要素（p）などを含める。さらに見栄え要素としてCSSを読み込む

今日のポイント

（X）HTMLでWebページを構造化し，CSSで見栄えを指定するため，両方の役割分担を意識する

CSSレイアウトには，SEOやアクセシビリティ，メンテナンス性などの面で，テーブルレイアウトにはないメリットがある

すべてをWebオーサリングツールにまかせず，ソースコードレベルで作業できることが，より高い品質のページを制作するのに不可欠

Web標準と（X）HTML+CSS

SEOやアクセシビリティ，メンテナンス性，互換性など，Webサイトのポテンシャルを最大限に活用するために，W3Cの仕様をガイドラインにして制作することが不可欠という認識が定着しつつある

テーブルレイアウトとフルCSSレイアウト

モダンブラウザのみをターゲットにした案件では，フルCSSレイアウトを採用するのが一般的になっている

制作環境とWebオーサリングツール

オーサリングツールは便利な反面，限界もあるため，最終的には制作者がバリデータ（ソースコードの検証ツール）を利用してエラーをチェックし，間違いを正す必要がある

クロスブラウザの課題

複数のWebブラウザで差異のない均一なレンダリング（表示）にする場合，ターゲットブラウザを仕様の段階で決めておく

今日のポイント

動画配信方法はコーデックによりプレーヤーを選択する

長時間にわたる映像はストリーミング配信を採用する

モーショングラフィックスは言語ベースで作成する

ディジタルムービー

Flashビデオ（FLV）では高い画質を保持しながらファイルサイズを軽減できるOn2コーデックが利用できる

モーショングラフィックス

XMLの独自形式であるMXMLをベースにしたAdobe Flex，同じくXAMLをベースにしたWindows Presentation Foundation（WPF）がある

今日のポイント

色，形，動きの変化を状況に応じて使い分ける

UIとしてボタンを利用する場合，引き金は「離す」

ユーザーを導くためのシナリオ作りが先決

インタラクティブの基本

インタラクティビティは以下の状態で明示する

1. 色の変化
2. 形の変化
3. 動き

インタラクションとシナリオ

ユーザー体験を効果的に提供しようと考える場合は，ユーザー導線の確認は必須

目的に合ったUIの実装手段を，長所と短所に配慮しながら選択することが可能

UIデザインのポイントは，「重要度の差別化」「操作性全般の配慮」「読みやすさのバランス」

試作品の制作と，試用ユーザーテストが不可欠

UIを実現するフォーマット

WebページにUIを提供する技術には，以下のようなものがあり，目的に適った選択が必要である

• （X）HTML
• Flash（Adobe Flex）
• DHTML／Ajax

UIデザインアプローチ

レイアウトの最適化という観点からUIデザインを調整する際のチェックポイント

1. 重要度の差別化
2. 操作性全般への配慮
3. 読みやすさとのバランス

モックアップとテスト

試作品はプロトタイプとも

今日のポイント

Webデザインは，CI（Corporate Identity）のなかでも特にVI（Visual Identity）と関連する

コーポレートカラーが，Webサイトなどでのテーマカラー選択の基準となるケースがほとんど

Webデザインでは特に，小さい画面サイズでのロゴ表現などに配慮する必要がある

CI・VIとは

会社の個性・目標の明確化と統一をはかり，社内外にこれを印象付けるための組織的活動（広辞苑）

CI・VIガイドライン

ガイドラインには次の内容が含められている

1. コーポレートカラーと配色（CMYK，DIC，RGB値）
2. ロゴの配色（CMYK，DIC，RGB値）
3. ロゴのサイズや周りの余白，配置方法
4. ロゴの幅と高さの比率
5. ロゴと併記する文字要素のフォント（書体）や比率
6. ロゴの誤使用例や禁止事項
7. 白地と黒地で使用する際の注意事項
8. その他の注意事項

CI・VIとロゴデザイン

解像度や表示能力が高くないモニターで確認する場合，ビジュアルのサイズ設定に気をつける

CI・VIとフォント

CI・VIに含まれる文字要素では，商用フォントをそのまま使用することはできないため，個別にフォントをデザインする必要がある

その他のVIと複合利用

社名やコピーを伝えるごく短い音声・音響効果は「サウンドロゴ」と呼び，SIの代表的な例である

CI・VIとキャッチコピー

キャッチコピーの役割は，対外的に企業理念を伝えるだけでなく，従業員に対して消費者にどのようにアプローチし，接するべきかを教育する効果もある

今日のポイント

フォントは「ゴシック体」（Sans-Serif）と「明朝体」（Serif）の2つに大別される

タイポグラフィには文字間の調整が不可欠。ゴシック体は視認性が高いが，単調でメッセージ性が伝わりにくい

クライアント環境に応じてフォント使いを検討する。明朝体は漢字とひらがな，カタカナとの区別が付けやすいが，小さな文字には適さない。

フォントの種類

欧米ではゴシック体を「グロテスク体」と認識する場合も

ゴシック体

短いフレーズの文章に用いる目的で作られた

明朝体

一読で無理なく理解可能な文章の作成には向いている

今日のポイント

電子メディアの混色方法は，赤（R）・緑（G）・青（B）の加法混色，印刷メディアの混色方法は，シアン（C）・マゼンタ（M）・イエロー（Y）の減法混色

色の解釈の違いを最大限に抑えるため，色調という定義を使う

色相環を使った，調和する配色を作りだすセオリーがある

色空間の規格

ディジタルデバイスがRGB色空間として標準的に利用している色空間は以下の2種類

1. sRGB（standard RGB）
2. Adobe RGB

HSIによる色の調整

Hue：色相，Intensity：強度，Saturation：彩度で構成される色空間のこと

Windows環境で馴染みのあるHSV（Value：明度）やAdobe Photoshop CSxなどのHSB（Brightness：明度）と同等で，色相・彩度・輝度の3チャンネルで色を表現する

配色計画

以下は配色セオリーである

1. 隣接した色相から色を選ぶ
2. 同一色相でトーン違いの色を選ぶ
3. 等色相差の色を選ぶ
4. 無彩色と有彩色の取り合わせを行う

色と空間

1. 奥行きの表現
2. 重要度の表現

色と視認性

暖色系全般は前進色であり膨張色，寒色系全般は後退色で収縮色

今日のポイント

カラムの構成でレイアウトパターンを作る

カラムには左右の余白設定を含めておく

1カラムの幅サイズは均等割やサイトIDの幅に合わせるなど臨機応変に

カラムレイアウト

1. 1カラム+複数カラム
2. 2カラム
3. 3カラム

ターゲットなるモニターサイズ幅を決めてからユニット（<div></div>ボックス）を決める

グリッドデザイン

ユニット間にはあらかじめ均一な余白を設定しておく

今日のポイント

グリッドなどのガイドラインを構図の決定に役立てる

遠近法など，ビジュアルの描画テクニックを知っておく

ゲシュタルト要因など，人間の知覚のクセなども理解してビジュアル表現を考える

構図の取り方

1. グリッド
   グリッドを構図設定の目安とする場合，1画面を縦横に3分割したものを使用する
   
   写真撮影時は被写体を中央に配置せず，中央の矩形の4つの各のいずれかに被写体の中心を合わせながら構図を決定すると，躍動感のある演出が表現できる場合もある
2. 対角線
   対角線上のビジュアルボリュームが持つ違いを調整しバランスを取るといった調整作業の目安にもなり得る
   
   前述のグリッドに対角線を追加する使い方ができる

奥行きの表現

1. 線遠近法
   平面上に消失点を取ることで描画物に対して辻褄の合う歪を与えることができる
   
   1点透視法，2点透視法どちらの描画方法も画面上に限界が抜ける消失点（バニシングポイント）を設定し，そのポイントに向かって複数の補助線を作成して作図のガイドラインとする
2. 空気遠近法
   遠景ほど人間の目に霞んで見えるという配色や描画物の見えを利用する遠近法の表現方法
   
   ３DCG制作ツールはこれら遠近の効果をパラメータの設定だけで自動的に作り出す能力を持っている

擬似的な立体の表現

• 線による作図方法
  最も使われる擬似立体はアイソメトリック図法で概念的な立方体を生成する代表例である
• 色や描画に工夫する方法
  
  1. ドロップシャドウ
  2. カットアウト
  3. ベベル

ゲシュタルト要因

人間の知覚のクセ

左右非対称

自然界にはシンメトリー（対象）が存在しないため，アシンメトリー（非対称）こそが正しいという考え

今日のポイント

音声のデータ形式にはテキストとバイナリの2種類がある

サンプリング周波数は内容と必要な質のバランスを考え，適切なファイルサイズを意識する

データ形式によっては，環境で再生結果が変わる場合があることに注意

音声データの形式

1. MIDI形式（テキスト形式）
2. サウンドデータ形式（バイナリ形式）

音声のディジタル化

レコーディングした音源をディジタル化して作成する過程をサンプリングと呼ぶ

1秒間に割り当てられる波形の山と谷の数をサンプリングレートと呼び，単位ヘルツ（Hz）で表す

サンプリングレートが高いほど，クオリティーは高くなるが，データ容量も増大する

1. MP3（*.mp3）
2. WAV（*.wav）
3. AAC（*.aac）
4. RealMedia（*.rm）
5. Windows Media（*.wma）

今日のポイント

写真は用途を定めてから取り扱う保存形式である

撮影時はモードと光量に注意する

切り抜き写真はサムネールサイズまでが妥当

作業工程で異なるフォーマット

ハイエンド一眼レフディジタルカメラでは，RAW形式による撮影が可能

ディジタルカメラにおける取り込み時の注意点

1. 撮影モード
2. 光量

スキャナーにおける取り込み時の注意点

雑誌やポスター，パンフレットなど，印刷原稿から写真を取り込む場合には網点の処理が必須である

今日のポイント

透明効果を使いたいときに，元素材の保管にはPNGが適している

写真画像にはJPEG，単純なグラフィックにはGIFが適している

画像の特徴と処理方法の違いを把握する

JPEGの特徴

非可逆圧縮データであるため，上書き保存するたびに圧縮が繰り返され，画質も劣化していく。

GIFの特徴

ファイル全体のダウンロードが完了していなくても，画像の概要が把握できるようにインターレース機能を付加するこも可能

PNGの特徴

Adobe CSxなどの編集ツールを用いて，アルファチャンネル付きPNGを作成する方法は，レイヤーを半透明化する機能を使うか，アルファチャンネルやマスク効果を画像に適用させる方法がある

今日のポイント

テキストコンテンツの制作プロセスは，執筆→編集→校正

Webコンテンツのテキストには，SEO+読み手のリテラシーを考えたライティングが必要

テキストコンテンツの改善ポイントとして特に重要なのは，見た目のボリューム，フォント，コントラスト，図表・リスト，見出し

テキストの執筆・編集・校正プロセス

• 執筆
  大きく「コピーライティング」「文章ライティング」に分類され，後者は「ら抜き表現」「い抜き表現」や差別用語・禁止用語などに注意
• 編集
  テキストをコンテンツとしてまとめるため，HTMLに流し込む際，マークアップのバリデートに気を配る場合も
• 校正
  テキストの赤入れや誤字・脱字等の細かい作業が入る，この工程を業界では初校→再校→念校と呼び，校正は再校に該当する

テキストコンテンツの改善ポイント

• 段落，行間，1行当たりの文字数
  適度や段組み，行間の調整など，ストレスなく読み進められるようなCSSの調整（word-spacing,line-height,margin,padding,etc）が入る
• フォントのサイズや種類
  CSS（font-size）で調整する
• 文字色と背景のコントラスト
  コントラストの問題はツールの使用や，パーソナルカラー配色ブックを利用する
• 図表化，リスト化
  冗長的かつ長い文章はユーザー離れの原因にも－，図版を用いるなど五感に訴えかける工夫も
• 見出しレベルの見栄え
  HTML（Hx）のマークアップが必要

今日のポイント

素材は，情報構造に含まれる内容と，装飾要素に当たる内容に振り分ける

ユーザーがどのような素材へアクセスするのかを考えることが第一

視覚要素が聴覚要素になる可能性も考慮する

情報としての画像

Webサイトにおいて，図版は個人的な再利用が行われやすい状態であることが望ましい

装飾要素としての画像

具体的な情報として意味をなさない画像は，CSSで背景画像として処理することが望ましい

聴覚要素に配慮した表現

1. 47.0%｜とてもよかった
2. 51.3%｜よかった
3. 1.3%｜よくなかった

今日のポイント

コンテンツ仕様書で何を確認し，どこまでの情報を確定するのか事前に決め，責任範囲を明確にする

プロジェクト用語集や制限語彙集を用意し，語尾や表現の統一，表記ゆれの確認を行う

コンテンツ仕様書の変更履歴は常に何らかの形でトラッキングする

コンテンツ仕様書で確認すべき内容

文書構造に合わせてコピーライティング作業を行い，細かいワーディングやラベリングの表現を，決められた表現方法をもとに確定していくこと

「スペック」ではなく「仕様」

サイト制作の現場では，「仕様書」の定義が曖昧であるため，コンテンツ仕様書が何を指し，誰が最終決定者なのかを取り決めること

曖昧な領域，誰がコンテンツ仕様書のオーナーか?

ある程度のドラフト原稿や素材をもとに，制作会社が代理店の支持のもと最終原稿を起こす場合も－，コンテンツ仕様書を仕上げる行為と，コンテンツを用意する行為とは別であり，この点が誤解を受けるケースである

コンテンツの引き渡し=フィードバックの期限

コンテンツの引き渡しの期限は必ずしもコンテンツ仕様書の制作中とは限らない，場合によっては部分的に確認や制作が遅れる場合もある，そのためにあらかじめスケジュールに予備日として予定を組んでおけば問題はない，しかし，予備日を組んでいない場合には，最終責任者の判断にゆだねることが肝要

今日のポイント

ワイヤーフレームの目的はデザインの初期段階でアイデアや課題点，問題点をチーム内で共有することである

ワイヤーフレームの確認範囲はページ構成とコンテンツ項目の2つであり，レイアウトやビジュアルデザイン，コンテンツ仕様ではない

ワイヤーフレームはできる限りシンプルな情報にして，それぞれのWebページにどのような情報が表示させるかのみに議論の的を絞る

ワイヤーフレームの要素

1. コンテンツエリア
2. コンテンツのディスクリプション
3. コンテンツの優先順位
4. ページIDなどの情報
5. ユーザーシナリオ
6. リンクやフォームなどの外部情報
7. 目的や理由
8. 注記や注釈
9. 記号などの凡例
10. 改訂履歴

上記の要素をワイヤーフレームで確認する

制作する際の注意点

ワイヤーフレームの目的は，そのWebページにどのような情報が表示されるかを確認することであり，実装される機能の仕様や視覚的表現，文書的表現の確認ではないことに注意する

今日のキーワード

• ワイヤーフレームモデル
  コンピュータ上で3次元グラフィックスを扱う際に使われる立体表現方法の一つ。立体図形を、その輪郭を表す線のみで表現する手法。立方体などは辺のみを描画し、曲面などは網目状の線で表現する。情報量が少なく、高速に描画できるなどの利点がある（参照）

今日のポイント

サイトレベルの把握はハイレベルサイトマップで，ページレベルの把握は詳細サイトマップで行う

必ずハイレベルなサイト構造の策定段階でクライアントの承認を得ること

詳細設計に入ってからの段階構造の修正は大変である

目の前のページ整理にとらわれず，Webサイトの将来的な運用を考慮し，スケーラブルなサイト構造を定義する

詳細サイトマップ作成のステップ

大規模プロジェクトにおけるディレクトリ構造の決定に関しては，技術的な視点を補完するため，IAと技術スタッフとの協業が望ましい

詳細サイトマップの制作ツール

Webサイトの規模によっては，全ページのマップを1ページだけで収めるのではなく，1セクションごとにまとめ，Microsoft Excelの機能を用いるなど，グループ化して上位階層を把握する工夫が求められる。

詳細サイトマップの項目

1. ページ名称
2. ページID
3. ディレクトリパス
4. ファイルタイプ／ファイル名

また，Microsoft Excelで制作したリスト形式の詳細サイトマップであれば，上記4つの項目以外にも，以下の追記情報を策定しておくことが望ましい

1. 現行URL
2. メタタグ／タイトル要素
3. ナビゲーション要素
4. テンプレート形式
5. ワイヤーフレームやデザインテンプレート制作の有無

今日のポイント

コンテンツマッピングは成果物ではなく，コンテンツの現状把握と整理，それらの理解をするプロセスが重要

サイト構造に合わせてコンテンツを理解できるように，コンテンツの様々な属性情報を一貫して把握できるようにする

コンテンツマトリックスを使い，制作時間，ビジネス的なインパクト，必要技術の3つの要因からそのコンテンツの優先度を決定する

コンテンツマッピングとは

既存の情報を理解して，全てのコンテンツを可能な限り洗い出し，新しく作成されるWebサイトの構成案に合わせてコンテンツの分類と整理を繰り返してその結果を可視化する作業－。この作業の成果物は必ずしも納品物となるわけではなく，現状把握とコンテンツ整理の過程での産物であり，コンテンツマッピングで重要なのはコンテンツの理解である

コンテンツの優先順位付け

1. コンテンツ制作にどれぐらい時間がかかるか?
2. ビジネス的にどのようなインパクトがあるか?
3. 公開するのに必要な技術や表現は何か?

上記の各コンテンツを3－5段階で評価し，優先度を決定する

今日のポイント

Webサイトの使い勝手やユーザビリティの良し悪しはナビゲーションシステムの良し悪しで決まる

グローバル，ローカル，コンテキストなど，ナビゲーションシステムには様々なものがあり，大きく6つに分類できる

ナビゲーションはWebサイト全体を通じて一貫したシステムとして，共通のルールを適用し，レイアウトの位置は変更しない

ナビゲーションシステムのデザイン

1. ユーザーに対してある地点から別の地点への移動手段を適切に提供する
2. それぞれの移動手段がどのような優先順位にあるかを適切に明示する
3. ユーザーが現在見ているページと目的としているページとの関係性を明示する

代表的なナビゲーションスキーム

• グローバルナビゲーション
  様々なユーザー調査などの結果から，一般的にグローバルナビゲーションの項目は7つ前後の項目が妥当だと考えられている。これはユーザーが一度に記憶でき，覚えることができる平均項目数が7つ程度だという実験結果からも裏付けられている
• ローカルナビゲーション
  ユーザーの視界の始点が通常，画面左上上部に基点があるため，一般的にローカルナビゲーションは左側に縦位置にレイアウトすると，使いやすく，認識もしやすい
• 補足ナビゲーション
  関連するカテゴリのナビゲーションを，ローカルナビゲーションとは独立した形で表示することが多い。他のナビゲーション同様，常に一定の位置にレイアウトされることが重要
• コンテキストナビゲーション
  グローバルナビゲーションやローカルナビゲーションからは独立したデザインであることが多い
• 親切ナビゲーション
  Webページにおけるサイトマップ，コピーライト表記，プライバシーポリシーなど
• パンくずリスト
  ユーザーの現在地及びコンテンツの階層構造をツリー構造で表示したもの，トピックパスとも

今日のキーワード

ユーザーインターフェイス（以下，UI）は，Webサイトの使い勝手を左右する重要なデザイン要素。

Webサイトの主役はあくまでコンテンツであり，UI自体は必ずしも強い自己主張を必要としない。

シンプルで汎用性の高いユーザーインターフェイスを効率的に設計するには，デザインパターンを活用する。

インターフェイスとは?

1. ディジタル機器のコネクタなどのハードウェアインターフェイス
2. プログラム間の通信に用いるアプリケーションプログラムインターフェイス（以下，API）などのソフトウェアインターフェイス
3. デバイスの操作やシステムまたはアプリケーションの利用など，人間が必要とされるUIの３つに大別される

ユーザーインターフェイスのデザインパターン

Webページの外観または機能としてよく用いられる要素も次々にデザインパターンとして定義されており，その活用事例は増加傾向にある。「グローバルナビゲーション」「パンくずリスト」「オートコンプリート」「入力プロンプト」など

今日のキーワード

デザインパターン プログラム設計時に起こる典型的な問題とそれに対する解決策を整理し、再利用できるようにまとめたもの。1995年に出版された書籍「デザインパターン」の中で23のパターンが解説されたのをきっかけに広まった。（参照）

参照URL

IT用語辞典 e-Words

情報の組織化や構造化は，ユーザーの用途や目的に合わせて行う。

情報の組織化とはLATCH法などを用いて情報に体系を与えること。

構造化には階層型，直線型，Webリンク型，フォークソノミー型などがあり，これらを組み合わせてサイト構造の設計を行う。

LATCH法による組織化

• 位置
  案内図や見取り図，地図など
• アルファベット
  辞書や事典，電話帳，名簿リストなど
• 時間
  テレビの番組表や日記，年表やカレンダー，更新履歴やプレスリリースなど
• 分野
  本屋やCDショップなど
• 階層
  商品の売れ筋順や価格順のリスト，円グラフや折れ線グラフなど

代表的な構造化の手順

• 階層型
  パンくずリスト
• 直線型
  画面遷移
• Webリンク型
  ウィキペディアにおける本文中に散りばめられたテキストリンク郡
• フォークソノミー型
  ユーザー参加型のユーザー情報における分類化を目指す

今日のポイント

ペルソナは企業や制作者の勝手な想像ではなく，定量調査や定性調査など，何らかの調査データのサンプルデータを基に制作する。

ペルソナは対象とするユーザー層に対して，プライマリーユーザー，セカンダリーユーザー，その他の特殊層の3つで十分。

ユーザーシナリオは，必ずしも企業や制作者にとって都合の良いシナリオである必要はない。

ペルソナの制作・調査の実施と分析

ユーザーの理解をするめにはユーザー調査を実施する。主な手法は以下の通り－。
定量調査－ユーザーアンケート，データマイニング
定性調査－フォーカスグループ，ユーザーインタビュー，ユーザー観察，エスノグラフィ調査

重要なのは，できるだけユーザーの生の声をデータとしてサンプリングすること。

ペルソナの内容

ぺルソナには，その人となり振る舞いが分かるように，出来るだけ具体的に書き込むのが良い。

1. 名前
2. 年齢
3. 性別
4. 職業
5. 家族構成
6. 年収
7. 趣味趣向
8. Webサイトを利用する目的
9. インターネット利用層やインターネット上での経験
10. コンピューターリテラシー
11. よく利用しているWebサイト

ユーザーシナリオ

ユーザーが目的を達成しないシナリオこそ最良なシナリオである（ジョージ・オルセン）
Olsen氏は2004年の米Yahoo! Searchなどの古リニューアルプロジェクトで，ペルソナ手法を用いてデザインの指揮をとった人物である。

エスノグラフィ調査

フィールド調査を行い，対象ユーザーの社会的な特性を調査する方法。単独では必ずしも正しくないが理解できる現象を引き出す手法。満員電車での携帯電話での利用者の行動など。

（X）HTML+CSS

-

Adobe CS4対応

Fireworks CS4 スーパーリファレンス for Windows&Macintosh

Illustrator CS4 スーパーリファレンス for Windows

Photoshop CS4 スーパーリファレンス for Windows

Paris Style Photographer デジカメでおしゃれなポストカードができる本(CD-ROM付)

PhotoshopデザインShot!

Photoshopの新しいルール 写真撮影&補正

RIA

JavaScript1 はじめてのプログラミングとJavaScriptの基礎 (CD-ROM付)

PHP1 はじめてのPHPプログラミング (CD-ROM付)

マーケティング・セールス

マーケティング・セールス

IT・e-コマース

IT・e-コマース

新年明けましておめでとうございます

昨年は自分にとっても，環境の変化の大きい年でもあり，また自分の殻を破る機会にも恵まれました

それはさておき，早速，Adobe CS4関連の書籍が出始めましたね...

これから，さらにこの傾向は強くなると予想されますね

そうそう，昨年アドビのCS4リリース前イベントに参加した際にFlashの新機能についてのレビューがあったのでご紹介します

従来のFlashではActionScriptを利用することで，より高度なアクションが実現できるということでActionScriptエンジニア（ってどんな職業!?）が重宝されました...

自分もそのことは重々承知していたものの，なかなか第一歩を踏み出せずにおりました

また，開発者向けのFlexというCSもリリースされたりと，敷居がどんどん高くなっていきました

ところが，Flash CS4ではそんな複雑なアクションもモーショントゥイーンやシェイプトゥイーンだけで実現できるそうなんですね

しかも3D描画に対応したことによって，よりディテールの凝った作品ができあがるとのこと

これはぜひ，Flash&nbp;CS4のリファレンス本を期待したいところですね

それでは，今年もよろしくお願いいたします