翻訳書、発売

去年末に翻訳書が発売された一冊。オライリーからインターフェイスデザインについての本は数冊でていますが、中でも一番具体的で速効性があるといえそうです。ajax以降のフロントエンドの使い勝手にフォーカスし、ケーススタディの集積から、系統だててデザインパターンとしてまとめあげたベスト・プラクティス集となっています。監訳者の浅野さん（http://blog.iaspectrum.net/）に献本いただきました。ありがとうございます！

本の内容について

「いずれデスクトップとウェブの境界はますますあいまいになってくるだろうが、それでもウェブでのリッチインタラクションを作ることには独特の特徴というものがある」と言う著者の一人、Bill Scott（http://looksgoodworkswell.blogspot.com/）は、Yahoo!在籍時代にYahoo! Design Pattern Libraryの一般公開に貢献した人物。共著のTheresa Neil（http://www.designgenie.org/）は、フリーランスのインターフェイスデザイナとのことです。

少しだけiPhoneやFlashによる実装の事例も含まれていますが、対象は主にPC向けサイトにおけるajaxを前提としたものといってよいでしょう。ロールオーバーが多用されてることや、画面サイズの差から考えても、ここに掲載されている手法はモバイルやiPhoneでは使えないことも多いはず。スマートフォンとi-modeブラウザ2.0搭載のDocomo端末をのぞくモバイルではJS使えないですしね。Flashの場合にも援用できますが、前提としている制約が違うかな、とは思いました。

使い勝手について、動作ロジックも含めてかなり細かく解説されていますが、具体的なデザイン手法やソースコードには触れていず、まさにユーザー・インターフェイスにフォーカスした内容になっています。少し前にとりあげたページングについても、カルーセル型も込みでばっちり規定されてました。素敵！

とりあげられているサイトは、メジャーで大勢の人に使われている今も動いているサイトが多いので、実際に触って確かめられるほか、デザイナー以外の人へ挙動を説明するのにも有用です。
またこれらを実際に多くの人が使っているということは、これらのユーザー・インターフェイスを学習しているともいえる訳で、この洗練ともいえる振る舞いや手法を、踏襲するにしてもしないにしても参考にせずにはいられないでしょう。
原書を持っていたのですが、素晴らしい和訳書を得た今、躊躇なく売るつもりですw

目次

• 第１原則　直接的なインターフェイスを作ろう
  • １章　ページ内編集
  • ２章　ドラッグアンドドロップ
  • ３章　直接的な選択
• 第２原則　軽快さを心がけよう
  • ４章　コンテキスト連動型ツール
• 第３原則　１ページで完結させよう
  • ５章　オーバーレイ
  • ６章　インレイ
  • ７章　バーチャルページ
  • ８章　プロセスフロー
• 第４原則　インビテーションを仕掛けよう
  • ９章　静的インビテーション
  • １０章　動的インビテーション
• 第５原則　トランジションを利用しよう
  • １１章　トランジションのパターン
  • １２章　トランジションの目的
• 第６原則　すばやく反応しよう
  • １３章　情報探索のパターン
  • １４章　フィードバックのパターン
• エピローグ

実現に向けて

読者対象としては、デザイナーやエンジニアをはじめ、企画職の方や、企業のご担当者などにも読んでいただきたいと思いますが、実現にあたっては、デザイナーが主導することが肝要です。具体的には用語ひとつ、機能ひとつ、実現したいこととインターフェイスの結びつきひとつにとってもデザイナーでない人の場合には齟齬が発生する可能性があって、それは専門ではないので当然のことともいえますが、そこは正しく、険がないようにw 矯正してあげることが必要です。

また自戒をこめて書きますが、実現にはデザインマターだけではなく、プロジェクトの座組みや進行に如何にきちんと組み込むか、にかかっているともいえそうです。具体的にはフロントエンドのスクリプトを誰が書くのかといったことや、作業負荷の見定め、システム会社との連携を如何にスムーズに行えるかが求められます。

ウォーターフォール型かアジャイル型かによっても違ってくると思いますが、できるだけプロジェクトの早い段階でこういったことをプロジェクトチーム内で共有し、実現できそうかどうかを見極めることが大事といえそうです。

ぜひ手にとって読んでみてください。

• O’Reilly Japan – デザイニング・ウェブインターフェース
• IA Spectrum: 監訳書『デザイニング・ウェブインターフェース』が発売されます

「デザイニング・インターフェイス」という書籍でこんな記述があります。

「直感的」という言葉は若干誤解を招きやすい。かつてジェフ・ラスキンは、われわれがソフトウェアの利用に関して「直感的」だと言う場合、実は「慣用的」だということを言わんとしているのだと指摘した。コンピュータの「マウス」は、それを一度も見たことがない人にとっては直感的ではない。

マッキントッシュに始まり、iPod、iPhoneへ連なるアップル製品を使いこなすユーザーが「直感的」ですばらしいと感じる時の「直感的」というのは実は「慣用的」ではないのか。

iPhoneのマルチモーダルでジェスチャーによる操作方法は、何も説明がない状態では、操作しようがないのではないだろうか（森公美子氏の例をひくまでもなく）。

横方向ジェスチャーのページング、縦方向ジェスチャーのスクロール、ともにPC上のUIでは必要な視覚的なナビゲーションのヒントが、iPhoneにはほとんどありません。ただ、一度ユーザーが操作方法を理解した後は操作方法が圧倒的に「直感的」で楽しいものとなっています。

これです。一番わかりやすいのがグーグルなどの検索サイトの検索結果ページに使用されるこんなナビゲーション（ページング）について書きます。

なぜページングなんてものを取り上げるのか

広く普及している割にはワーディングが揺れていたり、何を「ページング」と呼べるかが少し変化していると感じる部分と相変わらず変わっていない部分と両方を感じるからです。

定義

ここでいうページングとは以下の場合を指すものとします。

• ウェブにおいて、閲覧している画面解像度に対して一覧リストがある程度以上長くなってしまう場合に、閲覧上の負荷を下げる目的で複数ページに分割して表示する見せ方やそのナビゲーションのこと

また以下の場合を除くものとします。

• 一つの記事が画面サイズ長い場合に、編集的視点でページを複数に分割している場合のナビゲーション
• 一つのタスクが複数ページにわかれている場合（ショッピングサイトの購入フローなど）のナビゲーション

ちょっとわかりづらいかもしれないんですが、これらは分けて考える必要があると思います。除くものとしてリストしたものは、どちらかというとシーケンシャル（連続）型で、一つのコンテンツが便宜上複数ページに分かれているというものですね。並び順に意味があり、意味でページ分割されている。
ここで取り上げたいのは、いわゆる一覧リストがソートされて、文脈的ではなく機械的に複数ページへ分割されている場合のナビゲーションを対象としてみます。

ワーディング

ポピュラーに使われている割にはワーディングに揺れ幅があります。ページング（Paging）、ページネーション（Pagination）、ページャー（Pager）の３つに集約できるかと思います。UIをテーマにしている主要サイトでどういうワーディングや定義（定義がないものは問題点として記載されている内容）をしているか、リストしてみました。

ページング（Paging）

ソシオメディアの定義

一連の情報が複数ページにまたがる場合、ページを送るためのリンクを表示する。

Welie.comの定義

Users need to browse through a large list of items looking for the item that interests them most.

blink design libraryの定義

most web-based systems seem to bump into performance limits that prevent implementing infinite scrolling. And so some amount of paging navigation is usually required.

ページネーション（Pagination）

UI Patternsの定義

The user needs to view a subset of sorted data that is not easily displayed on one page.

Yahoo! Design Pattern Libraryの定義

The user needs to view a subset of data that will not be easy to display within a single page.

Konigiの定義

(not available)

あるjQuery pluginの名称

When you have a a large list of items (e.g. search results or news articles),
you can display them grouped in pages and present navigational elements to move
from one page to another.

ページャー（Pager）

あるjQuery pluginの名称

(not available)

あるPHPライブラリーの名称

(not available)

どれが一番ふさわしいのか

定義でいうとWelie.comかblink design libraryが個人的な見解と近いです。UIPatternsやYahoo!で定義されているような「１ページに表示するのが困難」だけが理由ではないと思うからです（理由は後述）。
ワーディングでいうと英語圏ではPaginationが最も通りがいい印象ですが、和製英語としてのページネーションという言葉は、日本ではDTP用語としての印象が強い（鈴木一誌氏の「ページネーションのための基本マニュアル(pdfファイル)」）。元の英語の意味だった「ページ番号をふる」という意味から、「複数ページに渡る組版ルール」へと日本では意味が独自に拡張されていった経緯があることは、ご本人が著書「ページと力」で書かれている通り。

ページャーもしくはpagerで検索すると同時に使われている検索ワードとしてphp、cakephp、symfony、pear、smartyなどphp界隈のものが多いのでphp界ではこの言い方がポピュラーなんでしょうかね。またページャーといえば英語的にはポケットベルのこと。

以上のようなことを考慮して、ここでは一番無難そうな「ページング」と呼ぶことにします。

ページを分割する理由

「閲覧している画面解像度に対してある程度以上ページが長くなってしまう」という問題以外にも、ダウンロードにかかる時間の問題というのもあると思います。実際、オフラインデータを対象とするクライアント・アプリではどんなにスクロールが長くなってもページングしないものがほとんどではないかと。
iTunesでいうとローカルに保存しているライブラリファイルをブラウズする際にはページングしませんが、オンライン前提のiTunes Storeではページングがほぼすべてのページで使われているのがわかりやすい例です。
そう考えると（クライアントアプリやその他オフラインで完結するシステムではなくて）ウェブサイトでのみ分割する理由があるといえそうです。

何を「ページング」と呼べるか

最近よくみかける主にダッシュボード型ページや、関連リンクのような形でリストされるインライン型のものを含むのか含まないのか、という点が気になります。

上記サイトの中で明示的にこれをページングに含んでいるのはkonigi.comのみですね（iTunes Pagination）。ちょっと判断が難しいかなと思います。理由を次の項目で書きます。

ユーザーのモチベーション

1. 「該当する一つを探し出したい（例えば書名を知っている本を探したい）」ような場合
2. 「なんとなく探したいものが決まっているが、いいものがないか探しながら見つけたい」ような場合

ではユーザーのモチベーションがだいぶ異なります。

「該当する一つを探し出したい（例えば書名を知っている本を探したい）」ような場合

何十ページにもページングされた検索結果が出ている場合、例えば50ページに分割されてリストが表示されている際に、その中の25ページ目を見せるリンクって本当に必要かというと必ずしもそうではないのではないか、と思います。せいぜい

• 前後ページへの移動リンク
• 一番前のページへの移動リンク
• 全体の件数と今見ている項目の順番

程度でいいのではないでしょうか。必要なたった一つの項目を見つけるためには、ページングでリンクをたくさん出すことよりも、むしろデータの絞り込みやソート機能を充実させることで、データをより絞り込める方が重要だったりするのではないでしょうか。データベースの項目はライブサイトであればそうカンタンに増やせないでしょうが、一つの項目の取りうる値の幅をパラメータ化するなどといったこともできるかと思います。

「なんとなく探したいものが決まっているが、いいものがないか探しながら見つけたい」ような場合

この場合は、そもそもデータベースを隅から隅まで見せるUIの必要性は低く、例えばiLike.com（アーティストレーティング、ユーザーブラウズ）ではページングをあえて出していず、「もっと見る」というリンク一つのみという潔さ。このような場合には、ページングを出して隅から隅まで見ることを強制するよりも、リコメンデーション的にセレクトされた結果を感覚的に見せてあげる方がよりスマートだと思います。
インライン型のものをページングに含めるかどうかは、インライン型がまさにこれに含まれるから、です。

ブラウザとサイトでのUI役割分担

ブラウザが担うUIと、個別にサイトが担うUIの役割分担が、ブラウザの進化があって整理されてきていて、文字サイズの拡大縮小機能はサイトが個別に個別の使い勝手を持って実装するものではなく、ブラウザ側で（文字サイズだけではなく）画面全体を対象とする拡大縮小機能がIE7以降についたことで解決済みですが、ページングももしかしたら本来的にはブラウザ側で解決すべきものかもしれない。
サイトごとにブラウザの挙動をカスタマイズできるGreaseMonkeyのAutoPagerizeは、現実解として発明に近い。
ある一定の書式で書けばAutoPagerizeに対応する訳ですから、統一した書式が策定できるならばブラウザ側でそういった仕組みを実装することも不可能ではないはず、ではあります。
現時点で問題となる、そもそもリテラシー高い人しか知らないし使ってないとか対応ブラウザが限られている、といった点も解消されそうなんですけどね。

昨日知ったんだけどすごいすごい。ソフトバンクって、ソフトで独自かつ良いサービスやってて、そこは好感もてます。ほかに気になるサービスは以下に。

• ホットステータス
• おしらべダイヤル*111
• Yahoo! mocoa

Yahoo!mocoaなんてまさに理想的。使うメーラーが異なってもメールのやり取りができるように、メッセンジャーも相互乗り入れすればいいのにな。

家庭用ビデオゲームと携帯型ゲーム機器にひとまず限定しますが、ゲームすることに人は何を求めるか、これを「楽しみたいから」とひとまずざっくり定義するとします。

その「楽しさ」はどこから来るのだろうと考えると、

• 変身願望。
• 身体能力が拡張される感じ。
• 実体験を思い出す。
• ニュートン的実世界での経験を思い出す。
• 勝ち負けを競う。
• 誰か仲の良い人と一緒にプレイすると楽しい。
• 音楽。
• インタラクション。
• 知的好奇心

と概念のレイヤーが揃っていなくて、順番にも意味なくて、申し訳ないですが、とりあえず思いつくまま書いてみました。

でゲームを取り巻くあらゆる環境は、その「楽しさ」を追求する方向に向かうべきと考えると、マンマシンインターフェイス部分の一部であるコントローラって非常に重要なんだと改めて思った次第

PS3で楽しそうにプレイする人たちのシーンがプロモーションに登場しないのは、実に象徴的で対照的だなと思います。

某ゲーム・ポータルサイトをデザインする時に「楽しさのデザインとは？」をちょっと考えてみたりしたんですが、時間もないので勉強としては、ゲーマーがゲーム開発者にインタビューしてる本を１冊読むことぐらいしか出来なかったのが残念。サイト探し回ったり、書店街に資料をブラウズしに行ったり、資料として絵本や写真集は１万円強ぐらい身銭を切って購入したり、ということはしていますが…。あとは自分ヒューリスティック法で。あ、個人的にヒューリスティック法というヤツにはやや懐疑的な印象を持ってます。All Aboutとか。

最近読んだ「デザイン言語2.0 インタラクションの思考法」に、元セガの水口氏の講義録が載っているのですが、非常に興味深いです。

メディア美学（メディアをどのように美しいもの、気持ちの良いものにしていくか）を大学で専攻したそうで、それとマーシャル・マクルーハンの思想（「メディア論」とか）が自分のベースにあるのだといいます。

で、実証実験の面白いデータも紹介されていて、

• 60フレーム／秒の映像を見せると人間はリアルだと感じる。それ以上100フレーム／秒まで、脳波と血圧の値は横ばいらしい。
• 人間の視野を10％から100％まで広げていくと、60％ぐらいで脳波と血圧の値が上がる実験結果があるらしい。
• この二つを総合すると、60フレーム／秒＆視野60％を覆うと、人間はリアルと感じ、没頭するということになります。

知りたかった、制作者たちの「楽しさ」の演出のノウハウ的な所では、「楽しさ」やインタラクションの取材などを終えていざ制作を始めると、スタッフの間で「気持ち良い」ことを議論するロジックやボキャブラリの少なさに気づいたそうです。で、説明できない本能の理由を、共有できるよう言語化／統計化していったそうです。どう言語化／統計化したかは企業秘密かあんまり語られてはいませんが以下はその例。

コール＆レスポンスの繰り返しによって連続的な面白さを感じると、人間はその行為を繰り返す。そしてレスポンスの際に、ビジュアル／サウンド／バイブレーションといった刺激を強めたり変化させていくと、まるで感情が化学反応を起こすに循環がスパイラル状に上昇しはじめるらしい。

その他「映画で泣けるのにゲームで泣けないのは何故だろう？」とか示唆に富んだ話も載ってます。何故だと思いますか？

あ、この本は読む前には割とアカデミックで頭でっかちな本かなと思ってたんですが、すべて作り手の経験と実例に基づいている講義録なので、非常に面白いし、身になります。タイトルに「2.0」と入ってしまってこのタイミング（今年４月末）で出版されたので「ウェブ進化論」とかと書店で並べられちゃったりしてますが。

ここ10年以上「時間がもったいない」という理由でゲームから意識的に遠ざかっていました。パラッパラッパーとか、PS出た当時は少しやりましたが。あとドラクエは全作ぐらいかな。最近は特に意識的にゲームするようになってきてます。そのきっかけは「逆転裁判」と某ゲーム・ポータルサイトの仕事なのですが。「逆転裁判」は携帯で始めて、その後GBA、DS Liteと繋がっていったのは、うーん、今日的ですね。

という訳で、何が言いたいかというと、大神は必ず買いますということです（違）。

ウェブの方へエスキースする事はまだ止めておいて、後日もっとちゃんとまとめたいです。少なくとも、

• コントローラ以外でゲームの「楽しさ」を演出するもの
• ゲーム以外のメディアでの「楽しさ」のデザインとは？

辺りは盛り込みつつ。
書きながら考えるし、書いたらさっさとパブリッシュしたいのでひとまず。