Yahoo! と AOL beta

実証実験に参加する学生さんから「これはアプロプリエーションでしょうか、それともパスティッシュでしょうか？」というメールを頂く

Yahoo!
http://www.yahoo.com/

AOL beta
http://www.aol.com/

アプロプリエーション（Appropriation）:
他のサイトデザインの完成度および信頼性を流用する

パスティッシュ（Pastiche）:
他のサイトのさまざまな要素を部分的に模倣して再構築する

インターネットの「ラフコンセンサス」という考え方を広域に適用すると、独創性より優先しているものが何か‥わかるかもしれない（※深読）。

試行授業の補足（CSSワークフローについて）

「CSSEdit 2.5 を教育の現場で使う」の補足

授業のワークフロー（第二区分）は「Automator」によって自動化。学生がCSSの作業に集中できる環境を提供する。

参考：Transmitの日本語ページ

学生に配布する「サーバごとに作成されたドロップレット」／学生はファイルをアイコンにドラッグしてサーバに転送する。

CSSEdit 2.5 を教育の現場で使う

業務連絡：本日の夜です（チェックイン後、ロビー集合）。

MacRabbit「CSSEdit 2.5」+「Transmit」

CSSEdit 2のリリースが昨年の11月、その後2回のマイナーバージョンアップがあったが、早くもバージョン2.5になった。「こういう機能があったらもっと使いやすくなるのに‥」と思っていたツールが搭載された（対応がはやい）。今回は、CSSの教育用として使用してみる。尚、試行授業ではTransmitと連携してDreamweaverのような総合環境を構築する。

ビジュアルエディターとソースエディターの使い分けがポイントとなる。バージョン2.5の新機能「セレクタ・ビルダー」がCSSの継承、カスケード処理の理解に役立つ。

ビジュアルエディターから「セレクタ・ビルダー」を使用する（手順の一例）

子孫セレクタだけではなく、子セレクタや隣接セレクタの理解にもつなげる

バリデーションパネルは作業中、常に表示しておく（リアルタイム・チェック）

参考：Release Notes

Using the Selector Builder:

Writing selectors manually
The selector represents a number of requirements an element in a web page has to fulfill to be affected by the style. A HTML web page is a tree structure of tag elements, and a CSS selector defines possible paths to such a tag element.
If you so desire, you can always write your selectors manually. An example of a selector is the following:

#sidebar ul > li a:hover
Style every "a" element (links) that is being hovered by the mouse, if it is a descendant of a "li" element (list items), whose parent is a "ul" element (unordered lists) that is a descendant of an element with the "sidebar" identifier.

過去記事：
2006/11/07「CSSEdit 2」

Flashによるカラーアナグリフ動画

本日夜の勉強会は、「3Dメガネで視聴するFlash動画」をテーマにします。一番簡単でメガネも安価なカラーアナグリフ方式で作成する方法を解説します。このサンプルで「デジタルテレビの子供向けWebサービス」のプロトタイプを構築してみましょう（実際はアナグリフでやるわけにはいきませんが‥）。
以下は、2004年に作成した静止画サンプルです。

［赤青メガネで見る］
［交差法で見る］

交差法の見方：
モニタから目の距離は50cmくらい。その中間に人差し指を立て、寄り目にして見つめる。モニタには３つの画像がぼんやり見えるはずなので、ゆっくり中央の画像にピントを合わせる。
ピントが合ってきたら、人差し指を画面から離す。

Web本の執筆メモ［0704-004］

Experience Design
エクスペリエンスデザイン〜新たな体験への誘い
- アーキテクトとデザイナーの狭間で -

※執筆メモの音声です
※MP3ファイルに直接リンクしています
※音声雑記で配信しているものと同じです

「Web業界のビジョナリー／執筆メモ［1］」8:50/MP3

• 将来イメージを描ける人
• セカンドライフとNGN（Next Generation Network）
• 技術者による将来イメージの現実化
• デジタルテレビという名のネット端末
• PCのWebサービスがテレビに飛び火する
• 職能横断的な能力
• イノセンス・メイキング

「制作のドリームチーム／執筆メモ［2］」9:13/MP3

• 大規模なプロジェクトに参加して得たもの
• 大型案件に対応できる外部スタッフを集める
• ギャランティと契約
• お金と生活と友情出演
• 情熱で成し遂げるプロジェクト
• 予算を確保する交渉人

「新人スカウトとプロダクションの成長／執筆メモ［3］」6:06/MP3

• 小さな制作会社と小規模なプロジェクト
• 新人の発掘
• 日々、専門学校に通ってスカウトする社長
• 新人クリエーターによって会社が成長する
• 実力を発揮したクリエーターは会社を飛び出す
• 新しい業界？
• Web業界のビジョナリーが生まれやすい環境を提供

書籍メモはカテゴリ「新・本の執筆メモ公開中！（3）」にまとめています

グローバルメディアブランド誌「Monocle」のクロスメディア・モデル

コラム：
読むウェブ 〜本とインタラクション
第7回　クロスメディア

Monocle
editor in chief and chairman :Tyler Brûlé
managing director :Robyn Holt
publisher :Pamela Mullinger
creative director :Richard Spencer Powell

Web本の執筆メモ［0704-003］

Experience Design
エクスペリエンスデザイン〜新たな体験への誘い
- アーキテクトとデザイナーの狭間で -

UD 7
1. Equitable Use
2. Flexibility Use
3. Simple and Intuitive Use
4. Perseptible Information
5. Tolerance for Error
6. Low Physical Effort
7. Size and Space for Approach and Use

PICTOGRAM
公共サインに割り振るユニバーサルタグ（誘導タグ）

photo: Emergency exit

書籍メモはカテゴリ「新・本の執筆メモ公開中！（3）」にまとめています

Web本の執筆メモ［0704-002］

Experience Design
エクスペリエンスデザイン〜新たな体験への誘い
- アーキテクトとデザイナーの狭間で -

3st Contact Design（e空間デザイナーの仕事）
人間の行動→見る・選ぶ・使う
割り振るタグ→空間・モノ・情報

書籍メモはカテゴリ「新・本の執筆メモ公開中！（3）」にまとめています

Web本の執筆メモ［0704-001］

6月から作業スケジュールが過密になるので、2ヵ月前倒しで執筆開始（‥となる）。間に合わなければ6月以降、一旦中断？

The Rule
Web関連、三部作の最後（実は、episode I）

• chapter 1: 聞く
• chapter 2: 集める
• chapter 3: グループで共有する
• chapter 4: 組み立てる
• chapter 5: 評価する
• chapter 6: 全員で共有する

---

Experience Design
エクスペリエンスデザイン〜新たな体験への誘い
- アーキテクトとデザイナーの狭間で -

• chapter 1: 情報と編成
• chapter 2: エア・デザインとは？
• chapter 3: モノと場所と情報をつなぐもの
• chapter 4: タグと関係性
• ドキュメント・マークアップ
• 物体（オブジェクト）マークアップ
• 空間（スペース）マークアップ
• chapter 5: これからのユニバーサルアクセス
• chapter 6: ユーザーエクスペリエンスデザイン
• chapter 7: 2010年

keyword:
ケータイ、デジタルテレビ、テレビWeb、My Page、ビヘイビアトラッキング、空間タグ、場所コード、リアル検索、実世界の状況認識、e空間デザイナー、ユビキタス、NGN、仮想通貨

書籍メモはカテゴリ「新・本の執筆メモ公開中！（3）」にまとめています

お知らせ：ユーザーエクスペリエンスデザイン勉強会（2）

教育デザイナー向けユーザーエクスペリエンスデザインの勉強会を開催します。10数名程度の小規模なものを予定しています（今回は新しい技術の活用についての話が中心になります）。時期は7月。

ユーザーの消費行動をトラッキング（追跡）して得られる個人情報を詳細化していく技術が想像以上に進んでいます。カードやケータイで交通機関を利用したり、商品を購入する人が増えており、顧客のトラックレコード管理も高度化しつつあります。Webアプリケーションによるサービスはさらに巧みになってきました。
これらはユーザーの利便性を向上させるための仕組みですが、識者によるプライバシー問題の議論も活発です。また、個人の「My Page」によって情報収集活動が低下する研究報告（自分に必要な高精度な情報が毎日提供されるようになると、自ら検索して情報収集しなくなる）についても注視していく必要があります。
今回の勉強会は、ユーザーとのインタラクションを拡張するために新しい技術をどのように活用していくか考えていきます。

業務連絡：勉強会については本日の会議で詳しく説明します

オンラインマガジンのデモンストレーション概要：
「編集デザイナー、Webデザイナー、3DCGデザイナーの協業モデル／次世代の雑誌メディアにおける読者とのインタラクションを考える」

• ページに配置されているグラフィックおよび写真画像に3次元の情報を持たせる
• ページを閲覧している人は、それが2Dか3Dなのかはまったくわからない（あくまで静止画として認知させる）
• ファッション誌の女性モデルが着る商品は、読者のトラックレコードによって決まる
• 掲載される写真は1しかなく、写真の中の女性モデルはリアルタイムで対象読者の嗜好する商品に着替える
• 女性モデルは3DCGで表現されるが高度な画像処理によって「実写」化する

このデモのポイントは、3DCGの技術を表に出さないことです。読者にはグラフィックや写真として提供します。3DCG技術のブラックボックス化が肝です。

参考：
ラッセル・ブラウン氏によるAdobe Photoshop CS3 ExtendedとDAZ Studioのモデルを使ったデモンストレーション

The Russell Brown Show
Adobe Photoshop CS3 Extended Edition Tutorials
CS3 Extended: Russell Brown and the Argonauts Presents - 3D Image Composition Techniques

Adobe Photoshop CS3 Extendedが対応しているフォーマット

• U3D［PDF 3D format］
• KMZ［Google Earth 4］
• 3DS［3D Studio format］
• OBJ［Wavefront file format］
• DAE［Collada］

業務連絡、雑記など

●進捗
暴走自転車と激突の件、無事です‥。
原稿、企画、等々‥諸々遅れてしまいました‥本日すべて完了です。
記憶が飛んでいる？可能性もありますので、何の連絡もない場合（もしくはスケジュールの記載もない場合）、知らせてください。何か忘れているような‥

●ギャラリー
LOGOS GALLERY
茂本ヒデキチ EXHIBITION「NEO BLACK」
2007.4.13 (fri) - 25 (wed) 渋谷パルコ パート1/B1

●イベント
CSS Nite shuffle
2007.4.16 渋谷duo -music exchange-
私も遊びに行きます。日刊徒然音声雑記（Podcast）をお聴きの方、お会いいたしましょう。「イベントご招待」の受付、あと一日で終了‥。受付は終了しました。

●勉強会
「ケータイ写真で作るポップアップカード」
monkeyish studioの実験的な試み第6回目。
イマジネーション能力のトレーニング、というより遊びです。子ども向けのカリキュラムとして企画したものですが、大人の方がハマってしまいますね。路線変更しました。パソコン作業で疲れている方にはよい気分転換になるかもしれません。
※以下の写真は市販品です（こんな感じのものを作ります）。

●Web研のPodcast
デジタルスケープさんから当日の音声データをいただきました。音声雑記で「［file-238］コミュニティと印象操作」を配信した後、数回に分けて公開する予定（第二部の60分）です。スライドを参考にしてください。第一部は、長谷川さんのPodcastで配信されると思います。

●面白いのでご紹介
avex 仕事が遊びで遊びが仕事
iPodでパラパラ写真ムービー

月刊 d-zero 進捗02

第二案、対象とする読者をさらに限定。Instructional Designer のプログラムを反映することに。

Visual: The Backstreets.

---

マガジンのビジュアルツールとして採用している「DAZ | Studio」。フォトグラフィとCGの中間表現を目指す。

Sophie

「Squeak」の関連プロジェクト「Sophie」には、新しいエディトリアルエンジニアリングの可能性を感じる。トップページのデモムービーをご覧ください。

読むウェブ | 本とインタラクション
「第6回　次世代のオンラインマガジン」
第7回は、デザインの導師であるタイラー・ブリュレ氏の「MONOCLE」を取り上げ、出版とWeb、放送のクロスメディアについて考える。

イベント「Web研」のスライド資料

6日（金）に開催されたWeb研セミナーのスライド（PDF）です。当日使わなかったスライド画面も含みます。
尚、Podcastはまだ未定です。一部、二部あわせて100分ありますので、どのように公開するか検討中。

スライド資料（PDF）のダウンロード／5.2MB

本日、「［file-238］コミュニティと印象操作」というテーマで録音。明後日の音声雑記で配信する予定です。会場で話せなかった内容を16分ほど。イベントに参加された方にしかわからない話題を多々含みます‥（スライドで補完できるかもしれません）

業務連絡（追記）

本日から木曜日まで某所にて実証実験。

携帯電話：時々圏外になる
ネット環境：問題なし（他の作業にも影響なし）

木曜まで滞在し、金曜日のお昼頃、東京へ向かいます。夜からのイベント（渋谷）、よろしくお願い致します。
諸々、日々のことは個人ブログおよび音声雑記にて。