新聞サイト・ニュースサイトは、基本的に「記事」という情報の単位をもつことを前提にしています。そして、記事という単位を時系列やテーマ（カテゴリ）別で表示できるように CMS でコントールしています。こうした見せ方は情報サイト全般で扱われていますが、今のニュースのスピードや Web 利用の変化と照らし合わせると、記事という情報単位があまりにも大きく柔軟性が乏しく感じることがあります。現在のニュースサイトのコンテンツに起こっている現象が幾つかあります。

• 速報ですら記事にしないといけないので、200文字程度のページが存在する
• 記事というタイトルとテキストを必要とする『入れ物』があるため、テキストだけ、ビデオだけ、写真だけといったコンテンツタイプの格納がしにくい
• ソーシャルメディアでブレイクしたニュースに追いつけない
• ニュースサイトのリアルタイムと、人が体感するリアルタイムは異なる。ニュースサイトが提示する「最新情報」が人が感じる最新とは限らない
• ひとつの出来事が地続きで繋がっているものの、利用者はトピック／タグで絞り込んで検索が必要になる
• 時系列で記事は見れるが、出来事がどのように進んで発展しているのか分かりにくい
• 人はセンセーショナルなひとつ話題に食いつくが、話題を取り巻く全体像を読み取れる場が少ない

以前（といっても 2008 年ですが）ニュースの特集ページをモックアップしたことがあります。これもひとつの解決案だと思いますが、よりリアルタイム制が要求されていること、どのように発展しているのかを表現するには、新しいアイデアが必要ではないかと考えています。

ヒントになるのが Facebook の Timeline のような見せ方。あちこちに目が移動するので、ニュースの観覧には適していないものの、時系列の見せ方、大きなイベントが起こったときの扱い方、そして様々な情報体型を取り込む形は参考になります。

課題になるのが、ニュースは時系列で並べれば良いわけではないという点。例えば 福島原発の話題を扱うにしても、原発の状況から東京電力の対応まで派生するストーリーが幾つかあります。つまり、上から下へ流れる縦軸のニュースだけでなく、ある起点から派生し、発展する横軸の流れがあります。ある出来事をツイートして、その数時間後にコラムとして掲載するという流れも考えられるわけです。

ひとつのテーマを「木」と見立てて、全体像をみることが出来るのではないかと考えています。様々な情報が時系列に流れつつも、枝分かれしていく・・・タイムラインというよりタイムツリーをイメージしています。

タイムツリーコンセプト

制作したモックアップ。クリックすると全体像を説明を読むことができます。

タイムツリーは２カラム構造になっています。左側の幹にあたるカラムは、記者やキュレーターが配信するリアルタイムの情報。ここでは記事、メッセージ、ソーシャルメディアの情報など、テーマを知ることができるコンテンツが時系列に並びます。右側の枝にあたるカラムでは、左側での出来事を深く掘り下げたり関連した情報が並びます。YouTube で公開されたクリップが、記者の視点からどう映ったのか、Web で見かけた気になる反応が右側に『枝』として表示されます。

こうしたページをソーシャルメディアで共有したりフォローすることで、自分が追っている情報が、数日後どのように成長しているのか見ることができます。ニュースサイトのトップページのような新着リストでは、「なぜこうなったの？」が理解できないことも、タイムツリーを追うことで、理解が深まる可能性がでてきます。
また、キーイベント前後に何が起こったのかも理解しやすくなるので、遅れてテーマについて読み出した人も追いかけやすくなると思います。

右側にあるナビゲーションを利用することで、キーイベントに移動しやすくなるだけでなく、その周りでどのような情報は発信されているのかも分かりやすくなります。

ニュースを配信する記者も、「記事を書く」という概念に囚われる必要がなくなり、読者が知るべき情報の断片を発信し続けることが出来るようになります。ストーリーが発展した時点で、改めて記事を書いたり、関連リンクを紹介するといった配信も可能です。ひとつのテーマに1人の記者だけが携わっているということも少ないですから、キュレーターを含めた数人でタイムツリーを管理することも考えられます。

ワンソース時代ではないからこそ

新聞サイト・ニュースサイトは、今でも紙の新聞の概念を引きずっています。子供の頃であれば、地元に強い一社の新聞を読んで今を知ることが当たり前でした。しかし、今はひとつの新聞サイトやニュースサイトだけに留めて情報収集するということはまずありません。数十、又は数百の情報を見て自分なりの考えを構築します。

今でも読者は自分たちのサイトだけで情報収集をしているような振る舞いをすることがあるニュースサイト。これは今の情報の消費の仕方とズレを感じます。日本の新聞サイトが次々と有料の壁を作り出して、独自の価値を生み出そうとしてはいるものの、今の Web 活用者の利便性を少し損なうだけで、他にもいくらでも情報ソースはあるという事実から逃れているように見えます（もちろん質の問題はありますが）。

ニュースサイトが Web ならではの価値を生み出すには、記事という箱を取り払うことによって、情報のスピードを上げたり、サービスプロバイダーとしての役割を果たすことだと思います。今もつニュースサイトの課題を解決するひとつの方法として、タイムツリーのようなページは役に立つのではないかと考えています。

異なるマークアップの意味

コンテンツを校正・編集・デザインするという意味合いが Web になると少し異なるのですが、この感覚が多くの方と共有されないまま 2012 年を迎えています。

従来の、つまり紙における校正・デザインは一種の独裁支配といえます。

紙によるコンテンツ配信は、発信する側が最適と考える見た目を、完全な形で読者に届けます。読者が扱い難いと思おうが関係ありません。紙におけるコンテンツ配信の質は、校正・編集そしてデザインにおいて作られた厳密な世界を届けれるかどうかにかかっています。

しかし Web は、配信者側による独裁支配ではありません。骨組みは設計されているものの、あとは読者が自由にコントロールできます。文字サイズが小さいと思えば、自由に大きさを調整できます。白色背景が目にキツいと思えば、色を反転させることもできます。とにかくじっくり読みたいと思えば、Instapaperのようなツールを使ってデザイン要素をすべて省いてコンテンツを消費することも出来ます。

従来の「支配する」校正・デザインの感覚をそのまま Web へ適応することは出来ません。もちろん、コントールをすることは出来ますが、発信者側がコントールすればするほど、コンテンツが届く利用者の数は減ります。Webデザインにある駆け引きとコダワリでも紹介しましたが、サイトデザイン全般だけでなく、コンテンツにもスタイリングと柔軟性の駆け引きがあります。

ひとりでも多くに、そしてひとつでも多くのデバイスにコンテンツを配信するにはマークアップは無視出来ない存在ですが、ここでも言葉の壁が存在します。

そもそもマークアップ（markup）とは、原稿用紙に印刷に関する指示の記号を書き加えることを意味しており、主に文章の各部分にどのようなスタイル、書体、サイズを適用するかの指示が書くことを指します。これは HTML というマークアップ言語で使うマークアップの意味合いとは大きく異なります。しかし、印刷デザインの感覚で HTML というマークアップ言語を捉えると、見た目を制御するために使われるものと考えても不思議ではないわけです。マークアップが印刷機になっているのは、こうした言葉のギャップがあるからかもしれません。

しかし、今後様々なデバイスを通して多くの方にむけてコンテンツを配信していくのであれば、今までのような見た目のコントールだけのマークアップは不要です。そして、より早く適確に配信するには、校正・編集している方自らマークアップをしていく必要性もあると思います。

見た目ではなく意味合い

WYSIWYGは、印刷をはじめとした従来の編集・校正感覚で見た目を調整しやすいものの、見た目に囚われてしまい、コンテンツの意味を見失いやすくなります。文字サイズを大きくしたり、太文字にするだけで、いかにもヘッダー文字のように見せることが出来ますが、実際は異なります。デバイスやソフトウェアによってヘッダーと認識できないので、操作に支障がでてきたり、読み難くなる可能性もでてきます。

WordPressのWYSWYG: 現在出回っている多くの CMS には高機能のビジュアルエディタが実装されているものの、コンテンツパブリッシングの視点から見ると重荷になることもあります。

Microsoft Wordを利用している方でも、見た目に囚われて、意味合いが理解しにくいコンテンツになっている場合があります。フォーマットを使わず文字サイズを変えている人、リストがあるけど「■」「●」といった記号を使う人、横線を挿入する場合も「＿＿＿＿＿」のような文字記号を代わりに使う人・・・こうした使い方をしている人は後を絶ちません。

媒体を限定し、そこでの見た目が良いのであれば、どういったマークアップでも気にすることはないでしょう。しかし、ひとつでも多くのデバイスにコンテンツを配信したい、ひとりでも多くの人に読んでもらいたい、未来に出てくるであろう未知のデバイスにも対応したい・・・という想いがあるならば、マークアップを無視するわけにはいきません。

校正・編集する人にマークアップを覚えるよう呼びかけるのは、無茶なように聞こえなくはないですが、不可能ではないと思います。

極めるのは大変ですが、HTML はプログラミングの知識がなくても書ける簡単な言語です。コンテンツに関わる部分に絞れば、すぐに習得できます。マークアップをすることで、よりコンテンツがどのように書かれているべきなのか、どう見られるのかを想像できるようになるはずです。

そもそも、校正や編集の仕事は見た目を整えることだけではありません。書かれている文章の意味を理解し、文章に命を吹き込む作業だと思います。そのひとつとして、スタイル、書体、サイズを調整するという作業があったと思いますが、Web におけるコンテンツ配信では、見た目のだけではなく、文章の意味付けをどうするかがより重要になってきます。文章に命を吹き込むという、校正・編集の仕事からマークアップはそれほどかけ離れてはないはずです。

文脈は、ヒューマンとテクニカルの２つに大きく分類することが出来ます。ヒューマン側のコンテキストは人間の態度・行動・思考への理解が必要になる分野です。社会学・心理学とったアカデミックな分野も取り込んで研究するのも手段ですし、ペルソナを用いたデザイン思考プロセスでも導き出すこともできます。

テクニカル側のコンテキストは今の技術をつかって取得することが出来ます。HTML5 の geolocation はその典型的な例ですし、スマートフォンであれば様々なデバイス情報を取得することができます。また、アクセス解析のような今まで蓄積されたデータを基にして利用者傾向を想定するのもテクニカル側のコンテキストです。

以下にヒューマンとテクニカルで理解が深まる文脈の要素をまとめてみました。

テクニカル側の文脈をみると分かりますが、数年前は取得が難しかったこと、今だから取得することに意味がある要素が幾つか見られます。場所情報は昔から取得することが出来ましたが、ピンポイントではありませんでしたし、わざわざ取得することの意味が見つけ難い状態でした。しかし、今では場所情報の取得が難しくなくなっただけでなく、情報を得ることで、利用者の使い勝手を向上させることが可能になりました。

ヒューマン側の文脈の中には、今後テクニカルに移行する可能性がある要素があります。「好み」は千差万別ではありますが、Facebook や Google Plus のようなソーシャルネットワークに蓄積されている好みの傾向を取得できるようになるとしたらどうなるでしょう。そこから、利用者の行動や思考パターンも読み取れるようになるかもしれません。

可能性があるからといって、実装するかどうかは判断が難しいところ。プライバシーへの理解は開発側だけでなく、利用者側にも求められます。また、何でも気を利かせて利用者に情報を提供すれば良いのかというと、そうではありません。人によっては、プライバシーを可能な限り守りたい方もいます。また、自動化を好まず自分で操作したいと感じる方もいるでしょう。様々な文脈を技術的に取得可能になってきているからこそ、そこを理解した上で、どうヒューマン側に注目したデザインが出来るかが課題になるでしょう。

先週配信した Automagic Podcast (#30) では、プライバシーを話題にしました。今回の記事と関連したことを話しているので興味がある方はぜひ聞いてみてください。

あなたは上の写真を見て、ちょっと笑顔になりませんでしたか？
笑わなかったかもしれませんが、悲しくなったり怒ることはなかったと思います。

人は感情の生き物です。自分の想いを表情や仕草によって表現することが出来るだけでなく、他から影響を受けたり、影響を及ぼすことが出来ます。見知らぬ子供の写真を見て、自分の感情が変わったのも私たちが感情の生き物であることの表れでしょう。

ポジティブな感情をデザインを通して引き出すことが出来るのでしょうか。「Design for Emotion」のような書籍が昨年出たのも、感情とデザインの関連性が強いことを示していますし、利用者に注目したデザインプロセスや、文脈を考慮したデザインが注目されるのは、人の感情をどうデザインするかを探求するための手段なのでしょう。

従来のコンピューターと人間の関係は比較的シンプルでした。大きな装置に向かって『作業』をする場合が多かったため、利用者によるインプットと、それに対するアウトプットをどうデザインするかが中心でした。もちろん、そこには人の感情に注目するという考えはありましたが、コンピューターと人間という単一関係の中でどのように感情／体験を作り出すかに特化していたといえるでしょう。

しかし、今のコンピューターはデスクに置いてある装置だけではありません。人の手の平にある存在であったり、Nestのようにコンピューターと意識しない何気ないモノと化している場合があります。コンピューターがひとつの大きな装置から、人の生活にとけ込んだ道具になったことで、コンピューターと人間というシンプルな関係ではなくなりました。人の態度や意識がコンピューターの使い方に直接関係するようになったことで、人とコンピューターを取り巻く環境を意識したデザインが必要になりました。

作業だけでなく、人々の社会活動や生活そのものに大きな影響を及ぼすようになったコンピューター。だからこそ、コンピューターが人の感情に及ぼす影響は以前より大きくなったといえますし、利用者にポジティブな感情をもってもらうようなデザインをすることの重要性が高まっているのでしょう。

では、感情に響きそうな工夫がされていれば良いのかといえば、そうではありません。

利用者にヘルプ メッセージを表示するOfficeアシスタントには、Clippy をはじめとした様々なキャラクターが採用され、人間味をもたせていました。楽しく簡単に Office を使ってもらうために実装された機能ではありますが、Office 2007 では撤廃されました。楽しそうに見えていたものの、作業を中断させたり、的中した応えが返ってこなかったのが主な要因です。「楽しく」「おもしろく」を追求する前に、まずは使い勝手良く期待通りの動作をすることが重要であるという一例といえるでしょう。

近年、ゲーミフィケーションが注目を浴びているものの、人のニーズを満たした「使いやすさ」「信頼性」「安定性」がなければ成立しないわけです。

感情を測定するための試みもあります。LEMToolは利用者の行動を8つの感情に分けて記録することができるサービス。

体験にも同様なことが言えますが、感情のような数値化しにくい要素どのように評価し、測定するのかが課題になるでしょう。Patrick Jordan の「Designing Pleasurable Products」によると、楽しさや満足度といったポジティブな感情は４つのエリアに注目することで評価できると言われています。

Physio (肉体的・物理的)

理解、把握、適応

Socio (社会的)

社会ステータス、アイデンティティ

Psycho (心理的)

認知、欲求、感情的な視点

Ideo (思想的)

願望、価値観、好み

昨年のUXセミナーで、今出回っている体験を設計するための5階層では足りないと話しました。さらに下に社会・思考・コミュニティという階層があるのではという話をしましたが、Jordan氏の考える感情を評価するための 4 つのエリアを重なるところがあります。感情を引き出すトリガーや「良い」という価値観は国によっても違えば、その人が属している場所によって異なることがあります。誰にとっての良い感情をデザインするのではなく、ターゲットを絞ることでデザインの評価もしやすくなるでしょう。

カッコイイ UI にしてしまえば、良い第一印象を得ることが出来ますが、それがポジティブな感情になり、使い続けるための引き金になるとは限りません。やはり、そこには「思い通りに動く」「ストレスがない」といったエンジニアリングも含めたデザインがあってこそだと思います。利用者に近づいてデザインをするということは、人の感情がダイレクトに返ってくる可能性があるということです。そこにはリスクを伴うことはありますが、踏み込むことで機能リストでは得れることが出来ない差別化にも繋がると思います。

私自身はアクセシビリティの専門家ではありませんが、今のアクセシビリティ周りの活動や課題、そしてアクセシビリティに関わるプロフェッショナル達が抱く想いを知りたくて今回参加してみました。

見え難いアクセシビリティ

以前から奇妙だと思っているのが、コンテンツ／デザイン／機能など様々な物事において付加価値が重要視されているのにも関わらず、アクセシビリティになると付加価値ではなく、ボランティアに近いサービスとして見られる点。その要因として、健常者は省かれてアクセシビリティが捉えられている、障害者のためにある配慮になっているからかもしれません。アクセシビリティはコンテンツ／デザイン／機能の付加価値になるのですが、そこがまだリンクしていないのでしょう。

アクセシビリティの話題自体が捉え難いのも課題です。取り上げられる話題が、コード、技術仕様など目に見えて分かりやすいものが少ないので、実装しても実感に繋がらないことがあります。その上、アクセシビリティの向上の事例が障害者に向けた補助が大半であれば、情報へのアクセスしやすさという意味でのアクセシビリティとして捉えられ難いのも当然かもしれません。

こうした状況はもう何年も続いているわけですが、デザイナーとしてアクセシビリティをもう一度考え、啓蒙するにはおもしろい時期に来ているのではないかと思っています。見え難い・分かり難いアクセシビリティであれば、見える化するのもデザイナーとしての役割です。近年 UX が日本国内でも注目が集まっていますし、UX の向上のためのアクセシビリティという視点は皆頭のどこかに持っていると思います。

見える化することによるキヅキ

ひとつデモを作ってみました。
アクセスキー（accesskey）は HTML に記述されているものの、視覚化されていることが少ない便利な機能です。アクセスキーを UI として見せることで、普段気付かない人もアクセスキーの便利さに気付いてもらえると思います。デモページにアクセスして、altキーを押すと割り当てられているアクセスキーを見ることができます。

今回作ったデモは数多くの課題を残しています。タッチデバイスではアクセスキーを割り当てたところで、キーをうまく使いこなすための術が見つかりませんでした。

最初、ジェスチャーを使ってメニューへアクセスするためのパネルを表示させようと試みました。スクロールが長いページも少なくないので、ジェスチャーを使っていつでもどこでもメニューへアクセス出来るものです。Mobile Safari は WAI-ARIA のサポートが進んでいるので、ダイナミックコンテンツやオーバーレイ形式のパネルを読み上げることは難しくありません。

しかし、iPhone の VoiceOver に切り替えると、幾つかのジェスチャーが操作のために割り当てられているので、制作者側が自由にジェスチャーを加えて機能実装するのが難しいです。iOSアプリであれば、ジェスチャーのカスタマイズが可能みたいですが、ジェスチャー操作に慣れている方にとって不便になる可能性があります。

今回はアクセスキーという普段は視覚的に見えない機能を UI として見せることで、利用機会を作るだけでなく、アクセシビリティへの配慮はより多くの人の使い勝手を上げるものである事例を紹介しました。

こうした「見えない」ものを「見える化」することは、デザイナーには興味深い課題だと思います。同時に、技術的な制約や中間案をどのように見つけるのが難しいと感じました。アクセスキーに関していえば、ソフトウェアベースで UI を提供しても良い機能のひとつ。携帯に実装されているブラウザはアクセスキーを UI にして表示しているのに、他では実装例が見られませんね。ブラウザの機能を Web ページが各自UI実装しているという意味では、文字の拡大・縮小機能と似ていなくはないです。

アクセシビリティは皆に関係したものであることを伝えるには、文字通り皆のもののように見せるのも手段だと思います。利用者の邪魔にならないように、いかにして使い方、情報の消費の仕方を伝えることが出来るのか・・・というのは難しい課題です。しかし、いろいろ作っていくことでアプローチの数を増やすことで、時と場合に応じた対応が出来るのではないかと考えています。

あなたが職種を定義している

「Webデザイナーってなに？」「Webディレクターって何をしてるの？」「これから Web デベロッパーってどうなるの？」みたいな話を時々見かけることがあります。それぞれが思う定義について語り合ったり、じっくり考えてみることは良いことだと思いますが、全員一致で共通する要素はそれほどないと思います。私はそれが自然だと思いますし、カテゴライズをはっきりさせることでもないと考えています。

皆、様々な仕事環境で働いているわけですから当然のこと。もしあなたが Web ディレクターという仕事をしているのであれば、あなたにとっての Web ディレクターを全うしているだけであって、Webディレクターの『定義』に沿って仕事をしているわけではありません。隣の Web ディレクターと違うことをしているからといって迷うことはないですし、上手くいっていると感じているのであれば、無理に変えることもありません。たぶん誰かの真似をしたところで、あなたの仕事環境では十分に活かせない可能性が高いはずです。

職業タイトルは時代によって変わり続けるものです。数年前に UX デザイナーやソーシャルメディアエキスパートと名乗っていた人はほとんどいませんでしたが、今は周りにたくさんいます。流行にのっているだけと考えることも出来るかもしれませんが、時代に合わせて自分の仕事に合う職業タイトルを付けていると考えることも出来ます。

今回のセミナーでは、おおまかな仕事の領域を 4 つに分類しましたが、職業タイトルには触れませんでした。時代に合わせて自分にフィットするタイトルを付ければ良いと思いますし、明確に決めてしまうことで必要以上に自分の領域を固めてしまったり、狭めて欲しくなかったからです。

講義中に紹介した将来の Web に関わる領域。人によっては幾つかのカテゴリにまたがる人もいれば、特定の領域でさらに深堀りする人もでてくるはず。

今後も Web デザイナーと名乗りたければそうしても良いと思います。他人が考える『定義』に流されることもありません。自分の仕事環境に最適化された、あなただけの Web デザイナーになれば良いと思います。相手の評価や捉え方も後で自然とついてきてくれます。そのときには職業タイトルではなく、あなたの名前のほうを重要視しているはずです。

Webらしくデザインしよう

紙やCD-ROMの作り方を、あべこべな形で継承しているのが従来の Web サイト制作だと思っています。スクリーンサイズという視覚的外壁があるように見えるものの、無形・無限・複雑に広がる Web の世界。Web へアクセスできる スクリーンの数がさらに増える中、今までのように紙的な価値観や特定のスクリーンサイズを想定した作り方では、デザイン・ビジネスの側面からみるとスケーリングが困難です。

こうしたことは Web に関わるプロフェッショナルであれば分かっていることですが、従来の Web サイトの作り方・評価の仕方に留まっているところは少なくありません。従来の Web サイト制作から、今必要とされるデザインへ移行するには、今抱えている Web サイトの問題、Webサイトの作り方の課題を克服するところから始まります。

利用者のコンテキスト（文脈）に対して最適の形でコンテンツを配信することが可能になる時代。仕事の領域に応じて、設計・開発するところは異なるが重なる部分も多々あり。

今セミナーでは技術・トレンドについて多くは語りませんでしたが、上図に当てはまる技術やトレンドが今後残ると思いますし、いつの間にか仕事で使うことになると考えています。上図の中にあなたが興味を魅く領域はどこでしょうか？そこであなたが出来ることを自分で定義していってください。

セミナーで話した Web デザインの課題は簡単ではない部分が幾つかあります。すぐに状況は変わらないかもしれませんが、動き出せば何かは変わり始めますし、変わらなかったとしても次へ繋げることは出来るはず。失敗は何度も繰り返せば良いのです。

参加者の中には、Webを活用したデザインとはどのようなものなのか？プロセスは？価値観とは？評価の仕方は？・・・といった質問・疑問がでてきたかもしれません。今はまだ記事が少ないですが、WD101シリーズで掘り下げていく予定です。

画像の課題は解決されつつある

先日 Web担当者 Forum で、レスポンシブ・ウェブデザインの功罪とモバイルファースト という記事が掲載されました。Media Queries を活用するなど実装のための概要を説明した上で、非表示だけど読み込まれているから膨大な画像素材が存在する PC サイトのレスポンシブデザインは不適切であると書かれています。

現存の Web サイトを Media Queries だけでレスポンシブ・ウェブデザインをするのであれば、Web担当者 Forum での指摘は間違っていませんが、実際のところレスポンシブにデザインすることは、Media Queries による対応だけではありません。例えば、画像の表示のさせ方を工夫すれば、記事で指摘している課題はある程度解決できます。Web担の記事からもリンクされている CSS Rador でも取り上げられている解決策もありますが、こちらでも紹介。

設計を再考する

Media Queries だけでも、簡単なところでは背景画像から始めることができます。うまく切り分ければスマホでは読み込まれないように制御出来ますし、content属性を活用するのも手段です。

サーバーサイドで処理する

Adaptive Imagesを使えば現行のマークアップを変えずに適切な画像を読み込ませることができます。

JavaScriptを使う

Response.jsという jQuery のプラグインを使うと、画像タグの属性に書かれている代わりの画像をスクリーンサイズに応じて切り替えることが可能です。.htaccess と組みあせて使う responsiveimgs.js もあります。

日本では昨年あたりからよく耳にするようになったレスポンシブ・ウェブデザインですが、最初にこの手法が紹介された 2010年 5月当時から、画像や余計なデータは読み込まれてしまうという問題は取り上げられています。幸い、天才デベロッパー達の努力により1年半以上経つ今では解決するためのソリューションが幾つか出てきているのが現状です。

PCサイトの感覚では通用しない

レスポンシブ・ウェブデザインで行き詰まるポイントのひとつに「PCサイトの情報量ではモバイルでは隠すしかない」と思ってしまう点。「PC＝ボリューム満点でリッチ。モバイルでは＝コンパクトでシンプル」という考えている方もいるかもしれません。今の PC サイトを基準にするとそう考えるでしょうし、Media Queries で情報を隠すという手法になるでしょう。しかし、今の PC サイトの情報量と網羅性が正しい情報設計なのか問いかける時期に来ています。

• ソーシャルメディアを起点にして情報を消費するようになっている
• Instapaperや Safari の リーダーのようなコンテンツの消費に最適化した形を好み始めている
• スクロールやスワイプといった一方直線の情報消費に馴染み始めている
• 広告をはじめコンテンツ以外の情報に目を向けなくなっている

また、利用者の文脈を考慮したデザインや技術的補助も難しくなくなってきました。モバイルコンテキストの見分け方と注意点でも指摘しましたが、決めつけは出来ないものの、ある程度情報をセレクトして提示することができるようになってきています。

PCサイトだから情報満載ではなく、PCサイトの回線やハード面の力を借りて、軸にあるコンテンツを高めるデザインであっても良いと思います。

昨年 UX/UI トレンドの記事を書いたときに、モバイルがデスクトップデザインに多大な影響を及ぼすようになると指摘しました。Mac OSX Lion は、iOS の影響を大きく受けていますし、モバイルアプリのノウハウが Web デザインの見せ方を少しずつ変えてきています。今後、ますますスマートフォンをはじめとしたモバイル機器から Web サイトをアクセスする人が増えてきます。モバイルを中心に Web へアクセスしている人であれば、情報網羅し過ぎている今の PC サイトは分かり難く感じるでしょうし、その声はますます強くなるでしょう。

モバイルユーザーが増え、彼等が求めているような絞られた情報設計が必要だからこそ、モバイルファーストという考えが生まれたのだと思います。しかし、私は昨年の7月にコンテンツファーストと、あえて別の言い回しを使いました。目指している先は同じですが、『モバイル』という言葉が足かせになると考えたからです。モバイルと付くことでモバイルに対応した Web サイトを作れば良いという感覚でいては、コンテンツがまた後回しでテンプレートの話になる可能性があるからです。コンテンツはモバイルより未来にある未知のデバイスが登場しても変わらずプライオリティを高くあるべきです。

レスポンシブ・ウェブデザインを実装する際に、まずは今の PC サイトの作り方やメンタルモデルを取り去るところがスタートなのかもしれません。

レスポンシブにデザインすること

Webサイトは必ずといって良いほど、企業の背景が見え隠れしています。ビジネスモデルだったり、組織体勢が Web サイトに反映されています。 もし、表層だけレスポンシブにしたとしても、Webサイトを支えるビジネスモデルや組織体勢がレスポンシブでなければ、どこかで行き詰まります。例えば、広告モデル、ライターや画像を処理する運営チーム、制作と彼等と対話する担当者など。それぞれが社会・人のニーズや動きにレスポンシブに反応していかなければ、レスポンシブな Web サイトの実現は難しいと思います。技術的に難しいかというより、こうした制作工程以外のところのほうが難題ではないかと考えています。

レスポンシブ・Webデザインがベストな解だとは思っていません。
ただ、デバイスによって同じコンテンツなのにも関わらず URL が異なっていたり、特定のデバイスに最適化されていても、それ以外のデバイスからの共有・引用・操作がしにくいことに不満を感じているだけです。その解決方法はレスポンシブ・Webデザインだけでなく、サーバーサイドや CMS を工夫することで可能でしょう。ひとつのコンテンツを様々な手段でシームレスにアクセス・共有できるのであれば、他の方法でも良いと思います。

レスポンシブ・Webデザインが完璧でないから、アプリにしたり、デバイスに最適化しようというのは問題の先送りに過ぎません。今後、デバイスの数は爆発的に増えますし、コンテンツの運営・管理以外のコストを引き受けることが出来るのか？対象デバイスが増えても持続可能なのかといった課題が残ります。

いろいろなスクリーンサイズに対応することが「レスポンシブ・デザイン」と考えるのではなく、ビジネスや利用者のニーズにどうレスポンシブに対応するのかがデザインに課された役割ではないでしょうか。

この話題は今週の Automagic Podcast #28 でも話したので興味がある方はぜひどうぞ。

「デジタルとリアルの境目がなくなってきた」
「リアルな交流が Web でも出来るようになった」

そんな言葉を耳にするようになった理由のひとつは、Web へアクセスする手段がパソコン以外からでも手軽に出来るようになったから。いつでも何処でもアクセス出来るわけですから、Webを身近に感じるのは当然のことなのかもしれません。スマートフォンだけでなく、iPad や Kindle Fireをはじめとしたタブレット機器も利用され始めたことで、パソコンから Web を見るという行為は過去のものになりつつあります。

Ciscoの調査結果によると、2015年までにモバイル機器のインターネットのデータ送受信量は今の26倍になると言われています。人とのコミュニケーションを主軸にしている Twitter や Facebook でもモバイルからの利用が大きく占めていますし、その数は今後ますます増えるでしょう。

これだけモバイル機器に触れているわけですから、私たちは常にスクリーンと共に生活しているといっても過言ではないでしょう。外の景色より、携帯デバイスに映し出されている光景のほうが『近い』と感じる方もいるでしょうし、そちらのほうがよく見られているかもしれません。

SDKやエミュレーターが配布されています。CES 2012 で大々的に発表された模様。

2011年も既にマルチスクリーンの世界にいるという感覚がありましたが、2012年のスクリーンの数は爆発的に増える可能性があります。タブレットやスマートフォンの数が増えるというのは当然ですが、それだけではありません。

テレビは人とWebの情報が繋がる窓口として Apple も Googleも注目しています。 テレビからパソコン向けの Web サイトをそのまま見ることはありませんが、テレビに最適化されたアプリであればどうでしょうか。Opera TV Store のようなマーケットプレイスから、好きなアプリをダウンロードしてテレビを見ながら友達と対話をする日もそう遠くはない未来です。

スクリーンは家の中だけではなく、店頭にもスクリーンがたくさん現れるでしょう。JCPennyは、店頭に Webからの情報が見れるキオスクを設置。店頭では在庫切れになっている商品をその場で取り寄せたり、別の店舗にあるかどうかチェックすることが出来ます。シンガポールの通信会社 SigTel が今年開設したリテールストアは、店頭の外に向けて幾つかのタッチスクリーンが設置されており、店が開いていないとき、待ち合わせをしているときも情報にアクセスしたり商品を購入出来るようにしています。

Webから情報を取得していますが、店頭に訪れた人が操作しやすいように工夫されたインターフェイス

様々なスクリーンがあるだけでなく、２つのスクリーンを同時に使うケースも出てきました。韓国のスーパー Home Plus は 地下鉄のホームに製品の写真を並べて、携帯で写真を撮れば購入できるというシステムを導入しています。Shazamは、TVやパソコンのモニターなどで流れる曲を使ってプロモーションに繋げる窓口を築いています (例)。

今まで Web の情報は Web で、オフラインの情報はオフラインで、という切り分けがはっきりしていましたが、スクリーンが何処にでもある世界では、境目を取り去ることで体験を向上しているケースが多く見られます。

Webデザインからみた課題

パーソナルデバイスだけでなく、様々な場にスクリーンがある世界。そこから Web の情報（コンテンツ）にアクセス出来るようになりつつあります。パソコン向けの Web サイトだけを作っていたときに画面解像度や Web ブラウザの対応に悩まされていた方はたくさんいると思いますが、そのときの悩みなんて小さなことだと思えるくらい、対象のデバイスの数が増えていきます。Web へ繋がる窓口が星の数ほど増えてくるわけですが、どのように対応すれば良いのでしょうか。

昨年あたりから Responsive Web Design が注目を浴びていますが、これはマルチスクリーンに対応するためのひとつの手段でしかありません。モバイル、タブレットという領域を超えて「スクリーン」という広い視野をもってデザインしていかなければならなくなります。そのときに、どのようにデザインをすれば良いのか幾つかヒントがあります。

利用者のニーズを知る

基本中の基本ですが、利用者がどのスクリーンからアクセスするのかでニーズが変わる可能性があることに注目です。スマホだから情報を絞る・・・ではなく、スマホからアクセスしている意味を探ることで適したデザインが提供できるでしょう。モバイルの文脈を読み解くのもひとつの突破口です。

コンテンツに触れる感覚を養う

我々の生活の中に表れたスクリーンの多くはコンテンツに直接触れることができるタッチスクリーンである場合が多いです。利用者はどのようにコンテンツに触れるのでしょうか？どのように操作したがるのでしょうか？マウスとキーボードといった抽象的な操作からの変化にデザインも対応しなければいけません。

見た目のコダワリ方を変える

スクリーンサイズが爆発的に増えるわけですから、見た目をまったく同じにすることはナンセンスな作業です（元々それが Web デザインにおける質ではないと思っていますが）。しかしだからといって、見た目が大事ではないわけではありません。どのような見た目を様々なスクリーンで確保するか、本当にその装飾は必要なのか、見た目をコントールしつつ柔軟性をもつ方法はなにか？といった課題に取り組むことがコダワリになるでしょう。

様々なスクリーンに囲まれていた生活とは、Webがパソコンという小さな窓口から解き放たれたという意味が含まれています。そのときに昔から Web サイトを作り続けてきた人たちはどのような価値を提供することが出来るでしょうか。一見、難しいだらけのように聞こえますが、より一層、人のためのデザインが出来るという意味では非常にエキサイティングな時代がきたと思っています。

Webの狩猟時代は終わった

Web だけではありませんが、今までのビジネスは石器時代の狩猟社会に似ていると思います。顧客をたくさん獲得すること、ひとりでも多くの振り向いてもらうこと、自分たちの場所に集めること・・・これらは野生の動植物を採取していた石器時代の狩りと重ねることができます。Web でもページビューや会員数の価値は未だに高いですし、ソーシャルメディアだと言っても結局 Like 数やフォロワー数といった『採取数』が重要視されています。とにかくたくさんの人に注目してもらうにはどうしたら良いのか、という考え方は狩猟社会的な価値観かもしれません。

人の顔が見え難く、ひとりひとりのニーズを聞き入れることが難しい状況であれば、たくさんの人を『刈り取る』くらいしか出来なかったかもしれません。刈り取る、かき集めるという考え方であったからこそ、集めた後の人とのコミュニケーションという考え方も生まれなかったでしょうし、結局1回限りの関係を毎回繰り替えすという形になっていたのでしょう。

刈り取った数ではなく、ひとりひとりにどのような価値を提供出来るかがブランドに繋がることを解説した記事「企業の透明化がブランドを高める理由」

狩猟社会には拡張性や持続性はありません。今いる土地を食いつぶして、次の土地へ移動することを繰り返します。

これは今までの Web ビジネスにも重ねることが出来ます。派手で魅力的なプロモーションサイトやランディングページを作って人を集めることができたものの、期間が過ぎたり、アクセス数が伸びないと、装いを変えてまた違うことをするというプロセスの繰り返しです。これでは狩猟社会と同様に拡張性も持続性もありません。こうした状況下で、1,000,000人アクセスがあったとしても、それは消費しただけに等しいわけです。

テクノロジーや Web サービスも、農耕時代の価値観に沿った使われ方をされています。ひとりでも多くの人に接触するために効率的かつ自動的に行うにはどうしたら良いのかという部分が強調されがちです。もちろん、テクノロジーや Web サービスによって効率化される部分、自動化される部分はありますが、人間が手作業でやらなければならない部分まで任せるわけにはいきません。

私たちは狩猟時代から農耕時代へ移行しなければいけません。

Web的農耕時代の捉え方

ここで言う農耕時代とは、ひとりでも多くの人を獲得する（刈り取る）のはなく、関係を築き上げることができる人を見つけ出し、育てることを指しています。たとえ採取した後でも日々のケアを欠かすことができない農作業のように、Web的農耕時代でもきめ細かいケアが成功に繋がります。

農業に関わる様々な作業は、テクノロジーによって軽減・自動化されているものの、作物と直接関わる部分は自動化されていませんし、人の感覚が欠かせないと言われています。それと同様、Web においても人との接点になる部分は自動化はできないわけです。

Topsyのようなサービスを使えば人々の声を手軽に集めることができます。

多くの作業が自動化・軽減することが出来るようになったからこそ、人との接点をどのように築いて、関係を育んでいるかという部分に時間とお金をかけることが出来るのではないでしょうか。情報発信だけでなく、フィードバックの取得も容易にできるようになりました。 Google だけでなく、様々なサービスにある検索窓に自分のビジネスのキーワードを打ち込むだけで、人々の反応を知ることが出来ます。今まで手作業でしていたこと、多額の予算が必要だったこともいつの間にか Web では低コスト又は無料で利用できるようになっています。自動化できる範囲は今年もますます広がるでしょう。「人との関わりを築くなんてコストが高過ぎる」なんて言っていられるのも今のうちかもしれません。

Web的農耕時代の捉え方を簡単にまとめると以下のとおりになります。

• 「何人と関わっているか」のではなく「誰と関わっているか」
• 農作業と同様に、中長期を見据えて取り組む
• 耳を傾けることからはじめる
• 接点をもつためのキッカケを見つけ出して行動する
• ビジネスのためではなく、その人にとっての有益な情報を提供する
• いきなり宣伝（刈り取り）しない

Webデザインの関わり方

Webに関わる人は、農耕時代的な考え方をどのように仕事に反映させれば良いでしょうか。もし Web サイトを作るのであれば、どのうようにすれば 農耕時代の価値に合ったものになるでしょうか。

昨年コンテンツとコンテキストに関わる記事を幾つか執筆しましたが、この 2 つが、Web 的農耕時代に必要とされる Web サイトを構築に必須だと考えています。また、今年はこの 2 つがひとつになるはずです。つまり、コンテキストに合わせてパッケージングされたコンテンツを届けることが出来るサイト／サービスが顧客と関係を築き上げることが出来るようになります。

具体的な手法として、ソーシャルメディアの対応やモバイル向けのサイトを作るということになるかもしれません。しかし、その前にどのようなコンテキストが存在するのか、そして対応するためのコンテンツをもっているのかを探求していかなければいけません。上記にリストしたWeb的農耕時代の捉え方に沿って Web サイトをデザインをするとしたら、どうなるか考えるのも良いスタートになるかもしれません。

獲得する Web サイトではなく、耕作する（育てる）Web サイトとはどのような姿なのでしょうか？どのようなサービスと組み合わせることが出来るのでしょうか？どのような人材が必要とされるでしょうか？ こうした疑問に応えることが今後の Web デザインが提供できる価値になるでしょう。

2011年 UI/UX トレンドで、アニメーションが実装される機会が増えるだろうと予測しました。今はアプリだけなく、Webサイトでもよく見かけるようになりました。実装が簡単に行えることから、何気なく使われていることが多くなったわけですが、正しく実装するのが意外と難しかったりします。

アニメーション効果はコミュニケーションを円滑にするために使われるべきです。アニメーションが発生した瞬間に何かしらのコミュニケーションがインターフェイスと利用者の間に生まれます。つまりアニメーション効果を実装するということは、コミュニケーションの目的を明確にすることから始まります。コミュニケーションを確立しているかどうかで、アニメーション効果がギミックになるのか、意味のあるものになるのか決まります。

アニメーションと一言でいっても様々な形があります。例えば jQuery には以下のようなアニメーションが実装可能です。

また、jQuery UI にある Effect を活用することで、様々なアニメーションを手軽に追加することができます。

アニメーションは以下のグループに分類することが出来ます。効果によってはひとつのグループに該当する場合と、複数に属する場合があります。

• 方向
• 色
• 速度
• 透明度
• 形状

アニメーションは必ずといっていいほどコミュニケーションの目的が伴いますが、その目的と関連付けさせるには以上のアニメーション効果をどのように組み合わせれば効果的でしょうか。例えば 様々な意味をもつWebサイトのスピード という記事で紹介したことがある、読み込みのプログレスバーを見てみましょう。

「利用者にデータの読み込みが進んでいることを知らせる」というコミュニケーションの目的に適した効果を選ぶことで、利用者の認知を上げることができます。データの読み込みがされていることを、小刻みに利用者に知らせるためにアニメーションは最適ですが、どのアニメーション効果が適しているでしょうか。点滅は状況が確認し難くなりますし、大袈裟な動きも認知しにくくなる要因になります。読み込みが進んでいることを知らせるには、どの向きが分かりやすいでしょうか。色は変えるべきでしょうか。読み込みが終わったらプログレスバーは消えているべきなのでしょうか。様々な課題が生まれます。

プログレスバーのように利便性を目的としたアニメーション効果だけでなく、動きで自身のブランド（らしさ）を訴える場合もあります。Mac OSX や iOS には、たとえサードパーティのアプリでも「Apple っぽい動き」が幾つも見ることができます。これは、Core Animation のようなツールセットで実装しやすいからですが、こうした動きのための言語セットを用意することで、自社ブランドや感覚を共有しやすくしています。あなたの作っているサイトやアプリに似合う動きはどんなものか？連想するアニメがあるとしたら、それはどれか？・・・こうした質問について考えるのもコミュニケーションの起点になります。

使えるアニメーションパターンが増えてきた今だからこそ、適材適所に実装するためのノウハウが欲しいところ。どの効果を適用したらコミュニケーションの目的が達成出来るのかを吟味したいですし、議論をすることでアニメーションだけでなく全体のデザインについて考える機会を与えてくれるでしょう。

日本のお笑い芸人と同様、アメリカのコメディアンもライブの模様を DVD で販売しているわけですが、先日インターネットで個人販売を始めました。5ドルでしかも DRM なし。購入したらすぐに彼のライブを好きなデバイスで楽しむことが出来ます。

個人販売といっても6つのカメラで撮影され、プロによって編集された本格的なライブ作品。販売を始めてから3日間で 500,000 ドルの売上を記録。チケット販売である程度、映像制作のコストはまかなえているそうですが、Web サイトのシステム構築などを含めたコストもデジタルダウンロードを通してカバーしているだけでなく、利益にもなっているそうです。

彼の声明によると、大手メディア企業に映像を売り払ったほうが手間もかからないし、利益もあるそうです。しかし、値段は 20 ドルくらいに上がるだけでなく、DVD なので観覧する方法が限られてしまいます。リージョンコードや DRM といった不便も視聴者に与えてしまう点では、個人でデジタルダウンロード販売をしたのは意義があることだと言っています。

彼は今、アメリカで最もホットなコメディアンのひとり。そんな彼だからこそ出来た部分はあるものの、今よりさらに売ることが出来た可能性はあります。Web サイトと Twitter からのメッセージ だけでここまで出来たわけですから、さらに広げることが出来そうですね。

アプリとして販売したとしたらどうなるか

映像制作だけでなく、アプリ開発まで余裕があったかどうか分かりませんが、iTunes Store や Android Market のようなプラットフォームから買うほうが楽と考える方もいると思います。また、ランキングを通したアピールがあるのが利点です。３日間で 110,000 のビデオを販売したわけですから、これがトップアプリとしてストアに表示されていたら効果は絶大です。

オーディオ版を広く販売する

個人で映像を販売するチャンネルがまだ少ないですが、音楽（オーディオ）であれば幾つか選択肢があります。例えば Tunecore を使えば、iTunes や Amazon をはじめとした 8つの異なる場所へ手軽に配信することができます。今後 Netflix のような場でも手軽に配信できるようになれば大きな転換が起こりそう。

公式の Facebook ページをつかった配信

Twitterで発表した際に数多くの人に RT されたみたいですが、Twitter はその一瞬しか盛り上げるのが難しいツール。人それぞれのペースに合わせて情報を届けたり、知り合い同士から徐々に広げていきやすい点では Facebook のほうが適しています。アメリカのコメディアンなのでアメリカ人が多くいるところで情報発信をする利点もあるでしょう。

Twitter を利活用

Twitter で発表したときの効果は絶大でしたが、その後に続くメッセージが少ないのが気になります。使われていないアカウントも多いでしょうし、フォローしている人全員が彼のメッセージに耳を傾けているわけではないですが、頻繁な更新が次に繋がる場合もあります。

2年前に「 トレント・レズナー流マーケティング論」を紹介して以来、数多くのミュージシャンや映像クリエイター達が Web を活用してプロモーションを行ってきました。有名人だから成功したものもあれば、認知度がなくても自分たちでお金を稼いでいる人もいます。Louis C.K. のダウンロード販売はその流れに続くものであり、特に目新しいことはありません。ただ、影響力がある人がこうしてまた一人、Web を活用し始めた点では今後のメディア配信の行方がまたおもしろい時期に来たのかもしれません。

ただ、今回感じたのが Web という広大な場に自家製のストアを置いても頭打ちしやすいという点。DRM がないのはアーティストとしての主張ですし、それに賛同する人もたくさんいます。しかし、独自の操作を要求される Web サイトから PayPal を使って映像をダウンロード。そのあと、自分が使っているメディアプレーヤーに入れて管理するといった一連の作業が発生します。これが面倒・分かり難いという理由から購入を諦めた方もいるかもしれません。

Web 上にただ載せるのではなく、多少閉じられてはいるものの、購入の敷居を下げてくれるマーケットプレイスを使った方が効果があるのかもしれません・・・たとえそれが DRM 付きだったとしても。

ひとりでも多くの方に聞いてもらいたい／見てもらいたいというのであれば、手段を選ぶことはないと思います。たくさんのツールとサービスから配信して、人に見てもらう機会を作るべきです。しかし、いざ販売ということになると、選択が難しくなります。「本当はこうしたい」と配信側が思っていてもプラットフォームがサポートしていないといった弊害もあります。弊害は今後も残ると思いますが、敷居は次第に下がってくるのは確か。大手のマーケットプレイスは次第に開かれてきていますし、Amazon や Netflix のような Web サービスも、次第にメディア企業のような振る舞いをし始めました。Amazon や Netflix のような新しい種類のメディア企業が個人や小規模の配信に新たな力を与えてくれる日が近づています。

【Update】
12月22日のニュースによると、ダウンロード販売の売上が100万ドルを超えたそうです。一部はチャリティーに寄付するとのこと。

WordCamp という場だったので、CMS にフォーカスした内容になりましたが、実のところ Web そのものが API になりつつあります。

従来 Web上にある様々なデータを読み込んで、人が理解できるインターフェイスにするのは Web ブラウザの役割でした。パソコンに最初からあったことと、多くの方に使われていたという理由で Web ブラウザという名のアプリで動作する技術が使われ続けていました。 Web ブラウザ上で情報を表示させたり動作させるためには CSS, HTML, JavaScript といった『言語』を必要としていましたが、それが変わりつつあります。

今は CSS, HTML, JavaScript のような Web ブラウザで情報を表示するための言語を活用しなくても、JSON, RSS, XML-RPC, REST のようなバックエンド技術を利用して直接データへ通信することが可能です。つまり、Web ブラウザを利用しなくても、Web のデータへアクセスし、異なるフロントエンド技術で表示させることが可能であることを意味しています。

アプリを見ると、その傾向が分かります。

今年のベストアプリと言われている Instagram は、HTML ではなくネイティブの言語で動作します。入手する方法は iOS の App ストアのみ。写真の撮影、公開、共有、コミュニケーションは基本的にアプリの中で行われるので、特定のコンテンツやユーザーへリンクするのは困難です。アプリは完全に独自規格の技術と配信システムによって構築されていますが、バックエンドは Amazon Elastic Compute Cloudという、Web生まれの技術が活用されています。

iPhone版が出て話題の Flipboard も Web コンテンツが API のような存在になっている好例です。Flipboard のようなマガジンアプリを利用すれば、Web サイトに訪れることなく、様々なコンテンツを見たり読んだりすることが出来ます。Webブラウザを立ち上げる手間が省けるどころか、Web ページによくあるナビゲーションや広告といったコンテンツの消費の際に無駄な要素が非表示になることから、このテのアプリは読みやすいと好評です。

Instagram も Flipboard も独自仕様のフロントエンド技術を使って、Apple という閉じたエコシステム内でアプリを公開していますが、中身は Web そのものです。

例に挙がっている アプリは iOS (Apple) 向けですが、閉じたエコシステムで構築されたアプリから Web のデータにアクセスするアプリは Apple 製だけではありません。Google は Android、 Amazon は独自のマーケットプレイスを作り、似たような試みをしています。 Facebook も独自の App 経済を作りだしており、利用者から収集しているデータは他のライバルを脅かすほど巨大になっています。

Amazon, Apple, Facebook, Google という4つの大企業がそれぞれのネットワークを作り出している現在。バックエンドは従来のように Web にありますが、利用者の届けるには開かれた Web 上ではなく、閉じたエコシステムに入ることが余儀なくされました。Flipboard のようなアプリはそれを体現しているといえます。

Web というオープンな技術がバックエンドで使われているものの、アクセスの仕方が断片化していきます。Web ブラウザから誰でも自由にアクセス出来たのが、それぞれのネットワークに属さなければならないことから、今後の Web は閉ざされた世界になると Tim Berners-Lee は危惧しています。

今後数年は開かれた Web と、閉じた Web は双方に影響しながら進化し続けるのではないかと考えています。CSS, HTML, JavaScript はここ数年で劇的に進化していますし、ハードウェアの機能にアクセスする方法も増えてきました。Google が Webアプリ内での課金を実装するための API を公開しているので、アプリにしなければ収益を得ることが出来ない・・・というわけではない時代がくるかもしれません。

Adobeに買収されたことで、今後 Dreamweaver との連携が気になる PhoneGap。Webサイト構築からWebアプリ構築するためのソフトウェアへ進化するかも。

開かれた Web と、閉じた Web の中間に当たるような展開も見逃せません。PhoneGap を使えば、CSS, HTML, JavaScript をつかってマルチプラットフォームのアプリを提供することが可能になりますし、Windows 8 のアプリ開発では CSS, HTML, JavaScript が活用できます。開発したアプリの行き先は、閉じたエコシステムへの配信ではありますが、Web開発を続けてきた人たちがアプリでの表現を模索するのには良いスタート地点です。ネイティブアプリと Web アプリは、まだ表現上の違いが多くありますが、利用者から見れば今後どちらを使っているのか分からなくなるのかもしれません。

企業によってコントールされた閉じたエコシステムがこのまま我々の生活を浸食するかもしれないという不安は多少なりともあります。しかし、Web 技術とネイティブアプリの技術が組み合わさっていく未来はおもしろいと思います。Webのスキルを Web ブラウザ上に留めなくて済むと考えると想像も広がりますね。

【関連記事】Operaのセミナーで感じた今のWebにみる危険性

Webサイトを作ることが目的になっていないか

いつの間にか、公式サイトを作って公開することが当たり前になっている今日。CMS が広く導入されるようになってきた頃から、「とりあえず作る」という傾向が強くなった印象があります。システムを上手く活用すれば、コンテンツはあとで後で流し込めるので、コンテンツが揃う前に作れる（装飾をする）という考えが定着したのかもしれません。作ることが目的になっているからこそ、Web サイト制作における価値も作るためのスキルと、早く作るための効率化が中心になりがちです。

いつの時代になってもスキルや効率化は重要です。しかし Web サイトを作ることが目的になっていることが前提として成り立っている部分が多少あります。利用者が求めているものは、Webサイトではなくコンテンツ。つまり、「とりあえず」出す必要があるのは、Web サイトではなくコンテンツです。従来はコンテンツを出す手段が、制作者達によって作られた Web サイトである必要があったかもしれませんが、今はそうではありません。無料で使えるテンプレートで公式サイトを運営しても良いわけですし、実際そうしているところも出てきました。

厳密なプロセスが必要とされる設計を 1 ヶ月続けるより、明日からコンテンツを配信することが出来たほうが、誰にとってもメリットです。そのときに、どのツールやサービスを使って、どれくらいの頻度で、どのようにコンテンツを配信すれば良いのかを知っている必要があります。ここが Web に慣れ親しんでいる私たちの腕の見せ所になります。

Webに関わる仕事の道は広がる

「Webサイトは作らなければならない」という前提が今変わり初めています。

だからといって、Webサイトが全く必要なくなるわけでもないですし、培ったスキルが使いものにならなくなるわけではありません。今まで Web の世界が流動的に進化を続けてきたように、これから訪れる時代も今までのノウハウは活かされていきます。装飾やマークアップといったフロントエンドを作る能力も、よりコンテンツに寄り添う形になることで、今まで以上に役割を果たすことになる可能性もあります。数ある優秀なツールやサービスではなく、人の力を使って Web サイトを作る意味も深まるのではないでしょうか。

• どこを経由して配信すれば人に届くのか
• どの技術を使うことで広がりをみせるのか
• どのような見せ方にすれば次へ繋がるのか

今でも上記のことが十分考えられているサイトはたくさんあります。配信手段が公式 Web サイトという場だけではなくなることで、クリエイティブの幅はさらに広がると思いますし、まずはコンテンツをどうしようかという議論をより早くされる可能性がでてくると思います。コンテンツを考えることをプロジェクトの起点にすることで、遅れがちの制作プロセスがスムーズになることもありえます。

2012年は、Webサイト制作者を助けてくれる便利なツールがさらに増えることでしょう。それは同時に、コンテンツ配信が手軽に出来るツールやサービスも増えるということも意味しています。技術の発展により、コンテンツ配信の敷居がますます下がるからこそ、コンテンツに対してもっと考えなければ、埋もれて見えなくなって終了になってしまいます。人に届けれるコンテンツをどのように設計するかを考えるのが、Webプロフェッショナルの揺るぎない価値になるはずです。

今回のプレゼンは 7月のセミナーのように、手描きでスライドをつくりました。前回の記事で、手描きが話題になって内容が残らなくなる危険性があると書いたので手描きにするのは少し迷いがありました。しかし、今回の話題が少し暗い部分もあったので、雰囲気を和らげるため手描きにすることに決めました。アンケートの結果を読むかぎり、今回はうまくコミュニケーションがとれたようですが、スライドの表現方法はより気を使いたいと思います。

John Bohannon & Black Label MovementDance Your PhD

Use dancers instead of PowerPoint. That’s science writer John Bohannon’s “modest proposal.” In this spellbinding choreographed talk from TEDxBrussels he makes his case by example, aided by dancers from Black Label Movement.

先日のWordCampで紹介した NPRの映画レビューのページが好例です。PC版では大きなスクリーンサイズと高速回線を活用して、大きな写真や動画だけでなく本文に付随する様々な情報が用意されています。しかし、モバイル版では小さな画像と本文のみが提供されています。小さなスクリーンで移動中かもしれない利用者に対して「目的の記事を読む」というニーズに素直に応えた形になっています。さらにiPadアプリだと、また見せ方が少し違います。タブレットはリビングルームのような気軽な生活の場で利用されるデバイス。ゆったり座りながら記事が読めるようなレイアウトと情報構成になっています。

コンテンツを細分化することで、様々な状態に合わせて最適な形でコンテンツが配信出来ます。では『最適な形』をどのように見つけ出すのでしょうか？その理解の第一歩として文脈があります。

モバイル機器やPCに問わず、技術的に取得できる文脈は幾つかあります。

• 時間
• 場所
• ブラウザ
• サービス / アプリ
• ソーシャルネットワーク
• デバイス
• 回線速度
• 天気
• 言語設定

これらの情報を基にコンテンツを配信するという手法は、モバイルプロモーションで幾つか例をみることが出来ます。ある特定の場所へ行けば広告を受信することが出来る Placecast は数年前からありますし、最近では foursquare のようなロケーションサービスと企業がタイアップしてプロモーションをするところが増えてきました。1日に1つだけ特売製品を販売する woot! は時間を活用したプロモーションです。

こうしたプロモーションは突発的で面白みがありますが、今後こうしたプロモーションだけでなく、様々な場で文脈を活用するシーンが出てくるはずです。

例えば 品川区のような公共Webサイトを見てみましょう。様々な情報が平等に配置されている、このタイプでは一般的な形式です。誰でもどの情報にアクセス出来るようにする必要はありますが、誰もが同じ入り口である必要はありません。区内に住んでいる人と、遠く離れた人が同じ目的でアクセスしているとは限りません。様々な文脈が、今までとは少し違う情報の見せ方があることを教えてくれます。

• モバイルで区内からアクセスした場合は、場所と窓口の情報を優先的にみせる
• 都外からのアクセスであれば、プロモーション色を強める
• 選挙が近いなら投票のための申請や場所を告知する
• 洪水・地震などの災害が発生したときには現状だけでなく対処方法の情報を掲載する
• 夜中に健康・福祉ページにアクセスしていれば、今開いている病院を探している
• 春先に学校ページにアクセスしていれば、入学・転入に関する情報を探している
• SNSのステータスによって異なるライフステージの情報を提供する
• 英語に設定してあるデバイスであれば英語を先に見せる

上記の中には既にされていることもありますし、Webサイト管理者の手によって出来ていることも少なくありません。ただ、このように文脈に注目することで、コンテンツ配信の可能性が広がるのが分かると思います。従来では実装が非常に難しかったことも、レスポンシブ・Webデザイン、HTML5、Social Graph などを活用することで、開発のための敷居はいくらか下がったと思います。

もちろん、文脈はコンテンツ配信を考える上での考慮対象のひとつであり、答えではありません。そして、上記に挙げた技術的に取得できる文脈もすべて使えば効果があるわけでもありません。プロジェクトによって最適な文脈はひとつだけで良いかもしれませんし、組み合わせになるのかもしれません。まずは、小さなチームで実装出来るようなことから初めて、文脈によってコンテンツ配信の仕方を変えるということに気付いてもらうことがスタートです。それが、Webサイトは静的なコンテンツを流すだけではないと知ってもらう一歩になります。

機能至上主義からの離脱

CMSの話になると、どうしても機能の話になるのは以前から疑問を感じていました。日本だと Movable Type の支持は高いですが、MT と WordPress を機能比較でしか議論できないのはどうも寂しい気がします。機能は重要ですが、機能を前提にしてサイト構築すると、結局クライアントやサイト観覧者のメリットにならない場合があります。ニーズを機能に当て込んで考えることで、ニーズに応えた設計が出来なくなる可能性すらありますし、すべてを機能に頼り過ぎることで、人の力が必要になる重要な事柄を自動化しようという方向に進んでしまうこともあります。

これと似たようなジレンマが Web デザインにもあります。「デザイン、コード、マルチスキルの世界と私たち」という記事で、テクノロジーを無視して Web サイトを作ることは出来ないと解説しました。同様に CMS を使うということは、機能を無視するわけにはいきません。しかし、テクノロジーや機能を重要視するが故に、デザインやゴールがブレてしまうことがあります。ツールは、フォーカスを失うほど大きな影響力をもっていると思います。

CMSで出来る／出来ないを語る前に、配信しなければならないコンテンツを Web で使えるデータとして最適化しなければいけませんし、他にある膨大な情報に埋もれないようなプランを立てる必要があります。そもそも Web へアクセスする利用者が必要としているコンテンツとは何かという根本的なところを議論していないこともあります。いきなりサイトマップを作って、空の箱だらけのワイヤーフレームに色付けするだけなら、数千数万ある無料のテンプレートを少し改良して公開したほうが安上がりで効果的です。CMSという高機能なシステムを使って、プロを使ってしっかり Web サイトを構築するのであれば、技術や見た目に飛びつく前にコンテンツへ大きな時間を割く必要があるでしょう。

CMSによって癖が違いますが、今はどの CMS も高機能です。どれを選んでも水準の高いサイトの運営が出来るわけですから、機能に注目するのではなく、コンテンツをどう設計するかを議論するべきです。それから CMS を選んでも遅くないですし、より一層ニーズにマッチした CMS を選んだりカスタマイズが出来るようになるでしょう。

もっとコンテンツは最適化できる

我々のように Web に携わっている人たちですら『ページ』という概念に囚われていることがあります。

企業概要という企業サイトによくある項目も、まず最初にページを思い浮かべていると思います。そこには企業のプロフィールとなるひとつのコンテンツがあるように見えますが、その中には、住所、電話番号、決算、事業内容など、様々なデータ（コンテンツ）によって構成されています。１つのコンテンツとして捉えていたものも、実は様々なデータがあり、個々のデータは他の場所で流用できるものがたくさんあるわけです。

NPRのCMSの一部。表示項目が非常に多く、制作に時間がかかりますが、そのおかげで様々なサービスやデバイスに最適した形でコンテンツ配信を可能にしています。

住所を Web サイト上にある数多くのページにコピー＆ペーストして管理するのではなく、住所というデータを Web サイト内外で同期することが出来たほうが効率的です。CMS も現状ページを管理するという概念が強いわけですが、今よりもっと細分化されたデータを管理するシステムになることで、今まで以上に様々な状況に対応できるようになるはずです。

Webサイトはアクセスしてもらう場所ではなくなりつつあります。
人はそれぞれ気に入っている場所に居座るようになった今だからこそ、Webサイトのコンテンツを彼等がいる様々な場所へ届ける仕組みを設計しなければいけません。CMS はそれを技術的に応えてくれる便利なツールですが、どのようにコンテンツを配信するのか、どう見せたら良いのか、どのようなタイミングが最適なのかといった部分は Web を熟知しているエキスパートの知識と経験が必要になります。Webデザイナーが Web を使い倒さなければならないのもこれが理由です。

コンテンツの流れをデザインする

私は Web サイト制作者にコピーライティングのスキルを養えと言っているわけではありません。文章はある程度書けた方が良いですが、クライアントと一緒になってコンテンツをゼロから作れなくても良いと思っています。

しかし、Web を活用して最適な形に作り直すことは Web サイト制作者としてなくてはならないスキルですし、今後ますます重要視されるはずです。

複雑に入り組んだ Web の世界。そして、今まで以上に多様化する Web の利用方法。こうした中、ページという概念を引きずり続けている Web サイトをデザインしているだけでは、誰にも見られなくなる可能性すらあります。

• 今の Web 利用者に入り込むためのコンテンツの形は？
• キッカケを作って、次の関係を築く方法は？
• 利用者が求めているコンテンツは？
• それは文脈によって変わるものなのか？

こうした疑問に応えるコンテンツの設計が必要になりますし、それを補助するツールとして CMS は大事なポジションに立つでしょう。ビジュアルデザインも箱の装飾から、コンテンツを引き立てる役目に変わります。そこに Web サイト制作者としての価値が見出せるかもしれませんし、CMS の可能性をより引き出すことになるはずです。

いつものように SlideShare にてスライドが公開されているので、参考にしてください。あと、今回はスライドの評判よかったので、YouTube で全編を動画で書き出してみました。動きも一緒に見たいという方はそちらが良いと思います。

以前から記事やセミナーを通して Web ならではのコンテンツのあり方について解説してきましたが、今回が一番手応えを感じるセミナーになりました。もっとコンテンツについて勉強したい！という方は以下の記事が参考になると思います。

• 青森で今必要とされるコンテンツとWebサイトのあり方について講演しました
• コンテンツを繋ぎ合わせる理由とメリット
• 情報の流れの変化を意識したウェブ戦略

WordPress は世界で最も使われているオープンソース CMS に成長しました。日本でも全国各地に散らばるモチベーションの高いサポーターの努力とエネルギーにより、ブログだけではなくサイト構築にも役立つシステムとして有力な選択肢にまでなりました。WordCamp Kobe に続き、今回の Tokyo イベントでもたくさんの方が訪れるのもそれを裏付けています。Webサイトを構築することを仕事にしている方から情報発信のツールとして利用しているブロガーまで様々な背景をもった人たちが東京に集まります。

たくさんの方に支持されている WordPress。皆、WordPress が好きで集まっていると思いますが、好だからこそハマってしまう落とし穴もあります。

それは、WordPress というツールを使って何かを作るということが前提になってしまうということです。

今の WordPress は出来ないことを見つけるのが難しいほどいろいろなことが出来ます。プラグインを組み合わせることで、様々な種類の Web サイトを作ることが可能になりました。WordPress は便利ですが、その便利さが故に考え方も「WordPress 縛り」になることもあります。Webサイトのアイデアを考えるときも「WordPressだとこう作れるな」「この機能を使って何ができるかな」といったふうに、アイデアを機能に当てはめて考えてしまいがちです。

こうした WordPress で作るという行為を前提にしていまうと、最も重要なコンテンツを活かしたサイトが作れない場合がでてきます。コンテンツを活かすための WordPress になるべきなのですが、WordPress に入れるためのコンテンツという考え方になっていないでしょうか？

WordPress だけに言えることではないですが、CMS は結局のところコンテンツを保管するための道具に過ぎません。いろいろな機能はありますが、それらを使ったところで、計画性をもってコンテンツを制作・配信・管理は出来ません。そこには必ずといっていいほど、人によるケアが必要になるからです。コンテンツのことを考え始めると以下のような疑問がでてきます。

• 綺麗なテンプレート作ったけど、これからどうしよう？
• 自分が出したいと思っているコンテンツに合ったシステムを作ることってできるの？
• どのようなコンテンツがあるといいのだろう？
• 今の Web ユーザーにコンテンツを届けるための必要なことってなに？

WordCamp Tokyo 2011 では「コンテンツ戦略を意識した今後の CMS の姿」と題して今後の CMS との付き合い方を解説。上記の疑問に応えつつ、個人でもスタート出できるコンテンツ運営のヒントを紹介します。興味がある方は 2:30pm ユーザー/ブロガートラックへぜひ遊びにきてください。

英語ですが、詳しい解説が書かれた 書籍を購入することが出来ます。Amazon.comからだと、Kindle 版を入手することができます。

その論題とは1999年に発表された Cluetrain Manifesto（クルートレイン マニフェスト）。Rick Levine, Christopher Locke, Doc Searls, David Weinberger の3人によって書かれた文書です。この論題は様々な言語に訳されており、日本語で読むこともできます。

クルートレイン マニフェストをすべて読まなくても、最初の 10 ほど読んだだけで、この論題がどれだけ正しいのか分かると思います。様々なサイトや書籍で「ソーシャルメディアがするべき○○なこと」みないなトピックを扱っていますが、この論題が元ネタではないかと錯覚してしまうような内容です。まだブログが姿を表したばかりの 1999年の時点で、こうした形で残していたことは素晴らしいことですし、これに共鳴した方が多数いたのも頷けます。

市場は対話である

クルートレイン マニフェストの最初に書かれているこの言葉が、マニフェスト全体を物語っていると同時に、今私たちの社会を象徴した言葉ではないでしょうか。消費者は Twitter や Facebook をはじめとしたソーシャルネットワークを通じて常に情報交換をしています。消費者が扱っている情報量とスピードは Web を使う前とは格段に異なります。消費者はものすごい勢いで賢くなっているわけですが、企業はそんな彼等と対話できているのでしょうか。

対話ということは対等であることを意味しています。つまり、従来は企業の特権ともいえた情報発信という力を、消費者も同じように手にしているということです。ネットワークで繋がった社会では、消費者と消費者との関係も強いわけですから、誰かが立ち上がって群衆をまとめてしまえば、企業の声が聞こえなくなるほど大きな力をもつ可能性を秘めています。市場は対話であるということは、企業が市場を動かすのではなく、市場（消費者）が企業を動かしているといっても過言ではありません。

ルターの 95ヶ条の論題によってカトリック教会が滅びることはありませんでしたが、社会は大きく変化しました。クルートレイン マニフェストにも同様のことがいえるでしょう。従来のようなマスを使ったコミュニケーションの仕方や、企業の影響力がゼロになることはありません。しかし、Web を活用する消費者はクルートレイン マニフェストが描いた姿になっていますし、その数は今後ますます増えていきます。結果的に企業の組織の仕方も変わるかもしれませんし、ビジネスの仕方も今後さらに変わるのかもしれません。

対話をデザインする

イメージ先行の嘘は見抜いてしまう。情報を出し惜しみしているだけでは、うんざりして去ってしまう。企業が出す情報より知人・友人の言葉を信じる。マスとしてではなく自分をひとりの顧客としてみてほしい・・・そんな消費者に対してデザインをする人たちは何を提供することが出来るのでしょうか。クルートレイン マニフェストに書かれている消費者像をみると、従来のメディアから続いているコミュニケーション手法ではリーチが難しいことは明白です。

まず第一点目として消費者の邪魔にならないようなデザインをすること。クルートレイン マニフェストの58番に、以下のような言葉があります。

If willingness to get out of the way is taken as a measure of IQ, then very few companies have yet wised up.
もし邪魔にならないようにする意識があることを IQ として捉えるのであれば、高い IQ をもった企業はごくわずかだ

企業の透明化がブランドを高める理由でも解説しましたが、オンラインでは企業が透明になることがブランド向上につながることがあります。企業が伝えたいイメージやメッセージを顧客に浴びせるのではなく、体験を通してメッセージを連想してもらうという設計が必要になるでしょう。

64番目もヒントになります。

We want access to your corporate information, to your plans and strategies, your best thinking, your genuine knowledge. We will not settle for the 4-color brochure, for web sites chock-a-block with eye candy but lacking any substance.　
わたしたちは、企業のあなたの情報、あなたの計画と戦略、あなたの最高の意見、あなたの本物の知識にアクセスしたい。4色刷りのパンフレットや、人目を惹くカラフルな、けれど実態は何もないWEBサイトに甘んじたりはしない

今、人が求めているのは対話をするための情報です。それは役に立つ情報だけでなく、自分たちが発した声が対話として返ってくるのか、どのようなことを考えて製品・サービスを提供しているのかといった人工的ではない人間味のあるコンテンツです。美しい画像や映像は見ていて気持ちいいわけですが、それだけで企業と関係を築こうと思わないですし、製品を買おうと思うキッカケにもならなくなりました（Web におけるコミュニケーションにおいてですが）。動きが早く、どんどん賢くなる顧客に対して、迅速な対話ができるようなプラットフォームを活用したり、様々なメッセージを Web サイトに反映できるような柔軟性が必要とされるでしょう。

ネットワークに繋がった顧客にコンテンツを見てもらうには、今までのように Web サイトへ訪れるのを待つという形では成立しなくなりました。そしてコンテンツを見てもらうキッカケがなければ対話も始めれないほど人々のネットワークは閉ざされています。彼等のスピードについていくためにも、企業はまずは Web という大きなネットワークと親和性を高めなければいけないですし、デザイナーもネットワークの社会がどのように動いているのか理解を深めることで、今の人々との親和性の高いデザイン提案ができるようになるでしょう。

誰でも価値観をもっていると思います。
デザイナーも何か自分なりの価値をもちながら仕事をしています。ここでいう『価値観』とはデザイナーがもつ独自の美的センスや技能力を示しているのではなく、彼（彼女）がどのような姿勢で仕事をしているかという意味を指しています。

しかし、自分の価値を仕事に反映させることは、簡単そうでとても難ことがあります。
お金のこと、同僚のこと、上司のこと、クライアントとのやりとりの結果、自分の価値とは合わない出来事があるかもしれません。自分の価値を曲げて仕事をしなければならないと感じることもあるでしょう。また、そこまですることが『仕事』と感じる方もいるかもしれません。

実のところ、自分の価値観をもちつづけることは、何よりも大事なことです。価値を失うということは、仕事においてあなたしか提供できない価値をつくりあげる能力を失うことに等しいことです。給料や報酬は、あなたが作ったモノという結果だけではなく、あなたの価値に対して支払われています。つまり、あなたが価値観を失うということは、モノを作る機械と競争しているのと変わらなくなるわけです。いずれあなたへわざわざ依頼する必要もなくなっていきます。

価値観に対して誠実であるべきです。
「いつもこうだけど、今回は特別だから変えても良い」といって、自分の価値を都合の良いように変えるわけにはいきません。もちろん、価値観というのは時代によって少しずつ変化／進化するものなので普遍的な法律のように見立てる必要はありません。時代と共に変化しようとも、変わらない芯のようなものが地続きとして連なっている場合が多いです。突き通っている芯に対して誠実であるかどうかが重要になってきます。自己矛盾は避けよう・・・ということですね。