メモ「飛び出すWebページ」

実験：驚くほど、飛び出しました‥

・CSSを切り替えると、ステレオグラフィックを表示する
・ショールーム常設PCのWebコンテンツとして提案
・Ajax + Webカメラで来客の3D写真を投稿可能にする
・名称「飛び出す！立体ブログ」

会社のオフィシャル情報と社員ブログのVideocast

2011年のWeb業界［04］

「中小企業のためのビデオキャスティング」セミナー開催のきっかけとなった、ある会社の社員ブログ。このブログは（結果的に）会社の販促ツールとして機能したのだが、始まりは「個人発」のブログという位置づけだったのだ。

2005年11月のこと‥
広報部の社員（Kさん）が作った社内会議向けのビデオが面白く（テレビの通販番組をパロディにして新商品を紹介する内容）、会社のサイトで公開しようという話になった。ただ、いかにも素人ぽい映像だったので、もう少しきちんと見栄えを整えたいということでFさんのところに相談があった。

Fさんは、その映像を見て「これは会社のサイトで公開しない方がよいですね」と言った。単に雑な作りだから‥という理由ではない。もっと有効に活用できる方法があるという。
その方法というのが「社員ブログ」であった。

Fさん
「この人の個人ブログを立ち上げましょう。」

社長
「個人ブログですか？」

Fさん
「そうです。映像の内容はすごく面白いし、商品の便利さもよく伝わります。何より、この人のキャラクターがいい。」
「でも、会社のサイトで公開すると、その魅力が半減しますし、オフィシャルな情報との混在は閲覧者を混乱させる危険性があります。」

社長
「その個人ブログは会社の宣伝として行うのですか？」

Fさん
「ブログサービスの会社が、お金を払ってタレントやスポーツ選手にブログを書かせていますよね。個人ブログといっても、そのくらいの契約関係があるというのは、むしろ分かるようにした方がよい。」
「露骨な芝居をさせるようなやり方はネガティブ・キャンペーンを発生させます。クリティカルに読み解く閲覧者がすぐに反応するでしょう。そうなったら逆効果です。」

社長
「なるほど。」
「ただ、勤務時間を使うわけですし、どういうレベルの仕事になりますかね。」

Fさん

技あり！［Nike+iPod］

Apple - Nike+iPod - Gear

iPod + 靴
iPod + 帽子
iPod + 自転車
iPod + 猫
iPod + 玄関
iPod + 額縁
iPod + iPod + view master

コンビニでも買えるiPod、店内の商品と結びついていく。菓子パンとiPodが来週の課題です（5案まで

報告［一般ユーザーとWebモダンパブリッシャー］

終了しました（お疲れさまでした
このレポートはdesign zero（2007年最初の勉強会）の発表資料になります。
-2006.5.24 AM7:00

「2007年に流行る？モダンパブリッシャー」の話題は音声雑記で。但し、ボイスレコーダー故障中なので今日は無理‥（週末、買います

●モダンパブリッシャーとは、一般ユーザー向けの安価なオーサリングソフト。数千円で買える。非推奨のタグは一切使用しないW3Cの仕様に沿ったXHTMLとCSSでパブリッシュされるのが、今までの一般ソフトと異なる。現在、IE6で若干の問題が発生するが、プラグインのバージョンアップで対応される見込み。2007年後期にはブログサービスと連携するのではないか‥という噂あり。
厳格なXHTMLドキュメントでありながら、適切なブラウザ対策を施したWebページを一般ユーザーが容易にパブリッシュできるため、動向が注目されている。

●現状
総じてdivタグが多くなってしまう傾向にあるが、今のところしかたない（iWebはやり過ぎ）。プラグインも充実して、あと1年くらいでかなり状況が変わってくるだろう。プロのデザイナーが使うソフトではないので、普及させるには効果的なキャンペーンを半年は続けないといけない。一般ユーザーに向けたアプローチは、プロに訴えるものとは大きく異なる。
パブリッシュされるドキュメントのソースを検証するのは時期尚早かもしれない‥（商品としては優先度低い）
教育関係者にとっては無視できない興味深いツールである。

・Sandvox
　→正式リリース版はよい仕上がり
・RapidWeaver
　→次のバージョンがかなり良さそう
・iWeb
　→少々トリッキーなことをやっているので次のバージョンに期待
・その他‥

●昨夜の記録

実証実験中：
(X)HTML、CSSの知識がない学生さん3名が、Web標準のサイト構築に挑戦中！
CSSを意識せずに、直感的な操作でどこまでいけるか、明日の朝まで（よろしくお願い致します）。

CSSデザインの80%が自動化される

2011年のWeb業界［03］

Fさんについて紹介しておこう。
彼はデザインCMSのプロジェクトを2005年から動かしている。

2007年の冬に登場したブログサービス「zero」は、Fさんがプロデュースしたもの。従来のテンプレート・チョイスだけではなくCSSオーサリングツールまで提供していた。XHTMLやCSSの知識がないユーザーでも簡単に扱えるため、幅広い層に支持される。このブログが書き出すXHTMLとCSSはW3Cの仕様に沿っていて非常に厳格だが、ブラウザ対策も適切なものだった。

2008年春から、ブログサービスを提供する多くの企業が同等のオーサリングツールを追加、あっという間に標準の機能として定着することになる。

そもそもブログサービス「zero」のオーサリングツールは、M社のデザインCMSとして使われていたものだった。他社との差別化で力を入れていたのが「サイト構築の自動化」。

文章を書く、図を描く、レイアウトを考える、といったデザイナーの作業は自動化できないが、ページを構築するビルダーの作業は可能だと考えていた。
40種類のページビルディング用のプロファイルを用意して、段組みやブラウザ対策などの工程をブラックボックス化した。ビルダーはこのプロファイル設定と日々のアップデートが仕事になる。

XHTMLとCSSのハンドワーク（手作業）は20%ほど残ったが、かなりの工程が自動化された。デザイナーはCSSの手作業から解放され、コンテンツチームに加わることになる。デザインの作業に集中することで、十分なバリエーションを準備して検討できるようになった。

但し、CSS作業のブラックボックス化は、すべてのデザイナーに歓迎されたわけではなかった。マークアップやページビルディングのスキルが錆付くことを恐れた人はM社を離れることになる。

3年後（2008年）、オーサリング機能が使えるブログのヒットによって、W3Cの仕様に沿った厳格なXHTMLドキュメントが一気に増えた。オーサリングツールが参照するデータベースは、優秀なビルダーたちが日々アップデートしているので、新しいブラウザがリリースされてもほとんど問題が発生しない。

一方、プロのデザイナーたちは、プロフェッショナルツール「Adobe Dreamweaver 2008」によって、ライブドキュメント・デザインの作業がメインとなっていた。

つづく

●参考：
「データベースによってビルダーの作業は自動化される」
K社で採用されていたデザインCMSのイメージ

［映像を見る］
（FlashVideo／音声はありません）

使用アプリケーション：
RapidWeaver 3.2（4,500円）
Firefox（閲覧チェックのみに使用）

※これは「2011年のWeb業界」という本の荒原稿です。書籍にするよりブログ向きだろうと思い、公開していくことにしました

2011年のWeb業界［02］

「中小企業のためのビデオキャスティング」セミナーのカタログには以下のようなショートストーリーが掲載されている。

「Webは”編成”の時代へ向かっている。作り込まれたWebページをバラバラに分解して、再編成することに多くのユーザーは慣れてしまった。
2007年に流行ったコンポーネントタイプのWebページは、デジタルテレビやデジタルラジオ、ケータイやPSPなど多くのネット機器にデータを提供したが、流れを変えたのは第三世代のブログによる。
わずか3年で‥数百万していた業務用CMSを超えるパフォーマンスを持つ新しいブログが、誰でも簡単に、しかも無料で使えるようになった。」

新しい技術の登場（あるいは枯れた技術の新しい活用法発見）と利用者の「慣れ」によって、ネットの使い方がダイナミックに変化していくことを表現したストーリーである。

駅前の広場で新聞を読んでいる会社員AさんとBさん。
2人が読んでいるのは日本経済新聞だ。
同じ新聞だが紙面の構成が違う。
Aさんの日経新聞のトップ記事は「イラク本格政府 発足」
Bさんの日経新聞のトップ記事は「ソフトバンク、iPodケータイ発売」
同じ日に発行された朝刊なのに
読む人によって記事の構成が異なっている。

セミナーのオープニングでは、必ずこのイメージビデオが上映される。
受講者は年配の経営者が多く、新しい専門用語は極力使わないようにしているようだ。本当は「RSS」や「Feed」の話をしたいところだが、まずはビデオで大まかにイメージしてもらおうという狙い。

ビデオの上映が終了すると、Fさんがサイボウズの「feedpath」をスクリーンに表示させて、操作しながら話を始める。セミナーの進行はいつも、こんな感じらしい。ビデオを見せたり、実演しながらの講演だ。

驚いてしまうのは、映像と音声の検索や引用などを受講者の方々に体験させていること。このセミナーは前半が講義形式で後半がハンズオン形式なのだ（ハンズオンでは1人1台ノートパソコンが用意されている）。セミナー名をまともに受け取ると「ムービーカメラで撮ったビデオデータを簡易ソフトで編集してネットにアップする」といった流れが自然だと思うが、ちょっと違うのだ。
以下、ハンズオンセミナーから抜粋。

「これからはデータがとても重要になります。私たちはアセット（資産）と呼んでいます。」

「皆さんに体験してもらいたいことがあります。」

「簡単に言います。ホームページの中にある文章とビデオの１シーンをリンクします。」

「たとえば、海外向けに日本を紹介しているページがあって、その文章の「富士山」の部分をクリックすると、ビデオファイルが表示されて富士山の映像が再生される‥といった感じです。」

この体験とビデオキャスティングがどういう関係になっているのか、まだ説明されていないが「ビデオとビデオが参照しあうようなイメージ」を理解してもらうための第一歩というところか。
Fさん曰く「新世代のブログでは、アップロードするビデオに（簡単に）メタデータとチャプターマーカーを埋め込めるので、シーン参照が容易になる」と。

つづく

●参考：
ハンズオンセミナーの最初の体験
「QuickTimeムービーにメタ情報を埋め込んで、シーン検索の対象とする」

［セミナーのビデオをみる］
（FlashVideo／音声はありません）

使用アプリケーション：
Automator
QuickTime Player Pro（3,400円）
Apple iMovie（MacOS Xに付属）

※これは「2011年のWeb業界」という本の荒原稿です。書籍にするよりブログ向きだろうと思い、公開していくことにしました

2011年のWeb業界［01］

中小企業の経営者が集まる某研究会に参加した。話題は「実演デモの配信」である。要するに‥

自社製品のデモを配信したい！

ということだ。今の時代なら「ポッドキャスティング」「ビデオキャスティング」となる。先行している会社が、しゃべり上手の社員を使って製品のデモを撮り、ビデオデータをアップしたところ、大きな反響があった。反響だけではなく、売り上げにつながった。

その映像は素人のレベルで、照明とかフレーミングとか、ほとんど考慮されていないのだが「Flashで制作した商品解説ムービー」より反応があり、商品が売れたのだ。
「ジャパネットたかた」通販のパーソナル版ということか。

この事例のインパクトは大きく、「ポッドキャスティング」「ビデオキャスティング」に興味が向かう。今までは「プロに依頼して制作してもらう」ものだと思っていたが、自前でもいけそうだ。‥と感じた経営者の皆さんは、あくまでサブ・プロモーションという位置づけと言いつつも可能性を見つけようとしている。

重要だったのは、ビデオデータがユーザーに再利用されたことだ。会社のWebサイトで単にビデオが見られるという話ではない。ビデオを自由にダウンロードして二次使用できるルールにしたのだ。不評の製品だったら、めちゃくちゃに遊ばれてしまうが、そこそこの評判であればユーザーのブログでリンクされる。
その会社では最初から「ビデオ投稿サイトなどに（勝手に）アップロードされるのも歓迎」という方針だった。

製品を発売している会社が作った実演ビデオが、ネタとなり素材化することに新しさがあった。
但し、こういう手法はとてもデリケートである。前述したとおり、安易な出し方をするとネガティブ・キャンペーンが起こり、評判ガタ落ちである。レピュテーションリスクが高いのだ。

そこで「中小企業のためのビデオキャスティング」セミナーである。
会議ビジネス・マネジメント、イベントプランナーとしてのティム・オライリー氏を尊敬するFさんは、「ユーザーと一緒に製品を育てていく」ための「ポッドキャスティングおよびビデオキャスティング」活用に注目。

うっかりすると単にデモ映像を自社サイトで公開するためのセミナーと思ってしまうが、ビデオの共有化やユーザーのためのプレリリース・キット（ユーザーが自由に使える販促素材）、社員ブログ、社員の自由行動、コミュニティとの接続など、今までのアプローチとは違うものだった。

つづく

※これは「2011年のWeb業界」という本の荒原稿です。書籍にするよりブログ向きだろうと思い、公開していくことにしました

PSPユーザー優勢

アンケートの結果、PCよりもiPod、iPodよりもPSPという結果となった。ケータイはパケ代（パケット料金）にとても、とても、とても神経質なので外れてしまう。かなり意外な結果。

偶然にもPSPに関しては、ビデオキャスティングの対象メディアとしていたのでノウハウが生かせるのだが。それにしても若者はパソコンをあまり使わないのだろうか？

PSPが好まれる理由は、価格が安い（2万円）、月額数百円でネット使い放題‥（やはりお金）。あとは、iPodより画面が大きい、JavaScriptやFlashのWebコンテンツが利用できる、Google VideoがPSPのダウンロードに対応している、膨大なフリーウェアがある等。

参考：WIRELESS GATEは月額基本料金210円

■eラーニングの講座コンテンツ（ビデオ）を配信、PC経由でもMSコピーでもOK

■Web教材は、XHTML1.0 とCSS2で作成（CSS2は一部未対応）。PSPのブラウザ「NetFront」で閲覧。MacOS Xのブラウザ表示のように美しいレンダリング。私のWindowsマシンより読みやすい。
Web標準の仕様でページが作られていれば、PSP用のCSSレイアウトを適用するだけ。

PSPの液晶画面でビデオ（UMD）を90分観るというのは、私には無理だが‥そこそこ売れている。是非とも調査したい。PSPくらいの画面サイズなら「慣れ」でいけるのだろうか？

映画館でも観る、大きなテレビでも観る、パソコンでも観る、そしてPSPでも観る‥
ディスプレイ・インパクトのレポートを（もっと取材して）書き換えないといけない。

尚、このPSPレポートに関しては音声雑記で詳しく。

CSS Nite Vol.8

木曜日、アップルストア銀座で「CSS Nite」が開催されます。

日時：5月18日（木） 19:00スタート
場所：アップルストア銀座 3F Theater
金額：無料
申込み：事前登録不要
ゲスト：森田雄氏（ビジネス・アーキテクツ）

第1部が森田さんのプレゼンテーション「ビジネス・アーキテクツのCSSデザイン　─コンポーネント管理のフレームワーク─」、第2部は鷹野さんの「target属性の是非とLightbox」です。
Webデザインにご興味のある方は、参考になると思いますので是非お越しください。

design zero Webの本

現在、進行中のDW本、いよいよ大詰め（今月下旬には告知できそう）

DW本が完了した後は、design zeroでやっていた「CSSアラインメントルール」などを書籍に。
詳しくは本日の音声雑記「［file-162］新しいWeb本の企画」で。

design zero - PSP web 2006/5/11

終了、お疲れさまでした（メモ）

●「ミドルディスプレイとしてのPSP」

１）Webドキュメント
＜div id="scene00102400" class="documentary"＞

２）ビデオの要約、引用
＜chapter maker="scene00102400"＞
ビデオの＜div＞タグとシーンのグループ化
V-CSSでDVDとiPod、PSPにリデザイン

３）ビデオのマークアップとダイジェストの書き出し
Webページの画像をビデオからパブリッシュ

PSPをモデルとする理由：
・低価格なので複数台用意できる（2万円で買える）
・無線LAN機能がある
・ブラウザでFlashが再生できる
・FlashPlayer 6搭載
（※システムバージョン2.70にアップデート）
・MacOS Xのワークフローで書き出されたビデオをPSPに転送できる
（※Popcorn 2が必要）
・文献が多い（世界中にユーザーがいる）

●勉強会
「ミドルディスプレイで見るカスタマイズ・ウェブ」

・小さなディスプレイとグローバルブレイン
・メタデータと再利用技術
・5年後のライフスタイル
・人間と道具、慣れと標準

●「PSPを指南書にする〜ライフスタイルデザイン」

近況、映像ブログ「DESIGN ZERO」のお知らせ

5月8日（月）曇り
大型連休も終わり、通常モードへ。仕事は金曜からスタートしていたが、本格的に始動するのは本日からだ。

まず最初の雑務は「スパムメール整理」である。やはり想像どおり、3,000通以上のメールがたまっていた。昨日の音声雑記でもお知らせしたが、勘に頼りながら削除していくので「読まなければならないメール」がスパムに埋もれたまま消滅してしまう可能性大。先週後半からのメールが対象。返信がない場合は再送をお願い（大変申し訳なく‥）
朝から、とりあえずメール返信中‥お昼くらいまでお待ちくださいませ。

●お知らせ

映像ブログ（ビデオキャスティング）は、もう少々。
現在、音声雑記ブログにて間借りした状態でアップしている。

・週刊徒然映像雑記という路線は止めることに
・クリエイティブをテーマにしたビデオが多いので「DESIGN ZERO」ブログに変更
・FlashやWebデザイン関連の講座ビデオもこの映像ブログで見られるようにする
・当面はFlash VideoとiPod設定のMP4で配信

映像ブログのワークフローは以下のような感じで進めている。

・素材をすべてメタ情報で管理（Poftfolio 8を使用）
・Webページや印刷物、映像など可能な限り素材を共有
・映像はFinal Cut Expressを使用（Proではなく3万円の方）
・新規分のビデオは、メタ情報とチャプターマーカー情報を埋め込んだ状態でアップする（※チャプターリストはQuickTime Playerで使用可能）

ビデオにチャプターマーカーを埋め込むのは、映像の引用を可能にするため。○○ビデオの○○シーンについて‥といった引用ができる（やや強引だが）。

ソフトも3万円、ムービーカメラも3万円、とにかく安価なハード、ソフトの組み合わせで構築したパーソナルな環境である。試したいのはデジタルビデオではなく、アセットマネジメントなので若干、変則的なシステムになった。

当初、Adobe Premiere（Windows）を使う予定だったが、Final Cut Expressに変更。なぜ、Macなのかは本日夜のPodcastingで。