Human Information Interface lab

今月1日の「プロフェッショナル仕事の流儀」に出演したウェブ・デザイナー中村勇吾氏が舞台裏で手掛けていたUNIQLOのキャンペーンサイト「UT LOOP」が公開された。

「UT LOOP」は2008年よりUNIQLOがグローバル・キャンペーンとして展開した、Tシャツを通じて世界で繋がるキャンペーンサイト。番組をご覧になった方はご存知だと思うが、UNIQLOのTシャツを着た人が発するボイスパーカッションを組み合わせて、自分だけの"LOOP"を創ることができるというものだ。テレビ・コマーシャルでも同様の展開を行っている。

小気味よい動きのテンポのよさ、自分だけのLOOPを創る際のテンキーを用いたインターフェイス、そしてテレビ・コマーシャルとの連動においても、素晴らしい作品だと思う。

関連エントリー：

• プロフェショナル仕事の流儀 - ウェブデザイナー・中村勇吾 - First Penguin : ファースト・ペンギン
• 東京インタラクティブ・アド・アワード - First Penguin : ファースト・ペンギン
• UNIQLOのロゴで遊ぶ - First Penguin : ファースト・ペンギン

デジタルガレージと米Twitterは23日に、一言コミュニケーションサービス「Twitter(ツイッター)」の日本語版サービス「Twitter Japan」を開始したようだ。

Twitterは140文字の文章を時系列順に表示し、リアルタイム感覚で他のユーザーとコミュニケーションが出来るサービスだ。米国サービスのため、これまでは日本語での投稿や表示には対応していたが、メニューなどは英語で表記されていた。しかし、日本からのユーザーが2割以上を占めるということで、日本でも人気を集めているウェブサービスの1つである。日本語版が登場したことで、メニュー表記がすべて日本語化されたが、すでにTwitterを利用していたユーザーはこれまでどおりTwitterを利用できる。

更に日本語版独自となる画面の右上には広告が表示されるようになり、広告展開も開始している。今後も新たな広告メニューの実装を予定しているそうで、他サービスのAPIと組み合わせたマッシュアップツールの開発や、テレビやラジオ番組との連動、リアルイベントでのTwitter利用といった展開を考えているそうだ。例えば、リアルイベントでサンプルを配布し、その感想をTwitter上に投稿して開場のスクリーンに映し出す、といった展開も可能になるということだ。

米国版ではモバイルからTwitterにメッセージを投稿することができるが、現在日本語版はウェブサイトのみで、モバイル版は携帯電話会社によってログインできない、文字化けするなど未対応の状態だが、近いうちに日本語のモバイル版も提供するそうだ。日本はモバイル社会なのだから、モバイル版が公開されればユーザー層が広がり、利用者も増えることだと思う。

関連エントリー：

• Twitterをブログに追加。 - First Penguin : ファースト・ペンギン
• Friendfeed - フィード統合サービス - First Penguin : ファースト・ペンギン
• TwitterMosaic - First Penguin : ファースト・ペンギン
• Friendfeed - フィード統合サービス - First Penguin : ファースト・ペンギン

リンクテキストをスクリーンから隠したいときに、どんな方法が最もアクセシブルなのでしょうか。

Yahoo! User Interface Blogより

もう3ヶ月ほど前のことですが、Yahoo! User Interface Blogで面白い取り組みをしていました。Empty Links and Screen Readersという記事です。その取り組みとは、リンクテキストをスクリーンから隠すための方法を1つ1つ検証し、どの方法がアクセシブルなのかを調査するというものです。

Yahooが調べたのは以下のリンクです。

• 通常のテキストとそれに対するリンク
• テキストもtitle属性もないリンク
• title属性はあるが、テキストがないリンク
• テキストの代わりに空白を入れたリンク

これらのリンクに次のCSSを当てます。

• 特に指定しない
• offscreen
• visibility: hidden
• display: none

（ちなみに、offscreenのコードはこのようなものです。）

.hogehoge {
	position: absolute;
	left: -9999em;
}

このCSSをそれぞれのリンクに割り当てます。そのHTMLはEmpty links test casesに掲載されています。

次にこのHTMLを2名の熟練したスクリーンリーダーユーザとアクセシビリティに詳しいデベロッパー1名にスクリーンリーダーを使って読んでもらいます。スクリーンリーダーは1つではなく、3つの異なったブラウザを用います。この状況で上記のHTMLは読み上げられるのかを検証したということです。

この取り組みから得られる教訓

この結果に関しては上記のブログの表を参照してください。アクセシビリティに詳しい方は想像がつくかもしれませんが、それぞれのスクリーンリーダーによって得られる結果が異なってくることが分かります。

その上で、記事はWebデベロッパーがリンクテキストをスクリーンから隠したい場合のアクセシビリティを次のようにまとめています。

• リンクには常に適切なテキストを用い、文脈において意味のあるテキストを使うこと。もし、リンクを隠したい場合にはoffscreenを使うこと。
• display: noneを用いてリンクを隠そうとすると、スクリーンリーダーによっては読み上げられないことがある。
• テキストを用いずにhref属性のみでリンクを使おうとしないこと。スクリーンリーダーによってはhref属性のURLを読み上げることがある。
• リンクを隠す場合に、visibility: hiddenを使わないこと。スクリーンリーダーによってはtitle属性を無視したり、URLを読み上げたりする。
• テキストの代わりにスペースを用いないこと。スクリーンリーダーによっては、URLを読み上げたり、リンクがあることを伝えたりする（しかし、リンクテキストは読み上げない）。
• リンクテキストの代わりにtitle属性を用いた場合も、すべてのスクリーンリーダーユーザが使えるとは結論付けられない。

そもそもリンクテキストを空白にすることはあるのか？

記事の冒頭で触れられていますが、これはmicroformatsのinclude-patternにおいてリンクテキストを空白で使用する可能性があるというのが事の発端のようです。

アクセシビリティというと、AjaxやFlashのようなリッチなコンテンツについてはよく言われるのですが（前回書いたWAI-ARIAについての現状におけるメモもその一種です）、microformatsにもまだまだ課題はあるようです（以前はmicroformats.biz >> accessibilityで書かれている議論もありました）。

リンクテキストをスクリーンから隠したいときに、どんな方法が最もアクセシブルなのでしょうか。

Yahoo! User Interface Blogより

もう3ヶ月ほど前のことですが、Yahoo! User Interface Blogで面白い取り組みをしていました。Empty Links and Screen Readersという記事です。その取り組みとは、リンクテキストをスクリーンから隠すための方法を1つ1つ検証し、どの方法がアクセシブルなのかを調査するというものです。

Yahooが調べたのは以下のリンクです。

• 通常のテキストとそれに対するリンク
• テキストもtitle属性もないリンク
• title属性はあるが、テキストがないリンク
• テキストの代わりに空白を入れたリンク

これらのリンクに次のCSSを当てます。

• 特に指定しない
• offscreen
• visibility: hidden
• display: none

（ちなみに、offscreenのコードはこのようなものです。）

.hogehoge {
	position: absolute;
	left: -9999em;
}

このCSSをそれぞれのリンクに割り当てます。そのHTMLはEmpty links test casesに掲載されています。

次にこのHTMLを2名の熟練したスクリーンリーダーユーザとアクセシビリティに詳しいデベロッパー1名にスクリーンリーダーを使って読んでもらいます。スクリーンリーダーは1つではなく、3つの異なったブラウザを用います。この状況で上記のHTMLは読み上げられるのかを検証したということです。

この取り組みから得られる教訓

この結果に関しては上記のブログの表を参照してください。アクセシビリティに詳しい方は想像がつくかもしれませんが、それぞれのスクリーンリーダーによって得られる結果が異なってくることが分かります。

その上で、記事はWebデベロッパーがリンクテキストをスクリーンから隠したい場合のアクセシビリティを次のようにまとめています。

• リンクには常に適切なテキストを用い、文脈において意味のあるテキストを使うこと。もし、リンクを隠したい場合にはoffscreenを使うこと。
• display: noneを用いてリンクを隠そうとすると、スクリーンリーダーによっては読み上げられないことがある。
• テキストを用いずにhref属性のみでリンクを使おうとしないこと。スクリーンリーダーによってはhref属性のURLを読み上げることがある。
• リンクを隠す場合に、visibility: hiddenを使わないこと。スクリーンリーダーによってはtitle属性を無視したり、URLを読み上げたりする。
• テキストの代わりにスペースを用いないこと。スクリーンリーダーによっては、URLを読み上げたり、リンクがあることを伝えたりする（しかし、リンクテキストは読み上げない）。
• リンクテキストの代わりにtitle属性を用いた場合も、すべてのスクリーンリーダーユーザが使えるとは結論付けられない。

そもそもリンクテキストを空白にすることはあるのか？

記事の冒頭で触れられていますが、これはmicroformatsのinclude-patternにおいてリンクテキストを空白で使用する可能性があるというのが事の発端のようです。

アクセシビリティというと、AjaxやFlashのようなリッチなコンテンツについてはよく言われるのですが（前回書いたWAI-ARIAについての現状におけるメモもその一種です）、microformatsにもまだまだ課題はあるようです（以前はmicroformats.biz >> accessibilityで書かれている議論もありました）。

• アドビ、「Adobe Media Player 1.0」を正式リリースへ - CNET Japan

米Adobe Systems社は今月9日に、Flashコンテンツをオフラインでもオンラインでも再生することができるメディアプレーヤーソフト 「Adobe Media Player(アドビ・メディア・プレーヤー)1.0」をリリースした。現時点では英語版のみの公開となっており、Windows版とMac OS X版がAdobeのサイトから無料でダウンロードすることができる。

Media Playerはアプリケーション環境「Adobe AIR(アドビ・エアー)」で開発された、カスタマイズが可能なクロス・プラットフォームプレーヤー *1だ。そのため、インストールにはAdobe AIRが必要となる。同ソフトはFlashフォーマットのビデオであればストリーミングでも、ダウンロードしたものでも、コンピューター上に保存したものであれば再生することができる。更に視聴者はテレビ番組などのオンラインビデオを購読して、自動的に新しいエピソードを受信することもできるそうだ。驚いたのは、YouTubeのようにユーザーがコンテンツを提供することができ、コンテンツ提供者向けには視聴者数や視聴回数などのチェック機能が提供されているということ。ストリーミング再生のみではなく、ダウンロードしたファイルの再生回数なども確認することができるため、視聴者のニーズを把握することができる。しかし、同ソフトはAdobe AIRを用いているため、YouTubeのように専用プレーヤーを用いてウェブサイトやブログに埋め込むことはできない。

コンテンツ提供者は、自身のコンテンツに合わせた内容にAdobe Media Playerのインターフェイスを自由カスタマイズできる。収入源となるのはやはり広告。動画広告はコンテンツの再生前、再生中、再生後のどこにでも挿入が可能だ。オンライン、オフラインなど視聴者の閲覧状態に応じて広告内容を変える機能もあるとのこと。更に再生中の動画内の広告をクリックすることで動画内にウィンドウが開き、商品などを購入できるようになっている。今僕が利用しているノートパソコンはスペックが低く、長時間利用することができないため新たにデスクトップパソコンを購入した際に更に深く掘ってみようと思う。

同ソフトのリリースに伴いAdobe社は、同社の製品に関する情報などをウェブ上で提供する無料のオンラインビデオサイト「Adobe TV」も立ち上げたようだ。Adobe TVでは開発者やデザイナー向けにAdobe製品を解発したり、アドバイスを提供するコンテンツとなっている。ユーザーが見たいビデオもコチラで探せることができる。Adobe AIRはオフラインでもオンラインでも稼動するため、オフラインでも視聴者には好きなコンテンツを発見し、利用する新たな方法を提供している。

関連エントリー：

• RibbitとAdobe AIR iPhone - First Penguin : ファースト・ペンギン
• Web2.0 EXPO - Microsoft(1) - First Penguin : ファースト・ペンギン
• 無料オフィス戦略 - First Penguin : ファースト・ペンギン

あすなろBLOGカンファレンス「スタート×キッカケ×ブログ」が先日秋葉原にて行われたので、参加させていただいた。「あすなろBLOG」は、エンジニアやIT会社のマーケティング担当など、IT関連の執筆者によるブログを集めたサイト。運営しているのは、ITに専門特化した人材サービスを行っている株式会社パソナテック。当イベントは「あすなろBLOG」開設2周年記念イベントとして開かれたのだが、お目当てはパソナテックのフェローも勤める、現在はシリコンバレーのコンサルティング会社Blueshift Global Partners(ブルーシフト・グローバル・パートナーズ)の社長である渡辺千賀氏の講演だ。

テーマは「スタート×キッカケ」にフォーカスした、「きっかけを自ら作り出し、変化を起こすための７つのルール」*1

1. 実力発揮の場を作る

「きっかけ」は外から降ってくるものが多い。そのためにはなるべく多くの人に自分ができることを知ってもらうことが大事。自分の力を見せないと、誰にもみとめられない。チャンスを発揮できる場を作る。評価されるには「きっかけ」を利用し、他の人に貢献すること。人がなにかを必要としている場で、ボランティアとか、オープンソースで協力する。チャンスは自分で作り出すというよりは、外から与えられるもの。外部から訪れるきっかけとなるのが、ブログでもある。

2. 一期一会のチャンスを掴む

そもそもチャンスが一期一会であると認識することが前提になければならない。迷ったら20代の間は選択しが広がることを選び、自分の専門分野を極める。30 代は本腰を据えて、専門性を作り、磨くことに専念する。日常の中で小さな新しいことに少しずつ挑戦しつづけて「挑戦癖」を付けることで、チャンスはパッと掴める。

今むずかしいと思う変化は、将来にはもっとむずかしい。五年後に較べて今やりやすかったら、すぐに実行する。恐怖の源は単に「親しみがない」だけなことも多い。自分の将来のキャリアについて怖いと思ったら、よく知ってみる、研究してみる。うまくいくことをしっかりと考える。

3. 「前向きなあきらめ」の達人になる

古いモノを手放さなければ、新しいモノは掴めない。主語を変えてみることで、他人に不平を言うのではなく、自分の問題としてどう変えるかを主体的に考える。例えば、嫌な上司と思ったら、主語を「わたし」に変えてみる。「わたし」は上司に嫌なことを言わすのを許している、それでいいのか。私のことと考え、私ができないことは諦める。問題点の改善にむだな時間を使わない。失敗したら、成功で上塗りすればいい。こちらの方がずっと楽である。そして、自分がいなくても会社も世界も周ることを理解する。

4. 孤独に慣れる

新たしいことにチャレンジするとき孤独な常につきまとう。変化すると、今までの仲間から仲間外れにされる。一瞬、孤独になる。それを怖がってはいけない。変化を実現するには、人といない喜びを見出し、1人でいる時間を大切にする。孤独になることで、ネットワークに依存しなくなる。そして、人の判断を気にしない。人の評価を聞かない、批判されても耳をふさぐべし。

5. しない公開＞した後悔

して後悔することよりも、しなくて公開することの方が圧倒的に多いことを知る。何もしない間に過ぎていく時間、しない間に過ぎていく時間が怖い。与えられたチャンスをちゃんと仕事に貢献しているか。どんな場面でも自分の力を発揮しつづけていると、他の人が必ず見てくれている。自分の力を発揮していればリカバリーが可能。

6. 大きな理想と小さな達成でやる気をキープ

3 年語、5年語の自分をイメージしても未来は不確実なため計画的に行えない。大きな理想とは、こういうタイプの人間であり続けたいと、漠然とするイメージ。小さな達成感、ライフハック*2のこと。「こうありたい」という漠然とした自分の将来像と「今日できる事」を片付けていくこと。

7. 運の流れに逆らわない

運こそがチャンスであり、波が来たときは大きく賭ける。運が悪くてもあきらめずに遂行する。淡々とちょっとつづやる。また次の波が来るのを待つ。

渡辺氏の講演は、僕がこれまで学んだ経営者やプロフェッショナルの仕事観がギュッと凝縮された1時間だったように思えた。「前向きなあきらめ」の達人になるというルールの「自分がいなくても会社も世界も周る」という概念は、株式会社はてなの代表取締役・近藤淳也氏が2006年にはてなに入社した技術者に宛てたメッセージでもある。下記がその一部だ：

■はてなに入った技術者の皆さんへ - jkondoの日記

「当たり前ですが、どんな世界も自分が何かを始める前は自分が居ない状態で回っています。しかも、そこそこちゃんと回っているのです。何か新しい事を始める時、「その世界はあなた無しでもちゃんと回っている」状態から出発する事を忘れないでください。極端な話、「自分が生まれなくても地球は問題なく回っていた」のです。新しい領域に挑戦すると言う事は、自分が不必要な状態から、自分が必要とされる状態への変化を、自分の力で起こすという事なのです。」

上記のメッセージは、技術者志望で現在の会社に就職した僕にとってこれ上ないアドバイス、そして行動指針になっている。そして、「した後悔」では以前ブログでもご紹介したNHKプロフェッショナル仕事の流儀にも出演された生物学者・長沼毅氏の仕事における流儀である。思い込みを捨て、思いつきを拾う。なぜなら思い込みをすると、何かを得るチャンスを減らしてしまうからだ。その思い込みこそが、「ひらめき」の原点であり、思いつきにこそ意味があるのだ。博打みたいに、博打をするだけの価値がある変化を求めているのならば、一か八かの勝負に挑まなければならない。

「結局人間、後悔するわけだよね。しなかった後悔と、した後悔。だったら、した後悔のがいいかなってね。」 - 長沼毅

最後に、非常に印象的だった言葉を記す。それは、過去の自分も友も捨て、国も捨て、1人でシリコンバレーで起業した渡辺氏の人生観がそのまま反映されている一文だ。

「変化とは、今まで慣れ親しんだ周りから1人出て行くことです。」 - 渡辺千賀

関連記事：

• On Off and Beyond: 19日のセミナー「スタート×キッカケ×ブログ」で話すこと
• 「効率が10倍アップする新・知的生産術 - 自分をグーグル化する方法」 - First Penguin : ファースト・ペンギン
• プロフェッショナル仕事の流儀 - 生物学者・長沼毅 - First Penguin : ファースト・ペンギン