2010年07月30日 02:15Fujii

小さく学ぶ13 〜「続き」「決定」に関するUI設計の演出方法を携帯電話と比較〜

20100723.jpg

小さく学ぶ12 〜ちょっとだけ日本語で表示する演出〜』の続きです。

「印」に再度注目してみる

項目の横に印があるんですがこれに再度注目してみます。

「何を小さなことを」とか、「なんとなく意味があるのはわかったけど」と思っちゃいますが、改めて見てみます。

その前におさらいとして、基本要素をあげてみます。

4つの基本要素

  1. 続き
  2. 決定
  3. 戻る
  4. 移動して選択

ちょっとざっくりした言葉でいうとこうなります。

今回の音楽プレイヤーの場合は、1と2と3を2つのキーで行っていました。

小さく学ぶその2 〜印で分ける、使うキーを増やさないという演出〜

これもなんとなくそんなもんかと思います。

実際に携帯電話との比較をしてみました

手元の携帯電話との比較をしてみました。演出方法がほかではどのようにされているのか?見てみました。

すると、「印」がありません。

押すと「続き」がでます。

そうすると、ひとつの疑問が生まれます。

「決定」するときはどうするんだろう?

続く。

2010年07月29日 01:59Fujii

『劇場としてのコンピュータ』を読みはじめました。〜システムのUI設計、UIで表現されるものと演劇や映画との共通点〜

20100722.jpg

映画、漫画、アニメーションとサイトやシステムのUI設計とのつながり

このブログをはじめた当初に描いていた『しかしほんとにそうだろうか?』あたりでも、自分の中ではものすごく密接に感じていました。

それは、目に映るものとしての映画や漫画、アニメーション、そういった動的なものとコンピュータに映しだされるものとのつながりです。

なのですが、さすがにいみわかんなくなるかなと思っていて、やんわりと映画は映画の話、漫画は漫画、アニメはアニメの話にして、ちょこっとだけ「システムで置き換えるならばこうなのではないか」という表現にとどめて、おまけ程度にしていました。

しかし、今回この本を紹介してもらい、まず題名からよさそう!と思いました。何か似たものを感じると。

映画の演出とかわからない人をおいてけぼりにしてもいいから、どんどん、システムの話とつなげてしまおう

で、ぱらぱらとめくると、自分が以前に読んでいた「詩学」 (『詩学』を読んで 〜人間は再現を好む〜)という本をヒントにしながら話が進んでいきそうなのがわかり、ますます興味をもちました。

以前に『UI、UX、IXという用語を少し説明』というところでも、劇に例えて説明してはどうかとおもったこともありました。実は、映画などは座ってみているだけなのでちょっと違う部分もあるとおもっています。

それは、ただ座ってみているだけではないということです。そういったあたりにまで、話題が及んでいるので、導入部分ですでに影響を受けました。正直、演劇の演出面を見ているのは作り手になるような人だから、この本はそれ以外の人はあまり理解できないでは?と思いました。それのによく遠慮無く書いたなーと感心しました。なので、

「映画の演出とかわからない人をおいてけぼりにしてもいいから、どんどん、システムの話とつなげてしまおう」

と思ったのです。

ちょうど『ポニョはこうして生まれた』(『ポニョはこうして生まれた。 〜宮崎駿の思考過程〜』を観終わって。〜リズムで観察〜)などを見て色々考えていたときでしたので。

ということで、少しづつ読んでいますが、読みつつも自分で先に考えるだけ考えて描いてから読もうかなとも思っています。そのほうがおもしろいかなーと。

表紙がファンキー!

劇場としてのコンピュータ (アジソン ウェスレイ・トッパン情報科学シリーズ)
劇場としてのコンピュータ (アジソン ウェスレイ・トッパン情報科学シリーズ)

2010年07月25日 10:28Fujii

小さく学ぶ12 〜ちょっとだけ日本語で表示する演出〜

20100721.jpg

小さく学ぶ11 〜UI操作時に混乱させない演出〜』 も続きです。

その画面に映し出されているもの自体が一体何なのかがわからないと困ります。

今回のケースでは、押すと実行されるものを選択するというのはわかりますが、英語が読めない場合は困ります。

前回は、英語になってしまうことを説明しましたが、実は英語になる前にちょっとだけ、日本語で表示される時間があります。

これによって英語が読めなくても、何のをするためのものが映し出されているのかがわかるようになっていました。

2010年07月24日 13:17Fujii

小さく学ぶ11 〜UI操作時に混乱させない演出〜

20100720.jpg

小さく学ぶ10 〜全体に関する地味な演出、部分に関する派手な演出〜』 の続きです。

[Reset All Settings]を押すとどうなるか?

言語設定が映し出されるようになっています。

もともとすべて英語になってしまいます。しかし、そうなってしまっては操作不能になってしまうことでしょう。

英語は日本人には親しみがあるかもしれませんのである程度はわかると思いますが。

言語を設定したいけれど、ラベルが読めないので操作が不能になります。

なので、言語設定である[Language]を映しだして変更することを可能にしていました。

機能だけでなくどういう順番で映すのか考えている

以前にも描きましたが、機能を決めただけの状態というのは、物語の登場人物や要素を単に決めた状態のようなものです。

設定のリセットという機能を、全体の中でどういった演出で映しだしていくのか?を考えていない場合は、単に最初の画面を写してしまうかもしれません。

さらにここの部分に続きがありますが、次回。

2010年07月23日 01:30Fujii

小さく学ぶ10 〜全体に関する地味な演出、部分に関する派手な演出〜

20100719.jpg

地味な演出、派手な演出

小さく学ぶ9〜同じように並んで見えても性質が違う〜』の続きです。

地味な部分は全体に渡った演出で、派手な部分はある特定の場合の演出なのではないかと思いました。

映画でも、どちらも大事なように、こういったシステムでもどちらも大事かと思います。

ただ、画面の向こうにひとつの世界がどのようにできあがっているのか知るためにはやはり、全体に渡った演出をみることのほうが必要だと思います。

とはいえ、ちょいと部分の話もしてみます。

すべての設定をリセット時に

設定をリセットしようとした時の話です。

まず、[Reset All Settings]というものがあります。

押すときにドキドキしますね。

で、押すとどうなるのかドキドキしているときに、例の全体に渡る地味な演出が効いてきます。

印で判断できる

印が付いているので、まだすぐには実行されないことがわかります。

安心して押すと、今度は、ふたつの要素が登場します。

[Cancel]と[Reset]です。

そして、つるっと押しても実行されないように、フォーカスは[Cancel]になっています。

さて、覚悟を決めて実際に押したらどうなるかは次回。

2010年07月22日 00:45Fujii

小さく学ぶ9〜同じように並んで見えても性質が違う〜

20100718.jpg

不揃いなもの、揃っているもの

小さく学ぶ8 〜選択肢がひとつしかない場合は、その先を出している〜』の続きです。

改めて、みゅーじっくで映し出されていた項目達はどういった特徴があるのか考えてみます。

ここのところ調べた結果、どうも不揃いなものが並んでいます。

何に比べて揃っていないかというと、曲の名前がズラッと並んで映し出されているときと比べてです。

パッと見は文字だけなので、何かが並んで映し出されているとしか意識しませんが、ばらつきのあるときと、しっかり揃っているときがありました。

曲の名前が並んでいるほうは非常にはっきりしています。何がならんでいるのか?それは曲の名前。

同じように見えても性質が違う

また、中身を見てみると片方は重複していて、片方は重複していません。

アルバムの後に曲が映し出されることもあったり、アーティストの後に、アルバムや曲が映し出されることもあります。

どうやら性質が違うようです。

まずは、同じように見えても何がならんでいるのか違うということに眼を向けると見えてくるものが変わるかと思います。

2010年07月21日 02:38Fujii

小さく学ぶ8 〜選択肢がひとつしかない場合は、その先を出している〜

20100717.jpg

なにやらデ・ジャブ

小さく学ぶ7 〜「大体わかる」のために全体を見て(UIに映しだされるものを)演出することが必要〜』 の続きです。

[アーティスト]を見てみました。

押したあとに映し出されたものは、アーティストが並んでいる様子です。

様子といっても文字が並んでいます。アーティストの名前がアルファベット順で並んでいました。

ところがここにも、[すべて]がいます。

押すと、なんと、「全アルバム」が並んでいます。その後は、前に『小さく学ぶ6 〜謎の[すべて]の正体は?〜』で描いたことと同じようです。

では、[すべて]ではなくアーティストを選択したあとには何が映し出されるのでしょうか?

そのアーティストのアルバムが並んでいました。

ひとつしかない場合は曲がでる

さて、アーティストを選択したあとに、アルバムがひとつしかない場合には何が映し出されたかというと、なかの曲でした。

複数のアルバムがあるときは、そこからさらに選択しますが、選択肢がひとつしかない場合は、その先を出しています。

2010年07月20日 02:00Fujii

小さく学ぶ7 〜「大体わかる」のために全体を見て(UIに映しだされるものを)演出することが必要〜

20100716.jpg

「だいたいわかる」ために

UIに映し出されるものを見て、「だいたいわかる」ことがまず大事なんだと思います。

その理由は、すべてを説明していたら、どんなに時間やサイズがあっても足りないからです。

映画で言うならば、映し出されるものに対して「これが海で、これが雲で、これが主人公で、これが服で、名前は○○で」とやるのではなく、主人公なら真ん中に写すとか、同じ顔をして、同じ性格でと全体を通して演出していくことで、それをやらなくてすむようになります。

「だいたいわかる」というのは高度で総合的な演出の結果なんだと思います。

UIに「映し出されるもの」を演出していかないといけない

これは、言葉の問題ですが、ずっと「UIデザイン」って引っかかっていました。

映画でいうとUIってなんでしょう?シンプルに捉えると、スクリーンです。

しかし、スクリーンに映し出されるものをデザインするとはいいません。

つまり、スクリーンデザインというのもなんとなく違和感があるということです。

おそらくそれぞれの業界の歴史に関係あるのことも在るだろうと思いますし、そもそもその言葉自体が必要とされる土壌のレベルも関係しているかもしれません。

映画では、スクリーンに映し出されるもの、それも要素ではなくつながった世界をつくるというのは言わなくてもスタート地点になっているのだと思います。

2010年07月19日 10:46Fujii

小さく学ぶ6 〜謎の[すべて]の正体は?〜

20100715.jpg

小さく学ぶ5 〜UIに映し出されるものの存在感〜』の続きです。

[アルバム]を押したあとに映し出されたものは、アルファベット順に並べられたアルバムの名前でしたが、一番上にほかとは違う、[すべて]というものが登場していました。

この[すべて]は何者なんでしょう?というか他と違うように感じるのはなぜでしょうか?

「すべて」というアルバムのタイトル名の可能性もありますが、アルファベット順では日本語は一番上にはきません。

言語設定で英語にしてみると、「All」です。これならアルファベット順だと一番上にくることもなくはないですが、少なくとも2つの「All」が並ぶのはかなり稀なケースだと思います。

この、正体不明のすべてを押すと何が映し出されるのかというと、すべての曲の名前です。

範囲

すべての曲

順番

アルバムのタイトル名ごとにアルファベット順に並べられたアルバムのなかの曲を順番にしたものです。

アルバムのなかの曲は、アルバムごとに決められています。

具体的に何が並んでいる?

曲の名前です。

もうちょっと考えてみます。

ひとつ前のシーンで映し出された、アルバムの名前のリストから選択して押すのと何が違うのかというと、[すべて]を押すと映し出されるのは、全曲のリストです。

何かひとつのアルバムの名前を選んで押した場合には、アルバムのなかの曲がリストになります。

どちらもリピート設定を指定なければリストの曲を再生し終わると音楽はストップします。

つまり全曲をつなげて再生されるかどうかが違います。

再生するためのリストをつくっている

いまのところ再生するためのリストを選択しているといってもいいのかもしれません。

2010年07月15日 01:00Fujii

小さく学ぶ5 〜UIに映し出されるものの存在感〜

20100714.jpg

何が並んでいるのか?前回の方法で

小さく学ぶ4 〜並んでいるといっても、範囲は?、順番は?、何が?〜』 の続きです。

前回に、並んでいるといっても以下の三つを考えました。

  1. 範囲
  2. 順番
  3. 何が

今回も、同じように見ていきます。

一番上に、怪しげな[すべて]があります。

とりあえず、おいておきます。

範囲

全アルバムがならべられているようです。

前回の[曲]のときと違う点は、印がついていることです。続きがまだあります。

印という小さなものですが、使っているうちに、印を見ただけでわかるようになってきます。最初はわからないけれど、使っているうちに動きがわかってきます。

順番

アルファベット順です。

今回は、なぜかAではじまるものが一番最初に来ていません。The を抜いたアルファベット順なんですね。

これは、前回の[曲]のほうでもそうなっています。

具体的に何が並んでいる?

アルバムが並んでいるというと、「ふむそうだよね」と流してしまいそうですが、アルバムというのはなんでしょう?

ここで並べられているのは、「アルバム名」ですね。

全体を通した世界観

印についてですが、これは細かい工夫ですが、実は全体に対しての工夫といったほうがいいでしょう。

なぜかというと、この印はこのときに映し出されているからわかるのではなく、全体を通して映し出されている世界の中で揃えているからです。

「物体としての存在感」とは?そのシステムにはある?』で描きましたが、UIに映し出されるものをつくるときに、現実のものを写しているわけではありませんので、つくり手が揃えていかなくてはいけません。

そうしないと、存在感が薄れてしまいます。

2010年07月14日 01:16Fujii

小さく学ぶ4 〜並んでいるといっても、範囲は?、順番は?、何が?〜

20100713.jpg小さく学ぶ3 〜並んでいる項目、重なるもの、重ならないもの〜』の続きです。

最初に表示されたものの次を見てみましょう。

今回は、「みゅーじっく」を押して次を見てみます。

また何かがいろいろ並んでいます。

どういったものが並んでいるのか?

それを考えるために、[曲]をさらに押して進んでみます。

そうすると、また、項目が並んでいます。印がありませんので、押すと何か実行される項目のようです。

これは、何が並んでいるのか?

[曲]を押して、出てきたので、曲が並んでいるといってもいいかもしれません。

しかし、曲とは一体なんでしょうか?

以前に、並んでいるものは何か?を考える際に、重なるのか重ならないのかという視点で見てみました。

今回は、並んでいたのはなんなのかを詳しく知るために、このように3つから考えてみます。

  • 範囲
  • 順番
  • 何が

範囲

そこに表示されているもの達は、誰なのか?

今回は全曲のようです。全員集合しています。

順番

どうやら、アルファベット順に並んでいます。

具体的に何が並んでいる?

では、一体何をアルファベット順に並べたのでしょうか?

それは、名前です。

各曲達が持つ名前です。

同姓同名もたまにいます。

作り手は「すべての曲の名前をアルファベット順に並べたもの」をこの時点で写していることになります。

画面に何かが並んで映し出されていても、その中身はもちろん異なります。擬人化して説明すると、それぞれの時点ごとに、全部でどれだけの範囲の人を対象に集めて、どんな順序で、何を並べるのか演出がされています。

2010年07月13日 01:30Fujii

「物体としての存在感」とは?そのシステムにはある?

20100712.jpg ※マンガの2コマめは「こととして」です。

存在感を感じるということはどういうことなのか?

存在感がでるとはどういう事でしょうか?対人コミュニケーションの話ではないのであしからず。

まず「存在感」言っても2つあります。

  1. ものとしての存在感
  2. こととしての存在感

「もの」「こと」というと獏としています。

ものは、漢字の「物」というといいかもしれません。されには、「物体」ですね。

「物体としての存在感」

では「こと」の存在感とは、「事」ですが、「事象」、もうちょっと簡単にすると「出来事」でもいいかもしれません。

説明のしやすいほうからいきます。

ものとしての存在感

物体としての存在感を考える際に、「映画」と「アニメーション」や「マンガ」の違いを考えてみます。

(この場合の「映画」は実写という意味です)

映画は、実際にある物を撮影します。何もしなくても、物としての存在感を持っています。

これはどういう事かというと、裏側に回れば、物として裏側がきちんとあるということです。

カメラはそれをとればよい。

2つの物を並べておけば、それをどこから撮っても位置関係が勝手に変わることはありません。

俳優も変わりません。衣装を着せれば、着替えない限り変わりません。どこから撮ってもです。

これが、物としての存在感です。とても当たり前にきこえるかもしれません。

アニメーションやマンガの場合は?

さて、アニメーションやマンガの場合はどうでしょう?

残念ながら、ひとつの方向から描いたとしても勝手に裏側ができるわけではありません。

一回描けば、位置関係がかわらないかというとそうでもありません。

描いたものの外見が変わらないかというとこれも、そうではありませんし、衣装もかわらないかというとそうではありません。

すべて、そう描いています。そうなるように描かなければ変わってしまいます。

実際にある物の存在感を利用できないので、作り手が存在感を出すために、つくりこむことが必要になります。

それをしないとどうなるかというと、存在感が薄くなります。

立体的に想像し平面に写しとる

今回は「ものとしての存在感」しか書いてませんが、『ポニョはこうして生まれた』の中で、監督は「実際にある世界なんだ、それを写しとっているんだ、そういうつもりで描かなきゃいけない」というようなことを言っています。

言葉のつなぎ方が独特なのでわかりにくいかもしれませんが、今回描いたようなことを、「もの」だけでなく「こと」も含めてやっているのだと思います。

三次元といいますか、面ではなく物体として立体的に、さらには時間軸もある動きとして想像し、それを写しとるのだと思います。最終的に平面に描いていてもです。

そうしないとアニメや漫画の場合存在感が薄れるんだと思います。なにか違うものだと認識されてしまうのだと思います。

繰り返しになりますが実際にあるものを撮る場合は映画はその必要がずっと少ないです。(細かいはなしをすると近い部分もありますが)。

映画にもありますが、アニメーションや漫画は立体的に設定した資料などをつくることで、統一感を出しています。

一方、システムでは?

さて、以前にシステムはどちらかというと、全部作り手がコントロールする部分が多いというような意味で、アニメーションや漫画に近いと思ったことを描きましたが、存在感はあるのでしょうか?

また、存在感を出すための設定資料はあるのでしょうか?

存在感をシステムに置き換えるとするとどういったことなのか?なんてことを考えています。

ポニョはこうして生まれた。 ~宮崎駿の思考過程~ [DVD]
ポニョはこうして生まれた。 ~宮崎駿の思考過程~ [DVD]

小さく学ぶ3 〜並んでいる項目、重なるもの、重ならないもの〜

20100711.jpgどんな項目が並んでいる?

小さく学ぶその2 〜印で分ける、使うキーを増やさないという演出〜』の続きです。

何かが並んでいるというのは一見同じようなものに見えます。

今回並んでいた項目を見てみます。

  • 項目の中身が重なる
  • 項目の中身が重ならない

この2つの並び方があります。

今回並んでいたものの4つは重ならないものでした。

最後の項目は、一体何?

一番最後のものは、シャッフルがはじまります。

どういったシャッフルかという前に、押したときシャッフルが実行されます。

これは、前回に書いたように、印がない項目なので実行されます。

このシャッフルというのは全曲がランダムに並べられたリストが作られて、順番に再生されます。

マンガの中では、[設定]の中にある項目と書いてありますが、実際は2つやり方があるようです。

  1. 設定の中で、曲単位のシャッフル
  2. 曲単位で再生

これがどちらが先にきても、[曲をシャッフル]の状態に近くなります。

この[曲をシャッフル]というのは合わせ技状態をすぐに実行するようにピックアップして並べたものになっています。

2つのやりかたがある

シャッフルしたいなーと思ったときに、[設定]を使う場合と、[曲をシャッフル]を使う場合の2つのやりかたがあるといえます。

単に項目が並んでいるといってもいろいろな意図の演出がされています。

2010年07月10日 17:02Fujii

想像、観察、再現、体験 〜世界観を捉える4つの方法〜

20100710.jpg観察は「世界観」を手に入れるためです。

人間を観察するのであれば、「その人の世界観」を手に入れるためです。

お客さんの世界観、ユーザーの世界観を手に入れるために観察をします。

では、観察以外に世界観を手に入れる手法があればとりいれても問題ないはずです。

世界観を手に入れるにはどうしているのか?これは大昔から人間がやっていることです。

  • 想像
  • 観察
  • 再現
  • 体験

僕はこの4つじゃないかと思います。

そういう意味で、小人の世界観を手にいれるとの、お客さんやユーザーの世界観をてにいれるというのは同じようなものです。

想像

「小人になったとしたらどうだろう?」とありとあらゆる想像をします。現在の知識や自分の世界観を置き換えて行ないます。

結構、置き換える能力が人によって差があります。置き換える能力自体に差がありますし、想像する分野の経験があるかどうかも関わってくるからです。

観察

「では、小人ってどういう人達なんだろう」と想像するときに思うでしょう。このこと自体思わない人も実は多いですが。

そう思ったときに、まず自分が思っている小人が本物の小人と同じなのかどうか確かめようとします。そして確かめるほかにも、小人の知らない側面があるかもしれないと思って観察します。

小人は残念ながら存在しません。

再現

観察したあとに、再現することでより世界観を知ることができるでしょう。

小人が何をやろうとしていたのか、小人の視点の高さに自分の視点を下げてみたりすることができます。

こっちから見るのではなく、あっちから見てみるために、自分の体を移動させたり。小人の近くに行ってみたり。

字にして書いて整理したり、絵に書いて整理してみたり、絵コンテやマンガのように整理したり、動画のように整理してみたりいろんなことで再現します。

体験

できれば、体験したほうがいい。つまり、自分が小人になれるのであれば小人になってみることで世界観を手に入れやすくなります。

再現する度合いが詳しければ詳しいほど近いことは行ないますが、それでも実際に体験できるのであればする。

その世界を内側からみてみることで世界観をより捉えることができるのだと思います。

そのときに、観察や想像、再現で手に入れた、「立場」や「やろうとしていること」などの様々な背景を含めて体験できるとなお世界観を手に入れやすくなります。こういった体験を元に想像するのといいと思います。なので、つながっているものですので体験しているのかどうかなども最初に想像するという時に差がでてきてしまう要因になるのだと思います。

手法を知っていても、それまでに体験や観察をしたことを元に想像しているのかそうでないのか?で同じ手法でもやる人によって変わってきます。

アニメーターは日々の観察、想像、再現を習慣化しているために、想像することというのはおそらくレベルが違います。

もしかしたら想像だけでも、体験した人よりも優れている場合もあります。

ジブリの場合は、それでもなお取材したりして、そこに体験や観察をさらに貪欲にとりいれてるようです。そういったサイクルの蓄積によって、想像といっても大きく人によって差が出てくるのではないかと思います。

ただ、レベルは違えども、想像、観察、再現、体験で世界観を捉えるというのは同じです。

また、体験については、物理的な大きさなども視点を変えてくれる大きな要素になるんだなということをこの動画をみて改めて思いました。

小人の世界観をしろうとしても残念ながらいません。なので小人の観察はできませんが、お客さんやユーザーであれば小人よりは探しやすく、似た人も探しやすいと思います。今回は世界観というのは「小人の」でしたが、人間だけでなくそれ以外の風が吹けば、木がどのようにゆれるのかなど世界自体をどうみるのかというほうも見るべきものかと思ったりします。

関連記事:

ポニョはこうして生まれた。 ~宮崎駿の思考過程~ [DVD]
ポニョはこうして生まれた。 ~宮崎駿の思考過程~ [DVD]

小さく学ぶその2 〜印で分ける、使うキーを増やさないという演出〜

20100709.jpg

ひとつの画面のなかの「演出」

小さく学ぶ 〜UIの世界観と方向、ボタンの割当て〜』 の続きです。

世界観がありますという話。

左から右へという世界観の話をしましたが、今度はひとつの画面のなかで、どれがどれと同じで、どれが違うのか?ということがわかるように演出されている点に注目してみました。

どんなにキャスティングが揃っていてもそれは始まりにすぎません。俳優がたくさんいても見ているときに誰がどういった役割なのかが分からなければ、見ている人は最終的になんだったんだ?と思って終わりです。

配役を決めたりするのはスタートに過ぎない

なので、配役を決めたりするのはスタートに過ぎません。配役を並べただけでどんな順番で見せても伝わるなら演出がいらず楽です。

しかしそうはいきません。

映画で、配役だけ決まれば、おもしろさはあとは同じでしょうか?

見ている人が役者の立場がわからない(作った人はわかっていると思っている)としたらどうでしょうか?ラストシーンが最初にきたらどうでしょうか?

最初にキャスティングされた全員が一度に画面内に出てきたらどうでしょうか?

同じではありません。

そういう意味で、だいたいどんな配役にするというのが決まった段階は最初のフェーズでしかないということです。ようやくはじまりといったほうがいいでしょう。

演出する

今回は、メニュー達についている印がどういった演出意図があるのかということに注目してみます。

前回、右に進むときには、「真ん中のボタンを押す」ということでした。進むというのは、アルバムを選んでそのなかの曲を見るというように、もう一度選ぶための何かを見るということです。

そのときに真ん中のボタンを押して進む。

今回は、「シャッフル」というものがありました。

押すとシャッフルに関する選択肢が出てきて、そのなかから選ぶのか?それともそのまますぐにシャッフルされるのか?わからない。

つまり、「選択肢がさらに続く」と「決定する」の2つが重なってしまいます。

何もしなければ同じ役に見えてしまいます。

キーを2つに増やすのではない演出手法

さらに選択肢が続くんですよということを暗に伝える演出の工夫として、続きがある選択肢には印を付けています。

対して、それ以上選択肢はなく、すぐにその結果が反映されるものには印を無しにしています。

キーを2つにするのではなく、画面内の演出で伝えるようにしています。

アニメーションやマンガ等は実際に俳優は存在しません。なので姿形すら気をつけないと変わってしまいます。映画であったり実際の役者さんがやる場合は、さすがに整形したり年月が経ったり、ケガでもしない限り変わりません。実在の俳優さんでも髪は切ると目立ちますし服装も変わればわかりますが、それよりもかわりやすいのが前者です。

アニメーションやマンガというのは、その存在感も作り手に委ねられています。作り手がすべての演技もやらなくてはいけません。ビジュアル面はないですが小説や脚本を書く人も近いです。

うまくいっているものほど、アニメやマンガでも役者が演じているような気になりますが、考えてみると作っているのです。それも、ひとりが何役もこなしながらです。

システムをつくることはどちらに近いでしょうか?

僕は、気をつけないと変わってしまうという意味で、どちらかというとアニメーションやマンガに近いと思います。

関連記事:

ポニョはこうして生まれた。 ~宮崎駿の思考過程~ [DVD]
ポニョはこうして生まれた。 ~宮崎駿の思考過程~ [DVD]

2010年07月09日 02:25Fujii

動き続けるものごととして捉える 〜文章に接続詞や「AだからB」も不要なとき〜

20100708.jpg「AだからB」思考ではない考え方

考え方というか捉え方ですね。

接続詞や「AだからB」も不要なときがあります。それは無理に頭の中にあるイメージを言葉にするときです。

二重の「の」も使い放題。だいぶ前からずーっとそんな感じが多いのです。

読んでる方からすると気持ち悪くて仕方ない。そんな文章です。

なぜなのか考えてみました。

まず、「しかし」「だから」とかを使うときに、前と後ろが順番につながります。ここに違和感があります。

自分の脳内のイメージとのギャップからくる違和感です。

それは、自分の脳内のイメージとのギャップからくる違和感です。

並列にもしくは同時に並んで影響しあっているものを、「AだからB」とくくってしまうのはどうも違う感じがします。

まず、それがおもしろくない。無理に文章にするために「から」とかで無理やり繋げたくないという気持ちが起こります。

読む方はそういうふうにつながっていたほうが気持ちがいいのがわかるからこそ、なおさら繋げたくない。

「同時に並んでいて影響しあっているもの」とは、つまり絵のようなものをイメージするといいかもしれません。

さらに言えば動いている映像のようなものをイメージするとなお良いです。シークエンスといえばそうなんですが、ひとつのシークエンスだけではない感じです。

それを言葉にするときには、順番に書いていかなくてはいけないので苦痛になるのです。

概念でも

そのイメージは、概念でもそうです。表と裏どころか多面を考えているときに、「から」とかはあんまり必要なくなる時があります。

「太陽が照るとき、影ができるのは、明るい場所があるからである。」とか「暗闇があるから明るいところがある」とかそういうのですら何か違う。

「暖かかったり、恐れたり、敬ったり、イライラしたり、待ち焦がれたり、気にもとめなかったり、気をつけられたり、そういった色んな対象にされるのが太陽」というようなことを考えていても字にするとこんなに長くなってしまいます。

それを、そういったことをする人やシーンをイメージするだけならぱっとできます。で、順番もあまりないです。みんな太陽に関してなにかそれぞれ関わっている絵や映像であれば同時に近いです。

そういう、それぞれがもので、なおかつ動いていて関係しあっている様子を同時に考えたりするときに接続詞は不要になるんです。

箇条書きに近いかもしれないので読む方は気持ち悪いかもしれません。でも、映像に近いというとなんとなくわかるのではないかと思ってもいます。

ふとふり返ると―近藤喜文画文集
ふとふり返ると―近藤喜文画文集

2010年07月08日 03:04Fujii

小さく学ぶ 〜UIの世界観と方向、ボタンの割当て〜

20100707.jpg

小さいというフレーム

以前から、時々、PCサイトより携帯サイトのほうが絞りこまれたコンテンツになっていて良いとおもっていました。

強弱に意識がない作り手や組織が、有り余る画面スペースを手に入れると、ごちゃごちゃして却って良くないものになると感じています。

仕組みがわかるだけではダメだとは思うんですが、骨組みを理解するには小さいものだと分かりやすいのでいんでないかと思います。

小さいフレームにおさめれば100%絞り込まれるかということではありませんが、「スペースが無い、絞り込まないといけない」というのが関係者の中で明確に前提としてもつことができる良さがあります。

もしかしたら、「しぶしぶ」「短所」と考えて作っているかもしれませんが結果的には良い影響を及ぼしていることもあると思います。

どうしても、画面内につめ込むだけ詰め込もうという展開になりやすいので、大きい画面のものを組織で作るときは、組織の特性から自爆していく傾向があります。

「戻る」と「進む」

ということでここしばらく、手元で愛用していた音楽プレイヤーを改めて観ていました。音楽聴きながらですがこの2点に注目してみました。

  1. 世界観と方向
  2. ボタンの割当て

世界観と方向

ちっぽけなものに「世界観」というのも違和感を感じる人もいらっしゃるかとは思いますが、小さなものこそ世界観が有るか無いかで判断に影響を与えるとおもいます。

ドラゴンクエストの1とか、古いゲームを思い浮かべてみてください。世界観があります。もっというと、文字だけでできた本でも、世界観があります。

「世界観」とは派手さや画面の大きさとは関係がないことが分かります。

今回観ていて、音楽を選ぶ際に右側に進んでいきます。右が進む方向。その逆の左がもどる方向です。

ボタンの割当て

さて、この世界観に対してボタンはどう連動しているかというと、真ん中のボタンで選ぶと右へ。上で左へ。

これが徹底されています。

こんな感じで身近な小さなものから骨組みを見てみるのもいいかもしれません。

小さなチーム、大きな仕事―37シグナルズ成功の法則 (ハヤカワ新書juice)
小さなチーム、大きな仕事―37シグナルズ成功の法則 (ハヤカワ新書juice)

2010年07月07日 02:53Fujii

映画とソフトウェアやシステムを比べてみる

20100706.jpg

映画とソフトウェアやシステムを比べてみる

どんな登場人物をだしたらいいのか、聞いて回って、ときにはアンケートとったりなんかするような意味で全体を見る人というのはたくさんいると思いますが、映画の監督などのように全体をみるのとはちょっと違うのかなと思いました。

ということで、強引にですが、ソフトウェア、システムなどと映画を比べてみました。

「機能を画面に放り込む」

「機能を画面に放り込む」、鍋に具材を放りこめばあとは何かおいしいものが出来上がるかのような進め方になってしまっていることがあるような気がします。

鍋は意外と美味しくなりますが、映画やシステムはそうはいきません。

機能を画面に放り込むというのは、映画でいうと登場人物を決めただけの状態に近いのかなとおもいました。

それも、とくに人物同士で役割分担ができているわけではなく、人それぞれ希望する主人公をリスト化してしまったような状態かもしれません。

それを作品に放り込むようなものかもしれません。

単に放り込むと

少しでも時間がとれれば、おもいおもいの主人公を登場させようとしたり、場合によっては、放りこんだあとに、なんとなく見た目がかわらないからと適当にいれかえてしまうと、敵と味方、誰と誰がどんな関係かなどが入れ替わってしまったりするようなものかと思います。

その場面で大事なものがなにかとか、全体を通してどう見えるか?などを考える人が映画ではいます。そういった人が必ずいないとめちゃくちゃになってしまいます。

桃太郎で、いつの間にか鬼がキビダンゴで味方になっていたり、鬼のはずが、おばあちゃんと見た目が似ていたり、そんなことが起きてしまいます。

映画では、なにか時間が余っていてもむやみに登場人物を増やしたりしません。全体の物語に関係のあることや、展開をよく考えて時間を使います。

強引に比べてみましたが、映画などでは普通のことがシステムなどになると普通ではなくなっている面があるかもしれません。

耳をすませば (スタジオジブリ絵コンテ全集)
耳をすませば (スタジオジブリ絵コンテ全集)

デザイン脳を開く―建築の発想法
デザイン脳を開く―建築の発想法

2010年07月05日 23:30Fujii

『ポニョはこうして生まれた。 〜宮崎駿の思考過程〜』を観終わって。〜リズムで観察〜

20100701.jpg

『ポニョはこうして生まれた』まとめ

先日、ようやく『ポニョはこうして生まれた。 〜宮崎駿の思考過程〜』見終わりました。

見ながら描いたものをまとめておきます。また、今後も何か描くかもしれませんがとりあえず。

実際に、目の前を通りすぎていくものを、見ただけで描こうとすると、あまりの情報量に圧倒されてしまいます。

描くのではなく、何かしらのアウトプットでもいいんですが。

圧倒されて、だんだんどこを見ていいのかわからなくなります。

なので、「眺める」程度にしておこうと思ったり。

ストップウォッチで動きの時間を調整している場面

ただ、眺めるのとは別に、思い出したことがあります。アニメーターの方がストップウォッチで動きの時間を調整している場面です。

盛り込む要素を最終的に、時系列のタイミングや間を含めて仕上げて行く様子をみて、アニメ、または映像の制作プロセスに詳しくない自分は、そこまでやっていたんだと感心しながら観ていました。

音楽と場面の切り替え程度であればわかるんですが、人の身体の動きの間などものすごい細かく調整するんだなーと思ったのでした。

ということは、何か捉えるときに、タイミングを含めてアニメーターの人は見ているんではなかかろうかと思いました。

一枚の場面ではなく、変化し続ける、連続する動きとしてインプットしているのかなと思いつきました。

連続する動きは、ダンスとかスポーツとかにもあるような、ぽん、ぽん、間をおいてどーん!とかそういう感じです。

そう思ってみると、駅で電車を待っている人は、荷物を降ろして、足の間にはさんで、ケータイをパカっ!とするというような連続する動きがなんとなく目に入ってくる気がしてきました。

映画とシステムを比べてみる

映画では時系列を意識して作るのが当たり前という状況ですが、システムと強引に比べてみるとどうなんだろう?と考えてみました。

システムなどで「機能のリストと適当にメニューを作って終わり」というのは、映画でいうと、「場面や登場人物などの要素をリスト化して、適当につなげて終わり」というものに近い感じがしてきました。

映画では、場面や、登場人物などが出てくるのはラフスケッチというか最初の段階で、そこから、要素を減らしたり、順番を整理したりしながらなんとかひとつのものに仕上げていきます。

システムで何か機能を追加するということは、映画で登場人物や新しい場面を増やすことに似ています。映画では、それをやるときはもう一度全体をみて判断します。

また、映画では何か要素を追加するときには、全体を必ず見ている人がいます。全体を見ずに誰かが急に登場人物を増やすことをすれば、おかしくなってしまうからです。

ダンス、音楽、スポーツの要素

いろいろそんなことを考えていて、動きで捉えるというのは、リズムなので音楽、スポーツ的な要素がはいってくるのかなーと思ったりしました。

ポニョはこうして生まれた。 ~宮崎駿の思考過程~ [DVD]
ポニョはこうして生まれた。 ~宮崎駿の思考過程~ [DVD]

「ノーマン・ロックウェル展」に行って 〜人間を含む日常へ興味がない人〜

R0019055.JPG

行ってきました。「ノーマン・ロックウェル展」です。

R0019062.JPG

ノーマン・ロックウェルの絵に影響を受けた写真家の作品と2つ並べて展示されています。

R0019063.JPG

もう来週で終わりのようなので、スノーボード行く途中で重い荷物を持ちながら行ってきました。暑かったですが、夏がはじまったなーと実感できました。

R0019061.JPG

府中市美術館です。

R0019057.JPG

アメリカの日常を大量に描いた画家の作品を見ているうちに、美術館で絵を覗き込む人たちの姿が絵のようにみえてきました。物語を持った絵がたくさんあり面白かったです。

「日常」に興味あり

さて、なぜ興味を持ったのか?というと、絵が「日常」からつくりだされたものだったからです。

もちろん、日常をヒントにつくっていますのでそのままではありません。特にノーマン・ロックウェルは写真を絵のために演出して撮ってそれをもとに描くこともしていたそうです。

動かないけれど、映画のワンシーンを作ることと近いといったほうがいいのかもしれません。

人間に興味のない人がつくっている

「日常」とは一体何なんでしょう?なんとなくつまらないもの、あまり気をひかれないものという感じがします。

『ポニョはこうして生まれた。 〜宮崎駿の思考過程〜』の中で、監督はこういったような意味のことをぼやきながら絵を描いていました。

「日本のアニメは人間に興味のない人がつくっている、なので表現の幅が狭くなる」

この『ポニョはこうして生まれた。 〜宮崎駿の思考過程〜』の中では、何回か、監督は「現実にある世界を描いているんだ、そう思わないといけない」と言っています。

これは、想像の世界だけれど、風が吹いた時の動き、人の様子、ものが触られた時の揺れ、そういったことは現実の世界と同じようにする(みえるようにする)という事だと思います。

うまく描けているのかという判断をくだすためには、日常に目を向けていなくてはいけないのだと思いました、そして、実際に監督はそうしています。

どのように実際に人間がつくるものと関わるのか?に目を向ける考え方

「人間に興味のない人がつくっている」というのは、はたしてアニメだけなんだろうか?と思いました。

ユーザビリティとかを、たまたま知っているので思いあたるのは、やはりサイトやシステムなども同じように「人間に興味のない人がつくっている」面があるのではないか?と思います。

手法や解釈はなんであれ、どのように実際に人間とつくられたものが関わるのか?に目を向けるというのが、それ系の考え方の根元にあると思います。

さらに考えると、サイトやシステムだけの話ではないと思います。「人間を含む日常に興味のない人がつくっている」ものはたくさんありそうです。

そういったことを考えて、最近「日常」ってなんだろう?と考えています。

美術館の後に行ったスノーヴァ溝の口という屋内ゲレンデで雨宿りの時間つぶしに撮ったもの。ほんとはアップで撮れるともうちょっとおもしろいです。これも「日常」のひとつかな。

One Day in Snova Mizonokuchi -YouTube- music by http://www.purple-planet.com/

Norman Rockwell: Behind the Camera
Norman Rockwell: Behind the Camera

ポニョはこうして生まれた。 ~宮崎駿の思考過程~ [DVD]
ポニョはこうして生まれた。 ~宮崎駿の思考過程~ [DVD]

2010年07月01日 23:06Fujii

100%夢の世界にあまり人は興味がない

20100615.jpg

美意識という落とし穴に引っ張られる

美しいものを作りたいという気持ちが裏目に出る時』 で描きました。

普通、何かを描くときに、どうしても自分が好きなものを描きます。これは、絵を描く人は結構この感覚がわかるともいます。基本的に、好きじゃないものを描きたいとは思わない。

まず、何かを描く前に、たいてい観ています。見るときに選別されます。そして、描くときにも選別されます。

どう選別されるかというと、描く人の好きなほうに。描く人が、「かわいい、かっこいい、きれい」と思うものが選ばれていきます。「美意識に従う」といっていいかもしれません。

先日、バスの絵を描きました。ここでも、そういった心理的な動きがありました。

どういう事かというと、バスに関して調べていると、普通のどこにでも走っているバスのほかにも、ヨーロッパの国を走るバスや、古い時代のバスの写真も目に入ってきます。

外国のバスや古いバスのほうが魅力的に思えたりします。なぜかというと、非日常、つまり自分が普段見ていないものなのです。

ないものねだりといいますか、物珍しさから、描いてみたいと思います。そっちに気持ちが引っ張られるんですね。

しかし、それをやってしまうと、外国の世界や古い時代の世界を描くことになってしまいます。なので、その気持をぐっとおさえなくてはいけません。

なぜ、そう考えるようになったのか?

こう書くと、苦行のようですが、なぜそうしなければいけないと思うようになったのかというと理由があります。

それは、自分が何かを見ておもしろいと思う理由になっているからだと感じたからです。

好きなものを集めただけのもよりも、現実の日常とつながっている部分があるほうがおもしろいと思います。

例えば、ハリー・ポッターは読んでいませんが、日本を舞台にしたほうが日本人にはおもしろいはずです。ナルニア国物語でもそうだと思います。

どう考えても、ジョージよりもサトシのほうが親近感沸きます。親近感は沸くけど、カッコよくないし、洒落ているようにも感じません。なので、抵抗が起きます。

でも、「カッコイイ」、「洒落ている」と「おもしろい」「いい」はイコールではありません。これは結構重要なポイントです。

コンクリートの踏み石

ジブリを見てて思ったのは、人や物の動きを現実の仕草に近づけようとしています。自分自身そういった、現実にある動きをもとにつくられた作品をみて、「なんかいいな」と思っていることに気が付きました。

今回の『ポニョはこうして生まれた。 〜宮崎駿の思考過程〜』 の中でも、現代の家をサラサラと書いていますが、現代の家というのは普通なかなか興味はわかない。

どうしても、眼につくのはカッコイイ家、おしゃれな家、風情のある家とかになるのが普通です。

ましてや、コンクリートの踏み石に目をつけるということはない。自分は言われて「ああ、そういえばあるよね」と思ったくらいでした。

しかし、最終的には、今の時代の家なんだと認識出来るのはそういったものが描かれているからなんだと気が付きました。

何か現実のものをベースにしたところに人は反応する

そういった、現実とのつながりは、舞台なのか、仕草なのかテーマなのかそれは様々ですがだいぶ変わってきます。

例えばロボットものの映画でも、現実の社会の要素を何か入れたりする方がおもしろいと思います。

ガンダムは戦争です。いちいち愚痴りながらも、時々がんばってる主人公を女の子がひっぱたくシーンで、えーっ!?と思って思わず笑って吹いてしまいましたが、それでも和気あいあいとしたロボットの戦いではなく、戦争を要素としていれています。親子関係などもそうです。

そういった何か現実のものをベースにしたところに人は反応するのではないかと思います。

100%夢の世界にあまり人は興味がない

だから、自分が美しいと思うものを集めるだけになってしまうと、見る人は「好きなものを集めただけなんだ」となんとなくわかってしまうのかもしれません。

もしくは、そうは思わなくても、あまりにファンタジックな世界で、接点を見いだせなくなるのかなと思います。

実は100%夢の世界にあまり人は興味がないんだと思います。現実と何かリンクする夢の世界でないと。

そして、リンクするためには、美しいものだけ収集してもだめで、見抜かれてしまうんだと。現実の世界にはチープなものもあるし、かわいくないもの、カッコ悪いもの、などたくさんあり、そういったものを日々見ている観客は、美しいものだらけだと「なんかちがう」と直観し非現実的に感じるのではないか。

もちろん、絵や映画よりもインタラクションの多いものは、それこそ、操作方法などの現実の動きを想定した世界観の延長で作っていかないと接点がなくなってしまうんではないかと思います。

そんなことを考えています。

関連記事:

ポニョはこうして生まれた。 ~宮崎駿の思考過程~ [DVD]
ポニョはこうして生まれた。 ~宮崎駿の思考過程~ [DVD]

言葉で良し悪しの結論を出すために考えるときとはちょっと異なる脳みその使い方

20100614.jpg

前に、『「なるほど!」が一度にやってくるのは、頭の中には保留中の「なぜだろう」がいくつもあるからかな』というのを描きました。

ちょっと似ているかもしれません。

きっかけは、ときどき良い悪いという判断のみをしようとしていることがあるからです。そういった判断をしようとしているときも必要ですが何か違う方法で頭が動いていることがあるなーなんてこともあります。

その違う方法とは、ひとつの対象についていろんなことを洗い出す感じの考え方です。いい悪いを決めるわけでもなく、捉え方として、いろんな視点で考えてみたり、こうなったらどうなるのかなーなんて考えたりします。

それは、どういう感覚なんだろうと思ったときに、ふと絵を描いているときに似たような感覚に遭遇しました。

絵をかくときには、いろいろな面を描きます。描くためには、捉えなければいけないので、自然とそうなります。

明るい街も、夜になるとちょっと怪しげな光を放つようになるとか、言葉で良し悪しの結論を出すために考えるときとはちょっと異なる脳みその使い方になります。

良し悪しだけだと、おそらく絵をかくときに一面的すぎてしまいます。

暗いところと明るいところもあるのが普通。それが絵です。

なので、絵を描くときの感覚が似ていると感じたんだと思います。

まず、「いろんな側面を持つ物事として捉えようとする」ところが、なにか似ているなーと思いました。絵だけでなく、物語になると、色々な感情があってあたりまえという捉え方をする脳みそになるのだと思います。

ひとつの物事をいろいろな人がいろいろな捉え方をしなければ、あまり物語としておもしろくならないからです。

なんか変な記事になってしまいました。