ハイブリッドチャットUI

LOHACOのAI「マナミさん」すごすぎ。6.5人分の人件費を削減した実例公開 - BITA デジマラボ」という記事を見てどんなもんだろうと思ってLOHACOのマナミさんを見てみた。要するにFAQやマニュアルの検索に対話型インターフェイスをかぶせたようなものなんだけど、アバターからレスポンスが即座に、適度な量返ってきて、やりとりの中で欲しい情報への絞込が自然に行えるようなものになっていれば、大げさな技術がなくてもたしかに効果ありそうだなーと感心した。

もうひとつ感心したのはチャット風の吹き出しメッセージとボタンなどのGUIが混在した独特のUIになっているところで、チャットベースだからって全部テキストで指示するんじゃなくて状況に応じたGUIが提示できるようになってればいいわけで、これもこういうのでいいんだなーと思った。

チャットボットAPIもこういうふうになっていくのかなーと思って試しにイメージをつくってみたんだけど、

スマホサイトでLINE風の幅可変ページを作成する | Creator Clip」を改変

調べてみたらふつうにFacebook Messenger PlatformにはボタンとかカードのUIを表示する仕組み(Structured Template)があった。そりゃそうか。

Send API Reference - Messenger Platform


水野 勝仁ほか『UI GRAPHICS ―世界の成功事例から学ぶ、スマホ以降のインターフェイスデザイン』を読んだ

UI GRAPHICS ―世界の成功事例から学ぶ、スマホ以降のインターフェイスデザイン
水野 勝仁 深津 貴之 渡邊 恵太 菅 俊一 緒方 壽人 iA 鹿野 護 森田 考陽
ビー・エヌ・エヌ新社 (2015-12-17)
売り上げランキング: 16,171

BNNお得意のデザインスタイルブックに、スマートフォンの全世界的な普及とともにドラスティックな変化を遂げているインターフェイスデザインの潮流を思想面から補う論考が添えられた、フレッシュさが際立つかっこいい本だった。HOW TOじゃなくて、いままさに起きている変化を伝えようとしている、本というよりは雑誌の特集のような内容(雑誌『MASSAGE』の編集者庄野祐輔が編集されているからかな)。こういう本に中学とか高校生のころに触れるとやられてしまうんじゃないかな。


デスクトップのスクリーンショットをデスクトップの壁紙にする

第9回。これまで授業で扱ってきた変数、制御構造、関数などのプログラムの機能を組織的に使うことで、ユーザーの操作にたいして一定のふるまいをするユーザーインターフェイスを作ることができる、というレクチャーの前段として、グラフィックユーザーインターフェイスと呼ばれるものの概要とその恣意性の話をして、その体験として「いまのデスクトップの状態をスクリーンショットとして保存して、その画像をデスクトップの壁紙に設定し、その後の作業をする」というのをやってもらった。これ昔から気に入って授業で学生にやってもらうやつで、「本物」のウインドウやアイコンと、壁紙の画像であるウインドウやアイコンが、まったく区別がつかない状態で混在する状態で作業してもらうと、ものすごくクラクラ&イライラするというもの。

UIの身体性の話の延長で『融けるデザイン』を紹介してVisual Hapticsを体験してもらったり、アートサイドの参照としてexonemoの「断末魔ウス」を紹介したりした。


グロナビ

愚痴ぽいやつ。

Webは経験あるけどアプリは初めてですというディレクターとアプリのUIを決めていると、彼らがいわゆるグロナビ(全ての画面に共通で存在して好きなタイミングで主要機能にアクセスできるグローバルナビゲーション)をヘッダとかフッタに置きたがることがよくある。そういうのもできるけどアプリのナビゲーションの原則から外れるからデメリットが大きいしUIに矛盾も生じやすい、アプリの開発上この部分が決まらないと(進行がウォーターフォールだったりするので)手戻りが発生して工期的なリスクが高いからアプリの標準的なUIに寄せてほしいと伝えて納得の上で決めてもらい、開発に入ってしばらく猛烈にコーディングを進めたあと仕様書を見るとグロナビが元に戻っている、みたいな。

いろいろ原因はあるだろうけど、結局同じツール(excelで画面遷移図とワイヤーフレームをつくるみたいな)で設計するのが(特に経験ないときに)よくないのかな。どれだけ時間なくても数時間もらってペーパープロトで触ってもらうフェーズを設けるほうがよさそう。


UIを流用するUI

以前iOSアプリを開発したときはまだiPhone6が発売されていなかった(し、iPhone6のネイティブ対応もまだしていない)ので、iPhone6系もターゲットにした開発は今回が初めてになる。デザインを組み込む段になって、さてSlicyは@3xの画像書き出しに対応したのかなと思って見てみると、PhotoShopCC2014がアセット生成に対応したのでそっちを使えということになったらしい。PsCCでのアセット生成の方法もSlicy譲りというか、画像に書き出したいレイヤーやグループの名前を「xxxx.png」などの定形にすることで自動的に認識されアセットフォルダに書き出される仕組みのよう。フォルダと解像度の指定も空レイヤーやグループの名前に書いて認識させる。

むかしGenekistiScopeのaiスクリプト版を作ったとき、同じようにillustratorのUIを利用してスクリプト起動時のレイヤーの表示状態からアプリの動作を決めることを思いついてその貧乏臭さが気に入っていたんだけど、本家のAdobeが同じ仕組みになってるのが泣かせる。この「ありもので間に合わせる」感じというか、まかないめしがうまそうな感じ、他のツールではあんまり見ない気もするんだけどほかにもあるだろうか。


テンキー

こないだ携帯電話会社で契約変更の手続きをする機会があり久しぶりに行ったのだけど、その手続の途中で、「登録する暗証番号を入れてください」といって、いわゆる普通の電卓を手渡された。

一瞬何のことかわからなかったんだけど、つまり、その電卓でなんらか計算をしろというのではなく、テンキーで4桁の暗証番号を押してから電卓を店員に渡して伝えるという単なる数字のメモ帳としてそこでは電卓が使われているらしかった。ちなみにそれ以外の契約書類はiPadの契約処理用アプリで行われており、サインもiPadに直接指で書いているにもかかわらず、なぜか暗証番号だけはそんなギャグみたいな手順で入力させられるのだった。

紙のメモに暗証番号を書いたりするのは確かにちょっといやだなという気もするんだけど、iPadのアプリで入力させるのに問題があるとは思えないので、なぜそんな手順になっているのかよくわからないし、なにより電卓の使用方法として動揺するほど間違っていた。


渡邊恵太『融けるデザイン』

融けるデザイン ―ハード×ソフト×ネット時代の新たな設計論
渡邊恵太
ビー・エヌ・エヌ新社 (2015-01-21)
売り上げランキング: 4,510

コンピュータのインターフェイス研究の世界ですごくユニークなスタンスで研究をされている渡邊恵太さんの待望のインターフェイスデザイン理論書。ようやく読めた。

冒頭から宣言されるように、世界は既にすべての情報を飲み込んだ1つのメディアとしてのインターネットと、それに文字通り「触れる」ためのインターフェイスとしてのセンサーを持ったコンピュータとソフトウェアとが「融けた」環境にある。こうと決まった形をもたなくなった環境が「手ごたえ」を持つとき、そこで何が起きているのか。たとえばこの融けた環境を爆発的に広げたといってよいiPhoneのインターフェイスで、ユーザーはなにを経験しているのか。そうしたインターフェイスの身体論を「自己帰属感」というキーワードで解説していく。

アフォーダンスについて紹介、解説する本は世にあまたある。デザインにおいてアフォーダンスの考え方が重要だとする本もたくさんある。しかしたぶんこの本はそうではなくて、 アフォーダンスに代表される生態心理学の世界観において、情報のデザインとはなんであるか を問いなおす本なんだと思う。身体性が重要だからといって「モノ」が重要なわけではない。情報であったとしてもその持続のあり方によって主観的なリアリティが生まれる(ここの議論はインターネット・リアリティ研究会の話にも通じているなとおもった)。そのように発想することで、プロダクトデザインを超え、メタファに堕さない、まったりとしてコクのあるインターフェイスが生まれるのだろう。