11/15/2010

[&] Web Directions East 2010 (Scott Thomas)

Scott Thomas(スコット・トーマス)
『オバマをデザインする』
----------------------------------------------------------------------
photo-14

@simplescott
http://simplescott.com/
http://www.designing-obama.com/

September 2007
非常に昔のことに思える。
今、アメリカではひとつ選挙がありましたが、
ずいぶん昔のことに思える。
非常に大きなことがありました。
ブッシュ政権にたいしていろいろ不満がありました。

このキャンペーンでいろいろなデザインをし、
大きな変化がでてきました。
ロゴを見てください。
日が昇っているところが見える。

Web と 印刷。
まずはデザイナーを雇わないといけない。
Web と印刷で担当を分担。
いろんあことが関わってきた。
プロジェクト最初にユーザーリサーチを行った。
キャンペーンは常に動いていて、それについていく。
航空機で移動するたびにインタビューが行われ、常に更新していた。

人に集中する。
CHANGE WE CAN というのは広報のメッセージではなく、皆のメッセージ。
メッセージは希望を持っていなければいけなかった。
希望や変化など。
世界の希望とは?イメージだけではなく HOPEという言葉でコミュニケーションできた。

歴史的な空気。
アメリカの政治で初めて黒人と女性が大統領選にでていた。
これをどのくらい歴史的なことかということのフォーカスした。
最近のタイポグラフィと古い字体に似せて使った。

オバマは若い政治家であった。
同じメッセージを打ち出していたので、分かりやすかった。
キャンペーンの中で同じ色、同じタイポグラフィーを使うことにした。
一貫性をもって、調和がとれている。
これがベストプラクティス。

いったん戻って考える必要があった。
ここで重要なのはコアのミッションを理解すること。
コアミッションは何か?
何に到達しようとしているのか?
いろんなページがある。
大切なのは説得すること。
現場で、草の根で語ってもらうアクティベーションを考えた。

アメリカは大きく、州によってライフスタイルが違う。たくさんの人がいる。
さまざまな多様性がある。男性も女性もいる。
スペクトラムを全て網羅し、中心となるフォーカスも。
オバマとはどんな人なのか啓蒙しなければいけない。
つながりを感じてもらう。ソーシャルネットワークを使った。

まずは「青」
色の濃さをかえた。
白も。使った。
まず全てコンテンツモジュールを整理した。
色、タイポグラフィーの一貫性を保つ。
フォールドというコンセプトを使った。
スクロールを長くすることによって、全てを盛り込んだ。(楽天メソッド!?)

同じような問題を抱えているニュース、マスコミと同じ。
たくさんのコンテンツが1ページに入っている。
ニュース組織と同じことをやっている。
そのニュースとあっているということ。
様々なキャンペーンを行った。
デザインも少しつづかえていった。
青色も少しづつ明るくなっていった。

サイトはキャンペーンにとって重要なものであった、
1チーム一丸となって、電話もうまく活用して。
重要だったのはデータ。州レベルで何が行われているのか?
実際には、ゲームのように。
コンピュータから離れて、ドアをたたいてほしいと、

ピンクのユニコーンが大活躍(笑

New Media Director ; Joe Respars
どのようなソーシャルネットワークでも、その時に使えるものを全て使った。

何がうまくいったのか?
ブルーは何がいいのか? 解析チームが何がより良いのかを調べた。
2つの欄より、1つの欄がいいなど。仕事量は2倍になってしまったが。
できることを全て、情熱を持ってやった。

みんなが足並みをそろえてやった。
投票しようとしたら有権者登録しないといけない。面倒。
その登録はとても複雑。当局に複雑な書類を送って、
やっと登録できる。
Web デザイナーも劇的に登録する方法を考えた。

Simple Vote という手順を作った。
ユーザビリティのエキスパートなら、手順が多すぎると言うかもしれない。
これは人とコンピュータではなく、
人と人を模倣。
簡単な言葉で訪ねて、自然にたずねた。
例えば55歳なら、学生ですか?という質問をしなかった。人間的に。
ロジックを集めて、堅牢なものにした。
複雑なプロセスを簡略化した。
実は背後に非常に複雑な仕組みを作った。
質問を全て取り出せるようにしなければいけなかった。
そして、簡略化するためにたくさんの仕事を行った。
いままで政治が達成していなかったことを行った。
意見を表明する権利がある。

世界中で何が起こっているのが分かった。
非常に力づよいメディア。
whitehouse.gov はより透明感のあるメディアにしなければならなかった。
初めて政治でできるだけ多くの情報を公開するようにした。
Twitter も YouTube も様々な規制があったが、法律が改正されて
透明度をあげた活動ができるようになった。
この後どうすれば良い?

What do you do after that?
それが終わってからは何をしてたのですか?

■本を作った。
なので、歴史的な出来事であることが分かっていた。
Web はすばらしいが、劣っている部分もある。
本棚に収まることを考えた。
本を書くのは難しい作業。
ほとんどの出版社は本質を知らない。
出版社に利益をもたらすことではなく。

Kickstarter.com を使った。
小さなドネーション、多くのサポーターを募って
この本を作った。
8万4000ドル集まった。
多くの作業が必要だった。
選挙の後に休暇をとって、作業して、
どのようにプロデュースすれば良いのか考えた。

紙媒体のコストを考えて、どういうことが提供できるのかを考えた。
キャピタルオフセットで印刷、アマゾンで発売。
これは絶対に失敗に終わらせたくないと思った。
最終的な編集をして、カラー修正して、
ブックケースもデザインして、全部縫い目を入れて、
世界中に出荷しなければいけない。
郵便局と非常に友達になって。
Amazon の出荷も考えて、ラベルも全てデザインして、
最終的に郵送して。
2000ラベルを印刷して。
髪の毛が抜けるくらい気をつかって。
とにかくすばらしい体験だった。
一生大切にできる本になった。

多くの経験を持った人と
同じ目標を持った。オバマを大統領にしたかった。
その後は自分の本を作りたかった。
物理的に手で触れるもの。
これは Web サイトで得られる感情ではなかった。
多くの作業をキャンペーンで行った。
政治については話したくない。
キャンペーンでどういう作業をしたのか?
世界中で何を行ったのか?
新しいアイデアを皆で共有したかった。

以前個人作業は重要だと思う、
印刷は1回しかチャンスは無い。
iPad のデジタルブック。
なぜ?短時間で作れる。
すごい変革がある。多くのエネルギー無しに作れる。
非常にワクワクする。
できれば無料で提供すべき。
世の中に図書館があり、無料で読める。
本は無料で配れない。費用がかかる。
デジタルなら無料で配ることができる。

Q&A
A: そのような体制で?
Q: 私はナショナルデザインディレクター、上がキャンペーンマネージャー
 使っているツールを使って、Webサイトを構築。
 絶えず質問しました。一回目ではうまくいかない。
 共同作業をやった。いったりきったり。やり直す作業を何回もやって。
 
A: 青がキャンペーンごとに進化していった。見直して1から直す。
 非常にユーザーが多いのに、やり直すには勇気がいる。
Q: コンテントの中核がにたような使い方であれば良い。
 非常にゆっくりな進化であった。一日2回、3回と、いろいろと
 Analytics を使いつつ、デザインプロセスが進化していった。

A: 全体のデザイン行程において、外部の援助はあったのでしょうか?
 ユーザビリティの専門家とか?
Q: 基本はボランティア。私自身は 10人くらいのボランティアが働いていた。
 多くの人がこのキャンペーンに興味を持ってくれた。
 簡単に参加してくれる人がいた。人々の熱意でできたもの。

A: 中間選挙の前、100万人のファンが facebook にいた。
 これはどういうふうにもっていく?
Q: ひとつの方向に推していく。同じようなモチベーションがある。
 ひとつの声は、呼応する。

A: 青の色、どのくらいWebサイトをかえようと思ったのか?
Q: 夜の 2時くらいまで作業していたから、もっとはっきりさせようと思った。
 私たちはデザイナーだから、毎週毎週作業をやっていったから。

A: 皆さんの活動を通じて、選挙の活動があったと思うが、何がどんなことを学習したか?
Q: まず最初、キャンペーンの中で学習したのは、
 デザインがどれだけ重要であるのかを知った。
 いろんなシンボルがある。力は正しいシンボルを使うことで生まれてくる。
 間違ったシンボルを使うと失敗してしまう。
 悪いシンボルを使いたくなかった時も、組織が使いたいを思うときもある。
 本来使いたくないものは誰がデザインしたのか?
 そのシンボルを外した。
 デザインプロセスは重要。
 いろんなアイデアを進化させていくのは、数字で見ていくことだけではできない。
 何をどう進化させていくのか?非常にたくさんのことを学んだ。

[&] Web Directions East 2010 (John Resig)

John Resig (ジョン・レシグ)
『モバイルJavaScriptとjQuery Mobile について』
------------------------------------------------------------------------------
@jeresig
http://ejohn.org/

photo-13

jQuery Mobile
今日は新しい JQuery Mobile について話ます。
個人的にこの研究を始めたのが2年前の話です。
モバイルはどんどん面白い環境になってきています。
いろんな研究調査をやっています。
JQuery ライブラリの中で学んできました。
Mobile Web 開発はクレイジーな環境。
さまざまな環境がある。
が、以前よりはよくなっている。
モバイル Web 開発の黄金時代にはいってきている。

JQuery Mbobile のシンプルな目標。
最も人気に対応できるライブラリを作る。
大きな課題でもあった。
何が一番人気なモバイル端末なのか、定量的に見るのが難しかったから。
さまざまな取り組みを行った。

どのプラットフォームがもっとも普及しているのか?
どのブラウザなら最近のスクリプティングをサポートできるのか?
どのデバイス、シミュレータをダウンロードすれば、優れたテストができるのか?

優れたデータの収集が必要になった。
使えるデータが分散していて、質のいいデータが揃わなかった。
国際的なモバイルユーザ?
StatCounter の統計や Gartner の販売情報
面白いことが分かった。
どういうプラットフォームが使われているのか?
 ほとんどが一般的な端末。
 iPad/iPhone もグローバルでもると、それほど人気があるわけではない。

グローバルでみて最も人気があるのは Nokia の Symbian
iPHone が次に人気があり、次に Blackbery.
これは面白い現象。
こういったデバイスの売り上げを見たとき、
Symbian の方が増加率が早い。iPHone の 3倍の増加率。
iPHone がプラットフォームとして主流ではない。
Android は Nokia の半分以下でしかない。
グローバルの統計数値は、期待する数値と違う数値がでてくる。
各プラットフォームのどのバージョンが人気があるのか、どこにも情報は無い。
Windows OS とかなら、分かりやすい。

特定のブラウザに目を向けて、プラットフォームの観点から見ると、
Opera がモバイルユーザーとして圧倒的。
Blackbery は堅調にのびている、2位の地位。
その後、iPHone, Android, Nokia というブラウザの順番。
Android はグローバルのシェアをのばしてきている。
ほとんど Android は 1年でのびてきている。
現状ではブラウザのどのバージョンが使われているのか?
という情報が無い。
存在していないということは、的をしぼるバージョンを
直感的に決めなければいけない。

戦略。
Yahoo が始めた、Yahoo!s Graded Browser
どのブラウザが最も良い経験を得られるのか線引きをする。
ブラウザのグレードを分ける作業をする。
 デスクトップのばあいは、数種類のブラウザ。
 モバイルの場合は、たくさんのプラットフォームとたくさんのブラウザ
 品質レベルもいくつかに分かれている。

モバイルのWebサイトを構築しようとするとき、
多くのプラットフォームをサポートすることを考えなければいけない。

■ブラウザテスト

シミュレータが、ブラウザの開発もとから入手する必要があり、
実機も入手する必要がある。
なぜ?
シミュレータのできはたいていよくない。
実機でおこることに相関関係が無い場合が多い。
タッチデバイスではシミュレータで完全にテストすることはできない。
実際のデバイスを使うことが必要。
もちろんコストもかかる。決して安くは無い。
シミュレータは試験を自動化するには適している。
自動化して短期間でテストすることができる。
インタラクションテストは実際のデバイス。
シミュレータのほとんどは Windows で走る。
VMware などを Mac 上で使っている。

■テストの自動化。
TestSwarm というツールがあって、試験を自動化することができる。
現実的な開発が行える。
http://www.testswarm.com/

●Symbian (s60)
Nokia のプラットフォーム。最も日記があるのは S60 v5
v3 は古めのもの。WebKit ベース。
ほとんどのモバイルブラウザの構造。納得のいく体験が得られる。
Safari 2.0 だと古くなるので、サポートの課題がある。
Nokia は Symbian 3 をリリースし、その後全くことなるプラットフォームをリリース。

●Symbian UIQ
人気が失われているもの。
Nokia が数年前に買収したもの。もうサポートされていない。
Opera Moblie (8.6 or 8.65)

●iPhone
最も人気のあるもの。最新の WebKit が使われている。
非常に速く。標準サポートも優れている。
現状 Safari 4
問題はなかなかおこらない。
利点は、CSS の fix postion サポートが無い。
なぜ無いのか? ブラウザの実装に依存するから。
iPhone では TouchScroll library を使うのがおすすめ。
iPHone のいい点は、全てのブラウザの最新版にアップグレードされること。
Apple が OSのコントロールをしているから。
他のモバイルデバイスと異なる点。
全ての iPhone, iPad ユーザーはブラウザは常に最新版がつける。
シミュレータのできが良い。

●Blackberry OS
6.0 は WebKit ベース。それ以前のものは良くない。
古いものは JavaScript の実行が実質できない。

●Android
様々なメーカが Android を選択している。
問題は、様々なデバイスメーカーがどのデバイスで Android を実行するか、
各メーカーが決めている。
OS 1.6, 2.1, 2.2 など、古いバージョンもまだまだ人気がある。
現行の携帯電話がアップグレードするのはまだまだ時間がかかる。
ユーザーによっては 1.6 のまま更新しない人もいる。
Android もすばらしいエミュレータがある。
これから 2年間で主流になってくると思われる。

●Windows Mobile
Windows Mobile 6.5
IE6 のレンダリングエンジン

●WebOS (Palm)
WebKit ベース。

●Maemo / Meego (Nokia)
Linux ベースで高速。
ポピュラーではない。
Gecko レンダリングエンジン。
現在 WebKit に移行中?

●Opera Mobile and Opera Mini
複数のプラットフォームで動作している。
Opera Mini は proxy ブラウザなので、Opera サーバと通信し、
Web ページの削減版を見る。

●Fennec
Firefox のモバイル版。
Android 用も出ている。Maemo と Android をターゲットとしている。
非常に高速。

●Phonegap
WebKit レンダリングエンジンを利用。
HTML/CSS/JS で開発っでえきる。

●その他
Netfront (SONY)
Ozone
Openware
.....

サマリ
Opera 9.5, 10
IE 6,7
Firefox 3.5+
Safari 2,3,4
... Blackberry

モバイルブラウザとデスクトップは違うもの。
最終的にはモバイル実機でテストしなければいけないこと。
Blackberry は全く違うブラウザなので、きをつけなければいけない。

jQuery mobile のために何千ドルもの携帯電話の実機を買った。

●jQuery
複数のプラットフォームで動作するように整えていった。
モバイルデバイス用の機能をサポートいった。
最も重要なのはクロスプラットフォームへの対応。
今我々がやっているのは、改良、進化をやっている。
大きな影響なく、ダウングレードできるということ。
 例えば、JavaScript に対応していない実機の場合、
 HTML で表現するなど、少なくとも基本的なものを見えるようにしている。
ある意味では JQtouch とよくにている。
違いはある。
ページの構築の方法に違いがある。
類似点もたくさんある。
JQtouch は JQuery Mobile のインスピレーションになっている。

簡単にテーマを組み合わせることができる。
JQuery でテーマの変更を扱うことができる。
それぞれアプリケーションにあわせていける。
ページモデル、リストビューなど。
面白い概念がヘッダーとフッター。
 上下で固定されている。スクロールすると消えてしまう。
 スクロール中はできるだけたくさんの情報を見れるようにし、
 ページのスクロールが止まると、ヘッダーとフッターが表れる。
いわゆる Nav Bar 。アイコンも扱える。
デバイスの大きさにもよる。
携帯端末だといくつかしか表示できないが、タブレットだと
たくさん表示でき、スムーズに拡張できる。

通常のマークアップを取り出して、複数ページに分けて利用することができる。
本当にうまくいった。
通常のマークアップでもっと使える形に進化させている。
リアルタイムの検索フィルタリング機能もある。
すべて共通で重要になってくる。

提供するにあたって、コストがかからないようにするのも重要だと思った。
携帯デバイスではできるだけ帯域幅を節約したい。
現在では 16k byte しか使わない。
これからもできるだけ小型にしていきたい。

Q&A
Q: データをひとつのページから複数のページにするのはどのような処理をしているのか?
A: 次のページへのローディングをする時に、最初のページをローディングした後に、
 リンクをクリックした時に、すでにローディングしているのかチェックし、
 ページがリクエストを数回した時、同じ動作をしないようにしている。
 最初のページがローディングされ、スクリプトが実行され、その中のデータにアクセスできる。
 そこでシームレスな動作が行われている。

Q: 昨日のワークショップでの質問。
JQtouch と JQuery mobile との関連は?
A: プログレッシブエンハンスメントとしての関係が深い。
違っている点は、より多くのプラットフォームをサポートしている。
作業をたくさんしている。これだけ大掛かりなプラットフォームで利用できるのは重要。
同時にサイズを小さく保つのも重要。

Q: JQuery mobile はキャッシングは?最初のページにたくさん情報を入れておいた方がいいのか?
A: それはアプリケーションによる。ユースケースによる。
 シングルファイルでたくさんの情報をいれたり、イメージを削減することもできる。
 イメージを使わず CSS3 で表現することでサイズの削減に貢献することができる。

Q: 様々な端末をサポートする時に、画面サイズが違ったものがある場合、どう対応するのか?
CSSのメディアクエリのような対応。
A: メディアクエリは役立つツール。メディアクエリの体験を様々なプラットフォームで利用できる。
自動的にそのモードにあるかどうか、クラスを適応することができる。
スタイリングは全てスタイルシートで行い、
ロジックは全てフレームワークで行い。
大型のデバイスを使う場合、グリッドシステムで自動的にレイアウトをスケールする。
小型のデバイスから、大型のデバイスにあわせることができる。

Q: カスタムデータタイプ属性を使っている。jQuery mobile はグローバルなものを使ってしまっているが?
data-role と data-theme がグローバルなのは、なぜ?
A: ここでのバリデータを遅らせること無く入れることができる。
 このフレームワークを作るときには特定のフレームワークを使う。ここでの対立は出てこない。
 複数のフレームワークを同時に使うことは無いので、現実的な対応。

[&] Web Directions East 2010 (Jonathan Stark)

Jonathan Stark (ジョナサン・スターク)
『HTML, CSS, JavaScript を利用したモバイルアプリ開発』

photo-12

なぜ注目されているのか?
2007年の時点、そんなに携帯電話は高機能ではなかった。
ブラウザがあったそしても、そんなに見せることはできなかった。
デバイスの修正もできなかった。

2010年にはいると、
タッチスクリーンも大きくなり。携帯電話の全域が画面になってきた。
センサーも入り、位置の検知もでき、本当にパワフルなプラットフォームになってきた。
ブラウザのエクスペリエンスが変わってきた。
携帯電話で時間を費やすようになってきた。

Phones
Tablets
Kiosks
Cars
Printers

次に何を期待すべきか?

Home Appliances
Power Tools
Retail Signage
Wayfinding
Food Menus
Product Packaging

"There's naver been a better time to be a web nerd"
Jonathan Stark
「Web オタクにとって、今程いい時は無い(笑」

Mobile Apps
スクリーンは小さいけれど....
Native apps - Fragmentation
Web apps - Sandboxing
SMS apps - Discoverability の3種類あり、欠点もある。

Mobile Apps
全てのプラットフォームに対してネイティブアプリを作るのは
現実的ではない。維持できない。
Web Apps
ブラウザ上で動く。自動的にアクセスできる情報に制限がかかる。
SMS Apps
古い電話でも使えるが、知ってもらえる方法が難しい。

Considerations
Native / Web / Depend
------------------------------------------------
Cosmetics X
Functionality X
Development X
Testing X
Distribution X
Payment X
Support X
------------------------------------------------

テストやサポートは Web Apps の方がやりやすい。
2台以上。企業で利用する場合は、Web Apps の方がスキルもあって、
作りやすい。人々も理解しやすい。配信も簡単。

●Mobile Web Libs
iUI http://code.google.com/p/iui/
jQTouch http://www.jqtouch.com/
Sencha Touch http://extjs.co.jp/products/touch/
jQuery Mobile http://jquerymobile.com/

●JQTtouch
jQuery のプラグイン
JQtouch の style を追加。スタイルをリセットする。デフォルトがいやならば変更できる。
3Dエフェクトが Android ではうまく行かないのでフェードを使う。

●Hybrid Apps
WebとNative のハイブリッドアプリがおすすめ。

●PhoneGap
http://phonegap.com/
@natobi が開発。スケルトンコードをネイティブアプリに。
7-8プラットフォームに対応。
ひとつのネイティブコードに対応すれば良い。

ロードマップ
http://wiki.phonegap.com/Roadmap
JavaScript を使ってカメラにアクセスできたりする。
様々なプラットフォームに対応することができる。

Screen shot 2010-11-15 at 14.52.04

ハイブリッドアプリはとても強力。
開発もテストも配布も課金もサポートも容易。
将来の仕様方法を考えて決定すると良い。

PhoneGap のデモ。
iPhone SDK と Android SDK のシミュレータ/エミュレータで動作することを確認。
Objective-C も Java も全く書いていないのにネイティブアプリが開発できた。

同じコードベースで iPhone 版と Android 版が作られる。
魅力的なアプローチ。
ネイティブアプリの用に扱える。
プラットフォームハイブリッドで作れる。

"If you can build your app with HTML, CSS,
and JavaScript, then you probably shoud."
- Sonathan Stark
できるのであれば、ぜひこれらのフレームワークを使ってやってほしい。

Q&A
Q: W3C の API カメラのアクセスなどを策定中であるが、将来的にはできる?
A: API が整えばかなりの対応ができる。最終的な目標は PhoneGap 無しで可能になること。
 SONY 独自の API なども、独自でなくなる日を期待している。
 Web だけを主張するのではなく、Web の成功要因としても、
 全てのコンテンツをネイティブに持っていかなければならないのは難しい。
 web のフレンドリーの場所、オープン何でもできる。
 今後の幸運を祈っている。


[&] Web Directions East 2010 (Stephanie Rewis)

Stephanie (Sullivan) Rewis (ステファニー・サリバン・ルイス)
『進化するCSS3の世界』
------------------------------------------------------------------------
photo-9

@stefsull
http://blog.w3conversions.com/
 
今日 CSS3 の話。
正しく使おうとしたら、イメージの半分はなくなる。スタイルのために使っているから。
現在変わりつつある。
CSS2 はソリッドなスペック。カラーやバックグラウンドなど。
CSS3 の進化によって、かなりの拡張になった。シャドーや、新しいレイアウトも。
できるからといってすべきというわけではない。

CSS はモジュラーです。
ブラウザの方もいろんなスピードで実装されています。
使えるところから使っていけばいいのです。
スペックが完了する前に使うとき。いろいろなことを覚えておいて欲しい。
これらを使うには。。。。。
いろんなチェックシート

Can i use it .com が便利
http://caniuse.com/

必ずしもサポートされいないとしても、ベータ版で使えるかどうかチェックして欲しい。

Progressive Enhancement というコンセプト。
まず最初に、オーディエンスをよく知る。
誰に出しているのか、どのようなケイパビリティが必要なのか?
経験にどうしても重要ならば CSS3 を使っていく。
使うときに再考して欲しい。Enhancement ならばモバイルデバイスも同様。
Web サイトを作っている時に、どのブラウザでこのサイトを見せていきたいのか?
IE6 対応もできるけど、もちろん追加のお金がかかります。
1999年のブラウザで見られるというのは、シンプルな Webサイトになる。
必要なものを付け加えていき、ブラウザごとに追加していく。Fallback がある。

●Radioactive Buttons
http://www.zurb.com/playground/radioactive-buttons
グローイングしている。
IEでは分からないものもある。よりよいブラウザでは、より良い体験になる。

●OUR SOLAR SYSTEM
http://neography.com/journal/our-solar-system-in-css3/
恒星が回っているのが分かりますか?
インタラクティブな体験が得られる。
Firefox ではアニメーションしていないが、同じものが見られる。
IEでは恒星が丸ではなく、四角になっている。
IE の場合は、変更する必要がある。
いくつかソリューションがある。

●Dean Edwards IE7.js, IE9.js もあり。
http://dean.edwards.name/IE7/
ファッション雑誌なので、どういう表現があれば、読者の判断を得られるのか?
JavaScript と組み合わせることによって、実現する方法もある。
JQuery も対応度が高い。

●Modernizer というツールがおすすめ。
http://www.modernizr.com/
テストした上で、レポートをしてくれる。Fix してくれるツールではない。
エレメントの問題を報告してくれる。
何がサポートされているのかが分かるし、サポートされいないことも分かる。
何がサポートされいるのかを理解するのが重要。

●CSS3 Selectors
お気に入りをいくつかみていきます。
使いやすいと言われているもの。どのブラウザがサポートされていて、何が使えるのか?
という観点から見ていく。

New CSS3 Attribute Selectors 新しい属性のセレクタ
Begins with - selector[attribute^=value]
Ends with - selector [attribute$=value]
Contains - selectore[attribute*=value]

●New Pseudo-class Selectors
CSS のグリッドシステムを使ったり。
マージンを残しておくというものもあり。

New CSS Selectors
nth child selector testing tool
CSS3 Support charts
IE attribute selector support chart

●Transparency - Originally Opacity
Transparency - Color as Opacity
HSLA Syntax で設定もできる。
Transparency - RGBA & HSLA
ツール
http://www.css3generator.com/
http://cssplease.com/
Illustorator CS5 with HTML5 pack
IEフィルタもあるが、パフォーマンスの点でおすすめできない。

photo-11

●Rounded Corners - border-radius
WebKit (最新のSafariでは取り除かれてしまうものもある)prefix が使われているか確認。
varied coners:
-webkit-border-radius などのような使い分け。だからこそツールを使って間違わないように。

Round Corners
http://border-radius.com
http://css3generator.com
http://westciv.com/tools/box-properties/
http://css3please.com

●Shadows & Glows - box-shadow
http://westciv.com/tools/box-properties
http://css3please.com
http://www.css3generator.com

あまり使いすぎると、あまりパフォーマンス上よくない。
テストして慎重に使ってほしい。

●Text effects - text-shadow
IE9 ではサポートするつもりが無いらしい。
やりすぎないように。
非常に興味深いエフェクトができる。
http://mothereffingtextshadow.com/
http://www.typefolly.com/

●Gradients
Radial gradient 複雑なのでツールが必要。
Two-tone gradient effects
http://gradients.glrzad.com/
http://westciv.com/tools/gradients/
http://westciv.com/tools/radialgradients/
http://www.display-inline.fr/projects/css-gradient/

●Multiple Backgrounds
今までは div を重ねて作っていたが、シンプルになった。
7つまで重ねたことがあるが、大丈夫だった。
Modernizer や jQuery を使うことができる。
9-slice scaling

●Decorative Borders
Multi-column text
column-count:3
column-width:15em
Tools
http://westciv.com/tools/box-properties/
www.css3generator.com
Use Columnizer - jQuery plugin
http://welcome.totheinter.net/columnizer-jquery-plugin/

●WebFonts
サポートが優れているが、使えないブラウザある。
WOFFは全てのブラウザでOK.
フォントのライセンスによって使えないものもある。
フォントエラーを出すよりも、Smileマークのアイコンがいいかも。
Tools
Google Font directory and api
http://www.fontsquirrel.com/
http://kernest.com/
http://typekit.com
http://webfonts.fonts.com/
参照:
http://paulirish.com/2010/font-face-gotchas/

[&] Web Directions East 2010 (Bruce Lawson)

Bruce Lawson (ブルース・ローソン)
『HTML5の鉄人になろう』
@brucel
-------------------------------------------------
http://www.brucelawson.co.uk/

photo-5

Bruce Lawson
Be an Iron Chef or HTML (HTML5 の鉄人になろう)


今日話したい内容は HTML5 の鉄人になろうということです。
東京話すのは初めてです。
20年間、初来日でワクワクしています。
アジアでの在住経験はあり、タイにすんでいたことがあります。
タイの大好きな寺院の一つ、タイの北部にある寺院。
伝統とモダンを合わせたったもの。
HTML5 まさにそのようなもの。
寺院の建築家の写真。タイ国王がこれまでの建築物が行き詰まりであり、
新しい寺院、モダンで新しい寺院を依頼された。
寺院として機能しているが、建築中の部分もある。
HTML5 はまさに同じ。場所によっては使えるものがある。
寺院の天井に
宇宙船が描かれていたりする。

HTML5の履歴を見てみましょう。
W3C 曰く HTML は終わりだ。将来は XHTML だと言い出した。
それはいいと思うのだが、XHTML2 の作業に取りかかった。
HTML を美しい純粋な理論的な一環してとりまとめるようなものであった、
今までとつながりが無かった。 < img/ > ががなかったり。

Opera においてはこれまでの HTML を拡張して、
将来に答える HTML としようとした。
Opera と Mozilla が共同でペーパーを提供した。
Web アプリケーションは重要であるが、既存技術で対応できていない。
アプリケーション型になってきた
HTML はドキュメントにはいいけど、アプリケーションには足りない。
Silverlight のような閉じられたアプリケーションで代替されてはならない。

Opera でスペックを書いた人が Google に移った。
W3C はミスを犯したので、HTML をもう一度作り直そうとなった。
昔からいる人間にとっていると、5つのブラウザが協力した。
XHTML2 よさらば。
なぜ勝てたのか?

 HTML5 が勝者である理由
 既存のものとの互換性と、移行の明確さ
 エラー定義の明確さ
 ユーザーがオーサリングエラーに惑わされる必要が無い。

HTML5 のパーサーを見ると、どれも同じオブジェクトモデルを使っている。
100% 完全にエラーが無い、不良コードが無い。
ビジネスにとっては重要。
XML ですが、spec では、エラーが見つかったら、パースを止めるとなっているが、
HTML5 においては、エラーがあった時には壊れたページをユーザーが見れないように。
スペックは現実社会で使えるような用途があるものでなければいけない。
JavaScript は残すという判断。

 実用性:Webプリのスペックに含まれる全ての機能は実際に使えなくてはならない
 スクリプトは残す
 オープンなプロセス

 牛の通り道を舗装する
 いわゆる 80/20 ルール
 理論家<仕様作成者<実装者<サイト作成者<ユーザー

HTML5
DOCTYPE に関して;
たくさんの機能が入っている。今ですでにいっぱい。
位置情報、SVG, CSSは HTML5 に入っていない。
組み合わせるとうまくいくが、まだ食べ物では無い。

HTML5 は HTML4.01 の後任ではない。
HTML5 は HTML4.01 +ギラギラ!
HTML5 は包括的用語:
 マークアップ要素と JavaScript

30の新エレメント(もしかすると31)
ご飯の部分。基盤の部分。

photo-6

HTML4 においては、マークアップとして使われているのはdivだけ。
ページの重要な部分を表現することができなかった。
現在の Web はどうなっている?
Opera で mama と呼ばれるプロジェクト
300万のWebページで使われている要素を調べた。
現実社会で使われている要素。

photo-7
photo-8

Webforms よりパワフルなフォーム要素。
HTML5 の中でのあげた虫に相当。

標準化されたよく利用されるリッチフォーム要素。
ビルトインのバリデーション。組み込みの検証。
(当然、サーバーでも検証するべきですが)
JavaScript なしで、ブラウザの中にビルトインされているものを使える。
皆がやらなければいけないことなので、なるべく簡単にした。
< input name=foo type=date > にするとカレンダーによる日付入力に。
仕事がやりやすいことを前提にしている。
iPhone の場合、< input type=tel > キーパッドの形式も自動で変わる。

< video >
HTML5 のビデオタグに関心がある?
「それが Webが向かっている方向のひとつであり、
現在のところ HTMLでもっともうまくいっていない部分の
ひとつでもあるから、Webアプリをよりうまく
サポートするために言語を拡大する。これにより、
HTMLは Flash や Silverlight を含め、
Webで使えるほかの技術的な直接的な競合になる」
ひとつの会社の手中に収まるのは正しくない。
オープンスタンダードが必要。
デベロッパーの選択肢が増えるということ。
プロのデバロッパーはクライアント、オーディエンス、タスクを
見ながら、ベストなツールを選ぶもの。
良くないデベロッパーは使えるものしか選ばない。

Javaでビデオを入れた例。複雑すぎる。
見た目も美しくない。

HTML5 でビデオタグの表記例。
 
<video sce=pudding.ogv
controls
autoplay
poster=poster.jpg
with=320 height=240>
< a href=video.ogv > ビデオをダウンロードする < /a >


オートプレイは推奨しない。
リンクを設定し、ビデオをダウンロードすることもできる。

ネイティブとしての動画、なぜ重要?
 ページと他の部分との「上手な再生」
 ビルトインのキーボードアクセシビリティ
 管理API

これに関するデモ。
マウスを使えない人用にも重要な機能。
このビデオが小さいサイズで表示し、ホバリングして大きく表示する。
JavaScript でコントロールもできる。
違うブラウザは、違うビデオフォーマットを使っていることは忘れないでください。
 ここで質問しないでください。
 三時間ぐらい説明すると、泣き出してしまうから。

Opera WebM Ogg/Theora 対応。 mp4/h264には対応せず。

動画フォーマットデータベース
 無料フォーマット vs MP4
まだ以前のブラウザを捨てきれない。

参照:
http://camendesign.com/code/video_for_everybody

JavaScript で動画コントロール
HTML5 はなるべく一般的なことをシンプルにできるようにしている。
Opera dragonfly を立ち上げるとコードを見ることができる。

動画 アクセシビリティ
イギリスでも日本でも同様だと思えますが、政府の規制があり、
障害を持った人でも分かるようにしなければいけない。
HTML5 においては、動画に字幕を載せることができる。
ブラウザはテキストファイルから字幕を取得し、ビデオと動機させるようになる。
今はまだですが。
今どうなるのかシミュレーションをご覧いただける。

動画 メディアクエリー
CSS のシンタックスを借りて使うこともできる。
デバイスが 800ピクセル?その場合は高解像度ビデオ。
賀宴が小さい場合は、ローレゾリューションのビデオ。
デバイスの特性に応じて、どちらを再生するのかを選ぶことができる。

< canvas >
HTML5 のマークアップがここまでで、JavaScript が使われる
境界線。
canvas は Apple がダッシュボードとして作ったもの。
何百時間も作ってリバースエンジニアリングしたのだが。
HTML5 ではどのブラウザでも使えるようにスペックに取り込もうと
思った。
スペックに入っているのであれば、取り入れれば良いだけ。
芸術的なことで HTML5 でできる。

canvas = スクリプトできるイメージ
canvas にはドローイングのための標準 API がある。
canvas テキスト
しかし、画面に実際に載せられた時には、文字ではなくなっている。

< svg > それとも < canvas > ?
もともとの発明は Adobe の人が開発したもの。
それが標準化された。
近代的なブラウザの全てが対応している。
ベクトル描画の標準。

SVG
4つの新しいブラウザ+IE9 がサポート
ベクタグラフィクスなので、無限にスケーラブル
XMLでテキストペースだからアクセシブル
DOM をキープ
Adobe Illustrator または Inkscape を利用できる。

さまざまな市場で HTML5 にからんだ事象がおきている。
まだ準備できてないものもある。
HTML5 はお弁当みたいなもの。欲しいものを選んで、
必要なものを選んで組み立てていく。
中身は全く違う。

HTML5 に関してすばらしい本がある。
bruce.lawson@opera.com
www.opera.com/developer

Q&A
なぜビデオのオートプレイがあるのか?
やりたい人が居るから。

Introducing HTML5 (Voices That Matter)





[&] Web Directions East 2010 (Brian Boigon)

Web Directions East 2010
オープニングキーノート
Brian Boigon(ブライアン・ボイゴン)
『「フォロー・ミー」世代を開拓する』
-------------------------------------------------------

photo

今日見ていただいたデモは動画ではありません。全て HTML5/CSS で作られたものです。
もっとも大切な技術をカバーすることを目的としております。
今日の世界においては、モバイルテクノロジーによって様々な情報がやりとりされています。

photo-1

Brian Boigon
#大学の先生っぽい、概念的な講義で、英語/同時通訳ともども難しくて分かりにくい講演であった。

ご招待いただき、ありがとうございます
私ども、スピードリーディングという本を書いています。
本日は簡単に5つの単純な考えをお話します。
友人や同僚がいかにコミュニケーションをはかるのか?
私が書いた本から、紹介します。
宗教的な観点からも言われるハロー効果を紹介します。
軍事的な意味ももち、宗教的な意味ももちます。
本日、いわゆる攻撃的、先進的な取り組み。

LEGOをもとにモジュラリティーという考え方を紹介します。
何でも作られるけど、一つ一つのピースなんです。
現代社会の中では、私たち自身がレゴのピースなんです。
このモジュラーな社会は、遊牧な社会を作ってもいます。

ここでいいたいのはメッセージシステム。
われがわれがなれてきたメッセージシステムは、メッセージを
制作する側にコントロールがあった。
例えばテレビがそう。スポンサーのコマーシャルを流してきた。
だんだん変わってきた。
複数のプレイヤー。これまで受けてだった人がコンテンツを
作る側にもなってきた。
ビットストリームがやり取りされている。

重要なのは、広告業界は、ブランド広告で考えると、
コンテンツが重要。コンテンツの中にメッセージが含まれている。
重要な点、広告は「嘘」。欺いている。
欺きが悪いことではない。
ニーチェ曰く、ミスはエラーでは無い。といっている。
誤解しないでください。
だれが一番嘘が上手か?
それを事例として紹介できるのは、1956 年の話。
To Tell the Truth という番組。
皆が嘘をついて、誰が正しいのかを当てる番組。
広告というのは、伝える。幻影なんだけど、真実のように伝えるのが広告。

通信の世界において、演算技術をゲームと組み合わせて考える。
処理エンジンがあって、全体的な特徴として、体験を与える。
図面の中で、スペースの中でやりとりする。
物理的なスペースに影響を受ける。
野球もそう。図面によって空間が区切られる。
モバイルもそう。ある場所が区切られていると見る。
ビデオゲームはインタフェースもあれば、ゲーム自身もある。

じゃあ、follow me 世代に受け入れられるのはなぜか?
まずはオーディオから聞いてみましょう。
これから技術がどれだけ進化してきたかの歴史が見られる。
まずはラジオがあった。
今でいうようなレコード会社とは違う。
レコードプレイヤーを再生機を売りたいので、レコードを売った。
コンテンツが独自の位置づけを固めてきた。

携帯電話技術の進化、テキストメッセージから始まった。
この世界はまさに follow me 世代としては、
ボイスメッセージから始まった。
音によるメッセージが伝わってきた。
子供達はもはやボイスメッセージは使わない。
もはやテキストしか使わない。

オーディオのプロジェクト。SONYが BMG を買収する前。
アメリカで様々な市場にいった。
様々なバイラルを使ったプロモーション。
伝説になったプロモーション。
トラックに巨大なエルビスを描いたトラック。

photo-2


駐車場のワイパーにクーポンを挟む。
XBox を買うとクーポンをもらう。そのクーポンでチョコを買う。
経済の中で新たな購買を生む。
物理的な関係を生む。
物理的なクーポンを使って、仮想的な空間に誘い込む。
ポイントをためて貨幣として使うこともできる。
ミクロ経済をテクノロジーを使って形成した。
これも鍵の要素となる。
モジュラリティーの話、BOUBLE BANKING は
様々なデバイスに反映させることができる。

様々なビデオゲームの歴史を見ると、
経済の中での進化状況を見ると、
イギリスの国立銀行の処理状況。
ここでのメッセージは、メッセージを入れておくコンテナとして
どんなものを作っていくか?
地図製作もモバイルの中に取り入れなければいけない。
推論の検索基準。プッシュ型のもの。
様々な製品として推薦ができる。

バッテリーとおもちゃは対になっている。
バッテリーは必ずしもおもちゃについてこない。
リチャージできるバッテリーがコミュニケーションのきっかけになっている。

経済に関する話。
カオス理論。カタストロフ理論。
どのような形で市場に浸透させるのか?
1999年の Matrix NEO の机。
全てごちゃごちゃに見えるが、本来あるべき姿に整っている。
ソーシャルマーケティング、ジオターゲティング。
リーバイスのプロジェクトで初めてジオターゲティング
プロモーションを行った。
20本の ウェビソードを作って、
18ー24歳のコンシューマをターゲットとして、
48のリンクを用意し、ストリートチームがインターネットの
監視を行った。
地下鉄のマップ。各駅独立して需要性が変わっている。
4% の売り上げ増。貢献。子供達がバーチャルチームが
ジオターゲッティングを行った。
URLや写真を効果的なところでリンクした。
メトリックスが複雑化した。
カタストロフ理論を使った。カオス理論のひとつ。

コップに水を入れる。潮力がいっぱいになる。
2つのことが主になる。
やりとりし、混乱し、変化が急におきる。
いろいろな例がある。
このカタストロフィー理論をいろんなところにあてはめる。
全ての人がそれによって離れていく?
何かが起きて、それが壊れる。
強すぎるとか、遅いとか。
つまりこのようなことが次々とおきる。
モバイルのコミュニケーションでもスパイクのポイントが
どこでおこっているのか?

ON-LOOKERS
例えば、ウソは、何かを伝えるためのもの?
真実を伝えるためのウソ?
本当の意味でのカタストロフィーではない。
水がバスタブからあふれること。
マーケティングのメタファーである。
follow me 世代を理解するには、
世界がものから出来上がっている。
一連のフィルターがあって、街に届く。
デリバリーシステムがある。
そう考える必要がある。
キャリアがハードウェア、コンテントプロバイダ。
フィルターを介して何かが出来上がっている。

傍観者とすると、データというものは
データとして出てきて初めて見ている。
逆になっている。
もうすでにその状況は終わっている。
その瞬間は終わって、
全てのものは広告されて、
見物されている人は、おこったことを見ている。
過去のことを見ている。
広告は状況が終わったことを経験として見ている。
ファッションは過去をみている。
一番最初ではなく、2度目に見ていることになる。
我々はいつもそこに静止していわけではない。
動いている。
いろいろなオブジェクトを見ている。
もうすでにおこったものを見ている。
実際に動いているものを見ている。facebook かもしれない。
動いているんだけれども動いていないとういパラドックス。
二つの場所に同時に居る。

Twinkies と読んでいる。
テレポーテーションが存在するということ?
ここに居るとともに、同時に他のところにも居る。
紙を分けたとする。
ここに居るんだけれども、話をしているわけではないが
別の人と話をしている。

Bench.
ブランディングとしてコミュニケーションの形。
すわれるベンチの前は何だったのか?
少しひねる。ねじると、ベンチはブランドになる。
ブランドを身につけている。
モジュラリティーの世界。新しい文化の形が出来上がってくる。
コンシューマが文化を作る。
仕事のやり方がかわってくる。

ゼログラビティー
全て動いているダイナミックなシステムで、
どんな会社でも新しいものとコネクトしていきたい。
そういったところとコネクションしていきたい。
もうすでに多くのブレイクスルーが MySpace の中でも
行われている。
すぐにその人たちの注意は消えてしまうかもしれないので、
いろいろなモーションで持ってくる。
全て世界は常に変わっているものをマーケティングに使う。
ソーシャルネットワークで、また遊牧民の生活に戻ってくる。
いろんなものが動いてきた、
ツールを発明し、それが変わってきた。
今までの狩猟生活から。
ビデオゲームをする、グラビティという意味では。
それが定住型である。
他の人がどこかにいる。
そういう人たちが。座りながら走っている。
AR の中で、定住ではない、狩猟民族のように移動している。
ハイブリッド型といえる。
これがまさに市場の鍵となる。
現代世界はこのような状態になる。

遊牧民的な考え方。モバイル時代にあったもの。
定住していながら、遊牧民てきなもの。
新しいモデルで対応していく。
2つの例。
一つは作業環境。アクションオフィス。
職場に行く。FAXがくる。電話がくる。
あとは全部仕事。
週末のみが楽しみであった。
今と全く違う。内向的であった。
例えば Blackbery が出てきた。スマートフォンで
テキストメッセージが送れるようになった。
メッセージが遊び心に満ちている。
職場環境も変わってきた。
現在、遊び心と仕事が一体化されてきている。
フラットで広がっている。

現象がこれまでどう変化してきたかのか?
どういうダイナミックな変化をしてきたのか?
新しい環境におけるコミュニケーションが作られてきた。
自分のスペースがある中でどういう仕事ができるのか?
電話向けのアプリケーションができてきた。
その中から外に出てくる。
モバイルコンピューティングから。
GPSとwifi を組み合わせると、新しいものが実現できる。
ここの店舗でディスカウントしているとか。
すべてが GPSの環境だと複雑になる。
何かを探していたとなると、電話が鳴る。
コミュニケーションはモバイルで形をかえてきた。
このような全て表現のレベルはどう対応したら良いのか?

カオスの状況、混沌の状況。
どこに集中しているのか?
もともとは漫画、表現とは何なのか?
表現には3つの要素。
動詞。
我々の社会では、見ているものと、背後にあるものの距離感が
なくなっている。
見る前に様々なフィルターをかけている。
ストーリーを作るためには何かの距離が必要。
ブランドモデルを作るときには距離が必要。

トヨタの広告。4人が座っていて、ラップトップを広げていた。
この人たちが車に行くと、そのような感情を持つために
距離感が必要。
虚構である。
現実の仮想とを考える。背後のものが重なって厚みになっていく。
虚構、嘘なのか、マッピングのシステムの中で組織だてられていく。
テレポーテーションという考え、カオス理論。
様々な理論がシステムの中でからまりあっている。
メイトリックスの中でおこっていくことを理解して、
どのようなフォースを与えられているのか理解して、
その一部となる。

Apple は現在屋外広告はゼロ。Webを見ると新たな情報があるなど。
消費者が直面している環境でプロモーションをしている。
ビクトリアンズマーケットは
タイムズスクエアのビルボードに 900万ドルの広告を出している企業もある。
人は100万人以上の人が動いている。
Apple のようなプロダクタイズマーケティングを使うと効果的。
様々なコミュニケーションの媒体がる。
うまくシャッフルして必要なところに働きかける。

photo-4

ホームデポ量販店のランプ。1700年代に作られたもの。
ほぼ今日でも形は変わらない。
違いは何なのか?
コンテンツが違う。
元々は炭だったのが、太陽電池とランプに変わったが、
フォルム自体は変わらない。
フォームは変わらずにコンテンツだけを変える。
コンテンツをかえれば勝者になれる。

モバイル世代の follow me 世代の勝者になれる。

11/13/2010

[&] Google TV (Designing for Google TV) 10 foot UI

次世代テレビ勉強会で Google TV のデザインに関してお話したことを載せておきます。


Designing for Google TV
Google TV のためのデザイン 10 foot UI とは?


10 foot User Interface
ISBN13:978-6130257934
$49 ←けっこう高いくせに、コピー紙綴じたようなショボイ本です。

YouTube Leanback
http://www.youtube.com/leanback

Mozilla/5.0 (X11; U; Linux i686; en-US) AppleWebKit/533.4 (KHTML, like Gecko) Chrome/5.0.375.127 Large Screen Safari/533.4 GoogleTV/161242
Google Chrome 5 (stable)

■Google TV 用 Web制作のポイント

●ごくごくシンプルな作りに。色使いに配慮。明るすぎない明るい色調で。スクロールなし
●ナビゲーションは単純に、明確に。片手で、一回でできる方法で。なにが選択できるか?
●テレビ画面サイズを考えてデザイン。コンピュータの画面では無い。PCの2倍の気持ちで
●文字フォントは重要。大きさも、太さも、行間も。コントラストも。
●一画面に表示されて、読み切れる文字数を考える。
●音に頼らない。びっくりするような音を出さない。
●表示パフォーマンス重要。速度は PCよりも携帯電話よりも重視。だれも待ってはくれない。

■文字

●1段落につき 90文字が限界。日本語にすると 50文字くらい?
●日本語字幕は 10〜13文字で2行。10文字以下なら一瞬で読み取れる。
●暗い背景に、明るい文字が読みやすい。またはその逆
●720p なら最小でも18pt 推奨 21pt 以上。1080p なら最小24pt 推奨28pt 以上。
●印刷物よりも行間を広めに(文字が大きいことだけが読みやすさでは無い)

■色

●純粋な白 (#FFFFFF) は極力使わない(ゴーストが目立つ)。
●推奨は (#F1F1F1) (240,240,240) 十分白に見える。
●明るい白、赤、オレンジは色がにじみやすいので注意。
●テレビの様々なモードで表示を確認すること(省電力モード、シネマモードなど)。
●細かいグラデーションには注意。マッハバンドが目立つ可能性が高い。
●性能の悪い、ガンマ値の違うディスプレイで見ているものと考える。
●ピクセル単位での調整を厭わない。

■チェックポイント:表示

●本サイトは解像度720pにて正しく表示される事を確認済み。
●本サイトは解像度1080pにて正しく表示されることを確認済み。
●本サイトは(解像度に関係なく)オートズームでも正しく表示する。
●本サイトは最小限の待ち時間(3秒未満)にて読み込む。
●本サイトはコンテンツの読み込み中その待ち時間の視覚的表示を使用する。
●本サイトのいずれの場所でも、スクロールバーを使用あるいは表示をしない [CSS overflow:hidden が適用される]
●代わりに、待ち時間の案内表示、矢印、クリック可能なページ数などが使用される。
●少なくとも10%の余剰分を伴う親コンテナの制限内にて、全てのデータ類が読み込まれる。

■チェックポイント:デザイン

●本サイト使用色はテレビ画面上にて正しく表示される(この点は各自の判断に委ねる)
●本サイトは画面からのはみ出し予防として、エッジ・パディングを施してある。
●全てのグラフィックスは解像度720pおよび1080pにおいて、ピクセル化せずに正しく表示する。
●全ての文字類が読み易くなっている(つまり、10フィートの距離からも簡単に判読するに十分な文字の大きさ)。
●明るい白色類、赤色類、およびオレンジ色類を使用していない(色の歪み防止のため)。
●解像度720pでは18pt未満、および解消度1080pでは24pt未満の文字は使用していない。

■チェックポイント:ナビゲーション

●本サイトは(フォーム要素も含め)D-パッドにより簡単に操作できる。
●デフォルトのページネーション要素を含め、操作ではマウスが不要である。
●選択された要素によっては視覚的な待ち表示が施される。
●スプラッシュ画面またはヘルプメニューによって、ユーザーがどのように本サイトを操作するのかを手助けする(任意)。

ビデオおよびオーディオ・メディア・プレイヤー:
●データ送受信の管理を表示(必須)
●アイコンまたはメニューにてフルスクリーン表示が可能(任意)。
●メディアの再生時間および現在の再生位置を表示(任意だが推奨)。

入力装置のデータ送受信の管理ボタンに対応(任意だが推奨):
 178: 停止 | 176: 次へ | 177: 戻る | 179: 再生 | 179: 一時停止
●D-パッドの入力ボタンおよびマウスでのクリックが同じ作用となる。
●スクロール: D-パッドに対応。
●ページング要素: D-パッドに対応。
●ホームページへ戻る容易な操作方法を提示。
●Escキーにより、ポップアップ画面からユーザーを除き(同時にポップアップ画面を閉じる)、そして/あるいは全画面表示を終える。

■チェックポイント:その他
●本サイトでは適切な法律関係情報へのリンクが提示(個人情報保護、利用規約など)
●本サイト/サーバーは、利用者がユーザー・エージェント(ラージ・スクリーン、グーグルTV)を通じたテレビ対応のウェブサイトに属するものとする。
●バグ/エラー報告をするユーザーが特定されない仕組み(グーグルTV DevRelへ情報/フィードバックを提供)

●リソース
http://en.wikipedia.org/wiki/10-foot_user_interface
http://www.googletvforum.org/
http://www.logitechgoogletv.net/
http://googletv.blogspot.com/
http://code.google.com/tv/web/docs/design_for_tv.html

11/10/2010

[&] World Usability Day 2010 Japan

World Usability Day
-------------------------------------------------------------------------
グローバルリサーチと モバイルコミュニケーション
           東京ストーリーズ 市川 文子氏
www.tokyo-stories.com

ユーザビリティリサーチャとして。
少しさかのぼって、12年前からの業界の話をさせていただければ。
12年前日本の大学を卒業して、Nokia のリサーチセンサーに就職
9年間お世話になった。最初は ユーザビリティリサーチャとして。
一番最初にあったのは、ラボを使ってリサーチをした。
かなり典型的なユーザビリティテストが多かった。

機運がかわったのは 2001/2 くらい。
「中国をどうする?」
Nokia はフィンランドの会社。
アジアには大きな拠点は無かった。
今まではメニューを翻訳するだけで良かったが、
これからは本当に携帯電話でメッセージも扱うときにどうしよう?となった。

この当時まだまだ Nokia はモトローラなどとは差があった。
中国は出稼ぎが多い。
通話よりも遥かにコストが安いメールでのコミュニケーションが多いのではないか?
わりと早いうちに、プロダクトのコンセプトを考えてみよう?
タッチパッドで文字を扱えるかどうか、検証してみようとなった。
どう形にしていくのか?
このプロダクトは中国市場でしか展開していないが、長い間売れた。

photo-0

「街へ出よ」
ラボではまかなえないと感じた。
欧米では市場が飽和してきている。
インドなど、アジアに展開しようと考えた。
商品ができてからのユーザビリティ評価では遅い。
今使っている人のニーズ、今使っていない人のニーズもとらえようと考えた。

そもそも、ラボがあって、端末を評価するという体制だった。
その移行がすぐうまくいったわけではなかった。
できるだけ、限りなく、人脈を使って、すこしづつ違う市場を模索する日々た続いた。
もちろんエージェンシーを使うこともあるが、
電話帳をよくするにはどうすれば良いのか?を考えると、
新しい機能では無いので予算は潤沢ではない。
デザイン学生や、留学生を捕まえて、お願いした。
社員からの情報収集も。

つとめていた場所は、3カ所だが、
リサーチ対象としたのは、数多く。
設計をしっかりして、プロトコルを作っていくと、どこでも通用する。
リモートでリサーチする経験をつんでいった。

街頭調査のサーベイ。10分くらいの調査。
11ヶ国で 2000人くらいのインタビューをとることができた。
ディープインタビューではないが、知らないことを知ることができた。

3-4年くらいから、ユーザエクスペリエンスだけではなく、デザインリサーチという波が。
ひとつ「デザイン・リサーチ」という背景は、携帯電話をラボの中でみるだけでは
足りなくなってきた。
どんどんさかのぼっていくと、開発以外で戦略的なことを考える。
ほかの部署の人も吸収できること。
インドのスラム街に入っていって、調査する。
最初に外観をみられる。文化にとけこんでいるかどうかをみられる?
ローカルスタッフが服装をチェックする。
コミュニケーションというテーマでは、自分もテストされていると感じる。

調査対象の多様性 → 対象者のコンテキスト
ユーザーの生活に根付いたところで調査を行う。
多様性と深さの両方が広がってきていると感じている。

「パズルからミステリーへ」
まったく違うコンテキストで言っていること。
私たちは情報はありすぎて、自分たちが思い込んだパズルの枠にあてはめていくのはもう無理。
枠は無い。そもそもフィールドに行かなければいけない。
実態を知らなすぎる。

「モバイル・コミュニケーション」

コミュニケーション:
人間が互いに意思・感情・思考を伝達しあうこと。
コミュニケーションズ:
人や場所同士をつなげる手段

コミュニケーションとは、手段へのアクセス
携帯電話はユーザの手に届くというものと、アクセスできるのか?というのも。
ウガンダで観察したこと。
村自体が最寄りの街から 30km 離れている。回線も無い。
そこに携帯電話がやってくる。ビジネスマインドがある人が1台買う。
携帯電話のアンテナを設置する。村に電話がやってくる。
「電話を受けられる」
電話をかけるだけではなく、電話を受けられるようになる。
コミュニケーションを受ける手段ができた。
電話がうけられることによって収入がアップした。
通話料に対して、通過が生まれる。お金を送金するシステムを思いついた。
通話料をお金として扱う。ユーザーのイニシアチブで始まった。

コミュニケーション手段とは何なのか?「自己証明」
ガーナで住所を聞くと、通りの名前までしか教えてくれない。
番地までの分け方の概念は無い。最寄りの郵便局で私書箱を使う。
自分を証明する手段。日本に居るといろいろある。
実はかならずしもあるものではない。
携帯電話がその人の ID として扱えるものとして出現した。
生活を豊かにする手段。

「モバイル・エッセンシャルズ」
必ずもっているものが、携帯電話とお金と鍵。
日本では電話料金を毎月支払うが、世界的にはプリペイドが主流。
使い切るとチャージしにいく。そこで新しいコミュニケーションが生じる。
サービスとの距離が近い。

数字が意味するところ。
ゾロ目の番号が高額取引されている。
カップルで利用する連番。

photo-1

デュアル SIM
インフラが乏しいこともあって、一つの SIM に頼ることができない。
電波が無いときにかえてみるという行為。
「防衛本能」として使われる。
自分のプライベートな番号と、パブリックな番号を使い分けている。
2つのアイデンティ。多くのメーカーはわからなかった使われ方。
コピー携帯電話がいち早く デュアル SIM に対応した。

「待ち受け画面」
その人にとって、重要な価値観がわかる。
インドの人は自分。ブラジルはカップルで。
ガーナでは自分がリスペクトできるアーティスト。
自分の中で大切な人を携帯電話に反映している。
携帯電話は自分に近いところにある。

自己表現>自我>社会>安全の欲求>生理的欲求
自分との対峙>事故証明/投票の権利>家族や対人との対話>安全/効率的な送金>生業の確立

-------------------------------------------------------------------------------------------
コミュニケーションサービス Ameba におけるUX向上の取組み」
㈱サイバーエージェント 大塚 敏章氏
アメーバにおける UX  新規開発局 フロントクリエイティブ 大塚

photo-2

アメーバというメディアにおいて、UX をどういうふうにとらえ、社内で活動しているのかを紹介。
Ameba について
楽しみをつくること
Usability → UX

Ameba について:
 2004ブログサービス開始。2006リニューアル。2008グッドデザイン賞。2008ピグ。なう。
18,170,000,000 現在の月間 PV
11,660,000 会員数
8,282 芸能人/有名人ブログ
200 政治家ブログ
規模も大きくなり、社会性も大きくなっている。

なぜアメーバに人が集まるのか?
いつもそこで何かがおこっている。
芸能人/有名人ブログ、時節イベント、ユーザー間のイベント
集まって楽しめる詠歌家が多い。誰かいる。

楽しみをつくること。
UX ≠ Usability
素早く表示させて、心地よく閲覧してもらうのは必要だが、
効率よくクリックできることが全てではない

ワンボタンにバカげた演出を搭載してペタ
来訪お知らせっ機能。
馬鹿げている程演出の入ったボタンをおいている
多くのリンクを出すよりコミュニケーション感を優先している。
家族に話したり、ブログに書いたり、次のアクションにつながっている。

楽しいガイダンスのチュートリアル
http://content.ameba.jp/guide/

Ameba ピグ
コミュニケーションのところでちょっとしたギミックが用意されている。
コミュニケーションのイメージ
 そこにお互いが存在しているという「手がかり」が大切

安心して利用できる Ameba
 有人によるコメント監視
 警察との連携や EMA の認定
 カスタマーサポートでのお問い合わせの対応
 
Ameba の利用者が
「知って」「使って」「継続する」その間の体験かつが楽しくなければいけない。

コミュニケーションエンターテインメント
ウェブサービスのディズニーランド

Usability → UX

ameba の usability 暗黒時代
 ブログリニューアル事件
 リニュアル後、元に戻せ運動に発展
 社内用語「ユーザーテスト」はユーザテストではなかった
 テストは直前のみで、最終的には対応できていなかった

ユーザビリティテストの導入
ユーザーヒアリングの導入
プロジェクトチームによるスパイラル開発
プロトタイプ開発と段階的テスト

現在の開発プロジェクトでは、開発しながら社内外のユーザーテストを行うカルチャーが根付いてきている。

ユーザーコミュニケーション
アメばこ:Ameba 目安箱
運営開始から二年半近く、2万人の登録者、2日程度で 4000-5000のFBコメント
ユーザーの意見を聞くという姿勢がユザーサービスとしての不ランディング向上につながっている。

ペルソナ
断片化されたマーケティングデータを
開発時に想像しやすいようにストーリー化されて理解しやすい。
ペルソナとユーザーテスト
 様々なユーザー情報 → 断片化された情報を集約 → ペルソナ
 課題の優先度をペルソナから広げる

Agile + HCD
現場は Agile 開発が主流になってきてうr。
実際使えるもの
 ペーパープロトタイプは AGile スタイルにあっている。
 すぐにコーディングを初めるプロジェクトもあるが、
 結果的に改善のスピードはペーパープロとの方が早い
 
導入上の障壁
 Agile のタイトな開発の中で
 ユーザーを招くタイミングとイテレーションのタイミングが難しい
 ユーザーテストの制度や理解などたらない
 テストのレポートの精度の問題や、プロジェクトチームによっては分析→背策に正しく落とし込めない

放課後 X と HCD 勉強会
http://ameblo.jp/caux
ケーススタディ。勉強会。

----------------------------------------------------------
「オフィスコミュニケーション支援ツールwiviaの開発
- 製品開発におけるユーザー中心設計の実践と課題 -」
 ㈱内田洋行 大丸 晃平氏

photo-3

内田洋行:情報/教育/オフィス
次世代ソリューション開発センター 2001年発足
ユビキタスプレイスの実現を目指し活動

wivia 2008/8 発売
無線LAN 経由で、プロジェクタに映像を投影する装置。
http://www.uchida.co.jp/wivia/index.html

PPA パーフェクトプロジェクションアダプタ
サーバーが必要。あまり数が出なかった。

wivia のユーザー中心設計 2008/4 〜
ユーザーを知る。
 現状の製品のユーザビリティ
 普段のミーティングの様子
社員にお願いする。失敗しても社員がいっぱいいるので大丈夫。
#テスト中の写真をちゃんと撮ろうと思った。

分析
IT に対している印象により「無線での投影や機器を用いたコミュニケーション」に対する印象が大きく変わる
「ITへのあこがれ度」

4タイプ
IT がもたらす効果への期待が強い
ITに対して抵抗感を持っている
ITを活用している
ITに触れる機会が少ない。

ペルソナを設定。学校とオフィス向け。
一人は学校の先生。営業担当を意識。

GUI コンセプト
Quick Guide
製品のアプローチ(USB接続、インストールなどから投影まで)をつまづくことなくできるようにする
User Control
最低限の機能にダイレクトにたどりつける。
すぐに使えそう。簡単そうに見える(複雑な印象を与えない)

ワイヤーフレーム作成
目指したところは、ボタンを押せばとにかく映る。
難しいところは、隠しておく。

photo-4

ユーザーテスト・インタビュー
少しでもできたら、開発版を送ってもらってユーザーテストした。
どんどん直していく。
完成版の GUI

photo-5

クイックマニュアル、パッケージ。
B2B の場合、箱はユーザーには届かない。自社営業向けの箱。

photo-6

追跡調査(2009/11-12) 3企業 3学校
実際にミーティングしているところを見せてもらうのは難しい。
複数台並べるのに適していないことなどがわかった。

分析:
方向性が見えてくる。
「作業・会議を活性化したい」
「場所に制約されずに投影したい」というニーズ
 いまだ潜在的だが、顕在化が進む可能性があり、市場を作っていける。

ウチダの UCD(リニューアル中。リニューアル前にチェックするのが良いそう)
http://www.uchida.co.jp/company/ucd/

--------------------------------------------------------
4.「グループウエア Cybozu による組織内のコミュニケーション支援
- 地方自治体への導入事例から -」
 サイボウズ㈱ 青田 智徳氏

サイボウズ:Webブラウザで利用するグループウェア
自治体ITシステム満足度 No.1 を取得
導入事例:愛媛県庁、大田区役所、岡山県庁、横須賀市役所など

アーリーマジョリテイ、レイトマジョリティがおおい。
ラガード(偉い人)は、印刷機能重要。本人が使わない場合も多い。
ただ、導入権を持つ。

導入検討時によくでる話題
使ってもらえるか?
 そもそもログインが障壁
使いこなせるか?
 たくさんのアイコンやリンクがあると、どこをみるべきなのかわからない
 一般職員からの問い合わせが大量発生しないか?

大田区役所の事例
 職員カード (ID) +汎用端末+Web型グループウェア
 ポータルは4種類
 全員が利用できる「職員ポータル」
 「共通行鵜」「電子決定(承認システム)」
 使用する機能のアイコンのみ表示
 お客様自身がパーツを作成
 
コメント:ガルーンは、ユーザーマニュアルが無くてもそれなりに使える。
紙のマニュアルは作ったけれど、見なくても広がった。
http://cybozu.co.jp/casestudy/example/ota/
野暮ったいとか、古くさいとも言われている。
Google と比較されることが多い。
更新ペースをあげてしまうと、使い方についてこれない層がいるので、
バランスをとるのに苦労している。
強引な置き換えは「従来の手段の方が良かった」という変化に対する拒否反応になって表れる。
たとえできることが増えたとしても、
「使ってもらう」ための工夫が必要となる。
学習コストがなるべく発生しない形で。

使いやすいの解釈は?
 操作ステップの簡略化など様々な回答が考えられる
使ってもらいやすい?
 とりあえず●○を見ろ」的な案内をシステム管理者がエンドユーザーに
 伝いやすいと良さそう。
 朝ログインしたら、最新情報を必ずチェック
 害増のメッセージに、メンバーのコメントがたまっている
 予定の調整は予定の詳細画面で。などなど。

--------------------------------------------------------

5. パネルディスカッション
「日本におけるコミュニケーションを支援する製品・サービスの現在・未来」