【新版】UI GRAPHICS 成功事例と思想から学ぶ、これからのインターフェイスデザインとUX

10/19/2018

【新版】UI GRAPHICS 成功事例と思想から学ぶ、これからのインターフェイスデザインとUX に「思考とジェスチャーとのあいだの微細なインタラクションがマインドをつくる」というテキストを寄稿しました．また，2015年版から「メタファー、ボタン、テクスチャ、色面、ピクセル」と「GUI の歴史：インターフェイスは常に身体の中にあった…」の二つのテキストが再録されています．

書き下ろしの目次

・Apple が目指す「流れるインターフェイス」 | 安藤剛

・思考とジェスチャーとのあいだの微細なインタラクションがマインドをつくる | 水野勝仁

・個人的なインタラクション | 萩原俊矢

・ユーザーのウェルビーイングのためのUI/UX | ドミニク・チェン

・導線としての制約を作る | 菅俊一

・動きとUI デザイン | 鹿野護

・話法について | 有馬トモユキ

・UI の外在化とメタハードウェア | 渡邊恵太

・世界観への期待を創るUI デザインとエクスペリエンサビリティを向上するUX | 須齋佑紀／津﨑将氏

目次を見ると気になる著者名とタイトルがずらりと並んでいて，私自身もこれらから読むのが楽しみです😊

今回，私が書くことになったテキストの最初の構想を編集の庄野祐輔さんに送ったメールの一部をここに置いておきます．

インターフェイスの移り変わりは本当にはやいですね．

現在，インターフェイスで興味があるのは，周回遅れの感じがありますが，Apple Pencilで書くことです．正確に言うと，Apple Pencilでいくら書いても，そこにあるのはiPad Proの一枚のディスプレイということでしょうか．私は何を一体書いているのだろうということです．

でも，これだと今回の趣旨に合わないなと思っていたところで，今回のWWDC18でAppleが「Designing Fuild Interfaces」という発表しました．そのなかに「A tool that feels like an extension of your mind」という言葉があって，さらに「Interface that extend our minds」とありました．これ見たときに，もう「extension of your body」ではないのだなと思いました．マクルーハンの「内爆発」ともちがうことが起こっている．しかも，この発表は「指」しか出てこない．

前回の「GUIの歴史」の最後にこのように書きました．

しかし，スキューモーフィズムは「ディスプレイの世界は現実とは異なるものだ」ということを明らかにしてしまった．グラフィックがいかにリッチになろうともそれはピクセルの光であり，指が触れるのガラスでしかないのである．スキューモーフィズムの急進性が現実と切り離された「フラットデザイン」という反動を産んだといえる．フラットデザインは，スケッチパッドからはじまり，マウス，デスクトップメタファー，そしてスキューモーフィズムへと続く身体に基づくインターフェイスの流れを一度切断して，身体とは関係ないディスプレイのピクセルという光からインターフェイスを構築しようとする全くあたらしい試みである．ここではもう「私たちがデザインしようとしているインターフェイスはすでに身体の中にあるのだ」とは言えない．私たちはインターフェイスデザインのあたらしい局面を迎えているのである．

インターフェイスは身体を参照にしていたけれど，それはとっくの昔に身体から抜け出て，私たちの「マインド」に沿うインターフェイスになっているということが，「Designing Fuild Interfaces」を起点に書けたらいいかなと考えました．どうでしょうか？

「「Redirectable UI」という考え方」というnoteの記事にこれに関連したことが書かれています．このテキストはデザイン寄りですが，私はこれまでのようにヒトとコンピュータとの歴史のなかでの「Interface that extend our minds」ということを考えたいと思っています．「マインド」を変えることは，世界の捉え方，世界そのものを変えていくことなのだと，私は考えています．

このブログの人気の投稿

マジック・メモ：行為＝痕跡＝イメージの解体可能性

1/03/2010

フロイトは，自らの記憶と知覚のメカニズムに関する仮説のために，当時，売り出されていた玩具である，マジック・メモという装置を取りあげた．その理由は，この装置のイメージを表示する表面が，「いつでも新たな受け入れ能力を提供すると同時に，記録したメモの持続的な痕跡を維持するという二つの能力を備えている」2-11) からであった．フロイトは，「情報を無限に受け入れる能力と，持続的な痕跡の保存は，互いに排除しあう特性」2-12) と考えていたが，マジック・メモは，その相反する能力を同時に実現する装置であり，その構造は，次のように記されている．このマジック・メモは，暗褐色の合成樹脂あるいはワックスのボードに，厚紙の縁をつけたものである．ボードの上を一枚の透明なカバー・シートが覆っていて，その上端がボードに固定されている．このカバー・シートは，固定されている部分を除いて，ボードから離れている．この小さな装置でもっとも興味深いのは，このカバー・シートの部分である．このカバー・シートは二枚のシートで構成され，シートは二カ所の末端部分を除くと，互いに離すことができる．上のシートは透明なセルロイドである．下のシートは半透明の薄いパラフィン紙である．この装置を使用しない時にはパラフィン紙の下の面は，ワックス・ボードの上の表面に軽く粘着している．2-13) ここから，マジック・メモについてわかることは，大きく分けて，ワックス・ボードとカバー・シートという二つの部分から，この装置が構成されているということである．そして，カバー・シートは，透明なセルロイドの層と半透明の薄いパラフィン紙から構成されているので，全体としては，三層構造の装置ということになる．フロイトは，次に，この装置を使用するプロセスを詳細に述べている．このマジック・メモを使う際には，ボードを覆ったカバー・シートのセルロイドのシートの部分にメモを書く．そのためには鉛筆もチョークも不要である．受け入れ表面の上になにか物質を沈着させて記録を残すのではないからである．マジック・メモは，古代において粘土板や鑞盤に記録したのと同じ方式を採用しているのであり，尖筆のようなもので表面を引っ掻くと，表面がへこみ，これが「記録」となるのである．マジック・メモではこの引っ掻く動作は直接行われるのではなく，ボードを覆った二枚のシートを介して行われる

iPhoneのtumblr公式アプリには［GIF］ボタンがある．こんな感じのやつ．これがとても気になる．［GIF］ボタンこの［GIF］ボタンを押さないと，アニメーションが再生されない．GIFアニメーションが勝手に再生されないから，ちょっと調子が狂う．ひと目で「GIF」だということはわかるけれども，勝手に「再生」されないというか動いていないので，［GIF］ボタンをタッチしてようやくアニメーションを楽しむことができる． GIFアニメーション以外の動画には［▷］ボタンがついている．［▷］ボタン GIFアニメーションは他の動画とは「違う」ことになるが，ボタンを押さないと「動画」を楽しめないという点では同じになっている．GIFアニメーションは［GIF］ボタンを押すとその場で「再生」されるのに対して，他の動画はページが遷移する．その場で動くGIFアニメ画面遷移その場で動くから［GIF］ボタンにしたのかもしれないし，ボタンを押した後は短い映像が延々とループするから，YouTubeに上がっている映像などとは区別したかったのかもしれないけれど，GIFアニメーションを見るためにいちいちボタンを押すのは，なんか納得がいかない．GIFアニメは画面に現れた時点で，有無をいわさず動いていて，それも延々とループしていてなんとなくウザイ感じがいいのに，再生のためにユーザにお伺いを立てるGIFアニメーションなんて，GIFじゃない．しかし，tumblrはなぜに［GIF］ボタンを設置したのか？　素人考えでは，iPhoneの限られた処理能力をやりくりするためだとは思うけれど，もっと深遠な理由があるのかもしれない．なんといってもtumblrである．画像流通に関して大きな変革を遂行しているともいえるtumblrが，なぜにGIFボタンを設置したのか．あまりにもGIFアニメがウザイとクレームが来たのか．それとも「動画」としてカテゴライズさせたかったのか，そうだとするとなぜ［▷］ボタンにしないかったのか．［▷］を押して，GIFアニメーションだったときのガッカリ感を軽減するためのなのか． tumblrのダッシュボードを流れてくるGIFアニメーション．パソコンで見るときには，流れてきて画面内に入ってきた時には，既に再生・ループしている．ちょっと

デスクトップ・メタファーと「ディスプレイ行為」　

3/12/2010

ここで，デスクトップ・メタファーが生み出されたパロアルト研究所に考察の対象を移したい．なぜなら，この研究所において，ディスプレイ上の対象物を指さすための道具であったマウスに，次々に新たな行為が付け加えられることになるからである．パロアルト研究所では，1973年に，アルト（図4-4）と呼ばれるシステムが開発された．アルトは，アラン・ケイや，バトラー・ランプソン，チャールズ・サッカーが中心となって開発された実験的なワークステーションであり，その大きな特徴は，ディスプレイ上のピクセルがメインメモリのビットに対応するビットマップ方式を採用していたことである．この決定は，ヒトが環境の情報を最も捉えることができる視覚を重視したインターフェイスを提供することが，マシンとソフトウェアの最大の目的であるという開発者たちの認識から導かれたものであった．そして，アルトのインターフェイスでもうひとつ重要なことは，ポインティング・デバイスとして，マウスが採用されたことである．当時，マウスは，入力デバイスとしては馴染みの薄いものであったが，スチュワート・カードによる実験によって，マウスが，ディスプレイ上の対象を指示するのに最も適したデバイスということになり，標準装備されることになった．4-42) 視覚重視の考えと，ヒトの手の原初的な感覚をコンピュータに持ち込むマウスという道具が，アルトというワークステーションで出会うことになる．図4-4 ゼロックス社アルト視覚重視のアルトは，ディスプレイ上のイメージを自由に表示することができた．このことは，ディスプレイ上のイメージが示すアフォーダンスの直接的な知覚に基づく指さし選択行為とマウスとの関係に影響を与えた．エンゲルバートのシステムでは，マウス・カーソルのイメージは，単なる点であった．しかし，アルトでは，カーソルの形は，矢印（→）になる．カーソルの形が，矢印ではなく点であっても，ディスプレイ上のイメージを指さす選択行為を遂行することはできる．では，なぜ形が変わったのか．それは，ディスプレイ上のイメージを自由に表示できるようになっために，指さし選択行為の遂行に，より適したアフォーダンスを示すイメージを表示するようになったと考えることができる．ここでは，身体的行為を導くアフォーダンスとディスプレイ上のイメージが導くアフォーダ

各世代の動きをとめてしまう「ベタさ」でしか「インターネットおじさん」を考えることができない

1/25/2014

中川康雄さんの「インターネットおじさんとデジタルネイティブ第二世代との間に横たわるもの〜ポスト・インターネットと世代論〜」がとても興味深かったので，それに乗っかって「インターネットおじさん」について書こうと思ったのだけれど，上のテキストにすべて言われている感じがして頭真っ白状態です．中川さんのテキストで，世代の同期のエッジにインターネットおじさんがいて，世代間の「イミグラント」性がインターネットおじさんを「おじさん」にしていると指摘しているところは，「そうだったのか！」と思わず膝を打ったところ．僕は1977年生まれだから，デジタル・ネイティブではなくて，インターネットの第一世代よりも少し下のような感じ．その視点から上のテキストとは異なることを考えようとするインターネットおじさんの「身体」の強さとかいういかにも的な枠組みしか出てこない．それでは「インターネットおじさん」をつまらなくしてしまうという感じがする．エッジで同期するリアルな身体としての「インターネットおじさん」．これはもう言われている．これだけでもういい感じがすると思っているなかで粘ってみていると，「白タイツ」という衣装が肝なんではないかと思った．なぜに「白タイツ」．白タイツゆえに強調される身体と言ってしまうと，「身体性」といったベタな話しなってしまう．白タイツゆえに消える「身体性」というのもベタか．結局，「インターネットおじさん」に関してベタな捉え方しかできないというところが，僕の限界なのでしょう．世代間の同期を考えようとしてそのズレを認識できずに，各世代の動きをとめてしまう「ベタさ」でしか「インターネットおじさん」を考えることができない．開き直って，こうした「ベタさ」から「インターネットおじさん」って生まれたのではないのかなと仮定してみる．インターネットにおける複数の世代のあいだで強制的に同期をとるためにリアルな身体を「ベタ」に導入した結果，その思惑通りに世代間のズレを停止させる「インターネットおじさん」が生まれたと考えてみる．ここでの「おじさん」は中川さんが指摘しているようなイミグラント性をもつものではなく，単に親戚や地域の「おじさん」のようなリアルな身体をもつという意味でしかないです（こういったところに出てくる「身体」，困ったときの「身体（性）」です）．そのリアル

画面分割と認知に関するメモ

2/05/2011

画面分割についてのスライドを作っていて，アメリカのドラマ「24」が初期のころはよく画面分割を使って緊迫感をだしていたのに，その手法が徐々に使われなくなっていたことを Wikipedia で知る．なぜだろうと思いつつ，マイク・フィグスの「時代×４ [About Time 2] 」を見る．これは４分割された画面で同時に物語が進んでいく短編映画で，「 10 Minutes Older 」というオムニバスの映画のひとつである．画面を４分割して，物語で進んでいくと，段々のそこで起こっていること全てを認知することが難しくなり，認知限界を超えることを実感した．「24」は，リアルタイムという軸があるから，ために画面が分割されても，それは空間的に離れているところで「同時に」物事が起こっていることを示すために有効だが，そこで「リアルタイム」という軸が外れてしまうと，見ているヒトは分割された画面の関係性が分からなくなってしまうのではないだろうか．そこで，「24」で画面分割が使われなくなったことには，認知限界が関係しているのではということを考えた． 24 時代×４[About Time 2] レフ・マノヴィッチが画面分割はユーザ・インターフェイスの「GUI」からの影響であると指摘している．「ひとつのスクリーンにひとつのイメージ」というのが画面構成の論理であったが， GUI を構成する要素であるビットマップ方式のディスプレイがこの論理を破綻させたと，マノヴィッチは考えている．ビットマップ以前に，映画では電話をかける場面などで画面分割を行っていたが，大々的には行われていなかったとはいえるので，マノヴィッチの指摘には賛成である．そして，画面分割を「空間的モンタージュ」と呼び，これまでの「時間的モンタージュ」に変わるものだとし，「空間的モンタージュ」は，GUI の画面を占拠して，そこでは何も消えることがない「記憶」の場として機能していると，マノビッチは考える． my desktop マルチウィンドウシステムにもつながる，パーソナル・コンピュータの大元のアイデアであるヴァネバー・ブッシュのメメックスは２画面を備えた装置として描かれている．メメックスは増大する情報量に対処するために作られた装置であった．ブッシュは膨大な情報に対するヒトの認知限界を考え，メメックスを開発

マウスとカーソル：カーソルによる選択行為

3/11/2010

コンピュータのディスプレイで表現されている世界は，現実の世界ではないという単純な事実を考えなければならない．そこは，もともと，コンピュータが複雑な論理計算を瞬時に行って表示しているものにすぎない論理の世界であったはずである．そして，論理の世界は，ヒトの身体を排除しているものとして，レイコフとジョンソンが批判したものである．4-21) この事実は，コンピュータによって作り出されるディスプレイ世界には，元来，メタファーの基盤となるヒトの身体が存在していなかったことを示しているのではないか．しかし，レイコフとジョンソン，楠見，久保田の説明では，コンピュータの論理の世界に，いつ，どのようにして，私たちの身体が入り込んでいったのかということは考えられていない．ここから，ヒトの身体が，コンピュータとのコミュニケーションに入り込んでいくプロセスを詳しくみていく必要がでてくる．そして，そこには論理の世界にメタファーが立ち上がっていく様を捉えるという興味深い問題がでてくるはずである．メタファー形成の基盤となるイメージ・スキーマは，基本レベルの行為の繰り返しによって生じるものであるから，身体経験の基本レベルとコンピュータとの関係から考察していかなければならない．よって，私たちが，デスクトップ・メタファーについて，はじめに考えるべきことは，このメタファーが生み出される前に，ヒトの身体経験がその基本レベルで．コンピュータの論理世界に何らかのかたちで入り込んでいたのではないか，ということになる．この問題への手がかりを，シェリー・タークルは与えてくれる．彼女は，デスクトップ・メタファーを一般化したマッキントッシュのインターフェイスについて，次のように書いている．マッキントッシュのインターフェイス──実際はその画面──は，実物の机をシミュレートしている．私のアップルⅡの CP/M システム4-22) のような，論理的コマンドで操作される論理的インターフェイスではなく，たとえ二次元とはいえ，ヴァーチャル・リアリティだったのだ．この世界では，空間を進むのと同じように情報の中を進む．実際，マウスを手にして平面上で動かせば，その物理的な動きが，通常は矢印か指の形である指示アイコンによって，画面に反映されるのがわかるだろう．4-23) このタークルの記述には，「論理的コマンドで操作される論理的イ

ラファエル・ローゼンダールの「ガスのような作品」

7/21/2013

昨日，川崎市民ミュージアムでラファエル・ローゼンダールとインターネット・リアリティ研究会でのトークをしてきました．トークに来てくれた方ありがとうございました！トークはとても興味深いものでうまくまとめて紹介したいのですが，自分も登壇者だったのですべてをまとめる余裕がないので，トークの紹介というよりもトークで自分が気になったことろ及びローゼンダールの展示から考えたことを書いていきたいと思います．展覧会でローゼンダールが展示していたのは《 looking at something 》でした．ネットでも体験してもらえるとすぐにわかるのですが，カーソルやタッチのインタラクションに応じてブラウザに表示されている天気が「晴れ」や「雨」，「雷雨」に変わるというものです．展示は３つの画面がプロジェクションされていて，それぞれを映像の正面に置かれた展示台上の「トラックパッド」でコントロールするというものでした．インスタレーションとネット上の作品のちがいは画面の大きさやその数などありますが，「カーソルの有無」が個人的にはとても気になりました．インスタレーション版ではカーソルはありませんが，ネット版ではパソコンで体験するとカーソルがあって，スマートフォンではカーソルはありません．スマートフォンで体験パソコンで体験自分のなかではカーソルがあるパソコンでの体験が一番作品とインタラクションを行なっている感じがします．自分の指の行為がカーソルに反映され，それがしっかりと「カーソル」の位置として見えているからなのだと思います．カーソルがないタイプだとスマートフォンの方がよりインタラクトの度合いが深いかなという感じです．インスタレーション版は，プロジェクションされた画面とトラックパッドとのあいだの距離があり，自分で動かしているのは確かなのだけれども，そこには本当に自分が画面をコントロールしているのかという小さな疑念みたいなものが浮かんでくるというか，インタラクションで「自分と画面とがつながる」，インタラクションの研究者・渡邊恵太の言葉でいうと「帰属感」を感じるまでにわずかに微小な時間のズレがあるという感じです．インタラクション版に感じたズレが「悪い」というわけではなくて，作品を体験する環境によって微妙に

中途半端な存在｜カーソル｜コンピュータの身体性

6/20/2010

カーソルって，中途半端な存在なんですよね．映像なんだけど，映像とはみなされない．動画を再生するときは，脇に避けられる．動きがカクると，不安に思われる．画面の中にありつつ，自分自身の身体の一つのような存在．みんなが当たり前に受け入れているだけど，それが何なのか，ちゃんと理解されていません．コンピュータの身体性を語る上で，カーソルには重要な秘密が隠されていると感じます．(p.77) exonemo's view「カーソル」in Web Designing Vol.108 カーソルについて考えてきたけれど，こう言われてしまって，しかもそれを作品として具体化させられては，もう何も言えない．けど，何か考えて，書かなければならない．エキソニモも言っているように，私たちはカーソルが何なのかちゃんと理解していないのだ．カーソルはマウスというモノと密接に結びついていると同時に，画面上の位置情報を表すために映像化されたデータでもある．カーソルは映像でありながら，マウスというモノとつながり，位置情報というデータともつながっている．モノとデータと映像とを行ったり来たりするような「中途半端な存在」としてあり続けるカーソル．「中途半端な存在」であるカーソルを考えることで，「コンピュータの身体性」が見えてくるのではないだろうか．エキソニモのカーソルの巡る作品を考えることで，カーソルとは何かを考えることはとても重要だと思う．それは「コンピュータの身体性」を考えること．人間，ヒトの身体性ではなく，コンピュータの身体性．私は今まで，コンピュータに触れる際のヒトの身体性について，マウスとカーソルのつながりを中心に考えてきた．カーソルはデスクトップ・メタファーの中で，ヒトの身体性をコンピュータの論理空間の中に持ち込むような機能を果たしてきた，と私は考えた．なぜなら，カーソルはヒトが世界を把握するためのメタファーの中で，そのメタファーに属さない存在であると同時に，デスクトップ・メタファーでコンピュータが機能するために必要な成立させる指さしという行為を遂行する存在としてあるからだ．つまり，カーソルはヒトとコンピュータとの「あいだ」にあるような「中途半端な存在」である．カーソルは今まで当たり前にあったけれど，iPad にはない．カーソルなしのコンピュータ体験も普通になっていく（かもしれ

このブログを検索

touch-touch-touch