Archive for the ‘UI’ Category

発想する会社! ― 世界最高のデザイン・ファームIDEOに学ぶイノベーションの技法

Wednesday, June 20th, 2007

多くの優良クライアントを抱えるデザインファーム IDEO のゼネラルマネジャーが語る IDEO 成功の秘訣、といった趣きの本。ものすごく多くの事例をもって語られるのは、

  • 成功するクリエイティブには、温室のように広く心地よいオフィススペースが必要
  • 成功するクリエイティブには、イノベーションを追求し続けるパッションが必要
  • 成功するクリエイティブには、究極のブレーンストーミング (*) が必要

といったところ。文章には独特の高揚感があり、アメリカ的・シリコンバレー的な雰囲気を強く感じさせる。デザインの輪郭 を著した深澤直人さんもかつて IDEO に在籍、ということだが、デザインに対するスタンスにおいて、二人に差異を感じるのは、現場とマネージメントという違いなのか。ともかく、デザインファームという日本ではまだ珍しい業態の成功事例を豊富に読むことができる、価値ある一冊。

(*) 著者によれば「究極のブレーンストーミング」とは下記7項目であるとしている。

  1. 焦点を明確にする
  2. 遊び心のあるルール
  3. アイデアを数える
  4. 力を蓄積し、ジャンプする
  5. 場所は記憶を呼び覚ます
  6. 精神の筋肉をストレッチする
  7. 身体を使う

デザインの輪郭

Sunday, June 17th, 2007

デザインの輪郭

工業デザイナー・深澤直人さん 書き下ろしのエッセイ集。「INFOBAR」「壁掛式CDプレーヤー」といった他に例を見ないデザインを多く手がける深澤さんの発想の原点はどこにあるのか? 深澤さん自身の飾らないことばで書き綴った興味深い一冊。

プロダクトとウェブサイトという違いはあれど、深澤さんの言葉には、ウェブサイトにも適用できそうなデザインポリシーが感じられる。それは、モノとヒトとの関係性。それを使うヒトの状況・環境・心理など想定しないことにモノのデザインなどできないのは、ウェブサイトもプロダクトも同じ。モノとしてツールとして、デザインするにあたってどんなことを考えておくべきか、この書籍はさまざまなヒントを提示してくれる。

椅子をデザインするとき、情報なんて必要ないでしょう。
もちろん人は必要です。生活も必要です。
でも情報は必要ないですね。
今、何が流行っているかという情報を知れば知るほど、
自分のつくるものも
流行っている通りのものになってしまいますよ。

情報は経験値です。
人が加工した情報は、たいしたことはない。
僕にとっての情報とは、あなたと私が今、
考えてはいなくても同じ椅子の座の感触を同時に感じているというようなことです。

(略)

人間が生きるために使っている環境の中にあるすべての情報を
自分で自覚できるということがデザインできるということです。

環境との関係性をみているんですよ。
ものをつくるという意味だけじゃなくて、
人とコミュニケーションする意味でも
インタラクションをデザインしている。

(「31 情報と経験」より)

DS and PSP

Monday, June 11th, 2007

p1010569.jpg

先月急に思い立って購入してから早一ヶ月。どちらもまだそんなプレイできてないのだけど、以下取り急ぎの印象。

  • どのゲームも操作感の完成度高し。スクロールや選択位置の移動とかいたってスムーズでつっかえる感じがない。
  • どのゲームも画面の完成度高し。小さい画面に必要な要素を必要なだけ配置している感じで無駄が少ない。
  • どのゲームも画質のごまかし方?のレベル高し。ドラゴンクエストモンスターズ ジョーカーの戦闘画面の背景はほぼモザイク状態だが、しばらく気付きもしなかった。
  • どのゲームも意外に難しい。日々ゲームに時間を割くことなどできないこの状況で、すんなりゲームの世界に入っていけたのは、脳トレみんなのゴルフ だけだった。

というわけで、なにぶんゲームなど10年以上買ってなかったので、驚きの日々が続いている。

UI が決め手とならないとき

Wednesday, March 28th, 2007

UI を考える者にとって悲しいことに、UI がプロダクトの決め手とならないこと、どんなに UI がすぐれていてもそれがプロダクト全体の評価にまったく反映されないことが往々にある。いまに始まった話ではないけれど。

例えば、Windows と Mac の関係。どんなに Mac が UI 的に評価されようとも、パソコンショップで大きな面積で販売されているのは、Windows の PC であり、学校や会社でみんなが使っているのは、Windows であり、価格的に手ごろなのは、Windows の PC であり。市場はいろんな要素で優劣が測られ、そのなかにあって UI は無視できないにしろ、決してそれだけでは語れない現実がある。

ほかにもある。自分的には Flickrfotologue の関係とかすごく気になる。日本発のプロダクト、というハンデを考慮しても、圧倒的に fotologue のほうがおもしろいインタラクションだし、ウェブサイトという枠ではくくれない、写真を通したコミュニケーションアプリのような雰囲気さえただよう。が、実際には Flickr 圧勝であり、fotologue はいつ忘れ去られてもおかしくないくらい存在感がうすい。

「Flickr はアップされてる写真がキレイだからいい」。エンドユーザーの評価としてどんなにまっとうなものでも、そんな観点でサイトの良し悪しを判断されては、制作者としてはもはやなす術なし、とか思ってしまうのではないだろうか。

つまるところ、どんなに「よいデザインを」「よい UI を」といっても、それだけの範疇でどんなに検討を重ねても最適解がでることはなく、マーケティング・ブランディングその他もろもろの周辺要素を加味していかないことには答えは出ない。逆にそれを考慮しないでつくられた UI は、UI として機能しない、独りよがりなお絵かきになる恐れがある。

Larry Tesler

Sunday, March 11th, 2007

larrytesler.jpg

とあるところにて Larry Tesler に遭遇。Apple Computer, Inc. の歴史を語る上で欠かすことのできない氏は、現在、Yahoo! Inc. の Vice President, User Experience and Design を担当している。

この方の話を聞いていると、Web だから Internet だから、ということより、Software とは Tool とは、といった観点からの考えのほうが自然に思えてくる。

Longhorn Concept

Saturday, November 11th, 2006

vista_2003.jpg

もうひとつ Microsoft の話題。YouTube に 2003 年時点での Windows Vista(コード名 Longhorn )のコンセプトムービーがあがっている。

機能的にはともかく、UI 的には多少改善される印象の Vista だけど、このムービーはその上をいっている。文書ファイル、音楽ファイル、写真ファイル...といったファイル種別に関係なく、ほぼ同様の UI を提供していて、ユーザーは種別を意識することなく、単一のツールを使えばいいようになっている。現在はそれぞれ専用のアプリケーションで使い分けてるけど、結果、ユーザーがアプリケーションごとに操作方法を覚えないといけないし、ファイル種別が違うだけで別のアプリケーションを立ち上げないといけない。

動きも軽快で面白い動きをしてるし、2003 年のマシンでこのスピードなら、いまであれば大丈夫そうな感じがするだけに、残念。

Photolynth

Saturday, November 11th, 2006

photolynth.jpg

Microsoft がワシントン大学と共同で開発を進めている Photolynth が興味深い。機能的には、何枚ものデジタル写真画像をもとに、3D の世界を作り出す...というものなのだけど、自分的には、その機能を実現させるための UI に興味を持った。

本来 2D しか表現できない写真をどのように 3D 化するか、というところで、ワイヤーフレーム的に構築された 3D の世界の中で、どこを写真の被写体としているか、がすごく自然に表されているように思う。情報の可視化の好例。

Graceful degradation

Tuesday, October 24th, 2006

品のある劣化? 直訳するとまたもよくわからないけれど、Progressive Enhancement に引き続き、JavaScript での実装におけるキーワードを見つけたので、メモ。

内容としては、JavaScript OFF の閲覧環境において、必要最低限の情報が得られる・必要最低限の機能が使えるように、実装上の配慮を行う(配慮した実装を行う)、といった感じみたい。

例えばポップアップウィンドウを呼び出すリンクの場合、

<a href="#" onclick="popUp('http://www.example.com/');return false;">Example</a>

ではなく

<a href="http://www.example.com/" onclick="popUp(this.href);return false;">Example</a>

のようにする、とか。

JavaScript で画面を作りこんでるときとか、href に正規の URL 入れてもあまり意味をなさない、といった問題はあるけど、実装時の心がけ?として大事になりそう。

余談だけど、Wikipedia で調べてみたら、Fault-tolerant system と同義語扱いになっていたのが興味深い。

クリエイティブのレイヤー

Friday, September 29th, 2006

Progressive Enhancement に対抗して? クリエイティブのレイヤーというコトバを考えてみる。

ウェブページのデザインとか UI を考えることは、当たり前だけど、色・レイアウト・要素のカタチや動きなど、いろんな項目を検討することになる。多くの場合、(思わずごっちゃになりそうだけど)いろんな項目をレイヤー的に切り分けて考えるとうまくいくことが多い。

例えば、

  • ロゴ
  • テキスト(タイトル・コピー・タグライン)
  • テーマカラー(トーン)
  • レイアウト(エリア決め・グルーピング)
  • 要素のカタチ(~風・メタファー・カラー・動き)
  • 写真(アングル・トリミング・レベル調整)
  • イラスト(~調・対象物・トーン)

といったようなものがありそう(上のものほど抽象度が高く、下のものほど具体的)。

これらは当然だけど、すべて別個のものであり、同じ文脈で一緒くたに語れるものではない。と同時に、自分的には、これら全部が得意な制作者など少ない、というか多分いないのでは、と思う、なんとなく。

ひと昔前なら、ウェブデザイナーと呼ばれる人たちが上記のほとんどを担当していたかもしれないけど、例えば、イラストが得意な人がエリア決めも得意とは限らないし、逆もまたしかり。ウェブ制作という分野ができてから時がたち、各分野が徐々に成熟する中で、個々の分野に特化した制作者がチームプレイでひとつのアウトプットに取り組む、みたいな進め方が今後とっても大事になってくるような、そんな気がする。

実際の現場ではイラストが得意なひとが細かく要素のデザインを決めてたりしてちょっと大変なことがありそうな。それでうまくいくなら何の問題もないと思うけど、問題があるなら、やはり個々に切り分けることを考えないといけない気がする。

クリエイティブのレイヤー、大事そうな気がして、でもまだうまくまとまってないけど、詳細はまた考えることにする。

Progressive Enhancement

Friday, September 29th, 2006

Progressive Enhancement という UI を考える上でのキーワードがあるらしい。
http://en.wikipedia.org/wiki/Progressive_Enhancement

進歩的な強化? 直訳すると全然よくわからないけれど、思いっきりカンタンにまとめると

  • document.write を使わずに、DOM Scripting に徹する
  • ブラウザ判別において、UA を見ずに関数(getElementByIdなど)実装の有無で判別する

といったことらしい。

進歩的な強化の真意はよくわからないけど、というかこの訳が正しいかも微妙だけど、このあたりを実践することで、JavaScript コードがより抽象的で汎用的になりそうな気がして、興味深い内容だと思う。