4/30/2013

[&] Package Design



海外に旅行した時の楽しみの一つは、スーパーでの華やかなパッケージの数々。
下世話なものからカラフルなものまで、思わず目がいく。
またブランドショップの突拍子も無くこだわりのあるパッケージも気になる。
iPhone の密閉度の高い箱は、600円/一個のコストがかかっているらしい。
パッケージはあけてしまえば、役目を果たすけど、その一瞬の価値は大きい。

世界各国のパッケージの中からミニマルなものをいくつか紹介。


■ハンガリーの牛乳パック。デザインは Fontos Graphic Design (http://www.fgs.hu/)


■ニュージーランドのウーロン茶の缶と箱。デザインは Designworks (http://www.designworks.co.nz/)


■スパゲッティの箱。デザインは Neal Fletcher (http://www.nealfletcher.co.uk/)


■Salt&Pepper Cell という名の塩とコショウの入れ物。これはミニマルってのとは違うけど、ちょっと欲しい。


■Nocturnalis / Durinalis というボトルのデザイン、これはコンセプトで、実物はまだ無いみたい。


■Motorola Saros のパッケージ。デザインは Jesse Kaczmarek 氏と Designworks, BBDO NY


■PANTONEペンキ。これもコンセプトかな。

パッケージデザイン本、いろいろあるけど、この辺がおすすめです。
場合によってはマーケティングのことやコストのことも書いてある本もいいかも。

パッケージデザインの教科書
パッケージデザインの勘ドコロ
100sビジュアルアイデア:パッケージ&ラベル
パッケージ&ラッピングツールグラフィックス〈2〉




4/29/2013

[&] Confidence UI


(photo by Bella_189)

Confidence UI, Trust UI

前々から、実は「信頼デザイン」「信頼UI」というジャンルがあるのではいかと考えている。
医療系とか、お金を扱うサービスのデザインとか、間違えたら困るサービスとか。
それらは派手さや親しみやすさよりも、間違えて操作しにくいことや、
長時間使い続けても疲れない事とか「信頼」が重視される分野。
コンシューマ向けのデザインとは違うところで、必要な要素が考えられているような気がしている。
例えばお堅い大手企業のWebサイトは、寒色系が好まれるとかもその系統の要素だろう。

「信頼」とは何だろうか?
そもそものブランドイメージも信頼度につながっているだろうし、
単に頻繁に確認させれば間違いを回避できるわけでも無いし、
パッと見の印象でも、信頼していいのかダメなのか、大きく気持ちが左右される。
ソーシャルメディア系の公開サービスもよくわからなくて不安になることがあるし、
プライバシーの設定なども不安かつ理解しにくい要素が多い。

たぶんいくつか要素があって、それらが解決されると「信頼」されるのだと思う。

●華美に飾り立てない。シンプルでクリアであること、形や色には意味があること
●操作している人にコントロール権があること、選べること
●操作に対してフィードバックがあって、操作したものが変化すること。そしてそれは瞬時に明確に行われること
●なにか操作を間違えたからといって、罰則的な印象をあたえないこと

●操作が簡単であること。複数の動作が組合わさったり、何かを覚えながら操作しなくても良いこと
●控えめでささやかであること。操作が必要なボタンだけが表示されたり、全てを提示すれば良いわけではないこと
●操作の先が予想できる情報を提示すること
●困った時に初めてヘルプを提示するのではなく、そもそも間違わないように心配りすること

●操作する人が全ての選択をしなくても良いように。良きに計らう方法も考慮
●操作する人が学んだり、習熟することによって、使いやすくなること
●一貫性を保つこと、同じことを示すには同じ方法で
●操作する人は、操作することが目的ではなく、何かの目的のために操作していることを忘れないように

●レイアウトや色、形状、フォント種類からくる安定感
●重心が下部にあることや左右対称による安定感
●色数が多すぎないことによる、質素さからくる安心感

デザインとしての「信頼」を扱った本は、ほとんど見た事無いのですが、その中でもこの2冊。


ディフェンシブ・ウェブデザインの技術―「うまくいかないとき」に備えたデザイン、「上手に」間違えるためのデザイン (Web designing books)


信頼を得たい!インパクトをだしたい!日本の名刺デザイン・コレクション

4/28/2013

[&] Design of Electronic Calculators



電卓のデザイン DESIGN OF ELECTRONIC CALCULATORS
1000台以上の電卓コレクションを保有する大崎眞一郎氏の本。
電卓の写真集といってもいい。



初代 iPhone の電卓デザインは、BRAUN ET44 という電卓そっくりで、
後に四角いボタンに変わるまでは、ボタンは丸かった。
BRAUN ETシリーズのデザイナーはディーター・ラムスとディートリッヒ・ルプス。
5000台だけ発売された ET55 の白モデルがものすごいプレミア価格がついているみたい。
この本を見ながら、そんなことを思い出してました。

最近、MONO消しゴムの色合いそっくりのSHARP の電卓とのセットが売り出されて、
なんか知らないけど、買ってしまう人がここに居るのであった。
もう卓上電卓なんて久しく使っていないのだけれど。


SHARP 電卓 「MONO」デザイン 手帳タイプ 10桁 消しゴム付 EL-MN110-X




4/27/2013

[&] Daemon - Daniel Suarez



ダニエル・スアレースのデーモン(上・下)
たぶん、僕が昨年読んだ小説の中で、もっとも夢中になって読んだ本のひとつ。

本職はITコンサルタントのダニエル・スアレースが執筆した、
ネットや、コンピュータ、テクノロジー三昧のエンターテインメント小説。
描写が細かくて、テクノロジーに詳しい人なら「ニヤッ」と笑いながら凄く楽しめる一方、
ある程度知らないと、何がなんだかわけわからないかもしれない。
本のタイトルのデーモンも「悪魔」という意味よりも、
UNIX の daemon コマンドを意味している。

オンラインゲームの天才プログラマが、34歳で脳腫瘍のため死亡した。
そのプログラマの死後、動き出した残されたプログラム(デーモン)が
巻き起こす騒動と、それに対処する頭脳派、肉体派の主人公達。

次から次にハラハラする出来事が起こり、夜も寝ないで一気に読みたくなるハズなので、
上下巻そろえてから読み始めた方がいいです。

ただし、本書は壮大なお話の一部、続いて出版されている Freedom, Kill Decision に
続く前哨戦でしかありません。なのでこのデーモンの終わり方は、
ハリウッド映画でいうところの、あきらかに続編あるよね.....という終わり方です。

拡張現実とか、複合現実とか、少し未来のテクノロジーのヒントになる描画や
利用方法が満載です。人工知能的アルゴリズム仕込みかたも逸品。

一度読んだら二度と読まない種類の本だからかどうかわかりませんが、古書は Amazon 1円本。
この小説を一気に読み終わったら、なんかプログラム書きたくなるハズ。

デーモン(上) (講談社文庫)
デーモン(下) (講談社文庫)



4/26/2013

[&] 8 Principles for Designing Gesture-Based Applications


(Photo by Eddy 07)

Omek というジェスチャテクノロジー企業のブログ、
"8 Principles for Designing Gesture-Based Applications"
「ジェスチャ利用アプリデザインにおける8つの法則」
短いながらも的確にジェスチャUIのポイントを解りやすく提示している。

●1 精確さは良いことです……でもそれは、ある程度まで!
ジェスチャーベースのアプリケーションのUIデザインは、ユーザーが正しい選択を容易に行えるように大きなボタンを配置した方がよいでしょう。厳格な正確性を求めると、ユーザーは操作に疲れてしまいます。エクセルの表で特定の枠を選択する時に、マウスポインターの代わりに指を使うことを想像してみてください。イライラしませんか?

●2 既存のユーザーインターフェースをモデルにしないようにしましょう。そのかわりにジェスチャーとモーショントラッキング技術の強みを生かした設計を!
伝統的なユーザーインターフェースはWIMPモデル(ウィンドウ、アイコン、メニュー、ポインター)を基に設計されています。指はマウスとは違います。手が立体的であることを利用しましょう。例えば、靴のようなオブジェクトをつかんで手で回転できるオンラインストアをイメージみたいなものです。

●3 ユーザーが肩より高く手を上げなくてはいけないような動作は避けましょう!
ジェスチャーベースのアプリケーションを設計する場合にフィジカルセラピーの学位は必要ありませんが、人間工学と人体の自然な動作はどのようなものかを考えてみるのは有用なことです。体はすぐに疲れてしまいますし、特定のユーザーにとっては腕を高く上げることが困難な場合があります。Co.Designでは、私たちがテクノロジーに順応するために不自然な姿勢を取ることを「奇妙な儀式」と呼び、特集しています。ジェスチャーを認識際に、そういったぎこちない姿勢に陥らない方法を考えないといけません。
http://curiousrituals.wordpress.com[奇妙な儀式] ←ここの情報Google Glass のジェスチャを考える時にも役立ちそう!

●4 アクティビティを、小さく短い動作に分割しましょう!
レストポジションからの動作はできるだけ簡潔にし、ユーザーに画面中を動き回らせることのないように心がけましょう。John Pavlusは最近のMIT Tech Reviewの記事で、ジェスチャ技術はフィッツの法則を破るのかどうかについて書いています。メニューの配置を考えるときには、フィッツの法則を復習するといいかもしれません。ユーザーは選択操作ができるだけ素早く行えることを望むものです。

●5 すべてのユーザーが右利きというわけではありません!
アプリケーションを設計するときには、右利きと左利きのユーザーが等しく扱えるか判断しなくてはなりません。幸いなことに、もしあなたがOmek's Graspを使用している場合は、左手と右手の精確な探知が保証されています。このGrasp機能は、複数のユーザーが隣りあって座って使用するようなアプリケーションを作る際に、その有用性が証明されるでしょう。

●6 ジェスチャーには文化的な意味を内包している!
ジェスチャーは文化によって別の意味を持つことがあり、アプリケーションを設計する際にはそのコンテクストを意識しましょう。例えば、「親指を立てる」や「ピース」は北米においてはポジティブな意味合いを持ちますが、ギリシャや中東地域ではそれぞれまったく反対の意味を持ちます。様々な国での展開を行う前に、ジェスチャーについて手短に確認をしておくとよいかもしれません。

●7 ユーザーを「効果的なインタラクション領域」に留めておくようにインターフェースを設計しよう!
カメラの視野の端ぎりぎりに要素 (メニューセレクション) を配置するのは避けましょう。そうした場合、ユーザーは手がカメラの認識範囲の外に動いたことがわからず、選択がうまくいかなくて、不快な思いをします。

●8 あらゆるサイズの人や手を使って、テストをしよう!
テスト、テスト、またテスト。アプリケーションをリリースする前に、徹底的にテストを行ってください。幅広いタイプの人々(背の高い人と低い人、手の大きい人と小さい人、様々な長さの腕など)でテストを行うのです。そうすることで、あなたのアプリケーションとインターフェースは、バスケットボール選手でも、手の小さな女性でも、適切に機能するとことが確信できるでしょう。

via. http://www.omekinteractive.com/blog/8-principles-fo-gesture-applications/
(勝手訳なので、問い合わせたりしないように!)

まあ、細かいことはいいから、とりあえずこれだけ守っとけ.... という感じかな。
ちまたに見る、よく出来たジェスチャインタフェースはやっぱりこの法則は守っている。
そして、GUI とは NUI はまったく別の次元の話だから、
GUI の常識が通用しないところが難しいところ、
表現はディスプレイ画面で同じだったとしても、マウスやキーボードとは全く違う世界。
そして、NUIの画面デザインを作る時には、マウスとキーボードを使うから、
思わず見落としたり、忘れてしまう要素がいくつもあったりする。

よくジェスチャインタフェースとして、取り上げられるのがトムクルーズ主演の映画マイノリティリポートです。
映画の中の空想の未来が、Oblong として製品化され、現実になった例として取り上げられますが、
実は順序が逆で、John Underkoffler らが現実世界の研究の綿密なリサーチをした上で
理想型を描いたのがマイノリティーリポート。
フィリップ・K・ディックの原作読んだ時には、
到底こんなイメージは思い浮かばなかったな。


この手のことに詳しい本としては、
Dan Saffer の Designing Gestural Interfaces
Brave NUI World: Designing Natural User Interfaces for Touch and Gesture
がおすすめです。





4/25/2013

[&] The Mobile Frontier : A Guide For Designing Mobile Experiences



モバイルフロンティア よりよいモバイルUXを生み出すためのデザインガイド

仲間内で手がけていた本がやっと書店に並びます。
Nokia や Intel のリサーチラボで活躍している Rachel Hinman 著作の翻訳本です。

モバイル全般、スマートフォン、タブレット端末向けのユーザーエクスペリエンス指南本です。
アプリのボタンの作り方といった話ではなく、もっとモバイルデバイスの根源的なことに関して書かれた本。

モバイルデバイス上で心地よいユーザインタフェースを実現するには、
ディズニーのアニメーションの12原則が重要という話など。

その他、スマートフォンアプリは利用中に中断されることが前提で、
かつ途中から再開することが前提で作られてないといけないとか、
当たり前に思えることが網羅的に書かれていて、とても参考になる普遍的な本です。

Amazon でも販売開始。本屋さんで見かけたら、是非目立つところに移動しておいてくださいね!

セクション1 モバイルでは何が違うのか?
1 章 いかりを上げる
2 章 モバイルNUI パラダイムの登場
3 章 デンバーのピーナツバター
4 章 形態の変化

セクション2:モバイルパターンの登場
5 章 モバイルUX パターン

セクション3:モバイルエクスペリエンスをデザインする
6 章 モバイルプロトタイピング
7 章 モーションとアニメーション
8 章 感覚の目覚め

セクション4:モバイルUX の未来
9 章 新しいモバイルのかたち


Rachel Hinman - The Mobile Frontier - BD Conf, April 2012 from Breaking Development on Vimeo.





4/24/2013

[&] Wayfinding: Designing And Implementing Graphic Navigational Systems



Wayfinding: Designing And Implementing Graphic Navigational Systems

近所の大型書店(通称、俺の本棚)では、売れ残った洋書や、少しだけ痛んだ洋書を格安で販売している。
今回手に入れたのは、「あっち」「こっち」みたいな矢印などのサインデザイン本。
目立つけど目立たない。
解りやすいのもあるけど、解りにくいのもある。
専門のデザイナーが手がけたのもあれば、駅員さんががんばってつくったようなのもある。
世界の色々な例が見られて興味深い本です。

この系統のサインデザインで一番気に入っているのは、横須賀美術館の館内のサインデザイン。
廣村正彰氏によるもので、デザインの素敵さも格別ながら、そのユーモアのセンスも素晴らしい、
存在感がありつつも、存在感が有りすぎない、空間にとけ込んでいるような違和感の無いデザインです。


横須賀美術館のサインデザインより


Wayfinding で紹介されている実例より

4/23/2013

[&] ggg - TDC 2013



http://www.dnp.co.jp/gallery/ggg/
銀座グラフィックギャラリーで開催中の TDC展 2013
審査基準が高いと思われ、受賞該当作無しのカテゴリがあるくらい。
例年以上にクオリティの高い作品群がみっしりと並んでおります。
特に気に入った作品をいくつか紹介します。
(会場は撮影禁止であったため、Webにあった画像の引用です)




■新世界タイポ研究会「横書き仮名」
http://shinsekai.type.org/?cat=3



■Felix Pfaffli 「Südpol Poster Series」
http://www.feixen.ch/



■Stanley Wong (anothermountainman) ウォーター・カリグラフィー「Ingenuity/Nature. 妙法/自然」
http://www.anothermountainman.com/personal-work/form-is-emptiness/#/0




■IMF・世銀総会折り紙ロゴ
http://www.origata.com/



■Stefan Sagmeister & Jessica Walsh「Now Is Better」
http://www.sagmeisterwalsh.com/work/

この Stefan Sagmeister 氏の Happiness by design という講演素晴らしい!









4/22/2013

[&] Elements of Design




( via. http://archinect.com/blog/article/21450784/3d-sketches )

「形状」というものを真剣に考えたことが無かったので、なんかいい本を探してみました。
インダストリアルデザイン的なもの、建築的な形状やフォルムも、まったくの感性や想像だけで作られているわけではなく、
確固たるテクニックや法則に基づいて作られていることが解った。
これを掘り下げて行けば、平面上のデザインや、ユーザインタフェースデザインにも生かせそう!

Elements of design
エレメンツ・オブ・デザイン―ロウェナ・リード・コステロウと視覚関連の構造

●直線的ヴォリューム
●曲線的ヴォリューム
●直線的と曲線的ヴォリューム
●切片
●面の構成
まっすぐなアクシス
折れたアクシス
複雑なアクシス
曲がった面
折れた面
ねじれた面
複数の面
●空間中の線
中立
休息している
軌道を描く
双曲線の
放物線の
反転する
懸垂する
方向性を持つ
強調する
螺旋状の
●形態の上級研究
構成
膨らみ
くぼみ
●スペースの研究
空間分析
空間デザイン
展開
●プロフェッショナルワーク

「ファインアーチスト、グラフィックアーチスト、インダストリアルデザイナー
および建築家における基礎的な視覚関係には、
本質的な違いはなにもないとずっと信じてきました。
違うのは、個々の状況によって要求される
視覚構成の複雑さの程度にあります。
その向こうに、個々の分野の素材と技術があるのです」
ロウェナ・リード・コステロウ

Rowena Reed Kostellow
http://www.rowenafund.org/resources/rrk_resources_links.html



エレメンツ・オブ・デザイン―ロウェナ・リード・コステロウと視覚関連の構造