Monthly Archives: September 2009

その頃、ウェブのデザインにおいて「コントロールの不自由さ」を強く感じていたのが、ページメタファでした。 HTML はドキュメントをマークアップする言語なので、当然と言えば当然なのですが、ブラウザに表示される内容は基本的に一枚の紙であり、主なインタラクションはリンクのクリックでページをめくるだけという、相当しょぼい世界でした。 しかしウェブデザインのトレンドは次第に、クレメントモックが作った諸々の企業サイトに代表されるような、かっちりとしたヘッダーやサイドメニューを持つ、アプリケーションの GUI ライクなものに変化していました。サイト内の全てのページに共通のナビゲーション要素があり、ページを遷移すると現在見ているページのメニュー項目がハイライトされるのです。これは単に、全パターンのハイライト状態があらかじめ用意されているだけで、（サーバーサイドでどの程度自動化されていたかは知りませんが）結局はページ全体を毎回表示しなおすパラパラ漫画なのでした。 そもそも僕は、はなからウェブの画面をドキュメントとしてではなくユーザーインターフェースとして見ていました。HTML をコンテンツではなくユーザーインターフェースの実装手段として捉えていましたので、この子ども騙しのようなギミックがどうしても気に入りませんでした。 当時は今のように標準化された DOM スクリプティングはありませんでしたし、僕は JavaScript が書けなかったので、ユーザーのアクションに応じてページの一部を変化させようと思ったら、フレームを使うしかありませんでした。 ある時、会社内でデザインコンペみたいなのがあり、僕は実験的に、フレームを多用した、ページ遷移の無い、アプリケーションのようなサイトを作ってみました。 画面上部にはメニューバーのようなものがあり、項目ごとにフレームになっていて、クリックするとその下の領域のフレーム内にサブメニューが表示されます。その中からひとつをクリックすると、画面中央のフレームにコンテンツが表示されます。コンテンツ内には関連リンクを呼び出したり注釈を呼び出したりするリンクがあり、それらをクリックすると画面左右の小さなフレームに表示されます。小さなフレーム内で何かクリックすると、中央のフレームが変化したり、自分のフレームを書き換えたりします。このように、あるフレーム内でのクリックが他のフレームを次々と変化させて、画面全体で見れば無数の表示状態があるというものでした。 フレームの位置関係が固定的であることや、サーバーサイドでの動的な処理を一切行っていないことを考えると、パラパラ漫画をいくつも分割して同時に見せているに過ぎなかったのですが、画面の表示内容が一定でなくユーザーの行動に対して解放されており、ページ遷移無しに無数の段階で変化するという点で、コンセプトモデルとしてはなかなか満足のいくものになりました。（今となっては、ウェブ的ではない表現として一蹴されそうですが） それを見た上司が、こんなことを言いました。 「これはオブジェクト指向だね」

モードレスネスの説明としては、こんなことが書いてありました。アプリケーションはできるだけモードが無い方が良い。モードが無いということは、ユーザーが好きな時に好きなことができるということ。モードはユーザーの行動を制限してしまい、ひとつの作業を終えるまで次の作業に移ることができない。モードが無ければ、ユーザーはもっとコンピュータをコントロールできる。 僕はユーザーインターフェースにおけるモードというものをそれまであまり意識したことがありませんでしたが、これを読んで思い浮かべたのは、Windows におけるウィザードでした。 はじめて Windows を触った時、◯◯セットアップウィザードというのがやたらと多いのに気付きました。それらはどうやら初心者向けに用意されたプログラムのようでしたが、僕にとっては、留守中に母親が勝手に机の上を片付けてしまったような気持ち悪さがありました。 Windows においてこの気持ち悪さを増長させていたのが、そのデスクトップの実装コンセプトでした。何かのアプリケーションをウィザードでインストールした後、そのアプリケーションの起動方法が分からずに人に聞くと、スタートメニューにアイコンが追加されているはずだというのです。確かにそこにはアプリケーションのショートカットが登録されていましたが、アプリケーションの本体がどこにあるのか全くイメージできませんでした。ディレクトリの中を探し回って、やっとそれらしきアイコンを見つけたので、自分で用意したフォルダにそれを移動しようとすると、移動できませんといったアラートが表示されました。移動できるアイコンと移動できないアイコンは、見た目からは全く区別できません。やってみるまで分からないのです。自分の意思ではなく、誰かの意思で勝手に自分のコンピュータが変更され、しかもその状態を変更することができないのです。そういうのがいちいち煩わしくて、頭にきました。 そういったことから、モードというのは、単にウィザードのことだと捉えていてはダメで、もっと広く「コントロールの不自由さ」のこととして考えなければならないと思い当たったのでした。

技術文書を読んで泣く奴があるかと自分でも呆れましたが、それは技術文書というよりも、哲学書か思想書のようなものでした。実際、冒頭の「What’s in This Book」という内容紹介には、この本は The Basic Philosophy、The Interface Elements、Appendix で構成されていると書かれています。 その哲学は、第一章の「The Human Interface Principles」に集約されています。デザインの原則として、メタファーを使うことや、直接操作を可能にすること、ユーザーにコントロールを与えることなど、いくつかの基本方針が謳われていて、Mac 自体のUIデザインの成り立ち、そして Mac のアプリケーションを書くデベロッパーが覚えておくべき心得が説明されているのでした。 簡単に言えば、ユーザーにとって使いやすいことが第一義であり、そのためにはよく考えてUIをデザインしなければならないということです。UIがダメなら他は全部意味を無くすということです。 今となっては、当たり前過ぎて、なぜ自分がそれ程までに感銘を受けたのかよく分からなくなっているのですが、とにかくその時は、「使いやすさを実現するための技術」というものに正面から取り組む姿勢が、強烈に進歩的で、 人類を解放に導くもののように感じたのでした。Apple にしてみれば、もう十年以上前から主張してきたことだったわけですが。 その頃僕はまだ、ユーザビリティーとか UCD といった言葉はおろか、そういう類いの研究領域があることすら想像したことが無かったので、尚更、Apple の Human Interface Guidelines が大きな扉を開いたように思ったのです。 僕はそれまで、Mac の楽しさは偶然の産物だと思っていました。けれど Human Interfece Guidelines を読んで、その考えが間違っていたことを知りました。Mac の楽しさは、かなり意図的に、膨大な研究と試行錯誤の上に実現されていたのでした。 デザイン原則として挙げられているのは次の項目でした（1995年板）。 Metaphors Direct Manipulation … Continue reading →

DTP というのは、印刷物のイメージをパソコンのスクリーン上で作る仕事です。版下や刷版を作る前に画面でほぼ完全なプレビューを得ながら作業できるという点では画期的なのだと思いますが、あくまでそれはプレビューであり、アウトプットそのものではありませんから、作業をしていてもなんとなく靴の上から足をかいているようなもどかしさがあります。なので僕は、コンピュータのスクリーンが最終出力先であるウェブの仕事に転職しました。ウェブには、僕がやりたかったバンド音楽や絵画や写真や小説などが全部あるような気がしたのも理由です。 スクリーン上でレイアウトをしたりグラフィックを作ったりするという意味では、ウェブのデザインは DTP の作業とよく似ていました。ただひとつの大きな違いは、ユーザーインターフェース要素を沢山作らなければならないということでした。例えばナビゲーションのメニューとか、ボタン状のリンクなどです。これらは紙媒体には無い要素でした。 当時（1997年頃）はほとんどがスタティックなページだったので、同じような部品のバリエーションを全て手作業で作っていました。しかも、見栄えを気にする要素は文字であってもどんどん画像で作っていたので、100個もあるメニュー項目の通常状態とハイライト状態を全部画像で作るなど、地味な作業が膨大に発生していました。そういうのはかなり忍耐力のいる仕事でしたが、それでも僕は、ユーザーインターフェースを作っているということが嬉しくて、結構楽しんでいました。 例えば、Photoshop の鉛筆ツールを駆使してアンチエイリアスフリーのグラデーションを作ったり、ウェブセーフカラーのカスタムパレットを自作して全ピクセルの RGB 値を把握しながらイラストを減色するなど、スクリーン表示を前提に如何にグラフィックを最適化するかといったことに情熱を傾けていました。僕は自分に、ピクセルマッドネスというニックネームをこっそりつけていました。 僕は相変わらず Mac が好きで、仕事でももちろん使っていました。周りにも Mac 好きの人が沢山いて、かなり幸せな職場でした。 そんなある日、僕は何かのきっかけで（どういうきっかけだったのか思い出せないのが悔しいのですが）、apple.com のサイトに Apple Human Interface Guidelines なるドキュメントが掲載されていることを知ったのです。そういえば、以前に一度本屋でそんな感じの書籍を見かけたことがあるような気がしましたが、その時はなぜか手に取らず、それきり忘れていたのでした。 オンラインのそれは、HTML と PDF になっていて、誰でも無料で読めるようになっていました。僕は PDF をダウンロードして、最初から読み始めました。それは衝撃的な内容でした。僕は読み進めるうちに、なんだか目頭が熱くなってくるのを感じました。

GUI には、標準というか、一般化したコントロール表現がいくつもあります。ウィンドウやスクロールバー、テキストボックスやラジオボタンなどのフォームコントロール、メニューバーやツールバーなどです。その中でも、「プッシュボタン」は最も代表的な GUI 要素として語られることが多いと思います。 しかしそれはちょっと違うのではないかと思っています。 確かにボタンは、現実世界のメタファーを使っているとか、操作対象として目に見えるようになっているといった、GUI の特徴をよく備えています。 しかしボタンによって入力できるのは0か1かの「1」という論理値のみであり、無限段階のアナログな操作から最も遠い、極端にデジタルなインタラクションを強要するものなのです。 ボタンが便利なのは、ボタンを押し下げるというノイズの無い単純な操作で複雑な処理を実行できるところにあります。これは現実世界の機械でも同様です。システムの内部にどんなに複雑なアルゴリズムや機構があったとしても、それはユーザーに対して完全に隠匿されています。 別な言い方をすれば、ボタンの押下はバッチ処理を開始するための合図であり、間接的な操作なのです。そこにあるボタンを直接押せるという意味では直接操作なのですが、そもそもボタンはユーザーが着目している操作対象ではなく、シンタックスにおける「動詞」の選択肢にすぎないのです。 動詞の指定という操作は、インタラクションの「フロー感」をスポイルします。ユーザーの意識が、対象物の状態から所定のコマンドに移ってしまうからです。 つまり本当は、ボタンが全然無いような画面の方が良いのです。 ボタンは、道具としての機械が複雑化してきた過程において、直接操作の実現を放棄した挫折のユーザーインターフェースなのです。

Windows は Mac よりもキーボードでの操作に配慮されている、という話をよく聞きます。確かに Mac では、コントロールへのフォーカス表現や、メニュー類へキーボードからアクセスする手段が、長い間かなり限定されていました。 ただし僕の見る限り、「マウスだけで操作しようとする」ユーザーが多いのは Windows の方です。右手にマウス、左手はショートカットのポジションに、というスタイルで操作している人をあまり見ません。ユーザーの平均的な習熟度に差があるとか、右クリックが充実しているからキーボードショートカットが必要ないとか、やる人はキーボードだけで全部やってしまうとか、そういう理由もあるのでしょうが、僕が思うに、Windows ではキーボードショートカットがいまいち使い物にならないから、Mac 式のスタイルだと操作が効率化されないというのが理由ではないでしょうか。 そもそも Ctrl キーを起点にしたキーコンビネーションはタイプしづらくて手がつりそうになりますし、アプリケーションごとの一貫性も驚くほど低いです。これだと「手が覚えてしまう」ような状態にはなりにくいでしょう。コピー＆ペーストぐらいが関の山で。 また Windows におけるメニュー項目やボタンの選択においては、ニーモニックというまた別なショートカットも併用されるので、なんだか複雑に見えるということもあるでしょう。 GUI における「目的語 → 動詞」のシンタックスの内、後半の「動詞」の部分を「手が覚えた」キーボードショートカットで行うことができると、もはやシンタックスには段階が無くなり、手続きを計画するという認知負荷が相当軽減されます。これによりユーザーの意識は作業の対象物と一体化したようになり、いわゆる「フロー感覚」を得やすくなります。 そもそも GUI の操作の中では、あまり意識されていませんが、「目的語」と「動詞」の指定が一体化したジェスチャも多く一般的になっているのです。例えばダブルクリックは「対象選択」と「開く」を同時に行うジェスチャですし、ドラッグ＆ドロップは「対象選択」と「移動」が一体化したものです。更に、ウィンドウにスクロールバーが発生している時に、ウィンドウ内のオブジェクトをドラッグしてウィンドウの端まで持っていくと、その方向に自動的にスクロールするといった振る舞いは、「対象選択」「移動」「スクロール」という操作をひとつのジェスチャーで実現するものです。 これらのジェスチャが自然に実装されていて、思い通りの振る舞いをしてくれる時、ユーザーは手続きとしてのリニアな操作ステップを意識しなくてもよくなります。その時 GUI は最も強力なツールとなるのです。

グラフィックソフトの操作というのは、かなりアナログ感が強いものです。手を動かして対象物を操り、加工していくという現実世界での作業感覚をそのままスクリーン内の二次元空間に持ち込んでいます。マウスを動かす身体的な動作が、そのままスクリーン上のキャンバスに反映されます。線をひいたり、オブジェクトを不定形に選択したり、ドラッグで移動したり、キャンバスを掌でスライドさせたり。つまり直接操作です。 グラフィックソフトでは、クリックする座標が1ピクセル違えば、それは異なる入力情報となります。その意味で、作業のある場面で取りうる行動は無数にあり、タスク全体で見れば操作手順はほとんど無限にあります。手順というものは無いも同然です。 グラフィックソフトで何かを作ろうと思った時、事前に操作の全ステップを計画することは無いでしょう。経験的に効率的な作業フェーズをイメージすることはあるでしょうが、次にどういう行動に出るかは、その時の対象物の状態から逐次判断されるのです。グラフィックソフトに限らず、ワープロで文章を書くなど創作系の不定形作業では皆そういう感覚がありますが、グラフィックソフトでは特に顕著です。 いってみればこのアナログ感が GUI のパラダイムなのですが、これをスポイルする手続きが頻繁に必要になるのも事実です。それは、メニュー選択やボタンのクリックです。これらは、作業の対象物に直接働きかけるための操作ではなく、提示された選択肢から目的に合う項目をデジタルに指定する間接的な操作です。だからこの手続きをキーボードショートカットで行うことで、タスク全体のフローは大きく効率化されるのです。 これは、マウスで選ぶよりもキーボードの方がいくらか速い、といったスピードベンチの話ではなく、作業に対する意識の純度の問題です。

僕が仕事で使っていたソフトは、もっぱら、QuarkXPress、Illustrator、Photoshop といったグラフィックソフトでした。ある日、新しく Dimensions というソフトを使おうとしたところ、使い方がよく分からなかったので、知り合いの DTP のベテランの人にオフィスに来てもらって、教えてもらうことになりました。 その人はオフィスに来ると、早速 Dimensions や Illustrator を使って何かのグラフィックを作る実演をしてくれました。僕はその様子を見て、驚愕してしまいました。なぜなら、その人の操作はあまりに速く、そして何をやっているのか全く分からなかったからです。 操作が早いといっても、マウスやキーボードを忙しく動かしているわけではありませんでした。むしろ僕に分かりやすいようにゆっくりと操作しているようにさえ見えました。ほとんど手を動かしていないんじゃないかというぐらい、最小限の動作しかしていないのです。 僕は画面上のマウスポインターの動きを一生懸命目で追っていましたが、それでも何をやっているのか分かりませんでした。手をほとんど動かしていないのに、作業はどんどん進んで行くのです。操作手順を覚えようと思っても、その作業から決まった手順のようなものは見えてこないのです。 僕はあることに気付きました。その人の左手は、常に親指をコマンドキーに乗せていて、それがホームポジションになっていました。そしてキーボードショートカットを多用しているのです。右手は常にマウスを持っていてアクセラレーションをうまく使って最小限の動きでターゲットの座標にポインターを移動します。この、マウスとショートカットの組み合わせを徹底して続けているようでした。僕は画面よりもその人の手の動きに着目しました。それは曲げわっぱ職人のように無駄がなく、優雅でした。 マウス操作とキーボードショートカットは交互に行われているようでした。対象物の選択はマウスで行い、それに対するコマンド実行はショートカットで行っているのでした。ショートカットのキーコンビネーションはほとんど手が覚えてしまってるようで、考えることなく指が動いていました。トランペットの奏者がドレミという音階を吹く時、それぞれの音の押さえ方を意識することなく、音程と指の形がダイレクトに一体化され、無意識的に運指がなされるのと同じ感じでした。コピー、ペースト、アンドゥ、ウィンドウを閉じる、ツールの切り替え、キャンセル、その他アプリケーションに用意されている基本的なコマンドは、マウスによる対象選択の後、ショートカットによって瞬時に実行されるのでした。 そういう操作で作業が進められると、第三者からは何をやっているのかさっぱり分からないのでした。

数年して、気がつくと、僕は Mac を道具にして広告などを作るグラフィックデザイナーになっていました。Mac を使って物を作るのは相変わらず楽しくて、徹夜も苦になりませんでした。 この楽しさはいったいどこから来るのだろう、というのが僕の疑問でした。機械の操作が楽しいという経験は、車と Mac だけでした。考えても理由が分からなかったので、恐らく、作った人にも分からない、何か偶然の産物なのだろうと勝手に思っていました。 オフィスには広告を出稿した掲載紙が沢山置いてありました。その頃のクライアントの多くはコンピュータ関係のベンダーやショップだったので、Mac 関係の雑誌もいろいろあり、僕はいつもそれらを隅々まで読んでいました。記事の中には時々、Mac の歴史みたいな解説があって、ダグラスエンゲルバートとかアランケイとかいった名前が登場していました。ただ、Mac の楽しさがどこから来るのかということについて端的に言い当てているものは見つかりませんでした。「Macの謎」という本があって、Mac の技術的な特徴について分かりやすく書いてあり、参考になりましたが、僕の謎はまだ解けませんでした。 僕の仕事は DTP で印刷物のデータを作ることだったので、組版とか印刷技術についてもそれなりに勉強しましたが、僕の興味の対象はどちらかというと、道具である Mac 自体の操作性に移っていきました。

それから僕は時々タームペーパーを書きに学校のコンピュータラボに行くようになりました。そこには Mac の部屋というのがあって、Mac ばかりが30台ぐらい置いてあり、自由に使うことができました。僕はそこでよく、ペイントソフトを使って、3時間ぐらいかけて壮大な点描画を描いたりしていました。とにかくMac を触るのが楽しかったのを記憶しています。 ところで、ペーパーを書くためにはワープロソフトを使うわけです。それまでいわゆるワープロ機は使ったことがありましたが、GUI 上のワープロを初めて使った時、奇妙なことに気付きました。 ワープロ機の画面では、カーソルというのがあって、タイプした文字の挿入ポイントを示しています。これは要するに、文字列というリニアな情報の中で自分の今の居場所を表していて、カセットテープの再生／録音ヘッドみたいな感じの役割に見えます。 GUI のワープロの画面にもIビームカーソルがあり、文字をタイプすればそこに挿入されるのですが、それとは別に、マウスポインターというのがあって、マウスを動かすと、カーソルの位置はそのままに、ポインターを任意の座標に移動できるのです。文字列中の好きな場所にポインターを合わせてクリックするとそこにカーソルが瞬時に移動します。が、クリックしなければ、カーソルは元の位置のままで、タイプすればそこに文字が入ります。その場合、ポインターを動かした操作は何の意味もなかったことになります。 これは一体どういうことだろうと最初は不思議に感じました。マウスポインターというのは、自分の居場所であるカーソルとは独立した存在で、好き勝手なところに移動でき、その操作が意味を持つのは、クリックという明示的なジェスチャをした時だけなのです。次に何をしようかとマウスをうろうろさせて、気が変わればそのまま何もしなくてよいのです。 そう考えると、自分の意識の所在というのは、カーソルではなくむしろマウスポインターの方にあるのだということに気付きました。何かをしたければクリックすればよいですし、何もしたくなければ放っておけばよいのです。 逆に言えば、いつでも好きなことを始められるということです。今は自分は何をすべきであるという決まりはなくて、単にこれから自分が何をするかということだけがあるのです。 これはなかなかの発見でした。