9/25/2012

[&] SH-06D NERV making

GDG Tokyo meeting 長月 2012
----------------------------------
SH-06D 開発メンバーによる発表

http://www.evangelion.co.jp/nerv_keitai/



美馬氏:ハイジ・インタフェース株式会社 CEO
昨年 TOUCH WOOD の斜めのUI
愛着を持てる UI, 世界初の右利き/左利き対応のUIを開発しました。
Q-Pot Phone
http://www.hyge.co.jp/
リニューアル中で、10月中にはカッコいいサイトになると思います。
リクルート中です。

HYGE は2年くらいの小さい会社です。
10人未満の会社です。
当然のとごく、いろいろな方々の協力で作られました。

SH-06D NERV
いまこの端末を持っている人は居ますか? 意外と居ない。
実機に触れた事無い人 ...... ほとんどですね......
ガイドブックが発売されています。
取材をうけてインタビューのぺーじや、
丁寧な内容で書いてあります。

実はこの携帯ですね...
関係者でも手に入れることができなくて、
開発したからといってキャリアさんがタダでくれることは無くって....
早めに最低何台欲しいです!といって確保しておいてもらったものを買ってました。
DOCOMOの中で関わっていた人でさえもショップに並んで買っていました。

6/16に販売開始しました。
並ばれた人も居ましたか? 居ませんね.....
ちなみに、弊社も一人徹夜で並んで買いました。
かなりいろんなところで盛り上がりました。
予約の当日、専用のサイトを公開したり、駅バリ広告、プロモーション動画
最終的には TVCM も放送されて、反響を呼びました。
関係者でも手に入りにくい。
キングレコード様、有名人、アイドルとか、声優さんとかからこっそりくださいという
話があると........
実際好評されていないけれども持っている有名人もいるかも。

■Project-E
コラボ企画のはじまり
キャリア主導/メーカー主導/持ち込み

このプロジェクトですが、内部では Project-Eという風に呼んで
始まっていました。コラボ携帯がどうやって始まるのか?
 キャリアの担当者が企画して、キャリア主導で始まる場合。
 メーカーさんがコラボ企画をキャリアに提案してキャリア主導で始まる場合、
 キャリアに企画を持ち込んで始まるものがあります。

EVA携帯の場合、持ちこみの企画で始まりました。
結構、前になるのですが、ちょろっと聞いたのは au や Softbank にも
持っていったのですが............ 結局は DOCOMO に決まりました。
DOCOMO で始まったのは 5,6年前のことです。
ガラケーで第一弾が始まりました。
コンテンツをいざつくるというときに参加しました。

 NERV 官給品というコンセプトが決まっていました。

今思っても、とてもいいコンセプト。
前回の端末のときも、スマホの時も、NERV官給品として正しいか?
デザインをどうするか?アプリをどうするか?
あらゆるところにおいて、正しいかどうか、考え方のよりどころとして
このコンセプトが役立ちました。
コンセプトが大事です。

■むずかしいこともいろいろありまして、
アニメの中に登場することはキマッっていましたが、
売り物として成立しなければいけませんでした。
単にロゴ云々ではなく、モノとしていいものにしたいという意向がありました。
劇中の中で自然に存在しているものがいいという話でした。
EVAっぽい特徴を与えたくなかった。
特徴をつけるとすれば、どういうことができるのか?
いろいろ制約がありまして............(DOCOMO)
カーボン調テクスチャにしたい ............ 無理です(DOCOMO)
この前にもいろいろな方向性があって、
かなり絞り込まれた後でこうなった。




これを出しました。それまでは、
EVAの中で、こんな線は無いというイラストが出てきました。
グラデーションでいろんなデザインが出てきました。
今見ても微妙なことやっているな〜と思いました。
もう一回、イラストが出てきました。
もう、差がわかんないですが、イラストどうりにデザインを起こして、
点を何個うつかなど、延々とやりとりした上で、こう決まりました。

世界観と、現実で売るという事柄のせめぎ合いでした。
コラボ携帯はベース機と呼ばれるもととなる機種があります。
SH-06D, SH-06D NERV, SH-06A , SH-06A NERF
デザインを経てこういうものが生まれてきている。
こういう状況があるので、アニメやドラマでも
携帯電話がでてくるようになりました。
形が変わってしまうと、金型が代わり、ビジネスが成立しなくなってしまう。
いろんな作品の中でモバイル端末が出てきますが、
商品化しにくいのは形が違うもの。
技術の進化で改善していくのではないかと思います。

EVA携帯は、コンセプチャルな話をすると、
現実の世界にも、空想の世界にも存在しないものを作っています。
特徴的なのは、劇中にも成立して、現実にも商品として成立するもの。
ここまでやりきったものはなかなか無いので、注目を浴びたのだと思います。

ちなみに、劇中で使われている携帯電話は実際の携帯電話のボツ案です。
次の映画の中で使われている携帯電話が使われている携帯電話は出ないみたいです。
でも、出て欲しいなという勝手な期待をしています。
劇場版がどんな風になるのかは極秘でわかりません。

前回うまくいったおかげで、版権者とDOCOMOの方で
自然と話が始まりました。いろいろな壁もありました。

■ Android とガラケーの壁
ガラケーの時は vivid UIの上に待ち受け、絵文字、着信音が入っていて、
メーカーがシステムの部分をいじっているので、画像系のリソースを差し替えると
かなりのいじる量があるものの、普段触るところが全て EVAになっているという
統一感がありました。

Androidになるとメーカーアプリ、キャリアアプリGoogleアプリが入っていて、
1タッチで出てくる画面を全部統一しようとしても、そもそも無理がある。
前回のようなコラボレーションが難しいなと思いました。
自分たちでもアプリを作って、そっちに興味を集中することで
コラボ化を演出していかなければいけませんでした。

ホームアプリの壁。
キャリアの Palette UI とメーカーの SHホームがあります。
今回、この端末を作るにあたって困ったのは
Palette UIをデフォルトにするよう規定がありました。
スキンのような切り替えができる仕組みはあるのですが、
それでどこまでコラボ端末になるのかはかなり厳しいものでした。
なにかしらホームアプリも作らないといけないとなりました。
最終的に作ったのは、デフォルトが Palette UI から、
EVA側に切り替えさせればいいのか? 
最終的にはオリジナルホームがデフォルトになりました。
 magi がはいっているコンセプトなので「magi起動」とすると、
ホームアプリが切り替わるようなことを考えていました。

その他、いろんな仕様/規定の壁
DRM プリイン容量、アイコン規定
デフォルト配置規定 アプリ間連携規定




ホームアプリに大量のウィジェットを作ってはっています。
3Dムービービューアー。裸眼立体視ディスプレイ用に
スタジオカラーが特別に作成した映像が用意されています。
単に再生するだけではもったいないだろうということで、
専用のアプリを作ってしまおうということになりました。
他にも3Dモデルとかがあるので出せますよ!ということで、
モデルが存在する映像を頂いて、それを見るという一つのアプリにしました。

NERV職員専用アプリ
この企画は結構なプロジェクトの後半で
キャラクタをいじって遊ぶというアプリを入れようと思っていましたが、
「いらない」と言われ、
ゲームっぽいのがある良い。社内SNS的なもの、
NERVの一員であることを実感できるアプリが欲しかった。
それらを全部まとめたのが、職員専用アプリ。
結構リアリティは意識して、ひととおり見ようとすると2週間くらいかかります。
実際に声優さんに原稿を渡してしゃべってもらいました。
キャラもののお楽しみアプリ。

デザインの統一感を出すために Paletter UIの着せ替え、
壁紙。絵文字。前回の端末にも相当量はいっていましたが、新しいものも用意しました。
斜めから見ると覗き込まれて見づらくなるというペールビュー用のイメージ。
サイトのプロデュースなども担当しました。

実際、これらはどんなタイムラインで進んでいたのか?
去年の5月に参加しました。その時点で1年切ってました。
本来コラボものは、2年ぐらいかけるものなので、短い進行でした。
見て分かるとおり、半年全然話しが決まらない時期がありました。
3D+MMBI(NOTTV) VS LTE+ICS どちらで?激論になりました。
新しいものの方が喜ぶだろうから、すでにその時3D液晶はすでに叩かれ始めていて、
3Dは考え直すタイミング?
それまでは3Dが魅力だと、散々言っていたのだが。
やっぱり 3Dでいかないと、魅力というものを出しにくいということになった。
LTE+ICS端末なら包括したサービスを提供しないと、モノとして欲しい感じがしない。
2011.11にベース機が決定しました。
その決まった段階で、かなり冷や汗をかいたのですが....
ガラケーコラボの時も凝縮した制作は、半年くらいでした。
今回も半年ですが、開発まで全部自分で、アプリもつくらなければいけない。
凄くボリュームがありました。早急にスタッフ集めに奔走しました。
そこからどれだけスピードを持ちながら進められるか?

関係各社にどんな内容を入れたいか、全部に聞いてまわりました。
ヒアリングした内容を50案くらい企画を作成して、
NERV官給品として入っていてしかるべきもの、
入っているとおかしいが、ユーザーに喜んでもらえるものを考えました。
MAGIホームが一番ヤバイと早めに着手しました。
外装は2〜3週間で4-5回出して決まっていきました。
TGVデザイン、前回も一緒にやったチームです。

実装が本格始動したのが 2012.2です。
その後は密度がありすぎで、記憶が無いです。
その間に 2年分くらい歳をとりました。
決済が降りて、契約がなかなか締結されなくて、
いろいろな協力会社に声をかけて、α版、β版を
契約が無い中で作ってもらって、
もし契約がとれなかったら、人生終わってました。
ファイナル版が ファイナル 2,3,4,5 と積み重なって、
製品番がリリースされるのは1ヶ月前、ほんとうのギリギリ一ヶ月前まで開発が続きました。

開発チーム
PRも含めると、関わった人全部で100人、
制作開発まわりで、日々開発に関わった人たちです。
この中の何人かに詳しく話しをしてもらいます。
安生さんには途中から入ってもらってアドバイザとして俯瞰的に見てもらいました。

苦い思いも、辛い思いも一緒にすごした仲間達です。

きめゼリフ
「エヴァンゲリオン好きですか?」
最終的に企画を説明して、好きな人から仲間を集めました。
テレビ放送の最終回から観ました。「なんだこりゃ〜」と思って
そこから思春期にぶち当たって、小遣いでフィルムブックを買っていました。
キャラがどうこうというよりも、作品自体が好きでした。
EVA携帯の話が来た時は、TGBデザインの方がもとガイナックスの仕事をしていて、
デザインの話が来たときに、参加できることになりました。
偶然にしては、タイミングが良くて、携帯の仕事もしていましたし、
デザインのプロデュースしていて、熟練してきた時に仕事がやってきました。
実はすごい気合いはいってやってました。
自分自身がファンだったので、
出てくる関連商品で、「ちょっとこれイケてないな〜」と
思ったことがあったので、これを手にした人が残念に思わないように
気を使って作ってきました。
最初の端末から、三年間ありました。
最初の端末は宝物のように保存してくれた人がいたなかで
いろんなリスクがありましたが、いろいろ先走って作ってきました。

いろんな仕事をされていると思うのですが、
たぶんこれから、これからの時代けっこう自分がやりたいこと
好きなことを発言していった方がチャンスがくるのかなと
思います。普段からがんばっている人が、そういうチャンスが巡ってきます。
ぜひとも、今やっていることと、関係ないことが好きだったとしても
思っていれば、かなう時が来ると思います。
周りからうらやましく思われるようなプロジェクトに関われて
非常に感謝しています。好きな事が実を結ぶんだなと感じたものです。
皆さんも「好きなことはなんですか?」

9/20/2012

[&] Android App Designs Vol.2



----------------------------------------------------------------
Android App Designs
〜デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
----------------------------------------------------------------
http://www.ladybeetle-design.com/androidappdesigns/


前回のテーマ:
がんばって作ったデザインが
実装後に残念な結果にならないために

@tommmmy

Android アプリ XML レイアウト(日経BP)

前回:変態9-patch
より凝ったグラフィックを作ります。
Androidのアプリでグラフィックを再現する場合、
ビットマップと呼ばれる画像ファイル (PNG) を使う、
またはコードで表現するというふたつの方法があります。

1. コードのみで可能な表現
画像を使わなくてもできる表現をデザイナーが徹底解析!
CSS3 が流行ってきて、一部のブラウザでは、ある程度モダンブラウザでは
コードだけでボタンの表現が、グラデーション、ドロップシャドウや角丸が
できるようになった。
Android も同じようなイメージでグラフィックの表現ができます。
あまりやっている人がいなかたので、この部分を研究したかったんです!

2. デザインが組み込まれる仕組み
仕組みを知れば、いろいろと応用がきく(かもしれない)
画面解像度に関わらず、あったデザインを提供していける。

前回の復習:
ボタンにあてる角丸の画像 ( button_bg.9.png ← 9-patch の時のファイル名)
もしデザイナーで XML を見た事無い人もいるかもしれませんが、
CSSが分かれば、なんとなく見てください。

button_bg.9.png を XML で実装する時にはどうするか?

main.xml
<Button
android:layout_width="wrap_content"
....

テキストや画像を表示したい場合。

TextView
若干複雑ですが、許容範囲だと思います。
普通に左上に「撮影する」という文字がでてきます。
今度は、画像ファイルを実際に表示されたい場合は?

ImageView を使います。
これを実際に表示すると、画像が表れます。

TextView に 20sp を追加します。
sp は Android 固有の単位ですが、ここでは説明を省きます。
今度は、テキストカラー #f00 赤に設定します。
バックグラウンド #ccc 薄いグレーがつきます。
padding = 10dp
パディングを入れることで、隙間があきます。
バックグラウンドを画像に変えてみます。
これを変えてみると?
パディングも入っているので、余白も入ってます。
テキストを白に設定すると、奇麗になります。

今の button_bg.9.png のところ。
実は Android のネイティブアプリの場合、画像の代わりに
XMLファイルを設定しても描くことができます。
画像で設定するところを XML で書くことができるのです。

この XML ファイルをどこに置くかというと、
/res
/drawable ←ここに xml ファイルを入れておく
/drawable-xhdpi  
/layouts 構造
main.xml
/values 飾り
strings.xml

■ <shape>
コードでグラフィックを表現するためのタグ
1行目、2行目はお決まりのルール。
shape の後に「ここに色々書くよ」の部分に属性などを書きます。

shape には4種類あります。
rectangle : 長方形、角丸長方形  良くつかいます!
oval : 円  あんまり使わないけど、ローディング中の時とかに使います!
line : 線  あんまり使ったことが無いです。rectangle でも線が表現できるので。
ring : リング、何中が透過しているもの。ローディング中のクルクル回るのによく使います。

rectangle : 長方形 角丸長方形ができる。
まず、

<shape android:shape="rectangle">
size
solid
stroke
corners
だいたい、なんとなく読めますよね?
グラデーションもつけることができます。
グラデーションつける場合は、start color, end color
centerColor は真ん中の色を指定できます。

angle で角度設定。90度で横方向にグラデーションがつきます。
反時計回りに角度がつきます。
Photoshop で作るレイヤースタイルのグラデーション角度と同じなので、わかりやすいです。

type : グラデーションのタイプ。= radial
gradientRadial = 50 を使うと、
真ん中を中心にして、50%の割合で色が変わります。
33 にすると、1/3 になる。少し小さくなります。
値を大きくすればするほど、中心の円が大きくなります。

shape タグでできること
size 大きさ width, height
solid 塗り background-color
stroke 線 border
corners 角丸
gradient グラデーション
内側の余白

例:
こういうデザインがきたとき、どう実装しますか?
グラデーションがちょっと傾いている場合は?

startColor
centerCOlor
endColor
stroke
corners
グラデーションのアングルを45度設定
両方ともコードで表現できます。

例2:
下側に白い線が入っている場合は?
centerColor がちょっとずれると、コードだけでは無理。
内側に白い枠が入っている場合は、どうでしょう?
コードだけでは出来ない。

例3:
黒から白のグラデーション
下側に影のようなものがついている場合。

ボタンではなく、スプラッシュ画面のような、全体に敷くグラデーション
radial を設定すれば、コードで可能です。
centerX, centerY どこにセンターを置くかという割合の位置。
少し右側で 0.2 、中心だと 0.5

例:
タイムラインの背景など、グラデーションに下の線が入ったものは?
線なのでストロークかな?と考えます。一番下だけのストロークができる?

shapeタグでできないこと。
上下左右個別の stroke はできない。
ドロップシャドウ的なこともできない。

Tips:
ネイティブアプリでのカラーコードについて。
カラーコード 3ケタもしくは 6ケタでひょうげできます。
Android の場合、#3ccc, #5000, #25d65e94
Android の場合、簡単に透明度を設定することができます。

■ビットマップ
ビットマップをどういう時に使うのが良いのか?
ストライプであれば、一番ちいさな箱をリピートさせよう。
bitmap タグを使ってリピートさせます。

リストビュー的なもの。
ストロークでは個別に上下左右の線が入れられませんが、
その際は bitmap でやっています。
border_bg.png 1 ピクセルのボーダー画像を用意して
gravity で fill_horizontal を指定します。
(リピートすると真っ黒になってしまいます)
ボーダーを点線にしたい時は?

---- 休憩 -----------

さっきみたいな、グラデーションのかたまり、境界線だけのボタンであれば、
コードで奇麗なのですが、内側に影があったり、外側に影がある場合は、
9patch でやることになります。
影の無いものの場合は、色の指定をするので、エンジニアが作って欲しい。
「手抜きすんなよ、9patch作れよ!」と言われた時は?
スタートカラーとか、エンドカラーとか、その部分だけを書いてわたすといいんじゃないでしょうか?

■コネタタイム!

@asamieee7

デザインの確認も、スマートフォンで行うべきですよね?
お客さんにチェックしてもらうとき、
PCで見たって、良いのか悪いのかわからない(パソコンで見るお客さんが多い)
間延びしているように見えるし、スカスカだと言われることが多い。

スマートフォンで見ると、アプリ完成イメージが非常によくわかる。
デザインの確認は、dropbox とか Google Drive を活用。
そして回線は WiFi でね!
wishscope の画面、Wifi だと、「きぱーっ」3G だと「ぼけーっ」

@adamrocker

年なんで、座ってプレゼンします。
Android で Web デザイン!
iPhone は 2機種、Android は 3機種。
でも iPhone も 3機種になりました!
Chrome でデバッグできます!
ここで若干魔法を使って....
右上の設定を使うと、設定画面が開きます。
一番下に developer tool があります。
USB デバッグを有効化のチェックを ONにします。
adb というツールがあって、chrome develoepr tool remote を使うと、
Chrome の URL にlodalhost:9222 と入れると、
パソコン側のChrome がデバッグツールとして使えます。

■Chrome for Androidをリモートでデバッグする5+1ステップ
https://plus.google.com/105010782947239604475/posts/ZSgcpujb9jY
動画での説明
Chrome for Android Remote Debugging


■後半戦

eratta: 色指定は % ではなくて、16進数設定です。

例:
グラデーション
9patch グラデーションこみで 9patch にしてしまう。
黒い点で指定した部分だけが伸びます。
めっちゃ伸びた時、「ん〜やっぱりやだ」

case.2 重ねる
bitmap と shape は重ねて使うことができます。
1ピクセルのビットマップと、shape を重ねて使います。
あと、ちょっと影がついたバージョンも、重ねることさえできれば、
何でもできるようになります。

bitmap +bitmap +shape と 3つ重ねてもいいです。
縦方向に伸びる可能性があるので 小さめの 9patch にします。
レイヤーリストの中にアイテムを入れて使います。
重ねると新しい表現ができるようになりました。

例:
XML でコーディングした時に、タイトルの背景に
1px の線、背景のストライプ、ストライプはテクスチャノイズ。

9patch 1ピクセルの影のある素材が使えます。
bitmap のストライプが使えます。
bitmap は小さい範囲で使えますが、
テクスチャが不自然になる場合があるので大きめにした方が良い場合もあります。

bitmap の中は texture bg をチピートするだけ、
9patch は 9patch 化されたボーダー素材を入れてあげるとできます。
三つ四つぐらいは重ねて使うことができます。

話かわるんですが、テキストの影。
最近すごいいっぱいアプリでもテキストの影が使われています。
LINEでも、かなり奇麗に。エンボスがかかってへこんでいるように見えます。
デザイナーは是非こだわって表現してほしいところ。
コードで表現できます。

shadowColor
shadowDx :x 方向の位置移動
shadowDy : y 方向の位置移動
shadowRadius :ぼかしの大きさ

ちょっとエンボスがかかったように奇麗に見えます!
CSS と比べると凄い似ています。
CSS で設定している人も、だいたい同じ値を入れれば良いです。

shadowRadius の単位が分からない! 1px の設定と同じ?

最後に世紀の大発見!
スプラッシュ画面の奇麗なヤツ。
普通に文字が載っていますが、バックの真ん中が明るくて、周りが暗くなっています。
薄いですが、縦とか横とかのテクスチャが載っています。
まえからそういうデザインをしたかったのだが、
どこが伸びるのか分からない??
テクスチャなので、伸びたらイヤだった。

バックグラウンドだけ見ると....
左側はフラット。右側はグラデーションがかかっているもの。
texture_bg.png を不自然にならないくらいリピートさせてあげる。
#5000, #0000 (中央)のグラデーション。不透明度を変えています。
このビットマップと shape を重ね合わせると実現できます。
レイヤーリストの中にビットマップ、シェイプが入ります。

そして、できたのがこちらです!
テキストの方、ドロップシャドウ、エンボスがきいたような
昔の facebook のような、path のような、こういうのが多かったな〜
がんばったら表現できるじゃないか!

四角い影をつけたい場合は、9patch
原理がわかっていれば、「できる!」ということがわかるので、
広めていきたい。

■まとめ
●コードでかけるものは、コードで表現
●重ね技 shape / bitmap / nine-patch
●位置調整も可能

デザイナーも XML 書けないといけないのか?
けんかをせずに、私は書けないけど、できることを示して、
そういうことがどんどん広まっていけば、楽しくなっていくんじゃないかな〜と。

次回は 10/4 です!
明日の朝10時に申し込み開始!

Q&A
Q. 重たくなったりしますか?
A. 正直実験できていませんが、若干重くなる? 1-2秒変わるほどでは無い。

9/13/2012

[&] itoschool - Achille Castiglioni



展示空間のデザイン
アキッレ・カスティリオーニの誘導の科学
多木陽介氏(伊東豊雄建築塾)
-------------------------------------------
多木陽介によるプロダクトデザイナーとしてよく知られている
アキッレ・カスティリオーニ氏が手がけた展示空間デザインに関するレクチャー。
人の心理や行動を考え尽くした展示テクニックの数々。
建築、空間デザイン、キュレーションに関わる全ての人にお薦めの内容でした!

#写真は後日追加します!

-------------------------------------------
今日はですね
展示空間のデザインの話をさせてもらいます。
そもそも本を書くきっかけになったのも、
展示空間の模型をビデオで撮影したのがきっかけです。
カスティリオーニは2002年に亡くなりました。仕事にはもう戻れないとなった時に、
娘さんに頼まれて、スタジオがそのまま残るかどうか分からないので、
ぜひ記録に残したいので、ビデオに撮ってもらえないかと頼まれた。
娘さんは親友なので、軽く
模型を撮影しはじめたら、なかなか終わらない、聞いてみたら、100個以上あって、
全部撮影するのに1年くらいかかった。

AXISさんに模型のことぐらいなら書きますと言ったら、
連載するようになって、それが本になってしまった。
展示空間というのは、プロダクトの作品が250くらい。
展示空間の設計はその倍くらいの設計をしていた。
ショーウィンドウから、相当大きいものまである。
相当な数を作っていて、
「誘導の科学」と書いているが、科学といっていいくらい、
明確な基準を持っていた。
そういうところを具体的にお話していきます。
他の方々の作品も混ぜながら、
ポイントとしては、どう考えて、どう展示をつくっていったのかを説明します。

日本語での語源
展覧 = ものを広げて多くの人に見せること
展覧会を作るというのは綿密な技術もあるし、ルールもあるし
コミュニケーションの技術。
ごく日常でも使われている。
スーパーマーケットというのも、なんとなく行って、入って買っていますが、
なるべくたくさん買うようにうまく仕組まれている。
スーパーは他と違って、だれでも簡単に出入りができます。
だれにも話しかけられないで、レジまでいけるし、
言葉が分からないひとでも利用できる。
はいりやすいというのは、相当いいアイデア。

入り口には生鮮食品が並んでいて、野菜、果物、
魚、乳製品、パスタ、オリーブオイル、洗剤とか、清涼飲料水とか。

アメリカのスーパーマーケット
同じようなジュースが並んでいるように見えて、
一番良く売れるジュースは人間の目の高さにあり、
売れる棚は商品でいっぱいにしておくほうが良い。
商品が少ないと、貧乏くさくなって、人が寄ってこない。
ストックがあふれても、売れる商品は在庫を持っておいたほうがいい。

スーパーマーケットの構成は、人の心理をうまく操作するように出来ています。
こういうノウハウは、戦後、建築家やデザイナーが
展覧会のデザインで培ってきたものが、
高度成長のあとに店舗のデザインにすっかり吸収されてしまった。
ユニクロとかもそう。

問い:最近一番印象に残った展覧会は?
伊東さんからなにかありますか?
伊東:ベネチアビエンナーレです!(笑)

一般A. パールクレー。かなりの点数見た事が無い作品が並んでいた。質感が新鮮。
一般B. 千葉の美術館で。考えられていなく、雑然と置かれていて、見る人が自由に見ることができた。
一般C. 子供達の作品を作る過程が見られてよかった。
一般D. ぱっと浮かんだのは伊東さんのミュージアム。転がってみると気持ちいい。行為自体が気持ちいい。
扇島にある展望台でコンサートがあって、石段で転がって音楽を聞いたのが印象に残っています。
一般E. 建築家の展示で、スタジオムンバイ展。建築家のアトリエを再現したようなもの。
普通は構えてしまうが、そのギャラリー間でやっているものは、自分と展示物が対等で自由な感じがした。
一般F. 幼少のこと、エッシャーの展覧会。ファーストインプレッションで見るのと、目を凝らして良くみるのとでは違う。

質問はこのくらいにして....

こういう作品が良かったというのがありますよね?
作品が良かったと思えるのも、ちゃんとした見せ方をしていたから。
それを肌で感じるように見せてくれなかったら、おそらく感じられたような感動はなかったかもしれない。
スーパーマーケットと同じように、
こっちが気づかないうちに、見せられている。

個々の展示以上に、全体にある物語や意味、雰囲気とか、
そういうものが浮き上がってくる。

今日お話していくなかで、単に展示物の善し悪しではなくて、
ある意味フィクションが生まれてくる。
その中で、ものをある商品の中。
CMが身近なもの。

去年くらいまで、よく流れていた、ソフトバンクな変な一家のTVCM。
非常に奇妙な一家なのだが、それがお互いに仲いいコミュニケーションの
道具である電話の宣伝になっている。
このイメージは日本の人のほとんどが覚えている。
展覧会の最大の目的は、
展示会は短期間のもの、それによって、永遠に印象づけるのが重要。
フィクションの形をとることによって、商品だけではない、
記憶の中に印象を作る。
CMは短い映画のようなもの。
展覧会のことを良く映画にたとえていた。

■展覧会 = 映画に近い体験

展示会を歩き回って、自分たちは観客であるとともに、映画の主人公になる。
そういう映画みたいなもの。
映画のように作るというとは何をしないといけないかというと。

何を語るか(シナリオ)
いかに効果的に語るか(演出)

普通だとあるテーマに沿って、専門家の先生がキュレーションして、
デザイナー/建築家が空間を作るという関係がある。
起承転結をつけて論理的な流れがないといけない。
そうやって出来て来たシナリオの1シーン1シーンをどう演出するか?

彼の考えの中では、美しい空間を作ることではなくて、
人間が歩いていって、結構な時間を過ごすなかで、
一時間、二時間、会場からいろんなコミュニケーションを受ける。
活発なコミュニケーションの場として。
観客はどういう振る舞いをするのか?
それを知ってないといけない。

■観客はどう振る舞う存在か?

観客というのは、ちょうど、森の中をえさをさがしてうろうろする動物のようなもの。
動物の場合は嗅覚だが、人間の場合は、好奇心にしたがって、カオティックに歩き回る。
二つ態度がある。
もうご自由に見てくさいいという態度もあるし、
きちんとしたシナリオのものに、人間を誘導してみせる場合もある。

好奇心にも、いろんな段階がある。
4つくらいに相手を分けていました。

1. 大雑把な需要で満足する人たち
2. きちんと理解したい人たち
3. 細かいことにもうるさい人たち
4. 子供、若い人たち

1.の人にも強く印象に残るようにしなければいけない。

2. の人、いったい何がここで起こっているのか?きちんと論理的に説明があって、
その後、非常に分かりやすく見やすくつくってあることが必要。
鑑賞を助けるように作ってあること。
特別な才能がなくても、注意すればできること。
基本として考えておいてください。

3. 主題になっていることをすでに良くしっている人が見に来ても、
なにか間違えてないか?と重箱の隅をつつくような人に対しても
きちんとした仕事をしなければいけない。

4. とにかくたいくつしないように楽しませる。
20世紀に活躍中のピーターブルック(演出家)の判断の基準は、
「たいくつ」自分たたいくつし始めたら危険な兆候。

4つが全部はいっていて、4つの相手を考えて展示空間をつくっていく。

■演出ポイント
1.合理的配置
2. 変化
3. 驚異

見やすく、論理的にできているという合理的な配慮。
展覧会というのは長い時間みてあるくので、変化が無いと飽きてしまいます。
どこか、ハッとさせるものが無いといけない。
非常に自然に流れていても、作り手は非常に細かいことを作り込んでいる。
どこかに強烈な印象が残るシーンがないといけない。

■合理的な配慮:
論理的構成
みやすく、分かりやすく。

63年のもの。ミラノの大聖堂にある、王宮での展覧会
「水の道」河川の文化についての展覧会。
ミラノは町中に運河がたくさんあったが、車文化になって埋め垂れられてしまった。
1963年ごろに復活させようという動きがあって、その支援のための展覧会だった
大きな空間だったのだが、工事現場で、多いをする時の安い材木の板を使って、
それで一種の水路みたいな通路を改めて作ってしまって本物の模型やグラフィックがあって、
プロジェクタがあって、いろんな音が使われ、五感に刺激を与えてくれる内容であった。

水運の経済だったり、イタリアが19世紀にどんな歴史を経て来たか。
その中で水路の歴史や、川の周りの民衆の文化だったり、言語だったり、
いろんな項目に分かれています。
こういう形ではっきり構成を作って先に進めていく。
ただ、これはキュレーターの仕事なので、そこは深めないで先にいきます。

■見やすくわかりやすく。

焼き物の茶碗などを見せるときに、どんな高さに置くか?
どんな背景の上に茶碗を置くか?
例えば、シルエットがはっきり見えた方がいいので、
低いところに置いても意味がない。見やすい高さがある。
どんな展覧会でも言えること。

見やすい位置に展示されている。
キャプションが膝の高さにあって、しゃがまないと読めないものもあった。
同じ展覧会で、クライマックスを生み出す空間を作るとか。例としてあげました。

作品を見せていくときに、照明をどういうふうにあてるか?
見せるべきものが浮かび上がってくる。

悪い例:全部かげになってしまい、よく見えない。

■「もう半分の前衛」展 1980
実は断面を見てみると....
大きい空間で、小さい絵を見ると、ショボく見えてしまう。
もっと親密な空間を作ろうということで、空間を小さくしようと考えた。
非常にうまいこと間接照明をつかって、人の目に照明が入らないようにした。
ガラスがかかっている絵で光が目に入るにはうっとおしい。

壁のところを必ず右から左に歩くようになっている。
キャプションが書かれている方向と反対には絶対に歩かせるな!
順に見てもらうため、一つの壁は使わない。
油絵を見てもらうためには 70ルクス以下。
あまり明るい照明は使えない。
さんさんと明るい季節の場合は?

入ってすぐの空間を暗くして、イントロの映像を映写していた。
しばらく見ていると、部屋は暗いので、
それに目が慣れると、薄暗い部屋に入っても
薄暗いと思わないという錯覚をうまく使った。

■光について。
スイスのパウルクレーセンター レンゾピアノ建築。
びっくりしたのは絵の照明に立つと、自分が映らない。
絵の真っ正面にいる時には光に当たらないように、調整されている。
ガラスで保護されたキャンバスにたっても自分が映り込まない。

フォルクスワーゲン、フェルナンデジエ展示、吹き抜けの空間。
屋根をかけないで作った。
必ず達成しようと思っていたポイントは?
まず、絵をかける壁には、絵以外のじゃまなものはいっさいつけるのを止めた。
キャプション、値札みたいのをつけるのを全てとってしまって、
サラの壁にして、なにもじゃまなものが無いようにした。

観客があまり近づかないようなしきりを考え、台のようなものを設置した。
わざわざ踏み越えてしまうことも無い。
台の上にキャプションを書くようにした。
合理的でシンプルで邪魔にもならないものになった。
それだけでは満足せず、
台にの傾斜を、逆方向に傾かせた。
絵を見ているときにはキャプションに気づかず、近づいた時に初めて気づく。
なんか人をびっくりさせてやろうというやんちゃなところがあった。
観客が「ハッと」する時、心が動いた時は、非常に印象に残る。
ただ論理的にシンプルにうまく出来ているという状態だけでは
我慢できなかった。
論理的に考えていくとなかなか出来ないが、
最後に出来たものを見ると非常に良くできている。
びっくりするのは一回だが、その一回だけでいいのだが、ふれあいの瞬間があればいい。

こうやってびっくりさせる、おどろきのポイント。
ここまではだいたい論理的で合理的な思考のつみかさねで出来てくるところだが、
そこからより活発なコミュニケーションを。

■変化
展覧会:あるきながら見て回る
→時間がながれる
→この時間が「変化」に満ちていること。(生き生きしたシークエンス)

ちょうどある時間がたった時に、がらっとなにかかわること。
同じリズムで続くと退屈になっていくる。
変化は注意力を常に喚起する。
うまい俳優だと一つのセリフの中に三つの意味、ディテールを詰めることができる。
観客の注意を引き続けるポイント。

多様な空間が織りなす空間。
部屋ごとに風景が変わっていく。

バロックの建築展
今だとCGですが、クライアントに見せるために木の模型を相当精巧につくり、
想像図の油絵や、ビデオや、いろんなメディアが混ざって一つの展示を構成していた。

■動きのある空間
部屋があった時に、グリッドみたいに整った展示は作らない。
そういうものはスタティックで面白くない。
壁がまっすぐなものは皆無。斜めに置いてみるとか。
娘さんがジュエリーのデザイナーなのだが、展覧会をする時に、
おおきなテーブルを置いていたのだがつまらない。テーブルを斜めにしたら急に空間が生き生きしてきた。

1984年の個展。動線が動きをうむような形で置いていく。
空間的に動きが出てくる。グリッドにしてしまうと、つまらない。

「光と影がないと音楽にならない」アキッレ・カスティリオーニ

悪い例:空間は素晴らしいです。
1m x 150くらいのもの。照明に対する配慮が無かった。
全部均等に同じ明るさだった。

別の場所での展覧会。
空間の中に明るさの濃淡があることによって、
空間の中のエネルギーが描け、観客は自然と光に寄せられていく。
真っ平らな照明は避けよう。
光によって、空間にリズムができる。
部屋と部屋。照明の明度が違うと動きがでてくる。

個展:
全体的には薄い照明の中に浮き上がってくるような照明。
光の濃淡がかなり変わってくる。
ルートの中にモノが有るだけではなく、空間にリズムが出てくる。

■光の誘導機能
バレンシアの現代美術館。光には誘導機能がある。
正方形の大きな空間があって、周囲に展示の場所がある。
ほとんど暗くて商品のところだけあかるく浮き上がっている。
中央の廊下だけ明るくなっている。人が自然と集まってくる。
古代の神殿の内部のような照明になっている。人の動きにもうまく機能する。

■連続する空間の生む変化
空間的に変化を取り込んでおく。
ガビーナ。イタリアのエディタのショールーム。
とにかく段差がそこら中にある。子供なら遊び回る。
床が平らではないということは、絶えず視点が変わるということ。
空間を肌で知覚する仕方が常に変わる。
視点を変えるのに、非常に有効な手。


■モンテカティーニ 化学製品を作っていた会社。
まっすぐな壁や通路はほとんどない。
先があるなと思いながら、先は見えない。
回遊式庭園と全く同じ作り。一瞬一瞬はクライマックスがあるが、先はわからないという作り。
全体が見通せる段がある。
自分が迷路の中入ってしまうと、全然別な体験になる。
一瞬一瞬はあるのだが、先は見えない。見えないことによって、好奇心をかき立てる仕組み。

「デザインと住処(イタリア)」
入り口では先が見えない。いちど上に来ると全体が見えるという体験をして、
中に降りてしまうと、完全な迷路を体験する。
上から見たときには想像もしなかったような好奇心が沸き立てられる。3つの体験。
迷路というしかけ自体が、風景が変化していく仕掛けになっている。

入り口から入ってくるときには、かがり火のような4m 2000W の照明。壮観。
スペクタキュラな照明。
階段をあがると、風景が開ける。
入り口の前のところ、高台に登ったところ、降りたところ、三種類の体験。

■驚異
MOSTRA(展覧会) MOSTRO(怪物) そっくり。語源が共通している。

驚異、驚嘆:普通ではないもの
→何かすごいもの
→強く印象に残るもの
一番驚異驚嘆した展覧会。ディーファー現代芸術家。テレキャストしたコンクリートを積み上げた
7本の塔。巨大な倉庫。
文明があぶなっかしいモノだという象徴。あまりにも大きいのもあって、
頭で考えるよりも、ショックを受ける。
人を惹き付ける一番の手としては、普通じゃない空間。
普通じゃないサイズ 

■異常なサイズ、異常な空間
全国ラジオ展の展示。巨大なラジオ。
殺虫剤の展示会。対処となる虫達を巨大な模型として見せた。結構びっくりして見ている。

空間のほう。
ある程度の空間には慣れています。
そのどれかが少しづつ歪んでいたり、途方も無く高かったり、段差があったり、
一つでも違う要素があると「面白い!」と感じる。
普通じゃない部屋を心がけていた。
「水の道」展覧会の一番最後の展示。深い水路のようなダムのような空間。
身体的に印象に残る空間。

ミュージアムのコレクション。
何が普通でないかというと、壁が浮いている。
絵がかかっていくのだが、壁が下に向かって傾斜している。
一番最初のモチベーションとしては、会場の光が目に入らないで
まっすぐ落ちるように。向こうに立っている人の足が見えるのが面白い。

迷路の展示をした空間と同じ。
広さを強調するように天井を 2m に下げた。
吹き抜けのように逆さまの井戸のような空間があった。
「科学によって明るい明日を築きましょう」というテーマ。
美しいグラフィックで、化学の力で健康な食品を作りましょう。完全な身体を作りましょう。
未来の交通手段を考えましょう.... という地球から宇宙にむかっていくような展覧会
鏡を非常にうまく使った展示空間も。
「より安全な明日を作るための化学」
グラフィックはマックスフーバー
周りを見渡すと、見えるのは人間ばかり。
ある意味、上を向くからだというのは、見ている人間は上を向いている。
皆が上に向かって、ベクトルが揃っている。
機械化された身体のようなものを表現
かなり身体的に驚きを感じられた空間であった。

身体的にかなりショックがあったもの。
ミラノサローネで吉岡さんがレクサスの展示。
霧の中に見えるようなディスプレイ
天井からビニールの縄跳びのようなヒモを数センチ間隔で釣ってある。
外から見ると。
中に入ると、霧の中にいて、距離感が無くなる体験。
身体的に驚く体験。子供達はおもしろがって遊んでいた。
外から見た時にも予想もできない体験だった。
予想ができたのは、展覧会の仕掛けとしては何か足りない。

■鏡によるイリュージョン
鏡を良く使った。50年代60年代はCGも無かったので、鏡を良くつかった。
鏡があることをなかなか気づかない。自分が鏡に映らないと、鏡だと気づかない。
鏡を気づかせない仕掛けがある。

下に鏡が張り巡らされている。
奈落のそこのように永遠に反射する合わせ鏡。鏡が高いところにあれば
見えてしまう。最初上の鏡には気づかない。勝負は一瞬でつくので、
最初に気づかせないで見せられるかどうか。
分かっててみればたいしたことないが、知らないで見るとびっくりする。

■照明(光)
光を使って人を驚かせる仕組み
1954トリエンナーレ。3メートルの布の上からの照明。
光った雲が効果的に見えるように、天井を真っ黒に塗った。
相当壮観であった。

小さい電球を無数に吊るしてつくったポエティックな照明

フロスのパーティ、ペンダントランプを200個釣って、美しかった。

昨年のサローネ。東芝の展示。
ストロボの周期が変わることで、水が落ちるスピードがあうと
水滴が止まってみえる。水が被写体となっているのが面白かった。
水が落ちているのはすぐに分かる。砂利がひいてあるので、すぐにわかる。
音がなかったら、もっとビックリすると思った。
音がしないで水滴が止まっていたら、一瞬何が起こっているのか分からなかっただろう。
別の音を流すか、水滴の音が出ない仕組みにするか。
音が出なかったら数倍びっくりしたはず。

「ファッションの原動力」使っていない駅の中に高さ7m の印刷した布。
会場を設計する前にカタログが出来ていた。そのカタログを作った人と、
会場構成をやることになっていた。カタログを見たグラフィック イタルルーピ。
文字で語らなくてもグラフィックを通してファッションが機能することを語っている。
カタログのページを張り巡らそうと考えてできたのがこの展覧会。
他に洋服もなにも展示は無い。

■音響効果
五感にいろいろ働きかけるという意味。
水の道の展覧会の時にも、川や水路でやっている音や、周りの音、言葉など
いたるところに、いくつか章立てができるように1シーンごとに関係のある
音声をかなり流れていた。

イタリアの国営放送の展覧会。テレビが始まったばかりのころ。
国営放送ライの依頼によるもの。放送がどういう風につくられているのか?
という基本的なことを啓蒙するための展覧会をいたるところで移動展示した。
テレビも映画も静止画像が流れることで動画になる。
そういったことを人に分からせるために、ドラムがあって、絵がかいてある。
止まっていたり、回ったりする。回り出すと、全然別な絵が見えてくる。
テレビなコミュニケーションはダイナミックなものだと
コンセプチャルに伝えていくもの。回るたびに音の仕掛けもあった。

大都市と未来の都市展
はいっていくと、床がふかふかになっていて、足音がしないようになっている。
床の音がしないのは不思議な空間。
飛行機の離着陸の音が聞こえてくる。

■ユーモア、皮肉
かなり人の知的な部分にひっかかるユーモアが使われていた。
外から見るとビジターそのものが見せ物になる。

1984年、仕事をはじめてから40年くらい。思いっきりふざけてみたもの。
この展覧会のテーマは、普段見慣れたようには見えないように展示した。
巨大な鳥かごをつくって、洗面器具を見せると、巨大な鳥用に見える。

このベンチは「月面着陸」というガーデンチェア。
ガーデンチェアを斜めに設置すると、虫に見えてくる。
我々の知覚はいい加減なもので、いろんな可能性がある。
道具やものを集めてきて、いったい他の何になるか、いつも考えている。
機能を転用して、また別の作品を作るという想像力があった人。
レオナルトという職人さんようの脚立。トランプのピラミッドのように見える。
すべてが巨大なサイズができていて、自分が小人になったような不思議の国のアリスになった気分。
魔法の庭という感じの展覧会。
いろんな想像が生まれるような空間。
リキュールの中に香草が入っているもの。
おもいっきりスタックした椅子。
巨大なカメラの中が明るくなっていて、照明器具の展示場になっている。
折りたたみいすを思いっきり並べたもの。
金ピカなもの、なるべくシンプルに安い材料で作るようにしているのだが、
なぜか高級商品になっている。それに対する皮肉を投げかけている。
リクライニングチェアを組み合わせて観覧車風のものを作った。
猛獣の檻の中に、子供部屋のセット。親の強迫観念をセットにしたもの。
照明器具がひとつひとつ順番についていく。

■「化学によるより豊かな食料」
最後に、非常にいままで見て来たいろんな要素を見事につかっている展覧会。
これから我々の食料はどうなるんだろうか?
大きな展覧会場の中に、それぞれテーマがある。
入り口:骸骨が転がっている砂漠。薄暗いところ。
病院で赤ちゃんが生まれてきたときにつけるリボン。赤ちゃんの鳴き声の音がする。
人間はどんどん増えていくことを示している。
次の空間に行くと、見えてくるのは、舞台の書き割りのような、豊穣な空間セット。
最後に未来派の絵のような、化学の力で。インダストリ礼参。
全部の部屋がかなり違う。大きな映画のようになっている。
自分がその中に入って、部屋から部屋へ。

展覧会はなんでも作っていいのか?
倫理的
会社の福祉厚生。マネキンで表現。
これはちょっとウソだと思い、そのまま展覧会にするのはためらいがあり、
マネキンがどうもグロテスク。
かなりはっきりとデザインを倫理的なものとして使わなければいけない。

展示会づくりのノウハウに関しては終えようと思います。
こういうノウハウは次の時代に、消費空間に吸収される。
また、現代より人間的になってきた。
ボローニャの図書館。昔証券取引所だった建物。
図書館作りのフリーランスのプロフェッショナル。「知の広場」という本。
現代の新しい図書館の傾向。まさに広場のように簡単に誰でも入ってこれる。
図書館の利用率が低い。市民のたった10%の利用だけでいいのか?
公共図書館は人に使ってもらわなければいけない。
本を借りるだけでなく、いろんな機能を持たないといけない。
図書館の中にカフェがある。
ここに来るまでに、いっさい何のカウンターも関所もない。
普通の図書館は入ったらすぐにカウンターがあったりするが、
慣れない人にとっては心理的なバリヤーになってしまう。
置くにカウンターがある。単に待ち合わせに使ってもいい。託児所もある。
2階は書架。三階は展示場。
スーパーから習った、人が入りやすいという事柄に習った。

実は、いろいろ培った展示会のノウハウが一世代2世代移って来て
ロンドンにあるアイデアストア(図書館)
移民が多い土地で、英語の本が読まれなく、利用率が低い図書館であった。
立地が非常に考えられていて、人が来やすい場所にある。
入りやすさもあるし、開館時間も考えられている。
曜日のよって違いがないように、曜日ごとに違いはなく揃っているほうが良い。

サンジョバンニ図書館。カウンターが入って来た人の真ん前にあると
ためらうが、横にあると、入りやすくなる。
商業スペースから学んできたところがある。
中で動く人たちの心理をどうやって観察するのか?
図書館の禁止事項の表示が無い。なぜか? 人が止めればいい。

展示会の技術が、商業空間に移っていったが、
また戻って来た。人がコミュニケーションする場が街に戻ってきた。
知の広場としてのパブリックライブラリがある。

Q&A

Q. 映画みたいなものは時間を固定する表現形式。見る人が同じ時間で同じものを見る。
本みたいなものは時間を固定しない。見るひとのスピードでみる。展示も時間を固定しない。
見る人の時間の速さを誘導するための工夫は?
A. どのくらいの時間で見せようというのは考えていた。毎回展覧会をするのは実験でもある。
人が何分くらいで出るのかを計っていた。この仕掛けだとどのくらいのスピードで歩くなど。
タイムを計っていました。
見る人が自分で作っていく映画なので個人差はある。

Q. スタジオにはミュージアムのようにいろんな道具、デザインのものが山のように置かれていて....
という話。ビデオで撮影されていましたよね? 大学で講義に行くときに、机にばらまいてデザインの話をした。
というあたりを簡単に....
A. 偶然そういうシーンに出会った。
質問がどうもつまらなかったらしく、先生が居なくなってしまった。
一見ガラクタにしか見えないものを並べて、モノの話を始めた。
ちまたであるような単純な道具であったり、ブリキのおもちゃであったり、
ぱっとみるとどこがデザインか分からないようなものも、必ずとこかに「知恵」がある。
どんなものでもそれを作った「知恵」がある。それを見抜くところからデザインがある。
いくつかものをもってきて、最初ある程度自分で解読する方法を見せてくれる。
その後、学生にモノをわたして、成り立っている一番大事な部分は何でしょう?
デザインの一番大事な部分は何なのか、見抜く。
「腕時計」の一番大事なポイントは何でしょう?
腕時計のデザインをしている人は文字盤のデザインをどうしようと考えるが、
時計を「腕」につけたことが一番重要なこと。腕時計の前は懐中時計だった。
手首につけると0.数秒で時間を見ることができる。
時計を腕にもってきたことが一番大事なこと。
歴史的にどうやって生まれたかというと、ドイツの兵隊が、手榴弾を投げる時に、
安全弁を外して、秒を数える時に、懐中時計ではなかなか困るので、懐中時計を
自分で腕に巻き付けて使った。上官が腕時計が発注して作らせた。
商品として初めて作ったのはオメガだが、兵士の必要性から生まれたもの。
ものを解読するのはあたりまえだと思って、うけとっているモノを自明の部分を
考えなくなってしまっている。トンカチの形。
原始人が石を使っていた身振りが延長して、トンカチになった。
「コップ」を疑うことがから始める。これが成り立ったところを突き止める。
椅子はこれでいいのか?もっと単純でもっといい形は無いのか?
椅子はなんのためにあるのか? 名詞の部分から元をたどっていくと、
人間が座るのはなぜか? 足と背中の筋肉をリラックスさせるためにあるのが「椅子」
もっと自由に発想して、現在の椅子の形にとらわれないものを作ることができる。
モノの名詞から動詞になるくらいまで解読して自由な発想ができるようになる。
その時、どういう発想しなおすことができる。
今世の中にあるものを解読して、発想しなおすことができる。
モノを作る一方で、なんでも解読するような「病気」を学生に伝えたかった。

伊東:凄く大事なことだと思っていて、「いいデザインとは?」とかすぐに言うが、
固定観念のなかから出られなくなって、堂々巡りすることになる。
ハウスメーカーの建築を、建築家はだいたい「こんなもの!」と思っている。
それはそれで売れるために努力をしているのだが、どうしてそういう材料を使っているのか?
そういう建具をつかっているのかがわかるとよい
良いデザイン、悪いデザインというのを外して考えると
意外なところから、素晴らしいデザインが生まれてくるのではないだろうか?

伊東:「最終的にはデザインをしないことがベスト」と言っているが?
多木:デザインをやり尽した後に見えなくなっても悪く無いが、機能と効果は残っていて欲しい。
テーブルに置いたものがそのままでテーブルが消えてもいい。
照明の明るさがその明るさのままの光が残るなら、照明器具が消えてもいい。

伊東:プロダクトとしてデザインはしているだろ。デザインが無いわけではないけれど、
彼が理想とするのは、匿名なものになった時が最高。
その思想がデザインに表れるので、そのデザインが気持ちイイものとなっている。

9/06/2012

[&] Android App Designs Vol.1



----------------------------------------------------------------
Android App Designs
〜デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
----------------------------------------------------------------
http://www.ladybeetle-design.com/androidappdesigns/


@tommmmy
この勉強会を始めようとしたきっかけ。
エンジニアに渡したデザインが思わしくない見栄えになって帰ってくることが多い。
自分で XML 書いたらなんか変わるかと思ってはじめた勉強会です。

@asamieee7
Androidのデザインは 9patch 重要
お客様から要求されるレベルと実現できるものの違いに
変態9patch で、新境地が開けた。そこで勉強会をしようと考えた。
エンジニアから帰ってくるデザインを見て、はきそうになっていた。
計算しつくした余白が崩れて帰ってくるとがっかりする。

@adamrocker
広い気持ちで、つきあってもらえれば.....

サブタイトル:がんばって作ったデザインが、実装後に残念な結果にならないために

■第1回:導入と9-patch編

@tommmmy
なぜ残念になるのか?
エンジニアまかせだから
デザイナーは実装のことがわからない。
エンジニアはデザインのことをわからずに実装しているから。
実装のことをわかっていたら、組みやすい、理にかなったデザインができる。

■制作のフロー
Web:  Visual Design -> Coding(HTML/CSS) -> System
Android: Visual Design -> Coding (XML) -> System

Android の場合、XML まで手を出しているデザイナーは少ない。

■XMLの実装
ちょっとでも知識があれば、実装可能かどうかがわかる
100% できなくてもいいので、ちょっとでも知っておこう
余白を詰めれることがわかるので、エンジニアと話ができる。

■デザイナーが教える Android XML レイアウト

http://itpro.nikkeibp.co.jp/article/COLUMN/20120113/378483/


■最近よくみているサイト。
http://www.android-app-patterns.com/
海外のアプリがたくさん紹介されていて、どれもとても奇麗。
すごい細かいが、余白が奇麗についている。
グレーの線の下にハイライトの白い線が入っている。

■magic hour カメラアプリ
アナログ感がとても好き。
実装してくれるエンジニアもいるかもしれないが、
こんなデザインを提示しても、リジェクトされる。
カスタムUI のスライダーが奇麗。

ダイアログのカスタマイズも、今回 simeji でやらせてもらった。
こういう風に手をいれれば、良くなるので、エンジニアにやってもらいたい。

■1. 導入
Android アプリを作るには?
デザイナーにとってはむずかしくないの?
アプリのデザインで気をつけることは?
軽量化のために?

■Android アプリを作りには
Eclipse, Android SDK が必須。
デザイナーにとっては敷居が高い。ターミナルの黒い画面が「嫌!」
ターミナル画面を白くすれば、怖く無い。「茶色とかもあるよ!」
git とか svn とか意味わからない。教えてもらって乗り越えて欲しい。

■なにでできているの?
レイアウトまわり XML
ロジックまわり Java
HTML も XML , ぱっと見わかる。
LinearLayout div みたいなもの
TextView h, p みたいなもの
ImageVIew img
CheckBox input type=checkbox

■resディレクトリ
drawable-xx 解像度ごとの画像ファイル
layouts HTMLみたいなもの
values CSS みたいなもの

■ここがわかると、まず一つ進む。
Q. デザイナーにとってむずかしくないの?
A. 環境構築さえできればなんとかなります。

■画面解像度と、画面サイズ
なぜこんなに苦労する
画面解像度がバラバラ
iPhone の場合、density 等、同じ
Android の場合、同じ画面密度でも画面サイズが違ったり、縦横比も違ったり。
画面比を考えないと、余白が違ってくる。

160dpi = mdpi
240dpi = hdpi
320dpi = xhdpi
画像のパーツを作るときにどういう比率かが大事になる。
mdip を 1として考えると、hdpi が 1.5倍、xhdpi が2倍。

hdpi = XPeria arc, INFOBAR Galaxy S2
xhdpi = Galaxy Nexus, Galaxy Note

■Q. こんなにいっぱいあるのにアプリのデザインはどうつくる?
A. xhdpi まず 720x1280 xhdpi 用につくる。

もし xhdpi で作れば、0.75倍、反対なら 1.33倍しなければいけない。
実際、
1pixel の線を表現したかった。1.33倍すると、ぼやけるのが嫌だったので
Photoshop でそれぞれ作った。
アイコンのパーツ、細い白い線がぼやけてしまうのが嫌だった。

両方サイズ用を作らなくても、
片方分でも表示はされるが、画像のサイズを指定しないと、大きく表示される。
逆に、小さいものを大きな端末で見ようとすると、
画像が眠くなる。ぼやけてしまう。
Redita ディスプレイで見た感じ。
大きい方で作って、小さい方にあわせ、微調整する。

■Q. 解像度違いのデザインはどうやってつくるの?
A. 大きいものから作るとらくちん(ただし微調整)

■Android デザインで気をつけること
画面サイズ。iPhone 2種類。Android 星の数。
画面の縦横比:iPhone 同じ。Android 種類によって違う
フォント:iPhone ヒラギノ。Andorid 機種によって違う。

文字により変化する部分がある。フォントが機種依存だから。
Q. Androidアプリデザインを考えるときに気をつけること
A. 画面サイズが多少変化しても耐えられるデザインにすること。

■simeji PhotoShop 最初の画面がキュウキュウ。
多少画面サイズが違っても大丈夫なよう、余裕のある画面デザインにしておく。
HTC と Galaxy での比較。
端末の解像度や画面サイズが違うので、絶対さけられないこと。
デザイナーもそのことを知っておいて欲しい。
タブレットの場合、出来ないことは無いのですが、非常に大変でした。
タブレットは文字のサイズも違う。原因はわからないのだが、文字の表示が変。

余白をじゃっかん大小して自然に組めるデザインがいちばんうれしい。

■アプリの軽量化も考える
重いのは画像です。
コードで書けるものはコードで書こう(→2回目に詳しく)
アプリも Web も共通している。

XMLの実装
ちょっとでも知識があれば、実装可能かどうかわかる
100% できなくてもいいので。

今日のメインイベント!
9-patch
グラフィックを作っていくのにはどうしたら良いのかをお話ししていきます。

9patch とは
なぜひつようなの?
知っておく必要?
ツール
応用

●9-patch とは
Android アプリのデザインでキモとなる9-patch
CSS(CSS3) でいうと border image と同じようなもの。
画像を9分割して、4隅は固定、その他を伸びてもいいようにする。
Fireworks の 9スライスと同じ。

Q. なぜ必要なの?
A. 伸縮のことを考えないといけないから。

ボタンの文言が変わったら、横に伸びる。
背景画像、角丸が4隅にある。4隅を保護しながら、伸張する。
この角丸の分を、9patch をせずに、拡大しようとすると、
縦横比が違うので、ちょっと縦長になり、微妙に違う。
画面にフィットするようにのばすと、角丸が歪んでしまう。
普通の人は気づかないと思うが、角丸が縦長になってしまう。
エンジニアさんは気にしないですよね!
口をすっぱくして言いたいのは
縦横比を勝手に変えないでください!!
絶対やらないでください。
やり方がめんどくさいのであれば、デザイナーに相談してください。
絶対タブーですね。
デザインを最初知らない時に、文字を勝手に長体にした時に、すごい怒られました。
縦横比を変えるのは絶対NG!

Q. 知っておく必要があるの?
A. あると思います。エンジニアにもの申すために!

仕組みと作り方。
伸びる部分と伸びない部分を決める
中のコンテンツが入り込むエリアを決める

黒い点(線)で表現
かきだしたパーツの上下左右に 1px ずつ余白を追加する。
伸びる部分と、伸びない部分 
上部と左側に黒い点(線)をかく
ピクセルを打ったところが伸びるところ。
これを頭に叩き込んでください!
小学生くらいでもわかると思います。

線になると、今度はピンクの領域が伸びる部分になります。
想像することが大事です。
黒く指定した部分が伸びます。
このデザインに関しては、結果が同じです。
これは伸びても耐えられるデザインです。

グラデーションがはいった場合、頭を使います。
これで9patch で奇麗に表現しようとしたら、どうしますか?
まず、1ピクセルずつのばしてみます。
縦のラインに関しては結果は同じです。
問題は、縦方向です。同じ色で伸びます。

くどいと思っているでしょ。これ大事なんです。
線で指定した場合は、おおきなグラデーョンになります。
のびても大きなグラデーションになります。

今度は、1px 2点うちます。同じ色が並んでいる部分があります。
ここで3種類やりましたが、結果は微妙に違います。
もっこり感がビミョーに変わる
デザイナーはグラデーションを重視して作っているので、
どれが一番いいのかは、場合によって変わるし、色数によっても違います。
色の差があまりないグラデーションの場合、横縞が出てします。
仕組みとして、どこをのばすか、何個点をうつとどう変わっているのかを
理解して欲しい。

@asamieee7
■デザインをしていて、これでオッケーです。となった後。
パーツの書き出しの作業がある。
認識が異なる。
パーツを書き出すのなんてすぐでしょ?と言われるが....
画面サイズによって4種類のパーツを用意しなければいけないが、
それをマッハでやらなければいけない。
一個一個やっていると間に合わない。バッチ処理。

720px → 100%
640px → 90% iphone4
480px → 65%
320px → 43% iphone3GS

パソコンが勝手に計算してくれるので、マッハで終わります。
xxx.png を xxx@2x.png のファイル名をつけてあげるとイイじゃないでしょうか?

@tommmmy 鬼のような仕事ですね!
@asamieee7 いや、楽しいです。

休憩

@adamrocker
コネタを。
KUSOムズイ!
知っておくとお得なことをお知らせします。
タテスクロールたくさんしたら、気持ち悪くなるので、気に入ってます!
Google Developer Expert (Android)

ディスプレイの種類、KUSO多いわっ!
Android は 200種類あると言われているが...
エミュレーターの中でも、何にするのか選ばされるのが、Androidの良いところ!

OSバージョン互換。KUSOやわ!
バーの色が微妙な感じ。
なんかしらんが、ほかの会社は黒かったりする。
さらにひどいのは、Andorid 3 からは黒くなりました。
この下に、ナビゲーションバーがでて、変なハードボタンを止めますとなって、
ソフトウェア的にボタンが出てきて、ディスプレイのサイズがめちゃくちゃになっています。

全部に対応しようず!
理解不能、理解不能、理解不能
どうするといいのか?
I phone
最近は両方しないといけない?

答え
小さくスタート
たくさん端末があるが、メジャーな端末は決まっている。

Screen sizes and densities
http://developer.android.com/about/dashboards/index.html
最近 xxlarge というサイズがでてきた。
hdpi normal, xhdpi normal をカバーすれば 7割対応。
その他は、自分の持っている端末に対応すればいいんじゃないかと。
3パターンやれば、いい!
これならなんとかなるんじゃないかと。
小さくスタート
大切なのは完成度の高いアプリを作ること
Google のランキングを考え、評価が高くなる。
iPhone は 2種類、Android は 3種類作るのがおすすめです。

@tommmmy
9patch
仕組みと作り方。
中のコンテンツが入り込むエリア。
右側と下側に点を打つ。
黒い線で指定していない部分は余白になる。
文字を入れてみるとわかる。
余白の部分が大きくなったり、小さくなったりする。
コンテンツをもてあそぶところの長さを変えてあげるだけで余白が違うものができる。
9patch で余白を調整できる。

伸びる部分と伸びない部分を決める。
双方は独立していて、干渉することは無い

button_bg.9.png と .9 の名前をつけて保存すると、9patch扱いになる。

■作成ツール
パーツを書き出したあと、android SDK の draw9patch を使う。
デザイナーさんね、これ嫌なんですよ。
tools の中に、良くわからないファイルが入っていて、
「何この黒いアイコン!」と思います。
でもダブルクリックすると立ち上がります。
左に元画像、右側にのばされた後の画像が表示されます。
奇麗に引き延ばされます。
コンテンツエリア "Show content" にチェックを入れると確認できます。
Shift 押しながらのばしても一本線が書けません。速すぎるとかすれます。

draw9patch どう? 使いにくい!
真ん中はどこ? 目分量
左右対称とかどうやるの 目分量
線の指定。かすれる。。。。

Photoshop の落とし穴
このまま書き出しても適応されない
Fireworks でもダメ。
9patch を作るには draw9patch を使う。
Photoshop とかでもできる.... パーツを書き出します。
PNGをもう一回開いて、点をうって上書き保存する。
できると思うが、確証はない。

■応用「このデザインはできます!」
もう少し知識を。
のばす点はいくつでも、のばす点の割合を調整できる
これをわかっていると、いろいろな表現ができる。

simejiの背景画像の例。
上と下に線を入れると、等間隔で隙間ができる。
注意:のばすしかできません。
縮むことができないので、最初の大きさで作るとGood!
9patch で小さくなることは無い。
無理矢理縮むと、重なってしまい、半透明部分の色が濃くなってしまう。

■9patch の3ヶ条
伸ばす点はいくつでも打てる ・伸び率も比例する ・小さめに作る

draw9patch 一度やってみてください。
吐くくらいめんどうくさいです。

9patch に不向きな例。
ストライプ、ドット
ストライプの場合は、全部の縞に点をうっていく。
こいったらできるよ!というのをエンジニアに示してあげてください。

テクスチャはのばすと汚くなります。
これもおすすめしない例です。

カンペを出すアプリのデザイン。
アナログ感を出しています。紙の感じとか。
エンジニアに言っても実装してくれないなと思ったので。
破れた感を出したかった。それをはぶいた部分をのばす設定に。

左上のキャラクタ部分、テキストを入れる部分。紙(上の左側一カ所しかのばす設定をしていないが、
タブレットで見た時も奇麗にのびている。

マーケットにはあがっていないのですが、ブログの方で紹介しています。

■最後に
別にデザイナーがやらなくてもいいけど、仕組みは知っておいてください。
時間があったらやってみてください。(ちょーめんどくさい)
お互い苦労を知りましょう

まきまきになってしまいましたが、ありがとうございました!

Q. 9patch を指定した時に、最大この幅以上に大きくならないでくれ?という指定はできますか?
A. できません。永遠に伸びます。

Draw 9-patch
http://developer.android.com/tools/help/draw9patch.html