機能や料金がすぐ分かる HTML ベースのページ。表示速度もはやく、ページ遷移も機敏。

雰囲気を重要視した Flash サイト。読ませるというより、眺めることを目的としている。

このように製品ページに HTML版と Flash版と 2つ用意されていることがあります。

同じ AQUOS PHONE の紹介ページですが、ソーシャルメディアで共有されている数から予測すると、アクセス数は HTML ページのほうがはるかに高いと思います。また、購入・お問い合わせまでの導線も明確なので、コンバージョンにも違いがあると予測されます。製品についてもっと知りたいというニーズに応えるのであれば、自己アピールの要素が強いプロモーションサイトより、仕様や価格が明確に表記された製品ページのほうが適しています。

楽しむも有益

それでは派手な動きやインパクトのあるビジュアルをつかったプロモーションサイトが必要ないのかといえば、そうとは言い切れません。

多くの場合、製品ページはパソコンやスマートフォンから観覧されています。仕事中なのかもしれませんし、昼休みカフェでじっくり見ているのかもしれません。いずれにしても、ひとりで見ていると考えられます。こうした場合、いち早く情報を集めて検討したいでしょうし、別の製品と比較もしやすい HTML ベースのほうが便利です（テキストをコピーしてメモることも出来るのも利点のひとつ）。

しかし、Webサイトというのはひとりで見るものとは限りません。例えば、AQUOS PHONE について知りたいと友人に尋ねられたときに、2人で一緒に Webサイトを観覧することになるでしょう。そのときに、静的で文字情報が多い製品ページより、絵や動きがあるプロモーションサイトのほうが楽しみながら製品を知ることができるはずですし、会話も弾むかもしれません。

2人以上で一緒に見ている際も、プロモーションサイトが不適切な場合だってもちろんありますし、1人だから必要ないとも言い切れません。ここで重要なのは、利用者が必要としているコンテンツはアクセスしているときのコンテキストによって大きく変わるということです。コンテンツは利用者にとって有益であることが大前提ではあるものの、利用者にとっての有益は時にはタスクを達成させることになったり、ただ楽しむだけという場合もあります。

もちろん、様々なコンテキストを考慮して Webサイトをデザインすることは可能です。オールインワンのほうが管理も楽ですし、多彩な表現が可能になったので、フル Flash にしなければプロモーションサイトとして成り立たないわけでもありません。しかし、ターゲットにしているコンテキストに対して最大限の価値を提供する手段が別途プロモーションサイトを構築することであれば、分けて作るべきでしょう。

サイトへアクセスする意図とは

しかし、現状プロモーションサイトのあり方がコンテキストを考慮したものになっているのかというと、そうとは言切れない場合があります。利用者のことより、配信側（企業やクリエーターなど）の意向に傾いている部分が大きいと思います。それでは、コンテキストを重視してプロモーションサイトを再考するとどうなるでしょうか。

パソコンへの対応は後回し

眺める状態になる場合が多いのであれば、眺める姿勢に適したデバイスを最優先してプロモーションサイトを構築しても良いと思います。タブレット、TV、電子書籍デバイスなど、パソコンよりプロモーションとして成り立つデバイスはたくさん出てきています

高度な操作を省く

タップ（クリック）だけで操作ができる環境作り。どのデバイスでプロモーションサイトが見られるかどうか分からない今、ドラッグやマウスホイールなどをつかった独創性の高い操作は避けるべき。インタラクティブな要素を加える場合も、サイトの操作のためではなく、コンテンツに触れるための要素として使う

他プロモーションサイトとの連帯

簡易なリンク集だけでも良いので、他プロモーションサイトへすぐにアクセスできる導線が必要。現状、別ページに移動すると別ウィンドウ（タブ）で表示されるが、この仕様を排除するべき。別ウィンドウにすることで、モバイルデバイスや TV での操作が複雑になってしまうので、前後操作だけで様々なプロモーションが見れる仕組みのほうが適しています

利用者がどのような意図でコンテンツをどのように消費しているのかを理解することが、適したサイトを構築するための第一歩です。動きが派手でおもしろいけど、アクセス数が少ないプロモーションサイトでも、利用者がプロモーションサイトを訪れる文脈を探ることで、数は少なくても適確に響くサイトになると思います。

もちろん、こうした考え方はプロモーションサイトだけでなく、一般的な企業サイトにもいえること。自社サイトのコンテンツがどのように消費されているのかを探ることで、改善点が見えてくるでしょう。

いきなり「グラフィックデザイナーはそれほど重要な存在ではない」という言葉からインタビューがスタート。しかし、それは見た目を良くするためだけのグラフィックデザインを指しており、デザインには存在意義があるとしています。例えば、ビジネスを理解している良いデザイナーであれば、見た目を良くするだけでなく、記憶に残りやすいデザインがつくれる。人々の生活を良くするためにデザイナーは存在していると語っています。

デザインをする喜びは「問題を解決する」こと。美しくても問題を解決しなかったり、機能しないのであれば意味がない。トレンディであったり、ファッショナブルなものが溢れている今日ですが、そういったデザインに疑問を投げかけています。

デザインは１つしか出さないようにしているランド氏。医者も複数の治療方法を患者に伝えることはないわけだから、デザイナーだって同じであると主張しています。もちろん、ランド氏自身は様々な模索を行うわけですが、ほとんどの場合、デザインはひとつしか出さないそうです。

可能だったら UPS のロゴを直したいと、昔作った自分のロゴの直したいところに指を差している姿は印象的。彼は 2003年に変更された今のロゴをどう思うでしょうか。

抽象的なアイデアを形にしなければならないデザイナー。人の認知が現実世界だけであり、誰もが同じ世界を見ているわけではないので、認知のギャップにどう取り組むのかがデザイナーに立ちはだかる難題だとランド氏は語ります。１つのロゴを提出するだけというケースもあるそうですが、多くの場合パンフレットを作るそうです（例：NEXTロゴ）。文章も彼が手がけているそうですが、デザイナーは抽象的なアイデアを文章によって具現化し、相手に伝えなければならないと主張しています。

彼が生きた時代は Web 以前だったとはいえ、今 Web のデザインで抱えている課題であったり、やるべきことを彼のメッセージから汲み取ることができます。デザインとひとことで言っても定義は違いますし、可能なアウトプットは異なりますが、根底にある「問題を解決する」というのは、どのデザインでも変わらないということだと思います。

2012年5月26日（土）あおもりＩＴ活用サポートセンター主催のセミナーで登壇します。青森では毎年講演をしており、昨年はコンテンツ戦略について話しました。今年は「これから求められるWebコミュニケーションスキル 〜 今日から始めるプロトタイプデザイン」という題名で、プロトタイプの基礎について講演します。最近の講演は未来像を描く内容が多かったわけですが、青森の公演では久しぶりに実践寄りの話をしようと思っています。題名どおり今日から使える内容です。

2月に開催された CSS Nite in TAKAMATSUで、静的なカンプは通用しなくなるという話をしました。では、どうしたら良いのかという回答がプロトタイプになります。この講演を通じて、プロトタイプはコスト高で面倒な作業になるわけではなく、今まであったミスコミュニケーションを解決するためのツールになると気付いていただければ幸いです。

なお、このイベントでは高松以来2度目の共演となる高畑哲平さんが、講演とワークショップを行います。

2012年6月9日（土）は、SwapSkills 主催のイベント One Web 2012 で基調講演を行います。昨年から初めている有料拡大イベント Doubbble シリーズは、毎回おもしろいトピックを扱っており、他のセミナーにはない先進的な内容なときもあります。昨年は モバイルファースト を軸に One Web（ひとつの Web）を話しましたが、今年はもう少しコンテンツへシフトして話をすることになります。昨年から今年にかけて感じたコンテンツの価値観や未来について語り尽くす予定です。

今回も魅力的なスピーカー陣が揃っていますね。私も参加者としてただただ聞いてみたい人ばかりです。2012年の折り返し地点として、今後の Web を皆で考えるイベントに出来たら良いなと思っていますし、私も何か参加者に問いかけが出来る内容になるようイメージを膨らましています。

他にも某社のアニバーサリーパーティで「学習とゲーム」に関するミニ講演を行うなど、Web に関わる様々な話題を皆さんに伝えていく予定です。また、次の講演あたりで、何かちょっとした発表をすることになると思います。

会場でお会いできるのを楽しみにしています。

先日 New York Times で「Are Travel Agents Back?」という記事が公開されました。旅行業界のマーケティング会社 PhoCusWright によると、2010年、2011年と 2年連続で旅行代理店/代理人が成長したそうです。欧米では Expedia や、Travelocity のような総合旅行サイトが 2000年前後から利用者の指示を得ていて、旅行をするなら代理店ではなく、サイトを訪れるのが一般的でした。しかし、PhoCusWright の調査や旅行代理人のインタビューから、最近はそうではないと New York Times の記事は指摘しています。

旅行サイトが抱える以下の課題が、代理人のニーズを高めたのではないかと考えられます。

選択肢が多過ぎる

幾つかのオプションを比較しながらチケットや宿泊の予約ができるものの、選択肢が多過ぎることから決めるのが困難

融通がきかない

細かい絞り込みで自分のニーズに合ったプランを見つける機能はあるが、人がもつニュアンスを聞き分けて最適なプランを見つけれるわけではない

レビューもあてにならない

どれが正しい情報なのかを見極めるひとつの方法としてレビューがあるものの、現状レビューの仕組みは壊れているので最適な手段とはいえない

検索力に委ねられる

欲しい情報は Web にあるかもしれないが、正しいキーワードを正しく入力しなければ辿り着かない。利用者の情報リテラシーによって結果が大きく異なる場合がある

New York Times の記事は旅行業界にフォーカスを当てているものの、抱えている課題は Web 全般にもいえます。ソーシャルメディアの普及により、情報量が膨大になっただけでなく、スピードもますます加速しています。キュレーションはひとつの応えではあるものの、課題の解決になりそうな最適なサービスは見当たりません。

人の要素がサービスに繋がる

膨大な情報が激流する Web で人に頼るサービスはいくつか出てきています。ひとつは Quora のような実名で登場する業界のプロフェッショナルが質問に応える Q&A サイト。もうひとつは Get Satisfaction のように、企業が利用者の質問や要望に応えるカスタマーサービスプラットフォーム。これらの 2つの要素を組み合わせることで、旅行代理人が Web にいるようなエージェンシーサービスが作れるのではないかと考えています。

顧客の質問に対して、誰でも応えれるのではなく、企業と契約を結んでいたり、お薦めしているエージェンシーしか応えることが出来ない仕組み。検索キーワードでは伝えにくい、顧客のニュアンスに対して、エージェンシーが自分なりの表現で情報を提供するためのサービスです。他の顧客のニーズをみることで、顧客とエージェンシー共に新たな発見を得ることができるのではないでしょうか。エージェンシーに直接応えてもらう「プライベートメッセージ」を加えることで、顧客とエージェンシーとの間の関係性を築くこともできます。

質問した方は、エージェンシーとのやりとりを重ねることで、自分が欲しかった情報にたどり着きやすくなります。すぐに思いつかなくても、会話と通して見つかるコトもありますし、それがエージェンシーの魅力です。誰でも回答に参加できるほうが Web らしいやり方ではありますが、限定したプロフェッショナル（ここで言うエージェンシー）との対話ができることで得ることができる価値もあります。

このように、質問者の何気ない問いかけから徐々に答えを探し出すプロセスを楽しめるサービスは現状あまり見られません。誰もが安心できる答えを手軽に手に入れたいと思っているかもしれませんが、プロセスを通してでないと納得いく応えを見つけられない場合があります。そして、そのプロセスが重要であるからこそ、旅行業界ではエージェンシーのニーズが高まっているのかもしれません。

埋もれてしまいやすい Web に対して、私たちがどのように応えるのか、解決していくのか、今後のサービスに期待です。

追記

今回のポイントは、答えを探すプロセスだけでなく、クロージングまで誘導できる点にあります。

例えば上図のように、購入・予約といったアクションに誘導するためのコンテンツを追加できるようにするとどうでしょう。Q&A では、答えを得ることが出来ても結局また自分で検索しなければならない場合がありますが、こうした形であれば、すぐに欲しいモノを手に入れることができます。

もちろん、こうしたコンテンツをパッケージングして追加出来るようにするには、データの構造化やマークアップを Microformat / Schema 化する必要がでてくるかもしれません。技術的なハードルも幾つか考えられますが、従来の Q&A にはないようなコミュニケーションのやりとりからクロージングまでの流れを築くことが出来れば良いなと思っています。

少しでも早くアウトプットが出来るように iPad にプロトタイプやワイヤーフレムを描くためのアプリを幾つか入れているのですが、それらをより活かすためにスタイラスは欠かせません。そこで、今回紹介するのは、私が iPad でドローイングするときに使っている Cosmonaut というスタイラスです。

ホワイトボードに書くときに使うマジックペンをイメージしたスタイラス。元々 Kickstarter がキッカケで、私も幾らか出資をしたプロジェクトのひとつです。最適な素材集めからスタートしたこともあり、プロジェクトが決行してから完成までかなりの時間がかかりましたが、完成品が手元に届いたときは、時間がかかった理由も納得の仕上がりでした。

大きさだけでなく重さもマジックペンと同じくらいなので、どの部分を握っても手に馴染むバランス感覚が良いペンです。ゴムでコーティングされているのも握った感じを心地よくしている要因かもしれません。太いので細かい作業に向いていないように見えますが、指に比べれば精密に動かせますし、圧力に反応するドローイングアプリであればペンの押し具合で線の太さを変えることもできます。シンプルなフォルムですが、作り込まれているのは、使ってみると分かるはずです。

少し値段は高いですが、ひとつ持っておいても良いスタイラスです。

他にも Glifというシンプルな iPhone スタンドも販売しているので興味がある方はこちらも購入してみてはいかがでしょうか。

考えるきっかけを与えてくれたのが、Wells Riley 氏が公開した「Startups, This is How Design Works」というページ。デザインの全体像が分かる素晴らしいまとめではありますが、デザイナーへの期待値を不意に高めている部分があります。

アプリデザインに絞って考えたとしても、そこで必要とされるデザインは、インタラクション、グラフィック、アーキテクチャ、タイポグラフィ、コーディング、ユーザースタディなど多岐にわたります。これらを総括して「デザイン」と呼ぶわけですが、デザイナーも総括した存在ではありません。インタラクションデザイナーはグラフィックデザイナーと呼びませんから。

特にスタートアップ周辺でデザイン重要と言われてはいるものの、彼らのデザイナーに対する要望が高過ぎて見つからない場合があるのでは。

— Yasuhisa Hasegawa (@yhassy) April 20, 2012

「Startups, This is How Design Works」以前からデザインが重要であるということは、スタートアップは熟知しています。しかし、彼等が求めているデザイナーの姿は、コーディングが出来る Web デザイナー以上に高いものになっていることもあります。

UI出来て、UXへの理解も深く、その上 Web サイト構築もコーディングも含めて出来てしまう。もちろんそういう人いるけど、そんなスーパーマンはごくわずか。

— Yasuhisa Hasegawa (@yhassy) April 20, 2012

そういうスーパーマンは既に忙しくしているので、探そうとしても見つからないのは当然。デザインが重要とは分かっていても、デザイナーは万能薬をもった便利屋さんのように見られていることも。

— Yasuhisa Hasegawa (@yhassy) April 20, 2012

素晴らしいと言われているスタートアップは、有名・優秀なデザイナー（スーパーマン）を抱えていることがあります。こうした事例をみると、自分たちもすべてのデザインが出来るデザイナーを見つけることが出来るのではないかと錯覚してしまうわけですが、実際見つけるのは非常に難しいです。

すべてのデザインが出来るデザイナーを見つけようとするが故に、半年以上かかってしまったケースも聞いたことがあります。

小さく始めたい気持ちは分かるけど、デザインといってもいろいろだから、分野を絞ってデザイナーを見つけるべき。

— Yasuhisa Hasegawa (@yhassy) April 20, 2012

スタートアップだからこそ、小さな精鋭部隊を作りたいという気持ちがあるでしょう。しかし、「デザインができる人」ではあまりにも範囲が広過ぎます。言い方を替えれば「ビジネスができる人」を探しているのに等しいです。

デザインは問題を解決することはある。しかしその前に問題はそもそも何かを探る必要がある。そうすれば、何のデザイナーを雇えばいいのか見えてくるはず。

— Yasuhisa Hasegawa (@yhassy) April 20, 2012

デザインの課題といっても幾つか考えられます。

• アプリのユーザビリティを向上させたい
• ブランディングを見直したい
• ルック＆フィールを変えたい
• ターゲティングを変更したい
• Web上でのコミュニケーションを円滑にしたい

それぞれが特化した分野で、求められるデザイナーも異なります。フリーランスを雇うという形でも良いので、まずは自分たちが解決したいデザインとは何かを探し出すのが先決かもしれません。

時々、UX みたいな表現が微妙だなと思うのが、体験という抽象的な表現によって問題提示のフォーカスが緩んでしまい、その上じゃー良くしようという、一種の丸投げお任せ感がでるところ。

— Yasuhisa Hasegawa (@yhassy) April 20, 2012

そうならないようにファシリテートしてくださいってことだけど、それが出来るデザイナーは少ないよ。

— Yasuhisa Hasegawa (@yhassy) April 20, 2012

コミュニケーション能力はデザイナーとして最低限もっているべきスキルのひとつではあるものの、雇われた立場だとデザイナーが主導でファシリテートするのは困難な場合があります。リーダーがデザイン／デザイナーに対してすべてを解決する特効薬のような解釈しかないとすれば、対話はより難しいものになります。

スタートアップの中でもデザイナーが創始者／共同創始者になっているケースを見かけるようになりましたが、これはデザイン主体でプロジェクトを進めることが出来るというメリットがあります。

あとデザインで見落とされがちなのは、生産・制作可能かどうか、エラーからの復帰、安定性やサービス性。見た目どうこう以前に、こうした部分のデザインが重要だったりすると思う。

— Yasuhisa Hasegawa (@yhassy) April 20, 2012

「Startups, This is How Design Works」のコンテンツにも言えることですが、デザインは制作工程や完成したときのルック＆フィールを指す場合が多いです。作る部分以外でデザインが必要とされる場合があります。

生産・制作可能かどうか

限られた予算とリソースで作れるかどうか

エラーからの復帰

アプリケーションのエラーだけでなく、方向転換が必要なときに、どう対応するか

安定性・サービス性

バックエンドとコンテンツ運営との連携

上記のような課題に取り組むには、デザインに理解がある人間が早期に参加しているべきですが、デザイナーは作るフェイズまで参加できていない場合があります。

リーダーになる人は作れなくてもデザインへの理解を深めなければいけません。デザインを理解することで、デザイナーという一人の人間がすべてを解決するわけではないということも分かってくるでしょうし、問題解決へのデザインプロセスを自分の組織の文化に合わせて取り入れることができるでしょう。

今月の始めに発表された、魔法の AR メガネ Project Glass。未来を感じさせてくれると同時に 広告だらけになるのでは？と考えている方もいると思います。我々ユーザーからのフィードバックを募集しているわけですから、今後どう成長して製品化されるのか楽しみです。

このプロジェクトに関わる Google X のエンジニアが残した以下のメッセージが少し気になりました。

テクノロジーはもっと便利になるべきだと考えている。必要なときにはそこにあり、必要がなければ自ら姿を消す。そんなあり方が理想的だ。

素晴らしい視点ではありますが、今のようにメガネという形が必要でないときに見えない存在になり、人と人とのインタラクション（対話）を助長させるもなのか疑問です。

グラスを付けている人に会ったときに、あなたはどう思うでしょうか。
自分の話に耳を傾けているのか？それとも、グラスに映し出されている情報に意識が向かっているのかもしれないですし、こっそり私の情報を眺めているのかもしれません。

笑顔でこちらを向いている青年は、Twitterでの失言ツイートを読んで笑っているだけなのかもしれません。

グラスを付けている人にとっては、必要なときに必要なテクノロジーや情報を扱うことができる便利な道具かもしれませんが、向き合っている人にとっては、人間関係の間に立ちはだかるテクノロジーになってしまうと思います。その人が何をしているのか、何を見ているのかさえ分からないわけです。

こうしたテクノロジーに寄り添うことによる人間関係の薄まりは、今のスマートフォン社会にもいえます。食事をしていても、常にそこにはスマートフォンがあり、10分ごとにスクリーンをチェックしないと気になってしまう・・・そんな状況は今や珍しくありません。

現状、Project Glass からの提案はテクノロジーを軸にしたアプローチであり、人と人との関係を補助しているものとは言い難いと思います。より人にフォーカスした形で Project Glass を考えるとしたら次のような視点が欠かせません。

効率化ではなく感情に響かせる

フリーハンドで様々な情報を自由に操れる Project Glass は非常に便利ですが、人とのコミュニケーションにおいては支障になる可能性があります。情報は必要に応じてグラスから消せますが、物理的にグラスが残る以上、対面している相手を不安がらせる可能性があります。便利を追求し過ぎるとテクノロジーに寄ってしまい、実世界での人との関係への考慮が薄まることがあります。

私たちの身の回りにある数々のスクリーンが刺激を受け続けている現在。こうした今だからこそ、人へポジティブな価値を提供する何かが必要です。それは利便性ではなく、感情に訴えかける体験なのかもしれません。

モバイルとは自然体であること

モバイルというフレーズは、良くも悪くもデバイスを連想させます。しかし、私たち自身も「モバイル（常に動き続ける）」存在であることを忘れてはいけません。私たちは常に身体や感覚を動かし続けていますし、意識は様々なモノ・コト・ヒトへと向かっています。言い換えれば、人はダイナミックで柔軟的、そして自由な存在といえるのではないでしょうか。

モバイルをデバイスやテクノロジーを超えて、人のライフスタイルや人間としての本質により注目することで、自然体の中にある Glass Project の立ち位置が見つかるかもしれません。技術的な「Wow」から、気付けばそこにいたという存在が今後求められてると思います。

パーソナルであることによる繋がり

人は、オブジェクトを人のように扱うことがあります。名前を付けたり、着飾ったりするなど、自分とオブジェクに特別な関係を築く場合があります。モバイルで常に人と寄り添うからこそ、見えない存在になるというのも手段ですが、人がオブジェクトに対して特別な感情を抱けるようにデザインすることでモバイルの関係が助長されることがあります。

スマートフォンやケータイが使われている理由のひとつに、手で触れることが出来るところが大きく働いていると思います。人と人との関係が握手や抱き締めることで始まるように、手からの刺激はオブジェクトとの関係を築くのに重要な要素のひとつです。Glass Project で現在提案されているメガネは、今後のスクリーンの姿のひとつでしかないはず。フリーハンドをひとつの売りにしていますが、あえて持って触ることを前提にしたオブジェクトを作るのもおもしろそうです。

今回は Project Glass から改善できる３つの視点を提案しましたが、モバイル開発全般にもいえることだと思います。一見、人のニーズに応えたデザインのように見えるものでも、人と人、人とオブジェクトとの関係に注目すると改善できるところが幾つか見つかることがあります。モバイルは、テクノロジーやデバイスではなく文脈であるのはこのためです。モバイルが本当の意味で人のライフスタイルにとけ込むのはこれからなんでしょう。

時々「cloud （雲）」と間違われていることもありますが、なぜこんな奇妙な名前を使い続けているのか。書いている内容は変わり続けているのにも関わらず、この名前を使い続けているには理由があります。

「could」という言葉は can の過去形として扱う直接法だけではなく、「…できる(なら)」「…できるだろう」といった仮説法も含まれていて、このサイトはそんな可能になるかもしれない未来への想いを題名に込めています。私たちは常に何か違った可能性を秘めながら生活や仕事をしています。無数の可能性や過去にしてきた決断について考えたい・・・それが私にとっての could だったりします。

なぜ今更自分のサイトの由来について書いているのかというと、仮説としての「could」は今後の Web デザインを考えていく上で重要なフレーズではないかと再認識したためです。なんとなく続けていたこの名前が今更カッチリ繋がってきたような気がしています。

今の Web デザインを見渡すと「方法」に溢れています。UX という思想寄りの分野でさえ、方法論として話し合われることがあります。

「どのデザイン技法が適しているのか」
「今、この方法が注目を浴びている」
「このやり方が効果的である」

プロセスではなく、完成された何かへのステップの踏み方が注目されますし、流れている情報もこうしたニーズを刺激するようなものが多いと思います。

方法が重要ではないといっているわけではありません。私だって方法には注目していますし、勉強もしています。ただ、方法に固辞するあまり、最も基本的な「想いを語り合う」という部分が抜けてしまっているのではと思うことがあります。その上、マーケティングデータや調査結果という一見論理的に見えるようなものを組み合わせることで、クリエイティブを地中深くに押し込めてしまうこともあります。それに対抗するための方法論というのもありますが、目的がズレて来てしまいますし、人と向き合わなければいけない私たちの視点はより遠いところを向いてしまうことになります。

デザインについて考えたり、「良い」という価値観について共有する・・・まずはツイートみたいな短い一言から始めるのでも良いと思います。好き！嫌い！ではなく、「こうだったらいいのに」「もしこうだったらどうなるだろう」という想いを自分なりに考えて外に出してみると周りが少し変わることがあります。いろいろなデザイン思考な方法論より、まずは「could」を出し合う／語り合うということがデザインにおいて最もシンプルかつ有効なことではないでしょうか。

同じ仕事をしている人たち、同じ社会にいる人たち、同じような未来を見ている人たちが、自分たちの「could」を共有する。ちょっとしたことですが、その小さなことがグループで共有することで、大きな動きに繋がるのではないかと思います。社内で出来ないなら、Web 上の仲間に目を向けるのも良いかもしれません。

あなたが考える良い Web デザインとは何ですか？なにをもって UX と語っているのでしょうか？クライアントへ提供できる価値は売上向上だけなのでしょうか？ソーシャルメディアは本当に社会関係を意識したデザインになるでしょうか？

こうした問いかけに対しての「could」が、問題定義にも繋がったり、目的に向かって何をしたらいいのかが見えてくることがあります。もしかすると、何が理解できていないのか、ミスコミュニケーションが起こっているのかを見つける機会にもなるかもしれません。IE6のとき、ネガティブな感情だけでは先に進めないということを学びました。「ではどうするか」のスタートとして「could」のようなフレーズが前へ進むための後押しになってほしいですし、このサイトもそういった立ち位置で情報発信できるように今後も努力していきたいと思います。

代表的なのが Flipboard や Pulse のようなニュースリーダーアプリ。Textdeux や Sparrow といった仕事に使えるアプリでもミニマムなアプローチをよく見かけます。Instapaper や Read it Later は、すべての Web サイトをミニマリズムに再現できるアプリで、これらも高い支持を得ています。

もちろん、アプリデザインだけではありません。Windows Phone 7、Windows 8 で採用されている Metro UI はモダニズムなアプローチを OS のレベルで採用した例です。 iOS や Android とはまったく異なる見せ方に挑戦していると同時に、地下鉄という実世界にある社会システムを UI に組み込んだとことで、高く評価している方も少なくありません。

こうしたアプローチを採用するメリットは幾つかあります。

• コンテンツがより引き立つ
• タイポグラフィによるデザイン
• 柔軟性・拡張性が高い
• 軽快かつ洗練された印象を与えることができる
• アニメーションや色彩の変化などインタラクションが明解になる

タイポグラフィの強さも弱さも際立つメトロUI

これらはミニマムなデザインの長所といえると同時に短所にもなります。良質なコンテンツであれば、引き立つことで美しさが増しますが、コンテンツの中には剥き出しになることで貧弱さが際立つ場合もあります。また、装飾に頼らずタイポグラフィに頼り過ぎるデザインは、書体の選択肢が乏しい日本語では意図どおりの印象を与えることが難しくなるでしょう。

デザイナーに好まれるミニマムなデザインですが、他にも幾つか課題が考えられます。

• 装飾がほとんどないことから、見た目だけで強いブランドプレゼンスをつくりにくい
• 機械的な印象を与えることからビジネス向けのように見える（親しみさが足りない）
• インターフェイスが平面的なので、どこが操作できるのか分かり難い
• コンテンツそのものが操作UIになっていることもあり、別の操作や閲覧の邪魔になる

幾何学的かつ無機質なオフィスに対して、どこか落ち着いた雰囲気がする住まい。

ミニマムなデザインをどのように使うかのポイントは、人の住まいが良いヒントになります。
オフィスも住まいも、人が時間を過ごすのに最適化された設計になっています。いずれもミニマリズムのデザインのように見えますが、よく見ると所々まったく逆のアプローチをとっているのが分かります。オフィス（写真左）は建築の構造そのものが剥き出しになっているかのような機械的な装いに対し、住まい（写真右）は家を支える金属部分を手触り感がある壁紙によって覆い包まれています。機能的な照明だけに留めているオフィスと、暖かさを演出するために照明が置かれている住まいとでは光の印象が違います。働く場所と家族と時間を過ごす場所が、デザインによって明確に分かれている一例といえます。

装飾によってコンテンツの邪魔をさせないというデザインアプローチは、スクリーンが小さいデバイスには有効な手段です。しかし、それによってアプリケーション／サービスそのものの性格を失い、利用者との関係を築くのが難しくなる可能性もあります。

ディーター・ラムスの良いデザインの原則がひとつの答えだと思います。彼のデザインは素材を活かしたミニマムなプロダクトをデザインし続けてはいたものの、彼の信念には「正直」であることが根底にあります。これは使う素材に正直であれという意味だけでなく、使う人たちへ正直であれと伝えたいのではないでしょうか。人に正直であること、それは変に装ったり、格好つけたものではなく、製品と人が素直に付き合える状態なのだと思います。

人を正直に繋がるために必要となる感情は何なのでしょうか。
それは携わっているプロジェクトによって異なると思いますが、デザインについて話し合う起点になりそうです。何もかも Less（削ぎ落とす）ではなく、人との繋がりをどのように残していくのかが課題になるでしょう。

2010年に Daniel Fallman と Erik Stolterman が発表した「Establishing Criteria of Rigor and Relevance in Interaction Design Research（厳格で適切なインタラクションデザイン調査ための基準つくり）」という論文があります。サイトから論文の全文（PDF）を読むことができます。

この論文によると、デザイン調査は3つの異なる形式による三角構造になっているそうです。三角構造に含まれる 3つとは以下のとおり：

Design Practice (実践としてのデザイン)

実世界で何かを生み出すための判断力やスキル

Design Studies (研究としてのデザイン)

論理的にデザインを理解・分析するための知識

Design Exploration (探求としてのデザイン)

異なる視点から新たな理想を見つけだす

デザイン調査とひとことで言っても、それぞれ独自の結果、手法、論理があります。現状からもっと良いものに変えたいという目的であれば Design Practice を基にした調査が適していますし、課題を解決するのではなく課題を見つけるところから始める場合であれば Design Exploration を基にした調査になるでしょう。論文では、デザイン調査は数多くなされているものの、三角構造の何処に該当するかを明確にしていないことから、誤解や混乱を生み出しているのではないかと指摘しています。

論文はデザイン調査について書かれているものの、デザイン全般にも共通した課題が残されていると思います。

デザインも実践優先で考えなければならないこともあれば、デザインを論理的に説明しなければならない場合もあります。また、現在のことばかりに囚われていないで未来を見据えた視点も養わなければいけません。それぞれが自己のデザインスキルを磨く上では重要なわけで、いずれも欠けてはいけないと思います。

デザイン話のなかにも「具体的ではない」「漠然としている」「今使えない」内容があります。デザイン調査の三角構造の目的がそれぞれ異なるのと同じように、デザイン話の目的が異なるだけだと思います。何もかもが Design Practice である必要はないですし、それだけと装飾製造業ということになりかねません。逆もしかりで、Design Practice を省いたままだと、理想論ばかり言っているかのようにみえます。それぞれが密接に繋がっているからこそ、いずれも無視することが出来ないのだと思います。

デザインは大変意味が広い言葉であるからこそ、前提を合わせて議論することが困難な場合があります。「この見た目良いよねぇ」「アニメーション気持ちいいねぇ」もデザインについて語っています。こうした表層的なところからスタートしても良いので、デザインについてもう少し突っ込んで考えてみることで理解が深まることがあります。今回紹介した三角構造は、目的に合わせて議論する上でひとつの良いガイドになるのではないでしょうか。

今のところ電子書籍で Amazon Kindle がリードしていると感じる要因は、細かいことを考えなくて良い流動性にあると考えられます。独自形式ですし、DRM だってもちろんあります。しかし、Kindle (ハードウェア) 以外でも読むことが出来ますし、スマホで読んだ続きを、すぐにタブレットで読むことも出来ます。ページ数を覚えたり栞をする必要もありません。細かい設定は不要ですし、「このデバイスでは読めないかも」と心配することもありません。

昨年から日本でもサービスがスタートした Hulu にも同様のことがいえます。数多くのデバイスをサポートしているだけでなく、自分の視聴履歴が使っているデバイスすべてに同期されます。タブレットで途中まで見ていた番組を、見終えた部分からすぐにテレビで再開できる利便性に驚いた方もいるはず。時間を決めて番組を自分で録画して整理しておく必要がなくなり、思い立ったらすぐに番組を見るという視聴スタイルに変化します。

流動的な世界観を作り出しているデザインには以下の共通点があります。

• どのデバイスから見ても得れるコンテンツは同じ
• 利用者の文脈によって自動的に最適化される
• 利用者と利用者が求める価値が一本線で繋がっており、邪魔がない
• 仕組みを知らなくてもテクノロジーがすべて補ってくれる

図に表すと上のようなものになります。
人が求めている情報・サービス・体験を提供する方法として多デバイス化というアプローチがありますが、私たちデザイナーが意識しなければならないことは、人と彼等のニーズの関係性を壊さないことだと思います。利用者のライフスタイルに合わせるかのように流動的に姿形を変えつつ、コンテンツを提供することが課題になります。

今年の始めに Everyscreenというキーワードを提唱し、増え続けるスクリーンへのデザインが必要になることを記事にしました。これは、身の周りに様々なスクリーンが現れるという意味だけでなく、ひとりの人間がライフスタイルに応じて複数のスクリーンを利用することも意味しています。Kidle や Hulu の例を見ても分かるように、人がそのとき持っていたデバイスに必要なコンテンツが表示されています。デバイスはたまたまそこにあるモノであって、限りなく透明な存在になっています。

作り手視点で見れば「結局マルチデバイス対応のことじゃないか」と思うかもしれません。作る上ではそうと言えますが、利用者に価値を提供するという意味では少し違います。様々なアプリやデバイスが出てきて非常に複雑になった現在。そんな今だからこそ、自分のライフスタイルに合わせて、あたかも流動的に変化しているかのようなシンプルさが必要ではないかと考えています。デバイスの対応はあくまで結果であって、人のニーズに応えることができるようにするための世界観の構築には、アプリやデバイスのような作る部分にだけ注目しているだけでは難しいでしょう。

最近、UX の世界ではストーリーを作るといった手法が取り入れられる例を見かけるようになりました。これは、アプリやデバイスといった自分たちが作る部分だけを見ているだけではスコープが小さ過ぎるという危惧から生まれた考え方なのかもしれません。Kindle や Hulu のような巨大なサービスを作らないにしても、人のライフスタイルとニーズをどのようにすれば透明に繋げることが出来るのかを考えることが出来るはずです。スケールの大きな話ではありますが、今後のデザインが取り組まなければならない課題だと思います。

タッチデバイスへの違和感や不安をもっている方はまだ少なくないと思います。 毎日の生活に登場するタッチデバイスの代表といえば、ATMや電車の切符販売機がありますが、処理速度が遅くスクリーンのオブジェクトを触れている感覚はあまりありません。そのせいか、スクリーンを強く押している方をたまに見かけます。また、タッチインターフェイスだけでなく、触れて押すことができる物理的なボタンが用意されている場合もあります。タッチへの不安を解消するための配慮なのかもしれません。

毎日の生活から比較すると、タッチデバイスでスイスイいろいろな操作が出来るというのは、未知の世界に見えてもおかしくありません。操作の仕方が分かる iPad や Galaxy の CM が TV で流れているとはいえ、「本当にタッチでこんなに動くのか」という不安をもっている方もいるはずです。

UI デザインのひとつのアプローチとして、親しみやすさをつくるという方法があります。特に新しいアイデアや価値を提供しなければならないときに有効で、広く知られているもの、ターゲットにしている人にとって既に知っていることをヒントにデザインする方法です。

例えば、iPad 版のカレンダー（iCal）を見てみましょう。実世界のステーショナリーに似せた UI で、ステーショナリーを使ったことがある方なら、すぐに予測がつく見た目になっています。つまり、ステーショナリーの見た目で親しみやすさを作った上で、どの部分をタッチしたら良いのか理解してもらいやすくなります。メタファーの使い方には注意が必要ですが、分かり難いものを分かりやすく説明する際に、人が既にもっている知識を有効活用するとうまくいく場合があります。

機能面を全面に押し出した iPhone 版に比べて、iPadの iCal は実世界のステーショナリを強く意識した UI になっている

iPad のリアリズム UI に対し、iPhone は Mac OSX と同様、いかにもソフトウェアのような見た目に仕上がっています。Mac OSX や iPhone（スマートフォン）は、今までパソコンに慣れ親しんでいた人をメインターゲットにしていたのに対し、iPad はパソコンをもっていなかった人をターゲットにしています。あえてリアリズムを追求した UI を採用しているのも、新しいユーザー層に親しみをもって欲しいという配慮からなのかもしれません。

直感的なのは習慣化されているから

今はまだまだ目新しいタッチデバイスだからこそ、親しみやすさを設計することは有効なアプローチではあるものの、今後ずっとそうとは言い切れません。目新しいものも、習慣化してしまえば「簡単・直感的」になることがあります。それに合わせるかのようにアプリケーションの UI が次第に変化しているケースもあります。

Mac OSX 10.2 と 10.7 の比較。
立体的に見せたカラフルな UI だったのが、次第に平面化され全体的なバランスが重要視されている。

Mac OSX は 1年〜1年半のあいだにアップデートを繰り返していますが、その間に UI は次第に変化しています。立体的なボタン群、リアリズムを追求したアイコンも、次第にピクトグラムのような平面的な見た目に変わり始めています。人が Mac OSX の使い勝手が習慣化されてきたことで、大袈裟な見た目で主張する必要がなくなってきたからなのかもしれません。頻繁にあるアップデートが『Mac 的なお作法』を学ぶサイクルをつくり、一度に学ぶ学習コストを低くしたといえるでしょう。

使い方を発見する楽しみがある Clear ですが、ジェスチャー操作が習慣化されていないと何をしたら良いのか分からない不可解なアプリになります。

人は必ずといって良いほど変化に対して拒絶反応を示すにも関わらず、適応能力が非常に高い生き物です。

今はタッチデバイスの操作が難しくても、いつの間にか使いこなすようになるでしょうし、タッチデバイスに対する期待値も次第に高まります。タッチ操作を習慣化した人は増え続けていますし、彼等の中には iPad カレンダーのようなリアリズムを追求した UI は「ギミック」と表現する方もいるでしょう。 Clear のようなジェスチャーで動かすアプリを絶賛している方は、タッチ/ジェスチャー操作を習慣化している方が多い傾向にあります。

以上のことをまとめると、UI デザインには以下のような思考プロセスがあると考えられます。

• 人が習慣としている行動や操作を見つけだす
• 何を習慣化したいのかを定義する
• ターゲットにしている人が理解できるメタファーとは何か
• 対象にしているデバイスの中にある習慣とは何か
• 他のソフトウェアがどのような UI 提案がなされているのか

デバイスが普及し、ソフトウェアの操作が習慣化するためのデザインを提供することで、タッチデバイスへの学習コストも下がるでしょう。タッチデバイスが習慣化されてくると、今よりボタンの数が減る可能性もでてきますし、フラグメンテーション化するジェスチャー操作も一貫性をもつようになるかもしれません。新しい価値や操作感を提供するアプリになればなるほど、先進的ではない親しみやすさを作りだすことが、使いやすさに繋がるでしょう。

先週いよいよ Internet Explorer (IE) の自動アップグレードが開始されました。これにより、多くの Web 開発者の頭を悩ましていたバージョン 6 (IE6) がなくなるのではないかと期待している方もいると思います。制作者の都合だけでなくても、より早く安全な Web 体験が出来ることを考えると、利用者にもメリットはいくつかあります。

自動アップグレードによって、IE6のシェアは今後さらに下がることでしょう。しかし、真の課題は IE6 がなくなっても残り続けると思います。見た目を同じにするという古い考え方を持ち続けている間は、IE6 がなくなろうとも現状は変わらないはず。「IE7がなければ・・・」「IE8もいらない・・・」と同じようなことを数年後繰り返すことになるでしょう。長く IE6 の対処をしていたことが、頭の中まで IE6 になっている方もいるかもしれません。IE6 のシェアより、作り方のメンタリティが変わらないから深刻な状態になったのかもしれません。

スマートフォンを対象にしてサイト制作している方はご存知だと思いますが、同じ見た目にするという古い考え方を持ち続けると、制作の大きな足かせになります。それはスマートフォンだけの問題ではないはずです。

IE6の周辺の話になるとネガティブな感情ばかりが目立ちますが、少しでも建設的な視点で IE6のサポートを見つめ直す必要があると考えています。何ができるのか、何をするべきなのか、何を理解しなければならないのか・・・マイクロソフト社の活動だけでなく、我々がやるべきことが幾つか残されていると思います。

Beyond IE Six は、ひとつの提案として作りました。IE6 から、そして IE6 的なメンタリティから抜け出すために何が必要なのか。情報と使える技術をひとつにまとめたページです。詳しい情報は書かれていませんが、スタートするには十分な情報量があるはずです。私のサイトでは海外の情報が多くなりがちですが、こちらのページではほとんどが日本語のリソースばかりで揃えてあります。

完璧なページを目指しているわけではありませんが、「こういう情報があると良いかもしれない」という意見や感想がある方は、ぜひ Twitter で教えてください。皆さんにとって、ひとつの有効な武器になれば幸いです。

PS: 境祐司さんとのポッドキャストで、今後のWebサイト制作について話ました。Beyond IE Six のページを作った意図とも繋がるところがあるので、興味がある方はぜひ聴いてみてください。

2012年3月24日に Android Bazaar Conference 2012 Spring が開催されました。今まで Android コミュニティとの接点がもてなかったので、今回のようなビックイベントで講演できるのは、またとないチャンスだと思いました。

今回は「人間中心遊戯設計」と題して人に注目したゲームデザインの取り入れ方について話をしました。ゲーム、特にオンラインゲームは私の得意分野。オンラインゲームとデザインに関する話題は 2006 年から取り上げていますし、講演でも何度か取り上げています。

2015年には28億ドルのビジネスになると言われているゲーミフィケーション

昨年から日本でも頻繁に耳にするようになったゲーミフィケーション。Oxford Dictionary にも定義が書かれてるので、造語というよりかは、ひとつ確立した言葉になってきているのではないでしょうか。昨年末 BigDoor がゲーミフィケーションはメインストリームであることを分かりやすくインフォグラフィックでまとめましたが、これを見ても分かる通りゲーミフィケーションは注目を浴びているだけでなく、ビジネスにポジティブな成果をもたらしています。

そこで、ゲーム要素と呼ばれているような、ポイントやバッジを導入するところが増えてきているわけですが、ゲーム要素はひとつの機能であって「アプリケーションやサービスを楽しんでもらう／喜んでもらえる」という根本の解決に繋がらないことがあります。

バズワードになると、必ずこうした機能や表層的な部分だけが注目されてしまうことがあります。UX が、美しい UI や気持ちのよいアニメーションといった、目に見えて分かる部分のみ取り上げられているのと重なるところがあります。ゲーミフィケーションにしろ UX にしろ、表層的な実装の前に、必ずといって良いほど「なぜ」という問いかけから始まります。完成後を見ると、ゲーム要素が目立っているものがありますが、実際のところ人々の欲求／ニーズに応えているものばかりです。

• なぜ人は長く使い続けているのか？
• 始めは盛り上がっても、使わなくなるのはなぜか？
• なぜ人は「楽しい」と感じるのか？
• なぜ人は時間を忘れるほど没頭できるのか？
• なぜ機能がたくさんあっても使えてるのか？

こうした「なぜ」を考えることで、人が楽しむ／人が喜ぶために何が必要なのかが見えてくると思います。そのときにゲーム要素を取り入れることが最適であれば、取り入れるべきでしょう。実際のところ、ゲーミフィケーションが前提として開発されて成功しているアプリやサービスはないわけですから。

開発者だからアイデアを開発してほしい

今回ゲーム要素の解説ではなく、ゲームと関わることで生まれる人の心理について話しました。突き詰めると、「楽しめる」「嬉しくなる」のは何か？ということではないでしょうか。

ゲーム要素を取り入れることで、助長されることもあるかもしれませんが、利用者にとって「楽しめる」「嬉しくなる」のはエンターテイメント性を導入するだけではないと思います。「きちんと動作する」「エラーから復帰しやすい」という当たり前を作り込むだけでも、利用者は喜んでくれるはずです。

ウィンドウを閉じても残っている未保存ポストのアラートウィンドウ

講演でも例として挙げた Tumblr もそのそのひとつです。ポストを保存しないで他のページへ行くと、「保存していないポストがある」と告知してくれるので、いつでも戻って作業を続けることができます。「X（閉じる）」ボタンを押すまで、ずっと残っている安心設計です。ブラウザがクラッシュしたり、間違って他の Web サイトへ移動してデータを失うことがなくなるので「嬉しい」と感じる方もいるでしょう。

機能だけ見れば、シンプルなのかもしれません。しかし、こうした少し気が利いた配慮は開発者からのインプットが欠かせません。デザイナーだってアイデアくらいは出せます。しかし、それをどのように導入すれば最適なのか、技術的に今だから出来ることは何か、早く作るための最良の方法は何か・・・といった部分は技術に理解がある開発者だから出せるインプットだと思います。 Tumblr と同じものが必要だとは限りません。自分たちがターゲットにしている利用者が喜ぶ仕組みを考えなければならないからこそ、様々な視点からのアイデア出しが欠かせないと思います。

Angry Birds Spaceの Web サイト。
これを見て、テクニックを真似たいと思う方もいるはずですが、導入だけでは同等の価値は提供できません。Angry Birds はゲームプレイを Web サイトの操作を通して体感してもらうという課題を解決されたデザインです。

作るのが仕事だから、作ることに徹底したいと思う方もいるかもしれません。だからこそ、ゲーム要素の導入方法、カッコイイ UI の作り方という、作る仕事に直結した情報が好まれるのも当然だと思います。作り方を学ぶことが自分の仕事の血であり肉であるものの、利用者の「なぜ」を突き詰めることで、自分のスキルを伸ばすことができるはずです。

アイデアの開発に携わって開発するのと、そうでないとではモチベーションも変わるかもしれません。

開発者だけでなく、デザイナーも同様です。
UI やレイアウトを作ることが主な仕事かもしれませんが、アイデアをデザインしていくことでより活かされる UI があるはずです。デザイナーであるからこそ技術とより親密な関係になるべきでしょう。

ゲーミフィケーションは、これからさらに注目されます。
周りは表層的なところに注目しているだけだったとしても、私はゲーミフィケーションを「ゲーム要素の集合体」と見なさず、ゲームを通して生まれる感情をどのように開発・デザインに活かせるのかという視点で見ていきたいと思います。

「過渡期」という言葉は、今の世界には合わないのではないかと思います。

新しいテクノロジーが出る度に、人は「今は過渡期だから大変」「過渡期だから様子見」と口にします。Webの世界は毎年目まぐるしいスピードで新しいテクノロジーやトレンドが登場することから、毎年こうした言葉を耳にします。私が「過渡期」という言葉が好きになれないのは、私たちは常に変化の中にいるという事実を見ていない、消極的な表現に聞こえてしまうからです。

CSS Nite in FUKUI で、予測不可能な世界でデザインをすることの意味を話しました。上の図は、そのときに紹介した技術開発の進展と製品性能の成長を表した「Sカーブ」です。ひと昔は、Sカーブはゆるやかで、サイクルも10年〜20年くらいの長いものでした。しかし、今は複数のSカーブが重なり合っているだけでなく、サイクルも1年と短い場合もあります。

常に過渡期と感じてしまうのは、S字カーブの後期にあるはずだった安定期がなくなり、常に新しい技術によるイノベーションが起こっているからかもしれません。

つまり、過渡期だから様子見していても、安定期は来ないまま新たな変化が生まれるだけですし、ひとつのテクノロジーに固辞することで、次の変化に適応するためのコストが高くなることもあります。

「これだから Web は大変」と考えるかもしれませんが、デザインは常にテクノロジーと密接に関わり続けながら変化し続けているものであって、Web 特有ではありません。

例えば、紙のデザインにしてもグーテンベルクが活版印刷を発明してから、ずっと変わっていないわけではありません。特に過去20年の DTP の歴史を振り返るだけでも目まぐるしい変化があります。ハードウェア、ソフトウェア、書体、標準規格、ワークフロー、紙、カラーマネージメントなど、すべてにおいて変化し続けています。ここ3年くらいに絞ったとしても、電子書籍や新しいサービスや流通システムの登場など、数多くの変化がみられます。

テクノロジーを扱う仕事である以上、変化に適応していくことは大前提にあります。デザインであれば、それは避けられないですし、適応することで、表現力や提案の幅が広がると思います。

テクノロジーのスピードと人のスピード

よりよいデザインをしていくためには、目まぐるしいテクノロジーの変化に適応することを要します。しかし、新しいテクノロジーをすぐに取り入れれば良いのかというと、そうとは言い切れません。テクノロジーの変化という短いサイクルを見ると同時に、社会全体がどう変化しているのかという広い視点も備えることで、適したテクノロジーの導入が可能になると思います。

常にテクノロジーと共に仕事をしているが故に、忘れてしまいがちな視点があります。

• 人はテクノロジーを気にかけながら生活していないが、様々なテクノロジーを受け入れながら生活している。なぜ特定のテクノロジーが受け入れらて、他のはそうではないのか考えてみる
• 過去を振り返ることでヒントが見つかることもある。10年前のテクノロジーは古いかもしれないが、アイデアが古いとは限らない。当時の夢構想が実現できるのが今ということもある
• テクノロジーが先立つものではなく、透明になったときに初めて人は受け入れてくれる。今の生活の延長線上にあるものは何か、それはテクノロジーによって助長できるのかを考える
• 一般の方にとってテクノロジーは未知の世界。何がどう良いのかを説明しても、響くものではない。この温度差があることを前提にした上でソリューションを提案する

テクノロジーと人との関係

プロフェッショナルの仕事をしているので、テクノロジーの仕組みや実装方法を学ばなくてはいけません。しかし、テクノロジーの本質はそこにはありません。私たちデザイナーはテクノロジーの定義を理解するのではなく、テクノロジーと人の関係にさらなる視線を注がなくてはいけません。

Facebook という『テクノロジー』を例にしてみましょう。
タイムラインの実装方法や、Like を付けてもらうためのテクニックは重要ですが、デザインされたソリューションとは言い切れません。Facebook の登場により、人はどのようなコミュニケーションをとるようになったのか、オフラインでの行動の変化はあるのか、どのようにして Facebook を使う時間を捻出しているのか・・・こうした Facebook を基軸にした行動や習慣のメカニズムに注目するとどうなるでしょうか。テクノロジーと人との関係から設計を始めることで、タイムラインや Like の実装が意味のあるプロセスに変わるはずです。

テクノロジーは、私たちの業種にとって常にエキサイティングな存在です。しかし、実はもっとエキサイティングなのが、テクノロジーそのものではなく、テクノロジーによって生まれる新しい人の関係だと思います。常に変化しつづけるテクノロジーですが、すぐに飛ぶつくことはありません。人がテクノロジーによってどう変わるのかを考え始めることで、自分が習得するべきものなのかも見えてきますし、変化の適応能力を上げることができるようになるはずです。

尊重のためのシステム

Tumblr や Twitter のように、気軽にリブログやポストがしやすいプラットフォームになると、参照元が分からないポストをよく見かけます。お気に入りの画像を Tumblr で見つけても、参照元・作った人が分からないのでクリッピングしないこともあります（又は自分で検索して探すこともあります）。誰でも簡単に情報を共有できるのが Web の魅力ではありますが、参照元が失われることでコミュニケーションの奥行きが失われることがあります。

昨年の震災で明るみになったところがありますが、多くの人は参照元を調べませんし、自分のタイムラインに現れた情報をそのまま受け入れて、再度拡散することがあります。表層的な情報だけが広まるだけで、突っ込んだ情報や議論が見え難くなる場合もあります。何を参照したのか、何を基に情報発信しているのかが分かるだけでも、情報の接し方が変わるのではないでしょうか。

こうした考えを基にして生まれたのが Curator’s Code というサイト。何を参照しているのかを明確にするための運動です。Curator’s Code には以下の 2 つのサインがあります。

• ᔥ “via”, 経由を意味するサイン。他のサイトで見つけたコンテンツを自分で投稿する際に使用
• ↬ “Hat Tip”, 相手に尊敬、感謝、承認、認識を表わすサイン。自分のコンテンツを作る際のインスピレーションがあった際に使用

Curator’s Code のサイトにも書かれていることですが、提案している 2 つのサインをルールに基づいて使おうと言っているわけでもないですし、使用しなければマナー違反であると言っているわけでもありません。今のように、参照元が分からない状態をどうしたらいいのか、コンテンツクリエーターや発見した人々に対してどのように敬意を表したら良いのかという問題に対するひとつの提案に過ぎません。

Curator’s Code の提案から、さらに良い方法が見つかるかもしれませんし、Pinterest や Tumblr ような手軽にクリッピングが出来るサイトが Curator’s Code を導入することで、情報の捉え方も変わるかもしれません。今のように Unicode を手描きするか Bookmarklet を使わずに、インターフェイスの一部になれば、参照元と自分のコンテンツを明確に切り分けることが出来るでしょうし。

共有とキュレーションの違い

基本姿勢には同意しているわけですが、Web を活用した共有という行為を「キュレーション」という言葉にまとめてしまうのは、勘違いを生みそうな気がします。

学歴や知識もあるプロフェッショナルが、テーマやメッセージを考慮して情報を整備するキュレーションと、「これ良いよね！」という感情面が強く表れる共有という行為。いずれも参照元やインスピレーションになったものがあるかもしれませんが、大きく異なります。自らをキュレーターと呼んでいるのであれば、参照元を明確にするべきではないか、というメッセージが込められているのかもしれませんが、Curator’s Code に書かれている内容は Web で情報共有をしている人全体に投げかけているようにも見えるので、少々あやふやに感じます。

Pinterest のようなクリッピングサービスを使って、自分がどれだけ良いテイストをしているかをアピールしたい人はどんどんすれば良いと思います。お互いの良さを Like し合って楽しめば良いわけですが、それはキュレーションでもなんでもなく Web 黎明期からある「共有」です。実のところ、この昔からある共有という行為に関していえば、参照元を入れるか入れないかは個人の自由だと思います。そこに参照元や敬意を表したところで、キュレーションになるのかといえば、そうではないですし。

しかしながら、今の Web は、昔からある自由な共有だけではありません。人のコンテンツをそのまま流用してマネタイズしている人もいれば、自作のように見せている人もいたります。Readability のようなソリューションが、リブログ／クリッピング系のサービスにも必要なのかもしれません。

Webサイトという枠を超えて、コンテンツが自由に行き来するようになったのは Web のあるべき姿でしょう。しかし、その Web をどう捉えるかは人それぞれです。お互いの立場を尊重しつつ、コンテンツという資産をどう共有し、どのように消費していくと良いのでしょうか。もちろんこれには答えはないでしょうし、ルールや法律にすることでもないでしょう。

まず個人がそれぞれの考えの基で、ちょっとした行動や姿勢を示すことから始めると思っています。Curator’s Code を採用するしない関係なく、ちょっと考えてから情報発信してみることで、周りが変わるかもしれません。結果的に今私たちが抱えている課題への提案が増え、情報発信と共有の選択肢がより増えると思います。

PC版の Facebook でオススメのリンクをみたら、モバイル版だった。
スマホで Twitter を見ていたら、PC版のサイトに誘導されて操作が面倒だった。

モバイルサイトのアドレスに注目すると、「m」「mobile」「i」など、のサブドメインが最初に付いている場合があります。これは、PC版の『本家』Webサイトとは別のバージョンを表示していることを意味しています。スマホやタブレットなど、デバイスに応じて最適化されたサイトを表示しています。

利用者のために最適な環境を提供するという意味では、専用サイトは適した対策です。しかし、SEOの視点で見ると専用サイトを作って、URLを細分化してしまうのは良くない傾向です。モバイルユーザーであれば、モバイルで見たサイトをそのまま共有するでしょうし、デスクトップユーザーにしても同様です。10のリンクが付いたかのように見えても URL を見ると 2 つ 3 つに分散しています。

URL をひとつにして、サーバー側で変換するという方法もありますが、サイト全体にかかる負荷を無視するいことは出来ません。デザインの決断を SEO だけで決めるわけにはいきませんが、より多くの方にシームレスな Web 体験を提供するには URL を統一したいですし、レスポンシブ Web デザインは採用に値するでしょう。

中間案として、特定なデバイスに特化しないなど、極度な最適化を行わないのも手段。

いきなり専用サイトを排除しなくても、徐々にレスポンシブな対応をするのも手段です。例えば Yahoo! Japan は、今まで Android 用と iPhone 用を別々に用意していましたが、スマートフォン向けとして統一しています。iPhone に特化していた頃は iOS アプリのような多彩な動きはしていたのに対して、現行サイトはシンプルな作りになっています。ビジュアルの物足りなさを感じる方もいるかもしれませんが、ひとつのサイトでより多くのデバイス／ユーザーに対応しているという意味では、現行サイトは大きな改善です。レスポンシブ Web デザインではないですが、より多くのデバイスに対応しているレスポンシブなアプローチです。

ひとつの URL で必要なコンテンツへアクセス出来る・・・ユニバーサルなアクセスを可能にするアプローチとしてレスポンシブ Web デザインは有効な手段です。

コンテンツの最適化

レスポンシブ Web デザインを採用するかしないかのひとつの基準として、どのようなコンテンツを提供するかで決まります。インタラクティブ性が高い製品のデモを小さなスクリーンで操作するのは難しいですし、ハードウェアに高いパフォーマンスと帯域を要求するものであれば、別々のサイトを構築したほうが良いでしょう。

ファイルサイズが大きいから別々のサイトを作るしかない・・・というわけではありません。例えば、Infinite Scrollのような UI を採用することで、一度に読み込ませるファイル容量を減らすことは可能です。最初に低画質の画像を読み込ませて、利用者が画像を拡大したときに高画質のものを読み込ませるのも手段です（大きなスクリーンサイズでは最初から高画質の画像を読ませることもできます）。

こうした技術の側面から検討した最適化だけでなく、コンテンツそのものに注目することで可能な最適化もあります。どのデバイスからでもアクセス出来なくてはならないコアコンテンツとは？コンテンツの種類は？表現の手法は？別の形式にしても目的を達成することができるのか？こうした疑問にひとつひとつ応えていくことで、その Web サイトで可能なレスポンシブデザインの領域が見えてくるでしょう。

レスポンシブ Web デザインを採用するかしないか関係なく、マルチスクリーンを意識した Web コンテンツ戦略には以下のような課題を話し合わなければ構築も難しくなるでしょう。

• ユニバーサルにアクセスできるコンテンツはなにか
• マウスやキーボード以外での操作でコンテンツにアクセスできるか
• デバイスの制約を考慮したコンテンツの最適化
• コンテンツの配信方法や表現の手法を再検討
• 重要になる体験を洗い出し、そのコンテンツの最適化に注力

「レスポンシブ Web デザインをしよう」という目的で始めると、クライアントも制作者も不幸せな結果になります。Yahoo! Japan のような中間案も含めて、自分たちがもっているコンテンツをマルチデバイスに対応するにはどうしたら良いかを議論することで、よりスムーズに対応ができるようになるでしょう。

2012年2月25日 CSS Nite in TAKAMATSU vol.6 が開催されました。CSS Nite は、ツールの使い方や制作のノウハウなど、テクニックを扱うことが多いイベントですが、今回は全編を通してコードが出ないという珍しい構成でした。いつもとは少し違う雰囲気ではありましたが、他の CSS Nite にはない満足感を得た方も多かったのではないかという印象を受けました。イベントの様子はTogetterでまとまっているので参照してください。

私のセッションは、Webデザインのウソ・ホント ～ Web らしくデザインするためのヒントと題して、未来を見据えた Web のデザインを行う上で必要な考え方や取り組み方法を紹介しました。

今月はセミナーで登壇する機会が3回もあり、過密なスケジュールでした。準備は大変でしたが、3回を通して一貫としたテーマがあったかと思います。なんとなく「未来のWebデザイン三部作」と呼べる内容だったかもしれません。まず最初の福井での講演で、予想不可能な未来だからこそ身軽で早く動く体勢が必要であると解説。東京の公演では、未来への対応のひとつとしてレスポンシブWebデザインを紹介。そして先日の高松では、過去のWebデザインのあり方をおさらいしながら、未来への進み方を紹介しました。全部聴いた方はいませんが、通して聴くと繋がるところがある内容になったと思います。

技術とどう向き合うか

Webデザインに限ったことではありませんが、技術（テクノロジー）を抜きに語ることが出来ないのが、この分野のデザインを難しくしているところだと思います。ひとつの画像を追加したいと思っても、最適化やリクエスト数を考慮しなければいけませんし、様々なシチュエーションに適応したデザインの枠組みを構築するにも技術的なノウハウを必要とします。スクリーン上でキレイに見せたらそれで良いのかといえば、そうとは言切れないわけです。

ページをレイアウトするのではなく、Web というスペース（空間）に最適化した体験を構築することは、エキサイティングな工程ではりますが、技術を知らなければ高い品質に辿り着けないという難しさもあります。jQuery のプラグインを放り込んで後は考えなくて良い・・・というほど単純ではないところが、Webデザインを探求するための阻害になっていると思います。見えるところだけ考えれば良いという風潮もアクセシビリティと似たようなところがあります。

マルチデバイス化、タッチインターフェイスがこれからますます広がることにより、2次元的な『絵』で Web デザインを評価出来なくなりつつあります。未来へ対応したデザインを実現するには、どうしても技術を知ることが余儀なくされるわけですが、技術が一歩踏み込めない要因をつくっていることがあると思います。

最近は、国内外でハッカソンが開催されており、デザイナーが主催したり参加しているイベントもあります。よって、デザイナーは技術嫌いであるとは言い切れませんが、今後さらに技術と向き合う機会は増やしていくべきでしょう。習得しなくても、エンジニア／プログラマーとより密接に仕事ができる環境があるだけでも違いがでてきます。

記事や講義では、なるべく分かりやすく解説しようと試みていますが、技術の話を盛り込むことで、入り込めていない方もいます。技術をどのようにデザインに融合させたら理解が深まるのか・・・これは、今後の課題になりそうです。

静的なカンプは過去の手法

スクリーンサイズ、解像度、ユーザー設定など、様々な変化要素がある Web デザインですが、未だに静的なカンプをグラフィックツールで作られている場合があります。グラフィックツールでのテキストレンダリングは Web ブラウザのものと異なりますし、ツール上で作られたカンプは限定された環境でみた仮説に過ぎません。しかし、そこで作られた仮説が、あるべき姿として捉えられ、構築されています。作った後に評価が変わったり、作り直しが発生するのも、あるかどうかも分からない仮説を基にしているからなのかもしれません。

こうした状況から抜けるためにも、Webデザイン（又は Web そのもの）の再評価が必要だと考えています。昨年から少しずつ書き溜めている WD101シリーズもその一環です。絵を描くように Web サイトを構築していられない今、何をしたら良いのかという道しるべが必要ではないかと考えています。

グラフィックツールではなく、いきなり Web ブラウザで構築し始めるのがベストではありますが、グラフィックツールを使うことが間違いではありません。作り方は時と場合で変えていけば良いと思います。しかし、グラフィックツールを使うとしても、今後より Web という媒体への理解や技術的な側面の理解が不可欠になるでしょう。

そろそろ未来を考えよう

今までの作り方が許されていたのも、パソコンだけを考えてればそれで良かったからかもしれません。今はスマートフォンに注目が集まっていますが、今後さらに Web へ繋がるデバイスが増えていきます。そのときに、今までどおりに幾つかの静的なカンプを作り続けながら対応するのか、それとも、Web らしくデザインするのか選択する日が近づいてきたと思います。

Web らしく・・・それは、以下のようなことを指すと思います。

• 見た目を同じにすることが目的ではない
• 文脈に応じて最適化する
• 体験は異なるが、情報にはアクセスできる
• 全体の調和とバランスを考える
• 利用者にコントールの余地を与える

当たり前のような話に見えると同時に、今までの作り方・考え方からの変化にどう対応すれば良いのか戸惑う人もいるかもしれません。制作者ではなくその周りの人たちにどう説明すれば良いのか分からない方もいるでしょう。

何事もそうですが、明日からすぐに変わることはありません。しかし、未来に備えて私たちは準備を始めるべきだと思います。仕事環境によっては「そんなことありえない」「自分には無理」と考える方もいると思います。ひとりで変えることが出来ない大きな課題があります。だからこそ、Web コミュニティを活用してほしいですし、声を出して情報発信をしてほしいと考えています。

私もこの場を通して、この記事を読んでいるすべての方の力になれば幸いです。

今回は、先月執筆したレスポンシブにデザインするために克服することをキッカケで話すことになりました。「未来へレスポンシブに対応するための設計と戦略」と題して、スマートフォンやタブレットだけでなく、もう少し視野を広げてレスポンシブの実現について話をしました。

クロスオーバーする時期が来た

制作者向けのセミナーであれば、レスポンシブ Web デザインを語るのにふさわしい人は他にいると思うのですが、今回は Web担当者Forum という制作者以外の方が多く参加されるセミナーだったので講演が楽しみでした。

実のところ、Media Queries を利用したレスポンシブ Web デザインの制作自体はそれほど難しい話ではありません。では、何が難しいのかというと、設計の部分であったり、ワークフローであったり、可変するデザインへの理解であったり、ビジネスモデルなど、作る以外のところで、つまずくところが多々あります。

Android 各機種で見た目が違うのは当然ですし、パソコン用に特化したとしても違うものです。Web は利用者のコンテキストに合わせて最適化した形を提供することができる媒体です。つまり、制作者側の都合で見た目をコントロールすることを得意としないわけです。紙媒体がアニメーションをしないのが特徴であるのと同じように、見た目のコントロールがきかないのも Web の特徴であるわけです。

しかし、この Web の特徴がうまく理解されないまま、見た目を同じにする作業が今も発生している場合があります。このままでは、レスポンシブ Web デザインの実装は不可能に近いといえるでしょう。たとえ、レスポンシブ Web デザインにしなかったとしても、この課題はいずれどこかでぶつかります。

今回の講演では、制作者以外の方が多い中、制作者の事情というのを多く語りました。これは、私の中では歩み寄りのジェスチャーと考えています。Webプロフェッショナルから見た今の Web の事情を伝えることで、現状の課題を洗い出し、今までとは違う新しいポジションを作っていこうというのが今回のメッセージです。

作り方、完成品、共有方法など、今までの固定概念を取り払って、今の環境に適応する形で私たちも変わる（レスポンシブになる）必要があることが伝えたかったところです。受注体制、打ち合わせ、役職、部署、書類などコミュニケーションの壁になるところは幾つかあります。これらの壁をなるべく取り払わなくては、レスポンシブ Web デザイン・・・だけでなく、今後の Web サイトの構築は難しくなるかもしれません。触らなければ分からない、体感して気付くことが増えていく中、膨大な書類や静的なカンプは限られた時間を圧迫する要素になるかもしれません。

今までこうやってきたから・・・と言っても、世界はもう変わっているわけです。では、適応するにはどうしたら良いのか。これは制作サイドだけでは大き過ぎる課題です。そこで、今回のセミナーのように様々なポジションの方がクロスオーバーするところでメッセージを投げかけることに意義を感じました。

削ぎ落とされて残るもの

スマートフォン対応、タブレット対応・・・と言っていられるのは、あと1, 2年ではないかと考えています。今年の最初に Everyscreen（スクリーンワールド）というキーワードを提示しましたが、今年からさらに Web の情報が見れる場が増えていきます。今年は Siri の日本語版も出ると噂されているので、昨年執筆した未来のコミュニケーションの意味を実感する機会が増えてくると思います。サイトという枠組みをもつ有形なものから、音声のような無形のものまで『Web』になります。構造がある、レイアウトがあることだけを Web デザインと呼ぶわけではないのかもしれません。

今後ますますスクリーンは増え続ける中、何をデザイン（設計）していくのか、何をブランドアイデンティティとして伝えることができるのでしょうか。それが コンテンツではないかと考えています。そして、マークアップという枠組みをもつことで、デバイス／サービス／ソフトウェアに柔軟に対応できるようになると考えています。レスポンシブ Web デザインより、少し視野を広げて考えるのであれば、コンテンツという資産をどう管理して、様々な場で配信していくのかを設計する作業を今から始めるべきだと考えています。

レスポンシブ Web デザインは、良くも悪くも Web デザイン／Webサイト制作の根底にあった課題を明るみにしたと考えています。制作者側視点だけでなく、広告やマーケティングの視点から見てもそうだと思います。レスポンシブ Web デザインをキッカケに「何を変えるべきなのか」「どうやれば変われるのか」「何から始められるか」といった部分の議論が様々な分野でなされれば良いなと思っています。

2012年2月18日、CSS Nite in FUKUIが開催されました。今回は「予測不可能な世界でWebデザインをしよう」と題して、今後のWebに必要とされる価値と制作のためのアプローチについて話をしました。2年前は聞いたことなかったようなサービスやデバイスが、あっという間に大企業に成長したり、広く普及する時代。先がどうなるか分からない中、私たちは今何ができるのでしょうか。

テクノロジーで変化する人の価値観

価値観は、どのようなテクノロジーと共に暮らしているかで決まる部分があります。「本を読む」にしても、紙媒体の書籍だけ想像する人もいれば、ケータイや電子書籍を想像する人もいます。「TVを見る」にしても、HDDレコーダーをつかって観覧している人と Apple TV を使っている人では番組を見る行為が異なります。

テクノロジーが物事の捉え方に大きな影響を与えているわけですが、近年テクノロジーの進化のスピードが急激に高まったことで、たった2年違いでも価値観がまったく違うという世の中になってきました。2年というわずかな時間でテクノロジーは大きく進化するわけですが、そこでテクノロジーの関わり方を変える人とそうでない人では明らかに違いがあります。

Webへアクセス出来るテクノロジーやサービスが増えているということは、その数だけ様々な価値観をもった人たちが存在するといっても過言ではありません。今後 Web へアクセスできる機会が増えるのは分かるものの、どのようなテクロジーが普及し、そこからどのような価値観が生まれるのかは予測不可能です。こうして考えているうちにも変化し続ける中、人に価値を提供しなければいけないわけです。

利用者が変わり続けているわけですから、作る側も、予測不可能な世界に対応できるような考え方や作り方を身につけていく必要があります。

流動する時代

柔軟性をもって変化を続けながら進む・・・そんなことは個人や小規模の会社だけの話のように聞こえますが、そんなことはありません。アメリカ、ヨーロッパに事務所を置くデジタルエージェンシー R/GAは、過去30年の間に5回ビジネスモデルと企業内の構造を変えているそうです。Fast Company に掲載された記事「This Is Generation Flux: Meet The Pioneers Of The New (And Chaotic) Frontier Of Business」には、R/GA の CEO である Bob Greenberg のメッセージが添えられています。

If we don’t change our structure, we’ll get less relevant. We won’t be able to grow.

構造を変えないのなら、自分たちは適切な存在ではいられなくなる。我々は成長できなくなる。

先が見えない上、猛スピードで変化し続ける時代。我々自身も時代に合わせるかのように、動きながら変われなければならないという Greenberg のメッセージ。「普及するまで様子見」と言っている間に、多くのチャンスを見逃してしまうことがあります。新しいことを無闇に取り入れることもありませんが、Webにとって、プロフェッショナルとして、クライアントにとってのプラスを見出すことが出来るのであれば、今すぐアクションをとらなければならない時代なのでしょう。

セミナーでは、ダーウィンの「変化に最も適応した生き物が生き残る」という言葉を残して終わりました。技術力・デザイン力・コミュニケーション力は重要ですが、予測不可能な今の時代に適応できる柔軟性のほうが重要ではないかと思っています。

偶然なのか必然なのか分かりませんが、Web は、様々な形に化けることが出来る柔軟性の高い媒体です。言い換えれば様々な形に適応出来る柔軟性を備えていると言えます。まるで今の時代のために発明されたものと言っても良いかもしれません。

いろいろなテクニックや技術が表れては消えている Web ですが、生き残っているものは、どれも柔軟性／拡張性／互換性が高いものばかり。Web を Web らしく使っている場が長く残っていますし、それは今後も変わらないと思います。Webブラウザという窓はなくなるかもしれませんし、より生活にとけ込んだ形で Web にアクセスするようになるかもしれません。しかし、そんな時代が来ても Web らしいプロダクトやサービスが人に最も近づける存在になるのではないでしょうか。

適応能力が高い Web の力を最大限に活かすためにも、今の時代、そして未来に適応できる Web デザインをさらに模索してく必要があります。こんな時代を楽しめる仲間がもっと増えたら良いですね。