Platform Love | Google, Microsoft , Facebook, SixApart, MySpace

Le Web'08 PARIS
Platform Love: Getting Along - Panel

Live video by Ustream

Panelists:

• David Glazer - Director of Engineering, Google
• Jeff Hansen - General Manager, Services Strategy/Live Mesh, Microsoft Corporation
• Dave Morin -Senior Platform Manager, Facebook

• David Recordon - Open Platforms Tech Lead , SixApart
• Max Engel, Head of Data Availability Initiative, MySpace

Moderator: Marc Canter - CEO, Broadband Mechanics

Design based Management Forum 2008

デザインセミナーのお知らせです。

Design based Management Forum 2008
経営戦略とデザイン ～ 感性価値時代におけるイノベーション

デザインの効果を、インダストリアル・デザインに留まらず「経営上の複雑な要素を統合し、価値を可視化する営み」と捉えると、企業戦略としてのデザインは一段と可能性を増す。ハード・ソフト・サービスをアイデアや知識でつなぎ、企業の意志や哲学、理念を社内外へと伝播する力を持つデザイン。その統合・伝達・創造の連携を可能にする経営、「Design based Management」の強みを本フォーラムでは提唱したい。

• 開催日：12月10日（水）9:50～16:55
• 会場：大手町サンケイプラザ／4Ｆホール
• 参加対象者：
  経営者、経営企画、事業企画、商品企画・開発、設計、R&D、ブランド、マーケティング部門、その他各部門の方々
• 主催：東洋経済新報社

プログラム：

• 「経営戦略とデザイン ～ デザインと創造的イノベーション」
  KIRO代表・多摩大学大学院教授
  紺野 登 氏
• 「都市づくりとデザイン」
  森ビル株式会社　取締役副社長
  山本 和彦 氏
• 「『オンリーワン』なモノ作りと『デザイン』」
  シャープ株式会社
  オンリーワン商品企画推進本部
  総合デザインセンター 開発室 室長
  諸岡 信一 氏
• 「ブランド力を高めるためのデザイン」（仮）
  日産自動車株式会社
  デザイン本部 プロダクトデザイン部
  プロジェクト・デザイン・ダイレクター
  長野 宏司 氏
• 「デザインと経営」（仮）
  日本サムスン株式会社
  デザインセンター センター長
  吉田 道生 氏
• 「デザインの持つ可能性」
  株式会社KEN OKUYAMA DESIGN
  CEO
  奥山 清行 氏

参考：

• 財団法人　国際デザイン交流協会
• 社団法人　日本デザイン保護協会（DESIGN PROTECT）

2008年11月26日に更新

Web Directions East | Progressive Enhancement

本日、東京（新宿）で「Web Directions East」カンファレンスが開催されました。

Web関連のカンファレンスは、今年初でこれが最後となりました。
今回、私が（勝手に）期待していたテーマは以下の二点です。

• Progressive Enhancement
• Ambient

「Progressive Enhancement」に関しては、昨年あたりから勉強会で取り上げていましたので、このカンファレンスでも再確認できました。

「Ambient」については、以前「ユビキタスからアンビエントへ」でお話したことを、Webの分野からどう捉えるのか考えてみたかったのです。
もちろん、今回のカンファレンスでは「Ambient」という言葉は出てきませんでしたが、Eric Meyerさんの「ブラウザの多様化でみる最良のウェブ開発」の後半で、発展途上国のモバイル事情についての話がありましたが、いくつかリンクする部分がありました。

昼食は用意されていて、参加者同士が雑談しながら食べ歩くというスタイル。

会場では、John Allsoppさんがライブコーディングをやっていました。
「Apple.comのナビゲーションバーをつくります」ということだったので、最初は食事しながら、雑談しながら、チラチラ見る感じだったのですが、「画像は一切使いません」と聞こえたので、会場の最前列に移動して見物。
（CSS3だと、ここまで表現できる！的な）テクニカルなデモンストレーションではなかったので、とても勉強になりました（それこそ、Progressive Enhancementの意を感じましたね）。

会場で写真を撮った人は、「wde08」というタグを付けてFlickrにアップしましょう。
‥と言われてましたので、すこしアップしておきました。

• Flickr - Web Directions East

関連エントリー：

• 「Web Directions」が日本で開催されます／ウェブ業界の将来を読み解く

---

余談：

最近増えてきたiPhone-optimized siteの特徴は、画像をあまり使っていないこと。
画像は使っていないのに、PCサイトのルックスと同じなんですね。

iPhone版のサイトをパソコンでアクセスすると、（Safari3以外のブラウザ）はグラデーションやボックスシャドウが無効になってしまうのですが、サイトのユーザビリティは低下していないのも大きな特徴。

The Chromeより

「ピッカピカのサイトを作って、未来を見せていくぜ」
「なに、IEをつかっているって? まぁ、メッキは剥がれて艶はなくなるけど、大丈夫だ。サイトの使いやすさは変わらない」

• クロムメッキがはがれる
  （CSS3のプロパティに対応していないブラウザの表示のこと）
  
• メッキがはがれても中身はしっかりしている
  （未対応ブラウザでサイトを使ってもユーザビリティの品質は保証されること）
  

iPhone-optimized siteには、Content、Presentation、Behaviorの明確な分離と、Progressive Enhancementを具体的に実践しようという意識が感じられます。

その他：

今回のカンファレンスのメモは、iPhoneで書きとめ、Evernoteにアップしました。
カンファレンス終了後、作業場Bに移動してMac版Evernoteで統合、打ち合わせを終えて作業場Aに移動し、Vista版Evernoteを使って、追記。

以下は、講演を聞きながらiPhoneで集めた関連情報をEvernoteに送ったもの

以下の話で、ちょっと閃くものがあったので、過去の資料を掘り出し中。

Eric Meyerさんの「ブラウザの多様化でみる最良のウェブ開発」の後半で、発展途上国のモバイル事情についての話

講演を聞いていて、突然ひらめくときがあります。
そういうときは、講演の内容と閃きのイメージが融合して、頭のなかでは、まったく新しい構想が生まれていきます。
今日は、過去におこなった数々の勉強会とリンクしました‥

先月の勉強会テーマ：

パソコンではなく、携帯電話で初めてインターネットにアクセスする人々、国
たとえば、iPhoneのようなデバイスなら、さまざまな国のコンテンツを載せることができる

資料：

• 右上は、2004年に中近東で発売されたF7100Qiblah
• イスラム教徒のための携帯電話
• メッカの方向を示すコンパスを搭載
• 礼拝するためのメッセージサービスが使える（1日5回配信）
• 左下は、2004年に発売されたイルコーン社の携帯電話
• 世界のどこにいても祈りの時間を伝えてくれるサービス
• コーランのテキストを搭載
• アフリカの携帯電話事情
• 携帯電話は地域の財産
• 電気のない場所はカーバッテリーで充電

PHONE BOOK（著：Henrietta Thompson）より

関連Podcast：

• ［file-023］モバイルの未来を感じるには欧米よりアジアを見る

以上、記事の後半は自分の頭の中のレポートでした。
座っていた場所には、プレスの方々がいらっしゃいましたので、カンファレンス全体のレポートは来週公開されるでしょう。

2008年11月7日に更新

「Web Directions」が日本で開催されます／ウェブ業界の将来を読み解く

世界のウェブ業界で支持されているカンファレンス「Web Directions」が、ついに日本でも開催されますね。

インフルエンシャルな方々（世界のウェブ業界で影響力を持った人たち）が来日します。

ウェブ業界はまだ10年ちょっとの”若い業界”ですが、トレンドの変化が激しいテクノロジードリブンな世界です。3年後、5年後、自分の仕事がどう変化しているのか、まったく想像できません。自分の得意な分野がコモデティ化しているかもしれないし、他業界との融合が始まり、人脈構造がガラッと変わってしまう可能性もあります。

私は、1980年代に（ハンドワーク中心のデザイン業界が吹き飛んでしまった）パソコン革命を経験しています。また、1990年代にはマルチメディア業界の消滅も経験しています。マルチメディア業界で活躍していた人の多くは、現在ウェブ制作会社を経営していたり、教育の分野などに場を移しています。

ウェブ業界の将来を考えるとき、注目すべきは前述した「世界のウェブ業界で影響力を持った人たち」の振る舞いです。
私は、今回のカンファレンスでスピーカーたちの発言の奥に見え隠れするキーワード（Webの未来）を読み解きたいと思っています。

参考（スピーカーとカンファレンスの内容）：

• Eric Meyer（エリック・メイヤー）
  State of the web
  ブラウザの多様化でみる最良のウェブ開発
  
• Jeffrey Veen（ジェフリー・ヴィーン）
  Designing our way through data
  最適なユーザーエクスペリエンスのための情報設計
  
• Dan Cederholm（ダン・セダーホルム）
  Bulletproof A-Z
  あらゆるデバイスに対応できるウェブデザインの考え方
  
• Jeremy Keith（ジェレミー・キース）
  Bulletproof
  使い勝手と見やすさを両立するAjaxを使ったサイト設計
  
• Andy Budd（アンディ・バド）
  Guerilla Userbility Testing
  高効率・低コストで行うユーザビリティテストの仕組み
  

※カンファレンスおよびワークショップには、同時通訳があります。各ワークショップには、サポートスタッフが常駐しており、日本語での質問ができます。

リレー講演「私の生き方」

リレー講演「私の生き方」- 7月24日

スライド使用禁止、資料配布禁止だったので、壇上に立って（手振り身振りで）1時間喋るというスタイル。話す内容を頭に入れて、あとは臨機応変に。こういう形式は久々だったので、すこし緊張‥

私のテーマは「30代を大切に」でした。
以下、概略のみ。録音失敗していたので、忘れないように思い出しながら記述。

歩きながら再録しました。

• ［file-330］私の生き方 - 再録編集15分バージョン
  Podcast（日刊徒然音声雑記）

１）

• 30代は最強の時代だった
• 毎日、新しいビジネス書を読む、交流会に参加して人と会う
• 今思えば、たくさんの失敗経験が一番の財産
• まわりにはいつも人がいた
• 自分一人の時間はほとんどなかった（この時代に人間耐性がつく）
• 16時間、人と喋りっぱなし
• 睡眠3時間の時期、毎日熟睡、短眠でも快調（‥だったが
• まさかの体調不良、仕事は順調だが‥これでいいのか？

２）

• 人生見直しのタイミング
• 40代に入る前にやっておくこと
• 組織に属さず、肩書を取り外し、「個人」の価値を高めたいと思い始める
• 夢実現の時代へ～40代に入って仕事量を1/4に減らす
• 企業のお手伝いから離れるために（ストレートビジネスからの脱却）

３）

• 注目していた人たちは例外なく「いったい何の仕事をしているのか、わからない人」だった
• こんな仕事のスタイルがあったんだ！
• あんな業界、こんな業界
• 一から発想する仕事、実績を明かせない仕事
• 未来をつくる仕事
• 「自分がやれること」と「自分がやりたいこと」が初めて一致した
• 対人比較欲求（常に他人と比較して自分の位置を確認する行為）も低下
• 優先すること、諦めることが明確になってくる

４）

• 10年後のイメージ
• 30歳の人は40歳、70歳の人は80歳
• 10年後、あなたの親は何歳になっていますか？
• 10年後、あなたの子供は何歳になっていますか？
• 1年の重みは世代で異なる

５）

• 大目標（10年）＞中目標（1年）＞小目標（1ヵ月）＞日々の目標（1日）
• 人間はロボットではない、大まかにゆる～く実行できればよい
• 仕事も生活も「タイムライン」で考える
• 自分のための環境デザイン　～「作業場」づくり
• 私が目指している「未来の仕事」
• 故郷に感謝、お世話になった人たちに感謝

こういう話はほとんどやらないので、3回に分けてPodcastしようと思っていましたが、またまた録音失敗。新しいボイスレコーダーは録音ボタンを押すと「スタンバイ」状態になるのです。つまり、2回押さないと録音されない。同じ過ちをまだ繰り返しています‥
MdNさん主催の特別講習も録音失敗していたので、注意していたのですが、残念。
（※どちらも録音が目的ではありませんが‥）

Webデザイン特別講座／グループワーク beta2.1

4日のWebデザイン特別講座のお知らせ、続報です。

過去のエントリー：

• Webデザイン特別講座／グループワーク beta1.3.2

第一部（PM14:00～）「CSSデザインの行く末」

2000年あたりから現在までのCSSデザインの流れを追いながら、技法の流行り廃りや制作スタイルの変化をみていきます。CSSデザインを体系化し、デザイン理論と重ね合わせていきます。海外の優れたWebサイトを分解しながら、デザイナーの「技」を解説します。

また、モバイルWebの動向や今後、CSSデザインという作業がどう変化していくのか、狭義のWeb業界（ICT業界に含まれる小さな業界という位置づけ）についても話題にしたいと思います。

第二部（PM16:00～）「グループワーク」

前半（第一部）は講義形式ですが、後半はグループワークをおこないます。今回は少人数の講習なので、皆さんとコミュニケーションをしながら進めていきたいと思います。

あるWebサイトを徹底的に評価、分解して、（第一部で紹介したCSSデザイン体系を利用して）リニューアルしてみます。参加者の皆さんには「Accessible and Usable バランスチェックシート」「Adjustable Design スタイルガイド一覧表」などを配布します。

懇親会

終了後、自由参加です。少人数かつグループワークの後なので、名刺交換で終わることはないでしょう、ざっくばらんに‥

Podcast：

• 講習前、週末～来週前半に2回配信します
  Vol.1「Web業界で、デザイナーとして」
  Vol.2「Webデザイナーからフロントエンド・アーキテクトへ」
• 講習後の配信はありません
  ※雑感のような内容で配信するかもしれません

開催日・場所：

• イベント名：Designer meets Designers Plus 01
• 開催日：7月4日 14:00-18:00
• 場所：東京・渋谷 MdN school of design
• 参加申し込み：MdN school of design

Webデザイン特別講座／グループワーク beta1.3.2

まだ1ヵ月弱ありますが、少しずつ情報を更新していきます

過去のエントリー：

• Webデザイン特別講座のお知らせ
• Webデザイン特別講座のグループワークについて

開催日・場所：

• イベント名：Designer meets Designers Plus 01
• 開催日：7月4日 14:00-18:00
• 場所：東京・渋谷 MdN school of design

内容（講義とグループワーク）：

• 講義：CSSデザインの流れ［2000～2008年］
• 講義：Webデザインのテクニックと関連したデザイン理論を学ぶ
• 講義：「CSSデザイン、Flash、Ajax、どういう基準で使い分ける？」
• プレゼンテーション：
  世界の事例をみながら考える「2008年以降のWebデザイン」
• プレゼンテーション：
  モバイルのWebデザインはどうなっている？
• 実習：
  グループワーク＆ディスカッション
  「Webサイトをリデザイン」

グループワーク（案）：

• Accessible and Usable バランスチェック
• マジョリティ・オプティマイゼーション・チェック
• Adjustable Design（柔軟性を重視したエラスティック・デザイン）のプロトタイプ
• Pixel Perfect Design（見栄えの統一を重視した固定デザイン）のプロトタイプ
• Webスタンダード（スローガン）と実利判断
• ディスカッション
• Webデザイン・ガイドラインのチームコンセンサス

参加者向けグループワーク用スタイルガイド（検討中）：

• Accessible and Usable バランスチェックシート
• Adjustable Design スタイルガイド（CSSデザイン）

Podcast：

• 当日まで数回、音声配信あり（講座の内容について）
• 講座終了後のPodcastは未定

Webデザイン特別講座のグループワークについて

前回のエントリー

• Webデザイン特別講座のお知らせ

今回のイベントには、グループワークがあります。
詳細はまだ調整中ですが、以下のようなプロジェクトを想定しています。
講座の前半は、Webデザインのテクニック、トレンドなどの華やかな話題が中心になりますので、後半は現実（現場）モードに切り替え、実利的な判断を交えながら「理想と現実」に立ち向かっていきたいと思います。

• 依頼がくる：Webサイトのリデザイン
• Accessible and Usable バランスチェック
• マジョリティ・オプティマイゼーション・チェック
• Adjustable Design（柔軟性を重視したエラスティック・デザイン）のプロトタイプ
• Pixel Perfect Design（見栄えの統一を重視した固定デザイン）のプロトタイプ
• トレードオフ、理想と矛盾
  ディスカッション
• Webスタンダード（スローガン）と実利判断
  ディスカッション
• Webデザイン・ガイドラインのチームコンセンサス
  「このプロジェクトは、こういう方針でいきましょう、いいですね」という合意

来週あたりから、Podcastでも少しづつ話題にしていく予定です

• 音声雑記（Podcast）

グループワーク beta 1.0/2008年5月8日

Webデザイン特別講座のお知らせ

久しぶりの一般向けオープンイベントです（7月開催）。4時間ありますので、前半が講義形式＆プレゼンテーション、後半はグループワーク＆ディスカッションという構成です。

最近のデザイン手法を解説しつつ、アクセシブルとユーザブルの微妙な問題などを取り上げます。2008年以降の（モバイルを含む）Webデザインを考えながら、現在おさえておきたい技術や考え方についてお話します。

グループワーク＆ディスカッションは、定期的におこなっている勉強会にちかい形式になると思います。
プロジェクトテーマなど、詳細は後ほど。

• イベント名：Designer meets Designers Plus 01
• 開催日：7月4日
• 時間：14:00-18:00／18:00-懇親会（懇親会は自由参加）
• 場所：東京・渋谷 MdN school of design
• 受講料：15,750円
• 定員：30名

受講手続きは、MdN school of designのサイトにて

Webレポート「ケータイサイトとCSSデザイン」（XHTML1.0とCSS2.1のサイトをケータイで閲覧）

勉強会の記録：
※ご注意、未完成エントリーです

テーマ：
「アンワイアード、IWの時代へ／ケータイ編」

• 2010年のケータイをイメージする
• PC、ケータイを分けないWebサイトの構築について考える
• ケータイの特性を生かしたサイトについて考える

デモの内容：

• XHTML1.0とCSS2.1でコーディングしたサイトをケータイで閲覧します
• Web標準に準拠した設計（ドコモのiモード仕様には準拠しない）
• サンプルサイトはXGAフォーマット（可読性を確認します）

注意：

• 最新の3Gケータイを使います（NTT DoCoMo FOMA F905i）
• 2年後のケータイは、安価な機種であっても、現在の最新機種以上のスペックになるという想定

今回のプレゼンテーションの流れを大まかにメモしておきます

（１）
ケータイのPC化とブラウザの機能強化によって、PC用のサイトも閲覧できるようになってきました。
これは、FOMA F905iに搭載されているフルブラウザの画面です。

（２）
今日は、パケット定額に対応した「jigブラウザ」を使います。
これが、jigブラウザの画面です。

（３）
サンプルサイトについてご説明します。5つの外部CSSファイルで構成されています。
※ここは割愛します

（４）
ケータイ（FOMA F905i）にインストールしたブラウザを起動します。
続けて、［CSS設定］を［有効］にします。

（５）
サンプルサイトにアクセスします。
全てのCSSファイルが適用され、floatプロパティによる2カラムレイアウトも問題なく表示されています。floatプロパティを多用していますが、レイアウトに問題はありません。

（６）
尚、［CSS設定］を［無効］にすると、最初に読み込まれる「basic.css」だけ適用されます。
背景色と文字色の指定に注意が必要です（そもそも、basic.cssのスタイル指定が良くないのですが‥）。

ポイント：

• ケータイのPC化によって処理能力が向上
• ケータイのディスプレイがSVGAに
• パケット定額に対応したフルブラウザ登場
• CSSのレンダリングも向上
• 使いたいブラウザを利用者が選べる、誰でも簡単にインストールできる
• アンインストールもメニューから選ぶだけ
• QRコードでインストール画面に誘導
• ブラウザにプラグインをインストールして機能を拡張できる
• RSSリーダーとブラウザが一体化しており、PCと同じ利便性
• 音声読み上げ機能は標準搭載されるかもしれない
• 市場が大きいので、ユニバーサルデザインに関してはPCよりもお金を投下できるかもしれない
• 映像のクローズドキャプション技術は、ケータイの分野で培われるかもしれない（参考サイト「いくお～る」）

「テレビがなくても困らないでしょ？ワンセグを見たいという人の気が知れない」という人、けっこういます。
ただ理解してほしいのは、それは聴者の視点だということです。
聴覚障害者の視点では、ワンセグが登場するまで、テレビの情報を戸外で享受する方法は（運良く字幕デコーダ付きテレビか、オープンキャプションの番組がない限り）ほとんどなかったのですから。
～「いくお～る」より引用

まとめ：

• PCとは異なる、ケータイの特性を生かしたサイトにすることが重要
• ただし、PC用のサイトが閲覧可能になってきていることも意識しておきたい
  （Web標準に準拠して設計されたサイトであれば、PCサイト、ケータイサイトを分ける必要がなくなるかもしれない）
• 重要なポイントは、ビジネスユーザーが多い「スマートフォン」だけではなく、一般層に普及している携帯電話でPCサイト閲覧が可能になっていること
• Apple iPhoneを女子高生が使うとは思えないが、女子高生が持っている普通のケータイが現在のiPhone並になる可能性はある
• 2010年、2年後のケータイをイメージしてほしい、どのようなイノベーションが起こるのか

補足：

• 今回使用したF905iのディスプレイは、864×480ピクセルですが、XGA（1024×768）で一覧できるPCサイトなら、ズームなしでそこそこの可読性を確認できました。
• ただし、最近のPCサイトはXGAでも一覧できなくなっていますので、ケータイのPCサイト閲覧には限界があります。
• ユーザーが何をどう選ぶのか？　2年後はどうなるのでしょう？
• 4月1日からドコモのiメニューがリニューアルされて、Flashらしいリッチ画面になりましたが、トップに「GUCCI」スペシャルサイトのバナーがあったのでクリックしてみました。
  すると、美しいフルFlashのページがケータイの画面一杯に‥。Flashなどのベクターデータは、ケータイのディスプレイ解像度に依存しないので効果的です。
• ケータイでも、キャンペーンサイトなどはフルFlashサイトが増えてくるかもしれません。
• 今回、最新版のフルブラウザを6,000円（年間使用料）で買ったわけですが、決済の手続きが恐いくらいお手軽で驚きました（ドコモの電話料金と一緒に支払う選択をしたので）。
  クレジットカードを持っていない学生さんは、この方法で買っていますね。
• ケータイのネットサービスは有料ばかりですが、ボタン一つなのでつい‥（期待外れだったサービスは次々と解約していますが‥）
• ネットオークションにハマっている会社員などは（休憩時間であっても業務以外のPC利用はマズイので‥）、ケータイを手放せない

追記（質問を受けて、今回のテーマの肝）：

• 美容室に置いてあるファッション雑誌を見ながらケータイで買い物するお客さんたちのレポートは後ほど。
• 最後のプレゼンは、「場所」とケータイ、「イベント」とケータイ、「OOH」とケータイ、お財布になったケータイは、家の外でみるWebサイトで活用される‥というお話でした。
• 「アウト・オブ・ホーム」ネットワークとケータイの関係性に注目
• 「PCサイトは、PCで見ればいいじゃないか」（と言う人も多いので）、「家の外でみるサイト」、「家の外で使うサイト」の価値について考えてみよう
  例：GPS機能が付いたGoogle Mapsはすごく便利

デモの映像は、YouTubeにアップしています［ビデオの関連エントリー］。
もちろん、映像はケータイでも視聴できます。お時間のない方は、移動時間にでも（音声は入っていないのでマナーモードでかまいません）。

次回のテーマ：
「高齢者向けのケータイ」という発想の限界、ドコモショップという「場」から学ぶ生活のデザイン

20080401