1年ぶりです、Classi Advent Calendar 2020 7日目は、デザイナーの@shio312が毎年のいつもの記事とはちょっと違った味でお送りします。

はじめに

去年度から今年度にかけて、他部署の方に
「デザイナーの頭の中身ってどうなってるの？」とか、
「特にUIのような画面を起こす人君たち（特に私）の頭はどんな構成なんじゃ？」
とよく訊かれました。

と言うわけで、UIデザイナーの頭をかち割って中身を見せることはできないので、今年は自分はこんなふうにUIに紐づけて世界を見ていますよ、という実例を紹介しようと思います。

写真で。

「エッ？関係あんの？」
と思われるかもしれませんが、趣味として嗜む方も多い写真を例にお話しする事で、少しでも画面デザイナーに共感と親近感を覚えていただけると嬉しいなと思い、挑戦としてお話ししてみようと思います。

ちなみに、UI関連に携わるデザイナー皆が皆そうではないことだけは事前にご理解の上、拝読くださいね。

4枚の写真を用いた実例紹介するよ

さてここに私自身が撮影した4枚の写真があります。
----A----

----B----

----C----

----D----

母と京都の南禅寺に行った際に撮った写真たちです。いや〜良い紅葉でした🍁

うん、写真を通じて友人に古都自慢したいな！

よし、今から記載の写真のどれが一番"秋の古都の魅力"が伝わるか考えたいと思います。
↓
とすると、1枚だけで秋の古都の魅力を伝えるという目的を達成するための最低要件は
以下3点が最低情報として写真に収まっていると分かりやすいと考えます

要件

画面に収まる建築物によって（おおよそ）直感でここは古い街だと言うことが分かること
画面に収まり赤や黄色の紅葉が秋だと直感で分かること
感情的に秋の終わりらしい古都の趣きが写真を通じて見る人に伝わること

A〜Dの写真の考察##

----A----
紅葉がいっぱいある、秋だなきれいだな！けれど、場所がわからんしどこだよ此処
----B----
なんか古そうな建物もあるし紅葉もあるな、写真としても画角も良いしカッコええんじゃないか？
ただ天気良すぎて視線がそっち行くな...古都らしい雰囲気はCより下か？
----C----
Bほど写真としてのカッコよさはないけど、奥に古い建物（南禅寺の三門）があるし紅葉もあるな？
----D----
紅葉の絨毯が綺麗だけど、古木の渋さを伝えたいわけなじゃいんだ、目的がちがうぞ！

となります。
BとCが目的達成に近そうですね。
ここで写真A〜Dが要件をどれだけクリアしているか星取表を作ってみましょう。

必要用件	要件1	要件2	要件3
A	×	◯	×
B	◯	◯	△
C	◯	◯	◯
D	×	◯	×

はい、こうなりました。
画としてはBの方が奇をてらった面白い画ですが、要件の達成度としてはCに軍配が上がりました。

マジか〜（本音）

此処で思い出してみましょう。
Bの写真ですが、「ぱっと見イケてるサイト/アプリなんだけど、あともうちょい分かりやすいUIだったらな〜ファストビュー内にフォームとボタンがあったらな〜（使い勝手の要件が満たされていない）」
と同じ状態というわけです。

Cの写真は素人丸出しかもしれません。正直写真としては品質が微妙です。
けれど、自分の目的における要件を達成しているのはCということになります。

このあとも納得いく写真を求めて沢山撮りました。
先ほど結論づけた結果から、目的達成のための必要条件をクリアしながらも、更に画として目に入る情報の順番が（無理やり言い換えると情報設計ですね）より分かりやすい、そして品質の高い画を作るために私は写真のファインダーを絞っていきました。
目的が達成された品質の高い写真を見た友人との楽しい会話を想像しながら。

と言った感じで私はUIを「使う人がどうやって何ができるか、そして結果笑顔が生まれるか」を考えて画面に落とし込んでいっています。

こんな感じでした、ジャンジャン。

写真や近代絵画などでも「何を伝えたがっているのか」を意識して見てみると、今まで思いもしなかった視点に気がつくかもしれません。
そんなの当たり前だよ〜と思う方が多いかもしれませんが、ぜひ改めて試してみてはいかがでしょうか。
機材で表現を広げるのも手ですが、同じ機材でどこまで伝え方の幅を広げるか工夫を凝らすのも中々楽しいもんです。

モノや絵画、写真、空間においても存在している、人と人とのコミュニケーションを産み、つなぐインターフェース。
そう考えると、この仕事の可能性とそれに携わることができている自分が誇らしいなあと思えます。

これを読んだ方の物づくりの楽しさの視野が、ほんのちょっと広がると私は嬉しいです。
それでは、良いお年を。