UIにおけるイコノロジー的解釈について
アプリの設計なんかをやっていると、ハンバーガーボタンとかよく見たり使ったりしますが、この横棒が3本並んだものをなぜメニューボタンと認識することができるのでしょうか。そうしたUIについて、試しに美学における「イコノロジー」の概念をふまえて考えてみました。
ハンバーガーボタンの例。
イコノロジーとは
イコノロジー(iconology)は日本語では「図像解釈学」と呼ばれる、20世紀以降の絵画分析に大きな影響を与えた概念です。1939年にエルヴィン・パノフスキーの『イコノロジー研究』によってまとめられました。
イコノロジーの考え方によると、私たちが何かしらの図像(絵画や写真など)を見るとき、三段階の解釈が生まれるそうです。
ためしに下の絵を例に、三段階の解釈についてまとめてみました。(賢い人、間違ってたら教えてください)
絵心の無さがあふれんばかりの例題。
第一段階的・自然的主題
例えば上の絵を見たときにすぐ分かるのが「人が両腕を前に挙げて拳を顔に近づけている」ということです。これは誰でも一瞬で分かります。さらに口元が若干あがり、「機嫌はなんとなくよさそう」ということがなんとなく理解できます。こうした内容は、特に文化的背景の共有がなくても「形」を見れば解釈できるものであり、それをパノフスキーは「第一段階的・自然的主題」と呼び、解釈の第一段階目であるとしています。
第二段階的・伝習的主題
さらに、こうしたポーズを人は「ファイティングポーズ」と呼びます。つまり「両腕を前に挙げて拳を顔に近づける＝ファイティングポーズ」ということを知っている人にだけ「人がファイティングポーズをとっている」、つまり「この絵は戦いが起きるシーンを描いたものである」という解釈が可能になります。このような、特定の文化的背景を共有する人にだけ可能な解釈を「第二段階的・伝習的主題」と呼びます。
キリスト教を少しでも知っていないと「十字架にはりつけられたおっさん」を「イエス・キリスト」だとは分からないし、「左目の下に傷があり、麦わら帽子をかぶった海賊」を「モンキー・D・ルフィ」であると理解できるのは少しでも『ONE PIECE』を知っている人に限られるわけです。
ちなみに、この二段階目の解釈を「イコノグラフィー(図像学)」と呼び、こちらも美術分析において非常に重要な考え方です。そこに描かれている「モチーフ」に関する分析です。
内的意味・内容
この三段階目の解釈が「イコノロジー」(「深い意味におけるイコノグラフィー」とも呼ばれます)と呼ばれるものです。上記の「第二段階的・伝習的主題」において、この絵は戦いを描いた絵であるという解釈ができましたが、ではもしこの絵で描かれている人物が下のような過去を持っていたとしたらどうでしょうか。
彼は少年時代かなりのヤンキーで、毎日ケンカに明け暮れていた。ところがタバコを注意されたことをきっかけに、クラスの委員長と殴り合いのケンカになってしまった。長い間お互いを殴り合い、力尽きた二人は地面に倒れ込んだが、なぜかとても気分は晴れやかだった。彼はその後更生し、委員長とは親友になった。二人は大人になってからも交流があり、いまでも時々飲みにいく。そこで顔を合わせた二人は、ファイティングポーズで挨拶するのが恒例となっている。
こんなストーリーがあったことを前提にすると、この絵は「ある青年が久しぶりに親友と再会したシーンを描いたものである」という解釈が可能になるのではないでしょうか。心なしか笑っているのも納得できます。
ある青年が久しぶりに親友と再会したシーン
このように、描かれているものやそのシーン、ひいては作者の経験や歴史、思想など、その図を取り巻くあらゆることをふまえて行われる解釈を「イコノロジー」と呼びます。上のふたつの解釈とは異なり、絵だけをみても解釈することはできません。そこに描かれているものの内的な意味や内容を含めて解釈することが必要になります。
UIに当てはめてみる
ここまでがいわゆる絵画におけるイコノロジーの考え方でした。
これを同じ図像であるUI(特にアイコン)に応用してみるとどう捉えられるでしょうか。初めに挙げた「ハンバーガーボタン」を例に考えてみようと思います。(書きながら考えてるので、まだ答えが出ていない)
第一段階的・自然的主題
まず見て分かるのが「短い横棒が3本縦に並んでいる」ということです。当たり前のように見えますが、実はこういう解釈が一瞬でできる図であることが、アイコンとして適しているかどうかの最低基準だと思っています。
第二段階的・伝習的主題
さらに、ある程度スマホを触ったことのある人なら、この「短い横棒が3本縦に並んでいる」図が「メニューボタン」であることがわかるはずです。この図式が世の中で成立する過程について、UIを生業にするものであれば敏感である必要があります。おそらくハンバーガーメニューは、それを押してたら出てくるリストメニューを暗示しているのでしょうから、その先にどんなものがあるかは想像がつくかもしれません。しかしたとえば、iPhoneの「電話アプリ」のアイコンはよくある受話器の形ですが、そのうちスマホしか見たことのない人が増えてくると、このアイコンは意味をなさなくなってくると思われます。
ちなみに、メニューボタンとしてよく使われるアイコンに、「点が3つならんだ図(何て呼ぶのかわからない)」があります。これら2つの間に明確な使い分けのルールは存在しないと思いますが、ハンバーガーメニューが「全ての機能がそこに収められている」のに対し、点三つのアイコンは「メインで表示されているメニューの他に色々ある機能が収められている」、いわゆる「その他のメニュー」的な位置づけであるように個人的には思います。やはり「しまった...」のような文末に出てくる「...」のように、最後に付け足されるマークであることが関係しているのでしょうか。
LINEのUI。「...」が「その他」として扱われている。
内的意味・内容
ハンバーガーボタンを押すとメニューが出てくるというのは、わりとどんなアプリやWebサイトでも一緒なのですが、「メニューがどのように出てくるか」については実はあまり統一されていません。今表示されているこのページではプルダウンメニューが出てきますし、例えばGoogle AnalyticsのiPhoneアプリでは左からスライドメニューが出てきます。いずれにせよメニューが表示されることには変わりがないのですが、「そのボタンがどこに配置されているか」によって、実際の挙動が変わってくることはよくあります。
Google AnalyticsアプリのUI。さきほどのハンバーガーメニューが上から出てきているのに対し、こちらは左から出てきている。
あと解釈の材料になるのが、「なぜハンバーガーメニューがそこにあるのか」ということだと思います。
ハンバーガーメニューは多くの機能をそこに収めることができる便利なものとしてよく使われますが、「ボタンを押すまでそこに何があるか分からない」というデメリットがあります。逆に言うと「ハンバーガーメニューを使わなければならないほど多くの機能がある」ということを暗に示しており、多機能性の訴求に寄与していると考えることもできます。さらに言うと、ハンバーガーメニューに収められているのは「そこまで重要ではない機能」である場合もあります。
そのことと、そもそもどういう状況(ECアプリなのか、ブログWebサイトなのか、企業Webサイトなのかなど)で使われているのかを考慮することで、ハンバーガーメニューひとつからそのサービス全体の設計思想を捉えることができるようになります。
UIにおけるイコノロジー
以上、イコノロジーの考え方をUIに当てはめて適当に書いてみましたが、要は「良いUIは、それ単体での理解を促進するだけでなく、それを見るだけでそのサービス全体の設計思想が理解できるようになる」ものであると考えられます。
しかしそのためには、インタラクションなどのミクロな視点だけでUIを観察せず、ページ全体での配置や、そもそもサービス全体での利用のされ方といった、広い視点で捉える必要があるようです。
とはいえ、イコノグラフィーの側面からUIを考えることにもまだまだ余地がありそうなので、色々観察してみたいと思います。
