UIデザイン・エクササイズ：絵画とモードレス、画面の表と裏の断絶と接続について考える
先人たちが遺した芸術作品や工芸品には、UIデザインを考える上で参考になる作品がたくさんあります。画面を縁取る枠の存在。技法や支持体。作品が置かれる環境、あるいはその作品が求められていた背景などを探っていくと、21世紀のUIデザイナーにとっても参考になるような画家の企てが見えてきます。
しかし、美術解説とUIデザインは分野がかけ離れていて、両者を本格的に結びつけてヒントを得ようとするような記事には、なかなか出会えません。そこで今回は、UIデザイナーが美術作品をどのように眺めているのか。UIデザインのヒントを探っていくやり方を実際の美術作品を交えてご紹介します。
フランス、パリ。ルーブル美術館ドゥノン翼のイタリア・グランド・ギャラリーを歩いていると、少し変わった絵画に出会います。絵画といえば壁に飾ってあるもの、という私たちの先入観を覆し、その作品はギャラリーの中央に設置されています。
Huile sur ardoise
1.33 m x 1.72 m
Daniele RICCIARELLI, dit Daniele da VOLTERRA
ダニエレ・ダ・ヴォルテッラ作「ダビデとゴリアテ」。絵の中では、今まさにダビデがゴリアテの首を撥ねようとしています。明るく、マニエリスム様式特有の技巧的で豊かな肉体美。ですが、この作品で驚かされるのはここからです。絵の周りをぐるりと回り込むと、今度は反対側から、ダビデとゴリアテの格闘を覗き込むことができるのです。それこそが、この作品がギャラリーの中央に設置されている理由。表と裏、両面に描かれた作品なのです。
なぜヴォルテッラは両面に絵を描いたのでしょう。絵画は壁に飾るものだという先入観へのアンチテーゼなのでしょうか。また、絵画を支える台座が重々しく、がっしりとした造りなのも目を引きます。普通に絵画を置くだけならば、見栄えはともかく木のキャンバスでも十分に機能するはずです。この作品、まるで彫刻のようなのです。
不思議に思って何度か表と裏を眺めてみると、それまで気づかなかった差異が立ち現われてきます。表面で振りかぶった刀が裏面ではわずかに動き、跳ねあげられている。ぐるぐると絵の周りを回ってみると、刀が跳ねあげられ、また動く。そうです。この作品では観者が回り込んで移動する時間差が考慮されているのです。
この作品がもうひとつユニークなのは、その支持体（絵を描く画板）です。通常使われる布地のキャンバスではなく、石のスレートに油彩で描かれているのです。
多様な形態が試されたマニエリスム
この作品が描かれた16世紀、いわゆるマニエリスムと呼ばれるルネサンスを引き継いだ時代、絵画表現には多様な技法が使われるようになりました。油彩、テンペラ、フレスコ、そして水彩といったそれまでの一般的な技法が使っていた支持体に加えて、銅版や石版、絹を使った作品が登場しました。ルネサンス期に絵画表現が極限まで高められた後、画家の目はその支持体に向けられたのです。
その一因として挙げられるのが、パラゴーネ（paragone）です。絵画と彫刻と建築ではどれが最も優れているのか。そんな芸術表現の優劣をめぐる議論が、ルネサンス期の巨匠、ミケランジェロ・ブオナローティやレオナルド・ダ・ヴィンチを巻き込んで盛んに行なわれていました。絵画と彫刻と建築の優位性を巡って議論が繰り広げられていたというと、なぜそんなことで争っていたのか、人類に平和はないのかと暗雲たる気持ちになりますが、教会に置かれるべき芸術作品とはなにか。その優劣をめぐる議論は、芸術家の収入に直結していたことでしょう。今でいうと2次元型UIと3次元型UIを巡って繰り広げられているインターフェイス論争に酷似しています。Material Designか、Skeuomorphic Designか。・・・ほら、馬鹿にできなくなってきました。
三次元のものを二次元のもので描く困難さと、背景を描くことができる優位性を主張した絵画擁護派に対して、彫刻擁護派が主張したのは、その耐久性と多視点性でした。木や布は朽ち果てるが、石はそうではない。さらに彫刻であれば、様々な角度から作品を眺めることができる、というわけです。
こうした彫刻擁護派たちの主張に対抗しようとして、絵画の新しい表現様式を模索する流れが生まれました。銅版や石版を使えば、絵は永遠に朽ち果てません。こうして16世紀、絵画の新しい表現形態が誕生したのです。
ヴォルテッラもまた、絵画擁護派のひとりでした。ヴォルテッラは、同じ題材を表裏一体に描くだけではなく、それを微妙な時差をつけて描くことによって、彫刻にはできない時間を表現してみせました。ここでは明らかに、画家が見るものを意識していたことが伺えます。表面を見た観者が歩いて裏側に達するまでの一瞬の変化を、違和感なく表現してみせることに画家は成功しているのです。
加えて、光の表現にも工夫があります。一見すると裏面も表面も同じような方向から光が当たっているようにみえますが、よくよくみると光源は複雑です。構図上目立たせたい部分に、きちんと光があてられているのです。こうした表現も、彫刻で表現するのは難しいことだといえるでしょう。
同じ「表と裏」なのに、断絶をもたらす現代のUIの「表と裏」
ところで画面の表裏を使った表現は、今でもよく見られます。テレビ番組の場面転換で、画面がくるっと回転するトランジションエフェクト。日本であれば、歌舞伎の廻り舞台（舞台が丸く切り抜かれ、回転することによって大道具をすばやく切り替えられる装置）を思い起こす方もいるでしょう。いずれにせよ、これらの効果が使われる場合は、前のシーンとの大きな断絶を予感させます。
ヴォルテッラが、作品を回り込む一瞬の間を観者の想像力に任せてシーンをつなげたのに対して、これらの画面効果では一般的に「違う場面」や「起と結」を明示するために「表と裏」が使われています。同じ「表と裏」なのに、両者は似て異なる存在なのです。では、一体何が違うのでしょうか。
恐らくポイントは、観者と画面との関係にあります。まず一般的に「画面」のような枠は、世界と世界を隔てる境界線として機能します。今あなたがいる世界と、枠で縁取られた額縁の中は別の世界なのです。その別世界とのつながりを、人はどう判断するのでしょうか。
物と人との間のインタラクションの可能性を予感させる仕掛けのことを「シグニファイア」と言いますが、ヴォルテッラのそれが、観者が自ら動いていることで継続性が（主観的に）保証された状態で「覗き込む」ことを促すのに対して、トランジションエフェクトや廻り舞台は「画面そのものが動く」ために、ユーザーの主観性との断絶がまず発生します。その時点からユーザーと画面の関係性はある意味において断ち切られてしまうのです。ユーザーはその傍観者になることで、自動で動く枠の動きに別の主体としての意味が見出され、絵に描かれた世界に何らかの変化が起きたことを強烈に印象づけてしまうのです。
iOSが登場した最初期に実装されていた、画面全体を裏返すエフェクトがあったのを覚えておられるでしょうか。もちろん今でも、そのようなエフェクトを使うこと自体は可能ですが、画面の一部の要素を広げたり縮めたりして、前に表示されていた要素への手がかりを残すようにする「モードレス」なデザインのほうがモダンです。それを最もうまく活用しているのが、Material Designです。
この映像を見るとよく分かりますが、手掛かりを少しずつ残していくことによって、前の情報との断絶を極力少なくしているのです。
少し強引な結論ですが、人が自ら動くことによって「モードレス」を保証していたヴォルテッラと、人は動かず、情報を少しずつ変化させることによって「モードレス」を実現しているMaterial Design。人が動くか動かないか。それだけの想定の違いで、ここまで形態に変化が生じる、という好例だといえます。
見てみれば当たり前のことですが、対象となるUIオブジェクトの自律性の幅と人の操作との関係が壊れるとインターフェースとして成立しなくなる例は、枚挙に暇がありません。分かりやすい例は電子書籍の「ページを捲る」エフェクトです。どのくらいの操作で、どの程度自律的に「ページが捲られる」のか。場合によっては、シーンが断絶していることがUI上は指し示されているのに、頭の中で認識している物語は継続している、という状態ができあがります。擬似的な模倣であることも手伝って、裏をめくった瞬間に表面が消失するともいえる、この電子書籍とはなんなのか。単なる紙の模倣にとどまらず、その動きがシステムの状態を「指し示してしまう（とユーザーに予感させる）」ことがあるのです。たとえば処理落ちであったり、次のページに記載された情報の読み込み待ちであったりといった技術的な限界によって、人は意味を学習してしまうのです。今まで見ている限り「表裏の断絶」に新しい意味付けを与えた上手な例は、ありません。
UIデザインではこのように、人がどのようにそのオブジェクトと接し、人の動きとオブジェクトの自律的な動きが起こるのかによって、そのUIを大きく変える必要が出てくるシーンが度々あります。そのようなシーンに直面するたび、私はいつもこの、ヴォルテッラの不思議な絵画作品を思い出すのです。
参考文献
- David and Goliath by Daniele da Volterra (Louvre INV 566)
- http://cartelfr.louvre.fr/cartelfr/visite?srv=car_not_frame&idNotice=29725
- A Daniele da Volterra redisplayed at the Louvre
- http://www.thearttribune.com/A-Daniele-da-Volterra-redisplayed.html