タッチ UI のデザインで難しいのは、表層的な部分だけを設計すれば良いものになるわけではないという点です。技術もきちんと理解することで、Web なら Web らしい、アプリならアプリらしいデザインになります。表層的な部分から入ると、見た目は良いけど使い難くなったり、「なんとなく違う」という声に繋がることもあります。

だからといって、絵を描きながら UI を模索することを否定しているわけではありません。しかしながら絵を描く過程があったとしても、人がデバイスとどのように関わるのかを理解していることが前提になります。人はどのように UI に触れて、どのようなフィードバック（アウトプット）を期待しているのでしょうか。

タッチデバイスにある新しい挑戦

多くの方がタッチデバイスを扱うようになって数年経ちますが、今はもう画面に触れるだけが唯一の方法ではありません。人とデバイスの関係はより親密になったと同時に、関わり方は多様で複雑になりました。

おさらいという意味も含めて、最近のデバイスと人との関わり（インプット & アウトプット）をまとめてみました。

タッチインタラクション

• タッチ
• ジェスチャー
• 物理操作（ハードウェアを動かすなど）

タッチ以外のインタラクション

• 場所
• 音声
• 見た目（顔や身体の大きさなど）
• 身体の状態（心拍数、体温、仕草）
• 瞳孔や視線

フィードバック

• テキスト
• 画像
• アニメーション
• 動画
• 音声
• 効果音
• 触感（震えも含む）

関係を助長するデザイン

今のタッチデバイスは、単にハードウェアに触れるだけでなく、様々な操作方法があります。また、利用者が指を使ったインプットを行わなくても自動的に情報を取得し、フィードバックを提供することができます。これには以下の課題があることを意味しています。

• どの部分をどのように動かせば良いか
• 今見ている画面と次の画面の関係性はどのようなものか
• 何がトリガーになってフィードバックが表示されているか
• インプットされたタイミングで適したフィードバックは何か
• タッチ以外のセンサーはどのように作用しているのか

現在、各地で開催中の講座「コンテンツを活かすためのUI設計」でも、UI デザインを平面的ではなく、三次元に広げて考えなければならないと解説しています。

Android と、最近発表された iOS7 に共通しているのは、コンテンツの邪魔にならないインターフェイスをつくることを推進している点。タッチによって、タッチ以前のように様々な GUI 要素をあらかじめ表示する必要はなくなりましたし、必要に応じて操作 UI を出すという表現も見られるようになりました。つまり、どのタイミングが利用者にとっての「必要なタイミング」なのかを想像しなければいけませんし、何かをインプットすることで、操作 UI が表示されることを知らせるための「トリガー／キッカケ」のようなものも必要です。

タッチ UI によって 静止状態（スクリーンショット）だけでは UI の評価がし難くなりました。触ったときの感触はどうか、センサーによって起こることはなにか、何かが起こることを予感させ、その予感に応えるような動きや見せ方・・・こうした人とデバイスの関係までデザインされているかどうかが、UI の評価に大きく関わるはずです。むしろ、見た目（GUI）より、関わりのデザインの方が評価の重要度が高くなる可能性もあります。

まだタッチ UI のデザインは始まったばかりだと思います。アニメーションはいろいろあったものの、今までは平面的かつシンプルな関わりを基にしたデザインがほとんどでした。これから大きく変わるはずです。私たちは、本当の意味でのタッチ UI デザインという開拓地に向かうのだと思います。難しい課題が山積みですが、とてもエキサイティングなことです。

先月、岡山で開催された amplifizr, Vol. 6 を皮切りにマルチデバイス化のためのコンテンツ戦略がスタートしました。全国、合計5ヶ所で開催されたマルチデバイス化を見据えたコンテンツ設計 基礎講座の続編になります。

スマートフォンサイトを制作するためのノウハウは国内外でたくさん見つかりますし、素晴らしい見た目のサイトも増えてきました。しかし、コンテンツがパソコン中心に作られていることから、スマートフォン向けにうまくコンテンツが移行できなかったり、過剰な省略がされていることがあります。サイトの見た目のマルチデバイス化は進んでいますが、コンテンツのマルチデバイス化はまるで進んでいないというのが現状です。

ここ 2, 3 年 アダプティブデザイン に注目が集まっていますが、様々な利用者文脈に合わせてコンテンツを配信するためには、そもそもそのコンテンツがマルチデバイスを見据えた設計になっている必要があります。見た目だけ変えるだけでは意味がありません。

基礎講座ではこうした問題を感じていただくことが中心になりましたが、今回は具体的にどのように取り組めば良いのかという内容になりました。

今回のキーワードにもなっているコンテンツ戦略は 3 時間のイベントでも足りない非常に大きなフィールド。しかも、UX やユーザビリティ、システム開発にまで領域が広がるモヤっとしたところもあるので、コンテンツ戦略の仕事で発生する成果物の話をすると情報過多のわりには何が重要なのか分からないという問題が発生する恐れがあります。そこで今回は、コンテンツの棚卸しとも言われている、「コンテンツインベントリー」と「コンテンツモデル」の 2 つにフォーカスして、いかにコンテンツの設計とデザインに影響を及ぼすのかを解説しました。

始めると意外と見えてくる課題

コンテンツモデルに関しては以前、設計のヒントを生み出すコンテンツ要素の視覚化という記事で少し解説したことがあります。ページの概念を根強く残したワイヤーフレームやサイトマップを作り始める前に、まずはコンテンツのみに集中して、どのような構成が正しいのか、メリットを生み出す関係性は何か、ビジネスをサポートするグループは何処かを模索する必要があります。今回のセミナー・ワークショップでは、これを深く掘り下げた内容になりました。

コンテンツインベントリーにも言えることですが、コンテンツモデルの制作は今までしたことがない制作工程という方もいると思います。こうした見慣れない手法を加えることでコスト高になるだけのように見えますが、今までの無駄を取り払ってくれる貴重なツールになります。画面要素を取り払い、純粋にコンテンツと向き合うことで具体的な課題が見えることがあります。

福島のほうでは 郡山地域ニューメディア・コミュニティ事業推進協議会 の主催で開催されました。岡山と同様、福島でも参加者による濃いワークが発表されました。

ただ見た目を作る、リニューアルをするといった手段が目的になりがちだったことも、コンテンツインベントリーを作ることで、必要最低限で効果的なチューニングのために必要な事は何かが見えてきます。また、コンテンツモデルを作ることで、ビジネスが必要としていること、利用者が必要としていること、そして運営上の制約について模索することができますし、より現実的な画面設計を落とし込むことが可能になります。

それでも説明を聞いただけでは実感が湧かないということもあるので、コンテンツモデルをワークで実際に作ってもらったわけですが、手を動かす過程を通してコンテンツモデルが実際仕事の役に立つということを実感していただいた方がたくさん出てきました。すぐに導入は難しいかもしれませんが、まずはコンテンツの見直しから始めるだけでも大きな違いを生み出します。たかがリストを作るなんて面倒・・・と思うかもしれませんが、騙されたと思って始めて見ると得するかもしれません。

ただ制作しているどころの状態ではない

それなりの見た目で、多デバイスでもそれなりの形で見えてたら良いというのであれば、自動変換機能が付いた Web サービスや市販のテーマをカスタマイズするくらいで十分です。CSS Nite in AOMORI Vol.7 の基調講演でも話しましたが、ただ作るだけが目的のようなサイト制作案件に Web プロフェッショナルがフルコミットで関与しても、お互いにとって幸せな結果にはならないと思います。中身ではなく見た目ばかり気にしている状態であれば、今までの作り方で良いわけです。

しかし、マルチデバイスの世界は今後ますます混沌とした状態になります。日本のスマートフォン市場だけを見たとしても、画面サイズは 0.1 インチずつ違う状態ですし、今後 3 インチ前後の小さな画面で情報を見るという時代も来る可能性があります（今は過渡期と我慢していても、今後ますます混沌化していきます）。そのときに自動変換ツールを使って情報配信することができますが、タイトルも本文も中途半端なところで切れているので、何を意味しているのか分からないという状態になります。マルチデバイス化が進むことで、見た目はそれなりに良くても、コンテンツはますます壊れた状態になる可能性がでてきます。すべてが「…」と省略されていたら見る気が失せてしまうでしょう。

せっかく作っても満足しているのはクライアントだけ・・・そんな状態にならないためにも、早期からのコンテンツ投資は欠かせません。それを考えるキッカケと取り組みのためのヒントを講座を通して感じていただければ幸いです。

今後の予定

なお、マルチデバイス化のためのコンテンツ戦略は今後各地で開催予定です。6月3日現在決まっている日程と会場は以下のとおりです。

• 2013年6月7日（金）Webridge Meeting SP14
• 2013年6月15日（土） 第12回リクリセミナー
• 2013年6月26日（水）CSS Nite @Co-Edo, Vol.16
• 2013年7月10日（水）CSS Nite @Co-Edo, Vol.18

基礎講座も含めて、場所を作っていただければ何処へでも行きますので、ご検討くださいませ。なお、このシリーズの完結編になるコンテンツを活かすためのUI設計も、2013年 6月8日（土）に岡山でスタートします。

明るさ調整や、スピードダイヤルといった機能もあり。連携できるアプリも順次増えています。

マルチデバイスと同様、重要になってくるのがアプリ間のデータのやりとりや操作が可能なこと。Web サービスを基にして作られたアプリであれば大丈夫ですが、孤立した状態で存在で存在するアプリも少なくありません。Android だともう少しスマートな解決策がありそうですが、iPhone の場合だと Launch Center は便利です。TextExpander と連携をしていて、書いた文章を様々なサービスへ直接投函することができる Drafts も、制限はありますがアプリの壁を超えることができます。

こうしたニーズが生まれるのも、アプリには以下のようなデザインの課題を抱えているからだと思います。

• アプリは単独で存在しているものがほとんど（閉じられている）
• OS やハードウェアとの多少連携はあるものの、アプリ間での連携は少ない
• サービスによる囲い込みが激化している
• クラウドといっても独自のクラウドが別々に存在している
• 利用者コンテキストが重要とされているものの、それを読み取る手段が限られている

お勧めのアプリとして紹介したことがある Byword は、iCloud を利用して、マルチデバイスで即座にデータを扱えるようにしています。しかし、iCloud という独自技術を使っているので、他のアプリから Byword のデータにアクセスできませんし、共有することすらできません（メールは送れますが）。

これは Byword の弱点を示しているというよりかは、Apple の課題、今後のマルチデバイスの世界での課題を象徴しているかのようにみえます。Android でも iOS でも素晴らしいハードウェア、素晴らしいアプリケーションはでてきました。しかし、サービスという観点からみると、改善の余地があります。ハードウェアやアプリによって生み出された隙間（溝）を埋めるサービスが必要とされています。

こうした課題を Google は認識しているようで、今年の Google I/O は Web / サービスを全面に押しているように見えました。もちろん、Android のセッションはたくさんありましたし、Google Glass も話題になりました。しかし、彼等が向かっている方向は再び Web なのではないか思わせる出来事は幾つかありました。 Dart はその一貫ですし、WebKit から Fork して開発を進めている Blink には Oilpan と呼ばれるメモリマネージャが実装されるそうです。Oilpan によって高機能の Web アプリケーションのパフォーマンスをさらに上げることができます。デバイスのフラグメンテーションが激しい Android の世界を知っているからこそ、シームレスな体験構築への拘りが強いのかもしれません。

Techcrunch のこちらの記事によると、Fork した WebKit のコード880万行を Blink のために削除したとか。

ここで「これから Web だ」と結論付けるのは意味がないことです。いずれの方法も一長一短ですし、ゴールを達成するための手段に過ぎませんから、今使えるものを使えば良いと思います。

しかし、アプリのような閉じた世界を設計するにしても、アプリの中だけをデザインすれば良いというわけにはいかなくなってきています。人がどのような状況でアプリに触れるのか、アプリを通してどのようなサービスを得たいのか、その人の生活がどう変わるのかといった、少し大きな視点での開発は今後必要になると考えています。 重要だと思って開発していた機能のプラオリティも変わるかもしれません。

開発するアプリによって尋ねる質問は変わりますが、以下がマルチデバイスの体験をサービスとして提供する際に確認しておきたい項目です。

• アプリを使うことで、どのようなストーリーが生まれるのか？
• ターゲットにしている利用者は、様々なデバイスとどう関わっているのか？
• デバイス同士がどのような関係を生み出すことができるのか？
• 人はデバイスに応じて関わり方を変えているのかどうか？

アプリの設計は、インターフェイスのような目に見えるところをデザインするだけではなく、関係性という目に見えない部分をどう設計するのも重要になっていきます。単独で閉じた世界に存在するアプリから、利用者にとって都合の良いアプリになるには、こうした目に見えない部分のデザインへの注目は欠かせないでしょう。

今までこのサイトでも何度かプロトタイプとコンテンツの話をしてきました。一見、まったく違う分野の話をしているように見えますが、この 2 つは密接な関係をもつ重要なキーワードです。それがなぜ繋がっているのかを解説するにも絶好の機会でした。しかし、40 分という短い講義の中では説明しきれなかったことが多々あるので、補足情報も含めて紹介していきます。

ツールやテクニックの変化では足りない

この講演で静止画のようなデザインカンプはコミュニケーションの負荷が高過ぎるという話をした 1 週間後にFireworks の開発中止ニュースが報じられました。これは、アドビ社が Fireworks を諦めたのではなく、Fireworks のような存在を今の Web ワークフローに適応させるには、別の形がふさわしいと判断した結果だと思います。こうした変化はグラフィックソフト関連だけではありません。

特にここ 1, 2 年のフロントエンド周りの動きは活発です。Sass で記述したり、モジュール形式で管理 しようというのは、その動きのほんの一部に過ぎません。Bootstrap のような汎用性の高い高機能 HTML/CSS フレームワークを使うのも手段ですが、Bower を経由して好きな部品を落として使うといった方法でも、素早くサイトを作れるようになりました。

いきなり黒い画面での開発はできないという方は Mixture のようなツールから始めてみるのも手段です。

今まで以上に早く効率的に設計していくためのツールは出そろってきました。
見た目そのままを再現できる保証もなく、結局コードで作らなければならないことを考えると、静止画カンプは非効率ですし、クライアントに間違った印象を与えます。HTML で早く作れることを体感してしまうと、カンプへの違和感はさらに増していきます。そこで、ブラウザ上でいきなりデザインしたほうが良いという声も高まってきました。ビジュアル要素の多くは CSS3 で補えますし、必要に応じてグラフィックを作るというアプローチです。

しかし、こうしたマークアップを基軸にしたデザインプロセスには 3 つの課題があります。

• マークアップをしている方がディレクターかプロジェクト管理していれば成り立つ
• ビジュアルは後回しになり、ビジュアルによるデザインの効果を適応させにくくなる
• 今までの作業工程から大きく変わるので、変化へのコストをどう担保するか見え難い

私自身、早期から HTML を作り始める人のひとりなので、ツールやテクニック自体に異論があるわけではありません。しかし、ワークフローの変化がなければ成立しませんし、今まで仕事をしていた人たちに対して「こう変わればこのようなメリットが生じる」という部分が十分に説明されていないまま、「こんな素晴らしいツールがあるから使いましょう」「これが未来だから皆さんがんばりましょう」では変化のための決定打にならないと思います。

コンテンツがあるからデザインできる

そこで、HTML から画面設計が始められる開発プロセスを実現するにはどうするかを考える必要があります。私の中では以下の 3 点を解決することで新しい Web ワークフローが見えてくると考えています。

プロセスにおける役割を明確にする

HTMLからはじめるインブラウザ・デザインも万能ではありません。強みはどこにあるのかを明確にすると同時に、弱みを補うのは何が良いのかも検討したいところ。 インブラウザ・デザインの強みである画面遷移の設計、使い勝手、マルチデバイスでの状態の検証に特化しても良いでしょう。

技術制約なしで考えられるデザインは別途先に進める

レイアウトやインタラクションは難しいですが、それ以外のデザイン要素は、いきなり HTML で始めるより、デザイナーが完全にコントロールできる環境でつくったほうが効果的という場合があります。ビジュアルが変わるだけで使いやすくなったと感じる場合もあるわけですから、無視できません。

コンテンツがなければ成立しないことを説得・整備をはじめる

意味のあるマークアップ。装飾ではなく引き立てるビジュアルを作ることになると、コンテンツの存在が必須になります。しかし、現実はマルチデバイス対応がされていないですし、既に良いコンテンツはあると思い込んで作りはじめていることがあります。コンテンツの見直し、再設計を行うことではじめてデザインできるはずです。

誰がどのようなスキルを持っているかは組織によって異なりますが、従来のようにデザインとマークアップは別々で行う作業ではなく、より密接な関係になっていきます。

コンテンツから始めることが出来ないのであれば、従来のような静止画カンプを作ろうが、インブラウザ・デザインで作ろうが結果は同じだと思います。

例えば「使っているCMS Premium Themes」と検索してみてください。

5,000 円前後でカスタマイズ製が高く、魅力的なデザインが数百・数千すぐに出てきます。その中の多くは、この記事を読んでいる皆さんでも見たことがないものがほとんどだと思います。デザイン要素も自由に変えることができるだけでなく、パッと見の良いスマートフォンサイトにも変換してくれます。見た目を優先して、コンテンツを後回し。そして、今流行しているデバイスに対応するだけであれば、これで十分なわけです。

どんどん作ることが効率化されていく中、Web プロフェッショナルに発注するという意味を、問い直さなければいけない時期にきています。ただ早く安く作るところには答えはないですし、今流行しているツールの真意も早く安くという部分以外にあると思います。

今までの『常識』に捕われたまま、ツールやテクニックを変えても、良い結果は生まれません。根本的なワークフローの見直しは必須ですし、そこを変えるこで今流行しているツールやテクニックがさらに活かせるようになるはずです。

私はよく「コンテンツがない。壊れている。」と主張していますが、人によっては「既に自分たちには素晴らしいコンテンツがある。アピールするための素材もたくさん用意されている。」と考える方もいると思います。しかし、それは利用者からの視点からすればコンテンツでも何でもないノイズということもあります。

昨年末から全国で開催しているマルチデバイスを見据えたコンテンツ設計講座で、企業は的外れなコンテンツを出していることを事例を挙げながら紹介しています。クオリティの高い写真、映像、文章が使われているものの、中身は利用者のことを優先していない自己中心なメッセージばかりということがあります。残念ながら企業 Web サイトの大半はそんなところが多かったりします。

上記は Break Up という、広告主と消費者の関係を人間関係に見立てて表現した 2007 年のビデオです。以下、簡単にやりとりを抜粋しておきますが、動きや表情を見るだけでも参考になることが多々あるので、ぜひご覧になってください。会話がない一方的な関係にウンザリする消費者と、ナルシストで思い込みの激しい広告主の関係をコミカルに描いています。

• 消費者: 別れたい。全然話しかけてくれないじゃないの。
• 広告主: あんな大きな広告をつかって愛を宣言したじゃないか。
• 消費者: 愛していると言っているだけで、とてもそうは見えないわ。
• 広告主: そんなことはない。代理店は絶賛していたよ。
• 消費者: 私はもう変わったのに、あなたは何も変わっていない。
• 広告主: そんなに腹を立てているのは、クーポンが欲しいからだな。
• 消費者: 私のことなんて何も分かっていない。
• 広告主: もちろん知っているよ。28〜34の女性で趣味は音楽と映画で・・・
• 消費者: あきれた

美しい映像と音楽で素敵な内容にみえる Facebook Home のビデオですが、どんなときもオンラインの世界に没頭しているという奇妙な世界。自分たちの製品は素晴らしいという自己主張が見え隠れするものの、人の求めている価値なのかは疑問です。

2007年に公開された当時に比べると、ソーシャルメディアを活用したコミュニケーションが重視されている現在ですが、コミュニケーションの仕方は Break Up が公開されたときとあまり変わらないように見えます。これはオフラインの広告だけでなく、オンラインにも同様のことがいえます。今でも画面の大半が「自分たちは素晴らしい」という自画自賛のコンテンツによって占められています。利用者が求めている情報は数画面先に隠されていたり、そもそも Web サイトにないということもあります。

ビデオに登場する女性キャラクターと同様、日本の消費者もそんな自己主張が激しい割には中身のない企業のコンテンツにウンザリしています。今年のはじめに日本のビジネスは信用を失いつつあるという記事を公開しましたが、日本人は他の国に比べて疑い深く、企業からの情報を鵜呑みにしない傾向がでてきました。こうした中、今までどおりに「こんな素晴らしい自分たちを見てくれ」「こんなに面白くて楽しいのはイイヨネ」といった中身のないメッセージを送り続けても良いのでしょうか。

良いコンテンツは様々な要素によって構成されていますが、そのなかに人間中心であることが必須であると言われています。今は広告、マーケティング、Web で本当に顧客のことを考えているのかを証明しなければならない時期に来たのだと思います。美しい映像で、視聴者の心を揺り動かすことできるかもしれません。しかし、それでは企業がそもそも提供しなければならない価値を顧客に提供しているとは言えないと思います。

パッと見が良いイメージだけを配信していればロイアリティや印象が良くなるほど、顧客は単純ではないということ。コンテンツはあって当たり前、良いコンテンツを作っているから大丈夫という部分を一度疑い、見直してみると改善点は幾つか見つかるはずです。

Adobe Creative Suite が終了し、Cloud の一本化が発表されました。今回の新製品ラインナップでニュースになったのが、Fireworksの開発中止 のニュース。最新版の Fireworks CS6 の次期 OS へのサポートをすると宣言しているので、すぐに使えなくなるということはありませんが、視野を広げて別の選択肢を探さなければならなくなるでしょう。

Fireworks が数年後には使えなくなるかもしれないから、Photoshop に移行するべきなのかといえばそうでもありません。写真やグラフィックといったビットマップ画像編集であれば Photoshop は素晴らしいですし、ベクターシェイプやレイヤースタイルを使えばある程度柔軟性を保つことはできます。しかし、Webサイトデザインにふさわしいツールとはいえません。

Fireworks のすべての機能を補うことは出来ませんが、代わりになる選択肢は年々増えてきています。

ベクター画像

昨年のバージョンアップで大幅に機能と UI が改善された Sketch はおすすめ。デザイン素材も今年に入ってグッと増えてきています。既に Sketchgem のような素材を集めたコミュニティがあります。

デザインアセット

アイコンやボタンの書き出しに便利なのが Slicy。残念ながら Photoshop との連携になりますが、レイヤーの整理をするだけで、スライスなしで様々な画像を書き出してくれます。また、自動的に Ratina 画像の生成にも便利です。

ワイヤーフレーム

この分野は非常にたくさんあるので、Fireworks 以外でも出来たりします。Visio や OmniGraffle のように昔からあるツールを使うのもアリですし、Wireframe.cc をはじめとした Web アプリでもいけます。Adobe製品が良いのであれば、Adobe Touch Apps でも良いですね。

プロトタイプ

どの種類のプロトタイプを作るのかによりますが、Balsamiq のようなものから、Easel のようにドラッグ＆ドリップ形式で UI を設計したあと、HTML を書き出してくれるものまであります。画像を動かしたいのであれば Prototypes も手段です。

もっとワークフローを柔軟にしよう

Fireworks は国内外で熱心なユーザーが多いので、開発中止のニュースに「なぜ？」と考える方も少なくありませんが、最近の Adobe の動向、今後の Web の姿を想像すると容易に判断できます。

ここ数年、このサイトでもカンプは生産的ではないという話を何度かしてきました。レスポンシブ Web デザインにしなかったとしても、今の Web は固定幅の『絵』でデザインの課題を解決するのは大変困難です。むしろ、絵を見せてしまうことで間違った期待を与えてしまい、開発フェイズでの負荷が肥大することもあります。

また、デザイナーは増え続ける利用者環境を考慮した 柔軟性のあるやさしいデザイン を考えなければいけません。こうした中、カンプという静止画をを作ってスライスを書き出すというワークフローでは柔軟性を考慮しにくくなります。

ポッドキャスト の第55回目に対談したデザイナーの 山口有由希 さんは、Fireworks の熟練者ですが、カンプを作るというよりかはデザインアセットやスケッチ用に Fireworks を使っていると話していました。

もちろん、Fireworks は単にカンプを作るためだけのツールではありませんが、善くも悪くも Fireworks の存在がそこから抜けきれないところが、『脱カンプ』の今の時代にマッチしなくなってきているのかもしれません。

さらに今の Web とデザインの世界は、ひとつのワークフローで表現できるほど単純なものではなくなったのも忘れてはならない重要なポイントです。従来のようにオールインワンの多機能ツールを使いこなして、そのツールに合ったワークフローが構築されていました。 Drewamweaver と Fireworks の連携はまさにその典型的な例です。言い換えればツールのためのワークフローだったと言えます。

しかし、今は「Webサイト」と一言でいっても、デバイス、スクリーンサイズ、利用文脈など様々な要因で作り方が大きく変わることがあります。多機能ツールはすべてのことを工夫次第で無難にこなすことが出来ますが、最適な作り方ではないことが多々あります。これに Adobe も気付いており、最近では Edge Animate, Muse, Edge Reflow といった、小さいけど特化したツールを配布し、ツールを自由に組み合わせてワークフローを構築できるようにしています。

上記に挙げた Fireworks の代わりになる（かもしれない）ツールも、機能数は少ないですし、アプリをたくさん切り替えるのは面倒を感じるかもしれません。しかし、機能が特化された小さなツールなので、様々なワークフローで機能の最大限を活かした仕事の可能性を与えてくれます。明日、突然新しいワークフローを採用したとしても、小さなツールなので調整するための学習コストも高くありませんし、ワークフローのどこかにツールを適応させる『隙間』もあるはずです。

ワークフローをツールに合わせるのではなく、そのとき最適だと考えられるワークフローに合わせることができるツールを選ぶ・・・数年前は難しかったですが、今は現実的な話になってきたと思います。

作り方が変わってきている中、今回のニュースがありました。
これを機会に様々な小さなツールに目を向けて自分の道具箱を増やしてみてはいかがでしょうか。増すと、その分作り方の柔軟性が増して作りやすくなりますよ。

4月30日は World Wide Web にとって重要な日。先日 CERN が、W3 の関連技術をパブリックドメインにしてから、20 年を迎えました。CERN 公式サイト では W3 の歴史を振り返ると共に、1993 年に公開された 最初の Web サイト もオリジナルの URL に再公開されました。

構造化された情報は未来に繋げるためのディープインプレッションになると話した「スマートフォン戦略から始まる新たなコミュニケーションデザイン」

世界最初の Web サイト（上図）は、コンテンツとデザインに関する講演をする際に何度か取り上げています。例えば、2011年ロフトワークが主催した いまさら聞けない！？ 企業のスマートフォン対応 で、20年前に作られたサイトにも関わらずスマートフォン対応されていると紹介しました。

シンプルなマークアップですし、装飾も一切ないので表示されて当然かもしれません。しかし、今まで私たちが作ったサイトの中で、作った当時には予測もしなかったデバイスでも情報をきちんと伝えることができるのがどれだけあるでしょうか。シェアが多いデバイスやソフトウェアに向けて細心の注意を払って構築されているものの、5 年又は 10 年先のことを考えて設計されているケースはあまりないと思います。むしろ作っては壊すというサイクルを繰り返している場合のほうが多いのではないでしょうか。

今後ますますマルチデバイス化が進むことで、全ユーザーが特殊な存在になります。わずか 2, 3 年という短い期間でも全く新しいデバイスが広まる可能性があるのが現在です。今までのようにパソコンをはじめとした特定のデバイスだけを考えて Web サイトを構築することで、情報にアクセスできない方が増えてきます。スマートフォンから PC サイトが表示されているのは今だけ味わえる『幸運』であって、今後このまま PC サイトを中心にしたサイト構築をしていると、まったく見れないという事例が増えてくるはずです。

特定のデバイスに向けてデザインするのではなく、スコープを広げたデザインのルールを生み出す必要があります。雰囲気が伝わるシステム作りがひとつアプローチといえます。元々 W3 は、あらゆるデバイスからでも情報を取得できることを前提としたネットワークなわけですから、特定のデバイスのためだけにデザインすることは、ナンセンスなのかもしれません。

ロゴを小さくしてでも、コンテンツを 1px でも上にするよう工夫された USA Today の情報設計。検索の見せ方も注目です。

もうひとつ、世界最初の Web サイトから学べることといえば、コンテンツを最優先かつフォーカスして見せることがどれだけ重要かということです。スマートフォンやタブレットではコンテンツを最優先に見せることがデザインの原則になりつつあります。この考えが、最近 PC をはじめとした大きめのスクリーンでの Web サイトデザインに影響を及ぼしています。例えば、昨年末リニューアルされた USA Today は典型的です。今までは 2, 3 列に並んでいたナビゲーションを排除し、少しでも上位にコンテンツが表示されるような工夫が随所見られます。

20 年前に公開された世界最初の Web サイトはシンプルで見栄えが良いとはいえません。しかし、Web とはどういった場所なのか？何をデザインしなければならないのか？といったことを静かに教えているように見えます。

利用者への理解を深めながら新しいプロダクトやサービスを作り出すときにデザイン思考が役立つと言われています。異領域の人たちによるコラボレーションや試行錯誤を繰り返しながら完成に近づけるプロセスは、イノベーションの原動力とも言われています。日本でもデザイン思考を取り入れて新しい価値を生み出している企業が増えてきました。

私もプロトタイプをキーワードとして、デザイン思考を取り入れている人間のひとりではあるものの、デザイン思考による盲点が気がかなりになることがあります。

デザイン思考はプロダクトやサービスを作るための考え方・メソドロジーであるが故に、短期的かつ狭い視野に留まりがちになります。人のもつ課題や不満を解決するのは、プロダクトやサービスである場合も多々あるわけですが、時には社会構造、エコシステム、文化といった部分に注目したほうが効果がある場合があります。

例えば朝の満員電車で人が怪我して危険という問題があります。これを解決するためのサービスやプロダクトをデザイン思考を通して生み出すことができるでしょう。しかし、それより会社に同じ時間に行かなければならない規則であったり、朝オフィスにいなければならないという風潮を変えたほうが満員電車の根本の問題への取り組みになるかもしれません。

アプリデザインも同様に、デザイン思考の盲点があると感じることがあります。『素晴らしい体験』をアプリの中で提供したとしても、利用者の求めている根本の課題に応えているとは言い難いです。利用者は増え続けるアプリの管理に困っていますし、たったひとつのメッセージを見るためにアプリを立ち上げなければならないという不便があります。メソドロジーを実践したからといって、サービス・プロダクトのもつ根本的な課題が解決できるとは限りません。

デザイン思考が間違った考え方であるとは思っていませんが、他の考え方やメソドロジーと同様に万能薬ではないですし、どのような盲点があるのかは知っておいたほうが良いと思っています。

本当の問題解決に向けて

デザイン思考の盲点を指摘した理由は、良しとされる手法を用いても根本的な解決に繋がるとは限らないという点で、今の Web / アプリデザインと似ているなと感じたからです。デザイン思考という名のメソドロジーを用いて一時的な解決案を提供できたとしても、根本的な問題に取り組んでいないことがあります。

Web デザインでも同様です。
様々な手法やテクニックを採用することができますが、対クライアント関係やチーム構造の改変がなければ根本的な解決に繋がらないことがあります。

レスポンシブ Web デザインは、実は手法そのものはそれほど難しくありません（技術的に突っ込めばキリがないですが）。本当に難しいのは、レスポンシブに作るための考え方であり、クライアントとのコミュニケーションの仕方やワークフローを変えなければならない点です。手法ではなく構造への取り組みがなされていないので、真の解決に繋がっていない一例です。

理想かもしれないですが

社会構造、エコシステム、文化といった言葉をみて「それは理想論」「作る仕事だから関係ない」と感じた方もいると思います。

最近よく記事として取り上げている新しいワークフローについても「理想だけど無理」と考え方はいると思います。確かにそういう部分もありますし、読み手それぞれの仕事背景や立場があるので、そう考えても仕方がないかもしれません。

しかし「理想」といって一蹴できる状態に今あるのかどうか疑問だったりします。人と Web との関わりは多種多様化し、扱うハードウェアもソフトウェアもますます増え続けています。今まで当たり前だった価値観も変わりつつあります。仕事の関わる様々な要素が変化しているのに、今までそうだったからという理由で変えないのは他のビジネスと比較しても結果は見えているように思えます。

ここで、これから考えていきたい『理想』というのは、唯一無二なものでもないですし、今すぐできることのような短期的なものでもありません。どちらかといえば「Just an idea（ひとつのアイデア）」と言ったほうが適しているでしょう。それぞれの仕事環境に合った理想的な形があると思いますし、それには莫大な努力と時間が必要になります。

デザイン思考の実践にしろ、より Web らしい価値観を提供するにしろ、手法だけでは真の解決に繋がらないのではと感じています。すぐ実現とはいかないですが、それぞれの立場が考える理想について語り合い、考える時間や場所をもつことでスタートラインに立てるのではないでしょうか。結果的にそれぞれにとって気持ちのよいクリエイティブな場になるのではないかと思います。

昨年末に開催された CSS Nite Shift 5 で「Reimagination（再想像する） 」の話をしました。人とコンピュータの関わり方が行動や価値観を再定義しているのと同じように、Webサイト制作にしても同様のことがいえます。今までの当たり前を疑い、未来に柔軟に対応できるワークフローが必要とされています。

例えば従来必須だと言われていたワイヤーフレームも考慮対象です。少し前に ASCII へ「柔軟性あるデザインプロセスへ移行するためのヒント」という記事を寄稿しました。ワイヤーフレームが果たそうとしているコミュニケーションの目的は間違っていませんが、つくるためのツールや手法に問題があるのではないかという疑問を投げかけた記事。絶対いると思い込んでいるものも、今の時代にマッチしなくなってきているものは少なくありません。

また、Photoshop や Fireworks で作られたカンプと呼ばれる静止画像を作るのも、これからの Web デザインにおいて足かせになりつつあります。この話題は昨年何度もセミナーで取り上げていますし、プロトタイプの重要性を取り上げた講義やワークショップも行っています。

ひとつのプロトタイプを作るのではなく、目的に応じて最適なツールを選んで作ります。

カンプもワイヤーフレームと同様、コミュニケーションの目的は正しいのですが、ツールや手法に問題があります。例えば、カンプひとつにしても以下のような項目を暗に提示しています。

• レイアウト
• タイポグラフィ
• 色
• コンテンツのトーン＆マナー
• 情報の優先度
• 情報構造
• 操作性
• 感触
• 導線
• 他ページとの一貫性

カンプは Web サイト制作の初期段階に必須といわれていた時期もありましたが、初期段階に提示するにはあまりにも高度なコミュニケーションツールです。これだけたくさんのことを一度にクライアントに見せると、議論が定まらない可能性がありますし見過ごすこともあります。また、不特定要素が多い中、あたかも完成したかのような絵を見せることは、勘違いを生むリスクもあります。それを埋めるために書類や会議を増やすのも非効率です。

カンプが成し遂げようとしている「ビジュアルを作り、提示する」という目的は間違っているとは思っていません。むしろ初期段階に見せていることは正しいわけです。しかし、この目的のためにカンプという静止画を用いるのは今後ますますコスト高の要因になると考えています。

デザイナーがコードを書けなくても良い

静止画カンプの問題点は 2011年くらいから頻繁に書いています が、その回答が Web ブラウザ上でデザインすることなのかというと、そうでもないかなと思っています。

人が実際触れる媒体で、制約も踏まえたリアリティのある提案と、テストをしながらきめ細かくデザインを積み上げることが できるのが Web ブラウザ上でのデザインのメリットです。この手法は レスポンシブ Web デザイン には大変有効で、今後ますますフラグメンテーションが進むスクリーンサイズへの対応を考慮すると無視することはできません。

Web ブラウザ上でデザインすることで、静止画カンプで成し遂げようとしていた、「操作性」「感触」「導線」「情報の優先度」といった課題に取り組むことが容易になります。しかし、カンプが本来成し遂げようとしていた「ビジュアルを作り、提示する」という部分を Web ブラウザ上で解決できるのかというとそうとは言い切れません。

その要因としてクリエイティブのタイムラグが挙げられます。

Gumbyのようにデザイナーフレンドリーを売りにしたフレームワークもありますが、グラフィックツールの直感性と即時性にはかないません。

LiveReload をはじめとした便利なツールを使って、書いたコードの結果を即時に見れるようになりました。また、小さなツールを駆使することで複雑なビジュアルのコードをすぐに生成することも可能です。しかし、それでも思考のアウトプットに若干のラグが生じます。Photoshop や Fireworks のように思いついたことが、そのままの形ですぐに表示されるわけではありません。

コーディングにも試行錯誤があるように、ビジュアルにも試行錯誤があります。様々なビジュアルをトライアル＆エラーを繰り返すには、ブラウザ上でデザインというのはタイムラグが大き過ぎるわけです（0.1秒くらいだったとしてもまだ遅い）。Photoshop や Fireworks は、プロダクトを作るためのツールとしても優れていますが、ビジュアルの試行錯誤を容易に行える点も無視できないわけです。

小さなチームであればコーディングができるデザイナーがいても不思議ではないですし、私の周りにも両方できる人は少なくありません。しかし、Webデザインするにおいてコードが書けることが必須なのかというと私はそうは思っていません。それがたとえ Web ブラウザ上でデザインするワークフローになったとしてもです。

HTML/CSS フレームワークを活用することで、即時に Web ブラウザ上でデザインできるようになりました。これによって、静止画カンプ以外の方法で「ビジュアルを作り、提示する」という目的を達成する機会を得たことになります。

高まる Web デザイナーの役割

それでは従来の静止画カンプを作っていた Web デザイナーが今度するべきこと、考えていきたい課題は何でしょうか。以下の 4 点があります。

レイアウトだけがデザインではない

レイアウトを考え作るのは楽しいです。しかし、レイアウトから入ると柔軟性・汎用性のきかないデザインになる可能性が高まりますし、レイアウトよりもっと重要なビジュアルデザインの課題が後回しになることもあります。また、Web という性質上、コードが分かる人とのコミュニケーションをなしにレイアウトを作ることは困難です。

すぐにレイアウトが作れないことで、自分がデザインしていないと考えることはないですし、先に解決しなければならない課題は山ほどあります。

雰囲気が伝わるシステムを作る

スタイルガイドのインスピレーションになるGEL。

画面ではなく部品から始めてみよう という記事に書かれているとおり、ページという概念はまず捨てて、様々なデバイスでブランドイメージを維持するためのシステムを構築する作業が必要になります。ページ単位でひとつひとつデザインしているだけでは見えてこない全体像を形作る仕事です。

システムというと堅苦しいですが、言い換えればスタイルガイドを作ることを意味しています。例えば BBC では GEL: Global Experience Lanuage と称して、様々な媒体を通して利用するトーン＆マナーを制定しています。また、Web 版のほうではタイポグラフィや色だけでなく、BBC の Web サイトで利用する UI コンポーネントも紹介されています。

こうしたスタイルガイドをいきなり HTML/CSS で記述するのも手段ですが、コードが書けなくても出来る仕事です。

Photoshop や Fireworks は間を埋めるツール

Photoshop や Fireworks は、プロダクションにおいて『間』を埋めるツールになります。例えば、CSS では表現できない UI 要素や写真・グラフィックをつくるために Photoshop や Fireworks を使います。また、レイアウトを考える段階にはいった際に、コーディングの前の大まかなスケッチを Photoshop や Fireworks で行うこともあります。

紙に描いたスケッチがあれば、すぐにコーディングができる場合もありますが、単純なグリッドの世界にはまらないレイアウトや、グラフィックとの組み合わせで生まれる表現を模索するにはコーディング環境より Photoshop や Fireworks のほうが適しています。ただし、従来のように作り込まず、ある程度アイデアが固まった状態でコーディングに入って実際どんな見た目になるのかを確認したほうが良いでしょう。

混沌を受け入れる

途中段階のものをチームメンバーに見せたり、細かいパーツを即時に作ったり、ブラウザ上での表現を確認した上で調整を行ったり・・・などなど明確なワークフローに沿って順序良く進むという工程ではなくなる可能性があります。ひとりで黙々と作業する時間もありますが、今まで以上に別の職域の方とコミュニケーションをとる必要がでてきます。

早い段階で自分がつくったデザインがチームメンバーが活用することで、見えてくる課題もでてきます。また、多くの方はデザインに対してコメントもしてくるでしょう。様々な意見や見解を、そのまま聞き入れて作業するのではなく、ビジョンを共有するためのファシリテーションをデザイナーがしていくことになるでしょう。

デザイナーが基本の情報構造のスタイルガイドを作りはじめた段階で、CSS として継承。それを基に大まかな情報フローを作る間に、デザイナーはレイアウトのスケッチをはじめたり、スタイルガイドの充実化を進めます。もちろん、その間にフィードバックをするといったコミュニケーションも発生します。

もちろん、これはひとつの『理想』なので、そのまま適当できる場は少ないでしょう。しかし、今までのやり方は今後ますます通用しなくなることを考えると、今あるツールや手法を見直して、組み合わせや使い方を変えて模索する時期には来ていると思います。

来週 4月23日（火）、クリーク・アンド・リバー様と DTP Transit 様の協力をいただいて緊急開催が決まりました。昨年 11 月よりコンテンツに関わるセミナー&ワークショップを重点的に行っていますが、こちらは番外編のような位置付けになります。

マジカルコンテンツツアー と題して「コンテンツ」関連に話題になっていること、学習しておきたいポイント、制作・運営面で気をつけておきたいところをひととおりすべて紹介します。コンテンツに関わる「なぜ」「なに」という基本からワークフローや UI の話まで、駆け足でお伝えする内容。広く浅いですが、美味しいところをつまみ食いしたいという方には最適です。

アウトラインのようなものが申し込みページに掲載されているので、興味がある方はぜひご覧ください。

なお、先日お伝えした大阪で開催のセミナー＆ワークショップ 第12回リクリセミナー「マルチデバイス化のためのコンテンツ戦略」 の受付が開始されました。こちらは6月15日（土）に開催されます。今年の 1 月に大阪で開催された 基礎講座 の続編になります。今回はコンテンツ視点の解析や提案についてじっくり話をします。基礎講座を受けていなくても理解できる内容なので、大阪周辺のデザイナー／ディレクターさんで興味がある方はぜひ。

では、ユーザーインターフェイスとは一体何なのか。スケッチしてみました。

昔からあるデスクトップでも、Google Glass のような未知のデバイスでも、人とコンピュータの関わりは必ずといっていいほど発生します。

人が何かをインプットすることで、コンピュータは処理したデータをアウトプットして人に伝えます。ユーザーインタフェイスとは、人のインプットを助長したり、コンピュータが処理したデータを人が理解できるようにアウトプットする役割を果たします。つまり、人が操作するコンピュータとの関わりを円滑なものにするのがユーザーインターフェイスの基礎と捉えることができます。UI を HCI (Human-Computer Interface) と言い換えることがありますが、UI とは表層的な絵を指すだけではなく、関係性を設計するものというのが分かってきます。

先月のセミナーで「テキストは UI」と解説しましたが、人とコンピュータの関係を助長するという意味で、なくてはならない存在。

• 人はなぜ、そのシステムに触れようとしているのか
• 彼等の何を期待して操作しているのか
• インプットする手順はあるかどうか
• インプットするための具体的な方法は何か
• アウトプットするために必要なデータはなにか
• インプットに対する適切なアウトプットの形式はあるか
• アウトプットに気付いてもらう表現はなにか

人とコンピュータの関係を円滑なものにするには、上記のような課題に応えなければいけません。GUI はそのうちの幾つかの課題に応えてはいるものの、すべてではありません。また、見た目が良いからといって、インプットがしやすかったり、アウトプットが理解しやすいとも限りません。私たちは広義の UI の視点から GUI をもっと観察する必要があるでしょう。様々な GUI を観察することで、デザイナーがどのように関係性を考慮して視覚化しているのかを考える機会を与えてくれます。

「UI だけ」と書くと語弊があるかもしれませんが、私は UI だけでも素晴らしいデザインの道筋が開けると思っています。また、上記の課題を前提にして UI 設計に取り組むことは、利用者の心理・行動や環境について考えるキッカケを与えてくれます。それは UX であると捉えることは出来ますが、掴みどころがない広い意味をもつ UX という言葉を用いるより、UI の意味を見直した上で考える方が分かりやすいときがあります。

GUI という観点から UI をデザインするのであれば、装飾で終わって面白くないかもしれません。しかし、人とコンピュータとの関係性を設計するという意味合いから UI を捉えるのであれば、深く面白い領域になると思います。

アイコンと問題解決について

様々なデザイナーが新しい保存アイコンを提案しているものの、「うん、これは保存だ」と納得できたものはほとんどなかったと思います。ダウンロードにみえるものも少なくありませんし、中には抽象的すぎて何を意味しているのかさえ分からないのもあります。自分たちのクリエイティブアウトプットの練習として、こうした新しい保存アイコンを模索することは素晴らしいことです。しかし「フロッピーディスクは誰でも使っていないから、理解できない」と解釈するのは安易過ぎます。また、フロッピーディスクであるがために、保存が何処にあるのか困ったという事例が増えているわけでもないので、壊れていないものに手を加えるのはリスクを伴います。

アイコンをデザインするとき、実世界のオブジェクトやアクションを象徴化することがあります。フロッピーディスクが採用されたのも、当時データを書き込む（保存する）媒体がフロッピーディスクが主流だったことから、利用者は保存というアクションと関連付けしやすかったからでしょう。

このように実世界のオブジェクトをメタファにしてアイコンが作られる『べき』と捉えるのであれば、フロッピーディスクは今の時代に適合しません。しかし、アイコンの本質は利用者がフロッピーディスクを使っているのか、又は知っているかどうかが問題ではありません。ここで重要なのは、フロッピーディスクの形を見せただけで、保存という行動を促すことができるという点です。

メタファからイディオムへ

1995年、アラン・クーパー氏が The Myth of Metaphor という文献を発表しました。この文献で、彼はメタファに頼りすぎたデザインは害を及ぼすと警告しています。一見、学習コストを落とす役割を果たしているかのようにみえるメタファですが、実世界を真似ることで、ソフトウェアの可能性を制限していまうことがあるという見解を示しています。ソフトウェアは常に進化し、新しい機能や可能性を次々の追加できることを考えると、メタファに頼りすぎることで、だんだんイメージと機能がかけ離れていきます。また、メタファに捕われることで機能を狭めてしまう（又は気付いてもらえない）という危険性もあります。

こうした課題は、「フロッピーディスク＝保存」だけでなく様々なアイコンにいえます。「電話」「メール」「フォルダ」もメタファを利用したアイコンを使ったことで、最初は分かりやすかったものの、今や実世界のオブジェクトとはかけ離れた存在になっています。

そこでクーパー氏は、UI デザインは「Idiomatic（イディオム・慣用句）」であるべきだと提案しています。直訳すると意味が分からない表現も、意味が通じる言い回しのことを慣用句といいます。例えば「舌を巻く」という言葉をそのまま捉えてしまうと妙な表現ですが、多くの人が「感嘆する」と捉えるはずです。GUI 要素でもこうした慣用句的な表現を用いているものがあり、例えば、スクロールバーやプルダウンメニューはその一例です。スクロールバーは実世界には存在しない要素ですが、右側にスクロールバーがあり、それが今ページの何処にいるかを示しているのかを教えてくれます。

ロゴもイディオムになる場合があります。例えば Nike のロゴをみると社名だけでなく「Just do it」を連想する方もいます。

「保存＝フロッピー」はメタファのデザインとしてはじまったわけですが、多くの方がそれを保存として捉えることができているという点では、イディオムに進化（成熟）したと考えることができます。

アイコンとUIデザインの可能性を広げよう

メタファを用いたアイコンデザインは間違っているから、イディオムを意識してデザインしよう・・・といっても簡単にできることではありません。「フロッピーディスク＝保存」というメタファから慣用句的な存在に進化する場合もあるわけですから、メタファを使うことに躊躇しなくても良いと思います。ここで重要なのは、メタファが時代遅れだから、適切なアイコンではないと解釈するのは間違っているという点です。

以下に、アイコンデザインの評価と採用のポイントをまとめました。

ラベルは重要

メタファになるオブジェクトがあれば良いのですが、ソフトウェアの機能に当てはまるオブジェクトが常に存在するとは限りません。才能あるデザイナーが努力してもアイコンだけで理解できるものを作るのは困難です。単独で存在させるのではなく、まずラベルを補助する形からはじめましょう。

無理にクリエイティブにならない

ドン・ノーマンの著書「The Design of Everyday Things」には、もしすべて失敗したのであれば、定番を使おうという言葉が記されています。迷った場合は、よく使われている形状を採用するといいでしょう。

直感的ではなく学習しやすさ

直感的なのは習慣化されている場合が多いです。つまり、直感性をデザインすることを考えるのではなく、学習しやすい状態を作り出すにはどうしたら良いかを優先しましょう。

タッチやアニメーションも考慮

今までは操作ボタンが必要だったものも、ちょっとした装飾で「これは操作できる部分」と利用者に伝えることができるようになりました。アイコンを添えた数々のボタンを提供するのではなく、コンテンツの見せ方で解決できるものもあります。

別の議論で、そもそも「保存」という機能はいらないという意見もあります。私が愛用している Byword も保存という概念がなく、いつの間にか iCloud 経由で同期されているのが好きな点ではあります。しかし、すべての「保存」がこうした自動化がふさわしいのかというそうではありません。バージョン管理のようなコミットというアクションも含めた保存は自動化は適切ではないですし、保存というアクションがあることで利用者が自分で操作をコントロールしているという安心感もあります。

こうしたことから、保存は何かしらの形で残るでしょうけど、フロッピーディスクのアイコンを変えようという以前に、保存というアクションと導線のデザインの見直しのほうが先決じゃないかなと思いました。

先月の Android Bazaar Conference 2013 Spring を最後に、久々に講演もない静かな日々を過ごしていますが、今月末から忙しくなりそうです。『基礎講座』と名付けて各地で開催していたコンテンツ講座も三回シリーズにすることを決めて準備を進めているところです。まだ東京都内では開催予定を固めていませんが、都外は続々と日程が決まりつつあります。中には募集を開始しているところもあるので、先 3ヶ月の講演予定をお知らせします。お近くの方はぜひ遊びにきてください。

もし、うちの街でも開催したいという方はお気軽に。社内セミナーや小規模勉強会みたいな方式でも大丈夫です。興味がある方はぜひご連絡ください。

デジタルは色あせないのか

素晴らしいデザインは時代を超えて色あせないなものだと言われています。

建築、産業デザイン、グラフィックデザインなど、色あせないデザインは分野を問わず今でも「良い」と思えるものばかりです。デザインされた当時の社会背景や作り手の想いがタイムカプセルのように詰め込まれているわけですから、時代を感じずにはいられないはずです。しかし、それでも時を超越した魅力があるわけですから不思議なものです。ディーター・ラムスのようなモダンな製品は色あせないと言われますし、ルイ・カーンのような禁欲的でありながらも、テキスチャを大事にした建築も同様に色あせないデザインと言われることがあります。

デザイナーであれば、色あせないデザインをつくりたいと思うでしょうし、それをひとつの目標としている人もいると思います。

しかし、Web をはじめとしたデジタルデザインはどうでしょう。Apple のホームページを見ても分かるとおり、わずか 5 年前でも古臭くみえます。毎年、ファッションのようにトレンドが表れては消えていくデジタルデザインの世界で、時代を超えて使われるデザインは存在するのでしょうか。そもそもそれは可能で、人々はそういった普遍的なデジタルプロダクトを必要としているのでしょうか。

最近読んだお気に入りの書籍の中に Susan Cain の「Quiet: The power of introverts in a world that can’t stop talking」があります。心理学で人の性格をおおまかに Introvert (内向性）と Extrovert （外向性）に分類することがあるそうです。議論に参加したり、自分の意見をしっかり主張するほうが良いという風潮があることから、外向性のある人間になるよう努力すべき、内向性は不利だと考えてしまう方もいるかと思います。著者はこうした考え方に疑問を投げかけ、内向性のもつ強み、そして外向性と内向性のバランスについて書籍で語っています。

TEDでも講演したことがある方なので、書籍は知らなくてもプレゼンテーションは見たことがある方はいるかと思います。

見た目が綺麗だから良い UI というわけではない

見た目とインタラクションの提案は素晴らしいですが、メニューのキャプションは「My」だけ。これは何ができるアプリなのでしょうか。

UI のインスピレーションとして Dribblbe や Android Patterns のようなギャラリーサイトを見ている方は多いと思いますし、「素晴らしい UI のまとめ」と名付けた記事も、だいたいはこうしたギャラリーサイトを参照していることが多いです。

実装まで携わった経験がある方ならなんとなく分かると思いますが、Dribble で紹介されている UI アイデアの多くは現実味がない想像図が多く掲載されています。実装しようとするならばパフォーマンスや操作性を犠牲にしなければならないものも少なくなりません。また、ダミーテキストやストックフォトが使われていることがあるので、本当の利用シーンを考慮して作っているとも言い難いです。

近年、素晴らしい UI とされているものは、GUI (Graphical User Interface) に集中し過ぎているように見えます。

Dribblbe はグラフィックデザイナーのコミュニティですから、見た目を重要視するのは当然です。しかし、UI デザインという少し大きな枠組みで捉えるのであれば、見た目が良いから良い UI と解釈するのは安易すぎます。今回の講義では文字ひとつ変えるだけでもアプリやサイトの印象を変えたり、利用者の行動を変えることができるという話をしました。

テキストも UI

上記は、37 Signals の Jason Fried の始めての著書「Getting Real」に書かれている言葉です。人は文章を読まないと言われて久しいわけですが、少し工夫するだけでも大きな変化をもたらすことがあります。

講演で例として出した Facebook の「Like」Google+ の「プラス」。機能面ではまったく同じですが、キャプションが違うことで人の行動が変わります。例えば、悪いニュースや悲しいニュースには「Like」せずコメントを残すという行動に移る Facebook に対して、Google+ で同じニュースを投稿すると元気を分けるという意味合いで「プラス」を押す人がでてきます。 Pinterst にしても「Pin」ではなく、「投稿」「保存」といった言葉をつかっていたら、他のサービスではリーチしなかった利用者層に響かなかったかもしれません（Pinterst に関する考察は「文化が作り出す利用者との関係）」を参照してください）。

見た目だけではなく、ちょっとしたテキストだけでもサイト・アプリ全体の雰囲気を作り出す力をもっているわけです。

「ファンはいません」の下には婚活の広告のバナーが。余計なお世話である。

システム寄りの視点でテキストを入れていくだけでは、利用者に不快な思いをさせる場合があります。いろいろな人をフォローできる Yahoo! プロフィール では、始めたばかりだと「友達がいません」「ファンがいません」と表示します。まだ、友達登録をしていないから当然だと思うかもしれませんが、始めていきなり「友達がいません」と表示するのはどうなのでしょう。 UI が素晴らしいと絶賛されている　Path ですら、始めた直後は「ゼロ友達」という奇妙な表示をします（英語表記だと「0 Friends」ですから、これも寂しいです）。

テキストを UI として捉えてデザインするのは意外と難しいことです。
ボタン、ラベル、メニュー、告知といった要所のキャプションをみるだけでなく、利用者がどのような文脈で画面を見ているのかを把握する必要があるからです。

• そもそもターゲットにしている利用者はどんな人か
• なぜサイトを訪れているのか
• そのとき何を思い浮かべてるか、不安はなにか
• その先に何を期待しているのか
• したい行動を実現するための方法が理解できるか

これらを把握して、はじめて利用者にとってピンとくるインターフェイスになります。これは簡単な作業ではありません。UI として使うテキストもコンテンツと見なして開発・管理しなければならないことを意味しています。ユーザー作成コンテンツが中心だから考える必要はない・・・ということではなく、見た目を設計する前に、サイトでの言葉遣いを設計しておくと良いでしょう。そうすれば、どのような見た目にしたら良いのか自然にみえてくるはずです。

アクセシビリティの 4 原則は以下のとおりです（翻訳サイトより抜粋）。

知覚可能

情報およびユーザーインターフェースの構成要素は、ユーザーが知覚できる方法でユーザーに提示可能でなければならない。

操作可能

ユーザーインターフェースの構成要素およびナビゲーションは操作可能でなければならない。

理解可能

情報およびユーザーインターフェースの操作は理解可能でなければならない。

堅牢性

コンテンツは、支援技術を含む幅広い様々なユーザーエージェントが確実に解釈できるように十分に堅牢でなければならない。

こうした原則は、アクセシビリティでよく例として出される音声ブラウザへの対応やキーボードの操作だけでなく、ビジュアルデザインにも大きな影響を及ぼします。原則を意識して作ることで見やすく使いやすいデザインが生まれることもあります。

例えば Engadget のトップページあるニュースアイテムに注目してみましょう。視覚的なインパクトが強く、可読性も高いです。また、レスポンシブ Web デザインを採用して、多くのデバイス対応にも注力しているのが分かります。しかし、PC 版だけでも改善点は幾つか挙げることができます。上記の原則を基に課題を幾つか挙げてみました。

知覚可能

写真と文字が重なる部分があるので若干可読性が落ちる場合がある。また、写真が訴えている情報も読み取り難くなる場合がある。

操作可能

ソーシャルメディアボタンが小さな領域に集約していることからクリック／タップが難しい。

理解可能

本文へのリンクも写真、題名、テキストの誘導と三種類あるが理解しにくい。また、コメントへの誘導が弱い。

堅牢性

マルチデバイス対応はしてあるが、概要の量に上下があったりレイアウトの構成上、スキミングが若干難しい。

こうした課題を幾つか解決したビジュアルデザイン案が以下になります。

• 写真は重ならないようにして全体が見えるようにする
• タイトルは色コントラストをはっきりさせて可読性を上げる
• 作者名と日付はブランドカラーをつかってタイトルと明確に切り分ける
• コメントを明確な形で切り分けて操作がしやすいようにする
• 概要テキストはレイアウトの横幅に合わせてスキミングをしやすくする
• 概要テキストの文章量を調整し、伝えなければならない情報をフォーカス
• ソーシャルメディアのボタンは押しやすい大きさに変更

JIS X 8341–3 の準拠のためにチェックリストを潰すという作業をする前に、アクセシビリティの原則を基にビジュアルデザインを考えていくことで最低限のことを初期段階で解決することが可能になります。デザインはデザイン、アクセシビリティはアクセシビリティという分断が後付けの不可価値にしてしまい、それぞれの長所が活かせないという結果になるのではないでしょうか。

また、以下のようなコードを加えることでキーボード操作でのハイライトのビジュアルを引き立てることも出来るはずです。

/* フォーカスしたときの見た目変更 */
h2 a:focus{
background: #2ac0e1; /* Engadget の別のキーカラー */
color: #003;
display: block;
outline: none;
}

制約なしで好きなように作ったので、今回のアイデアが現実的とは言い難いですが、アクセシビリティからビジュアルデザインを作ることは、それほど飛躍した考えではないことが分かると思います。

アクセシビリティは基本的に企画段階から議論していかなければならない重要な課題ではありますが、デザインとの連携性を高めることで、より自然にアクセシビリティが認知されるのではないかと考えています。そのためのツールとして 4 原則は使えそうです。

昨年頃から注目を浴びている広告形式で「ネイティブ広告（Naitive Ads）」というのがあります。詳しくは Techcrunch（米）のコラム Where You Can Go Right, And Wrong, With Native Ads を参照していただきたいですが、様々なメディア媒体の形式に合わせた広告を指します。例えば Tumblr の右側にある「Tumblr Radar」のように、見た目がサービスのデザインに馴染んでいて、あたかもコンテンツの一部のように見えるものが多いです。

私が最初にこのタイプの広告を見たのは、数年前の Digg でした。昨年に大幅リニューアルしてしまったので今はありませんが、スポンサーのニュースが他と同じデザインでリストに紛れ込んでいました（もちろん Sponsored という表記はありましたが）。最近だと Facebook が Social Graph を利用して広告をタイムラインに挿入したり、Twitter がプロモツイートをつかった広告モデルを実施してます。

自己主張が激しいわりには利用者クリックされないバナー広告とは異なり、利用者に有益なコンテンツを提供している点で大きな違いがあります。決まった場所と大きさの指定が必要だったバナー広告ではマルチデバイス対応が難しいですが、メディア／プラットフォームに沿って作るネイティブ広告は拡張性・柔軟性も高そうに見えます。

ネイティブ広告のユニークな点は以下のとおり：

• 利用者にとって有益のあるコンテンツを提供することが原則
• メディア媒体のライターに書いてもらう広告記事ではなく、広告主側が企画・制作
• 広告のインパクトではなく、共有されやすいコンテンツがつくれるかにかかっている
• 特定のマーケットやユーザー層に向けて広告配信するのに向いている

これらの特徴が逆に難しくさせているところもあります。各媒体の特性に合わせてコンテンツを作る必要があることから、バナー広告よりコストがかかる可能性があるだけでなく、広い視野で何処と組むのかを検討する必要がでてくるでしょう。「パン」という話題をネイティブ広告で出すとしても Tumblr と Pinterest では、表示の方、コミュニケーションの仕方、共有のされ方においてすべて異なります。同じ写真を強調したサービスでも、それぞれの強みやニュアンスを理解していなければ作れないのがネイティブ広告の難しいところです。

まだ目新しい形式だからクリック率が高いのかもしれませんが、利用者のためのコンテンツであること、利用者の行動や視線の邪魔をする形式ではないという点で将来性を感じる広告形式です。

もちろん、バナー広告がなくなることはないと思います。クリック率は 0.1% にも満たないこともあり、エンゲージメントには直結しなくなるものの、屋外にある広告掲示板のように存在をアピールするには適した形式です。ネイティブ広告も一時期の流行で終わらないのであれば、バナー広告とは異なるコミュニケーションの手法として様々なメディアで活用されるかもしれませんね。

広告の世界でもコンテンツの重要性が注目されているひとつの動きといえます。
第75回目のポッドキャストでネイティブ広告を題材にして話をしているので、興味がある方はぜひ聴いてみてください。

従来のやり方は通用しない

上図は Economist Intelligence Unit が 2012 年 11 月に発表した Outside looking in: The CMO struggles to get in sync with the C-suite（PDF）から抜粋したものです。CMO が現状、投資に力を入れている分野と、3 年後重要になると考えている分野の割合を比較しています。あくまで CMO の希望ではありますが、今後のマーケティングの青写真といえると思います。

ソーシャルメディアやモバイルといった新しい分野が伸びをみせていて、ブランド広告が大きく落ちているのが分かります。また、CRMという顧客のデータを管理をする時代から、それらのデータをつかってどのような傾向や対策が見出せるのかという視点に変化しているようにも見えます。このデータから仮説する今後のマーケティングの姿は；

• 企業は顧客との長期的な関係を築こうとしている
• 従来のマーケティングでは顧客に響かなくなってきている
• マスではなく個々とのコミュニケーションを作り出そうとしている
• 人々の消費や行動が変わったので、それに対する新しい視点を求めている

一期一会の手法（ブランド広告）から、顧客の要望にすぐに応えれるような手法や窓口（モバイル・ソーシャルメディア）の設計に移行がはじまっています。

無形の価値観をデザインする

「今のやり方は、今後もずっと正しいのか」

これはビジネスだけでなく、様々な分野に当てはまります。今までは技術を開発し、それが使える製品やサービスを生み出し、広告を通して顧客に使う意味を訴えかけていたところがあったと思います。「なぜ」という問いかけをせず、後付けで意味を加えていたのはビジネスだけの話ではありません。

良いモノを作れば良いという時代から、そのモノを作ることの意味、使う人への意味を早期に問いかけなければいけない時代が来たのだと思います。文化が作り出す利用者との関係 でも解説したように、人はモノだけではなく、体験や文化といった無形の付加価値を同時に求めるようになりました。Pinterest と同じようなモノは作れても、同じように成長できないのは、Pinterest には利用者に使うことの意味を第一に考えたからでしょう。「Pinterest のような UI にして、それに新しい手法も加えよう」という視点とは大きな違いです。

最近よく感じるのは、様々なデータを解析して明確な数値が求められていると同時に、「文化・体験」といった無形な価値観の重要性も高まってきているところです。一見、相反する考え方のように見えますが、今後のビジネス（又はデザイン）において、これらが共存することが原則ではないかと考えています。ただ作り出すことがデザイナーの役割ではなく、作り出すことの意味を考え、それを視覚化し、道筋をつくっていくことがデザイナーの仕事・・・と考えるのであれば、これはこれでデザイナーのあるべき姿に回帰しているだけかもしれませんね。

昨年暮れから今年のはじめにかけて デジタルハリウッド大学院 秋葉原校にて「未来のインターフェイス」講座の講師をしていました。全 8 回のこのコースは、予測不可能な社会でデザインをしていく上で、少しでも早くアイデアを形にして伝えるためのノウハウと実践に近い演習を行いました。未来的（SF的）なインターフェイスを考えるというよりかは、今あるデザインの課題へのアイデアをプロトタイプし、未来へ繋げていくためのプロセスを学ぶ講座になりました。

昨年の 5 月から、青森、名古屋、金沢でプロトタイプに関するセミナーやワークショップを行いましたが、デジハリ大学院での講座のための実験でもありました。そこでの経験でうまくいったこと、上手くいかなかったことを参考にしてカリキュラムを構築。1 回 1時間半の講座が 8 回あるコースは長いなと最初は思っていましたが、盛りだくさんの内容になりました。

Web サイト構築の仕事をしたことがある生徒、3Dグラフィックをつくる生徒、又は企画・プロデュースをする生徒など知識や背景は様々。あまり技術的な側面からプロトタイプの実践ができないというデメリットはあるものの、様々な知識と経験をもつ人たちが集まってアイデアを出し合うには都合の良い環境でした。そこでペーパープロトタイプを軸に、アウトプットまでの道筋と批評を通してアウトプットを続けるためのプロセスを体感してもらうことにしました。

コースのおおまかな内容は以下のとおり:

体験のマッピング

• プロトタイプの定義と使い方
• ツールの選び方
• 体験のマッピング
• マッピングから得た課題からプロトタイプをつくる
• プロトタイプの発表と批評
• マッピングから批評までの流れは個人とグループで行う

最初の授業で基礎的な情報は提供しましたが、その後はコース用ブログで情報発信をしたり、生徒からの質問に応えていました。インスピレーションのための情報や、ツールの紹介は授業でしなくても生徒が自発的にできることなので、わざわざ授業で時間を費やすことはせず、Web 上で良質な情報をコメントを加えながら配信していました。 ツールを自発的に覚えてプロトタイプを作った生徒や、ブログで紹介したインスピレーションから模擬したアイデアを提出した生徒もいたので、このあたりはうまく機能していたのだと思います。

プロトタイプを作ることはもちろん大事ですが、今回強調したのは体験のマッピング。閃いたアイデアをアウトプットするのもひとつのやり方ですが、実体験から得た課題からアイデアを引き出したほうが説得力がありますし共感も得やすいです。実際体験したことを視覚化し、整理していくことで、解決しなければならない課題が見えてきます。また、そこから作らなければならないプロトタイプの姿やプライオリティが明確になることもあります。

グループワークの前に、全員で付箋を貼りながらマッピングを作成したときは「結構出ますねぇ」という声がたくさん出ました。単純なシナリオでも、行動や感情をアウトプットしてみると、捉え方やプライオリティの違いに気付かされます。また、同じような課題を取り上げたかのように見えても、プロトタイプのコンセプトや形が全く異なる場合もあり、そうした違いに驚き学ぶところもあったかと思います。

うまくいったところはありますが、反省点も幾つかあります。

使い方を教えなくても、道具を紹介すれば活用する生徒。POPをつかってプロトタイプを提出する人もいました。

生徒が主役になれる時間が少なかった

個人的にはこれが最大の反省点。コースの後半はワーク中心だったので、生徒の時間があったといえばあったわけですが、質問はほとんどメールやブログでしたし、一方的なレクチャースタイルが目立ちました。生徒とリラックスして話せるようになったのも後半に入ってからで私自身馴染むのに時間がかかったのも要因かもしれません。

2周目のフィードバックサイクルがなかった

時間の都合上、どうしても導入できなかった改善案としてのプロトタイプ。生徒がアウトプットする過程の中、個別でコメントをするなどフィードバックは可能な限りしましたが、クラス全体としてサイクルを体感できる場を作れませんでした。

生徒の特徴が活かす方法がみつからなかった

個人ワークでは才能を発揮していた生徒も、グループに入ると自分のアイデアをグループに対して発言できない人もいました。近年、コラボレーションが重要視されていますが、個人だから力を発揮できる生徒もいて当然。内向的でもアウトプットができる環境や課題つくりが出来たのかというと微妙です。

批評のファシリテーションが足りなかった

時間を長めにとって説明した批評ですが、私自身のファシリテーションがうまくいかなかったせいで、議論がズレた方向にいく場合がありました。私が総評として述べるといった手法であれば問題ないのですが、会話になったときの舵取りには改善の余地があると思いました。

今回、はじめて長い時間をつかった講座を行ったこともあり、不備なところもありましたが、モチベーションの高い生徒に助けられながら終了することができました。パブリックスピーキングの経験は長いですが、講師の経験があまりない私に、講座の機会を作ってくださったデジハリ大学院のスタッフに感謝しています。

今回のプロトタイプの授業での経験は、今後の仕事、セミナー、記事執筆に活かしていきたいと思います。