Day 2: UIデザインを始める前に、デザイン・コンセプトを見つける

「京都で英語版webアプリを個人開発する100日間」の二日目。まず、アプリで実現したいユーザー体験の一例を紹介してから、UIデザインに着手する前にするべきだと私が考える、デザイン・コンセプトづくりの話をします。

ユーザー体験（その２）

（「その１」は前回の記事を参照してください。）

自宅で今度の休日の予定を考えている。

福田美術館という、京都嵐山に一昨年オープンした日本美術の美術館がある。雰囲気が良くてお気に入りで何度でも行きたくなる場所。特に、館内にあるカフェ（「パンとエスプレッソと」の支店）からの美術館の庭園の水盤と、その向こうに見える桂川と渡月橋の風景が、とても美しい。

福田美術館内のカフェからの風景（筆者撮影）

今、この美術館の強みである伊藤若冲の作品をメインにした展示を開催中なので、また行ってみようと思うのだが、今回は館内のカフェではなく、どこか周辺にある行ったことのない場所でランチを食べてみたい。

そこで、ノートパソコンでブラウザーを開き、My Ideal Map App にアクセスする。スクリーンには、最初、自分の家を中心にして近所の地図が表示されるが、スクリーン上部には検索ボックスも表示される。そこに「福田美術館」と入力し始めると、「福田」と漢字変換した時点で、「福田美術館」が検索ボックスの下に表示されるので、そこをクリックする。

すると、画面が福田美術館周辺の地図に切り替わり、私が過去に保存した場所が、美術館の周りに幾つか表示される。その中の一つが「パンとエスプレッソと嵐山庭園」。そういえば、常々行ってみたいと思っていた。My Ideal Map App は、いつもこうやって行きたい場所を思い出させてくれる。

「パンとエスプレッソと嵐山庭園」の場所をクリックすると、私の Notion アプリのメモへのリンクが表示され、リンクをたどってメモを見ると、行きたいと思ったきっかけである「Kyoto Cafe Guide 2021」の紹介記事のスキャン画像があった。

私の Notion アプリに保存してあるメモのスクリーンショット

古民家カフェであることが魅力的だし、抹茶のフレンチトーストが美味しそう。

福田美術館を訪れた後に行ってみることにした。

後日、実際に訪れると、「古民家カフェ」という言葉から想像する雰囲気を一回り上回る素晴らしい空間だった。古民家といっても、「旧小林家住宅」という京都市による立て札が立っているほどの、1809年(!)に建てられた由緒ある古民家。巨大な茅葺屋根にまず圧倒される。

カフェ「パンとエスプレッソと嵐山庭園」の外観（筆者撮影）

中は満席。店員さんに「縁側なら空いています」と入り口横の、まさしく「縁側」の席を薦められる。

カフェ「パンとエスプレッソと嵐山庭園」の縁側席（筆者撮影）

縁側なので外からは遮断されていない、つまり、冷房は効いていない。が、昔の家なので夏も過ごしやすいように作られている。身長163cmの私の頭が当たるほど低い位置まで伸びている軒先のおかげで、南向きなのに日差しが全く当たらない。日陰であれば、日本の蒸し暑い夏も過ごせる。席の横には扇風機と蚊取り線香を焚いた「蚊遣豚」。こんな空間、21世紀には珍しい。冷房なくても全然問題ない、いや、むしろ中の席よりも望ましい。

いざ、靴を脱がずに縁側に腰掛けてみると、目の前の庭は綺麗に手入れされている。

カフェ「パンとエスプレッソと嵐山庭園」の縁側席から見る庭（筆者撮影）

定番の紅葉だけでなく、山吹とか紫陽花とか水仙とか季節の花木が植えられていて、季節ごとに異なる表情を楽しめるようになっている。

こんなカフェはなかなかない。メニューも凝っている。日本ではなかなか飲むことのできないカフェ・シェケラート（エスプレッソを氷と一緒にカクテルシェイカーでシェイクしたイタリアの夏の名物）やカフェ・コルタード（スチームミルクでエスプレッソを割ったスペイン語圏のエスプレッソ・ドリンク）。もう季節は終わってしまったが、公式インスタグラムアカウントには、赤紫蘇のノンアルコールモヒートが載っている。

My Ideal Map App がなかったら、このカフェの存在をすっかり忘れてただろう。

web アプリであるメリット

上述の「ユーザー体験」には、My Ideal Map App の重要な特徴の一つが隠されている。それは、iOSアプリやAndroidアプリではなく、webアプリであること。

Chromeなどのブラウザーさえあれば、どんな電子機器でもアクセスできる。せっかく、デスクトップ・コンピューターの前に座っているのに、わざわざスマホの小さな画面を覗き込んで、休日の予定を立てたくない。

スマホで使うにしても、わざわざアプリをインストールする必要はない。スマホで撮影した写真や動画の保存のために、貴重なストレージ容量を残すことができる。また、My Ideal Map App は PWA (Progressive Web App) なので、インストールしたアプリのように使いたいなら、それも可能。

---

ここまでは、私が今「個人開発」中のアプリの機能について説明してきたが、ここからは、アプリ開発の過程を記録していく。提供するユーザー体験が定まったら、次のステップは、デザイン・コンセプトを考えることだ。

デザイン・コンセプトの必要性

2014年秋から2015年夏にかけて、ロンドンにある Inchbald School of Design の一年間集中コースで、インテリア・デザインを学んでいた（当時、インテリアデザイナーへの転職を考えていた）。

コースが始まって最初の週の授業でのこと。校長であり、グラフィックデザイナーとしての顔も持つ Alan Hughes が「デザイン・プロジェクトを始める時には、必ず、デザイン・コンセプトをまず考えろ」と我々生徒たちに語った。

手を挙げて「何故ですか？」と聞くと、「デザイン作業中には、幾つもの選択肢から一つだけ選ぶという意思決定を何度も何度もしなくてはならない。デザイン・コンセプトは、そういう一つ一つの意思決定の際のガイドラインになる」との答え。

その一例として私が思い出したのは、2012年のロンドン・オリンピックスタジアム。オリンピック後に客席を解体してスタジアムの規模を大幅に縮小することを念頭にデザインして欲しい、という前代未聞のクライアントの意向に、デザインを担当した建築事務所ポピュラスは、当初四苦八苦したらしい。

2012年オリンピック終了前（左）と終了後（右）のロンドン・オリンピックスタジアム（画像元：Populous）

しかし、Embrace the Temporary （「一時的なものを受け入れる」）というデザイン・コンセプトにたどり着いてからは、通常の建築では耐久性がないことから敬遠される派手な色のペンキや布地を積極的に利用するなど、次々にデザインのアイデアが生まれたそうだ。（詳細は、2012年オリンピック中にロンドンの Soane Gallery で開かれた展覧会 Stadia: Sprot and Vision in Architecture のカタログ参照。）

すっかり納得した私は、以後、何かをデザインする時には、必ずコンセプト作りから始めることにしている。

コンセプトづくりの道は険しい

My Ideal Map App のデザイン・コンセプトに辿り着くまでには紆余曲折があった。

最初は、ミニマリズムという言葉が浮かんだ。My Ideal Map App の一つの特徴は、ユーザー体験を実現するために必要なタップ・クリック数を最小限にすること。そのような特徴を視覚的に表すにはミニマリズムが適当なのではないかと。なので、そもそもミニマリズムとは何なのか、美術史・デザイン史を辿って調べてみた。

現代美術におけるミニマリズムの代表的アーチスト、ドナルド＝ジャッドによる彫刻作品（画像元：Judd Foundation）

しかし、いまいちしっくりこない。今から考えると、タップ・クリック数を最小限にする、というのはどのようなアプリにでも必要なことであって、My Ideal Map App に特徴的なものではない、というのを直感的に理解していたのだろう。

もう一つボツになったアイデアは「波紋」。上記のユーザー体験にもあるように、My Ideal Map App は、検索した場所の周辺にユーザーが過去に保存した場所を表示する。このことが、私に「正距方位図」というタイプの地図を思い起こさせた。

北極点を中心に「正距方位図」で描かれた世界地図を含む、国際連合の紋章（画像元: Wikimedia Commons）

同心円が中心からの距離を示す様子は、池に石を投げ入れた時に生じる波紋に似ている。そういえば、My Ideal Map App が依拠する Google Maps （及びその他のグーグルのアプリ）は、ボタンをタップ・クリックした場所から「波紋」が広がるアニメーションがある。

「波紋」のアニメーション（画像元: Material Design）

しかし、「波紋」というアイデアもいまいち納得できなかった。なぜかと考えてみると、My Ideal Map App のコアとなる機能を反映していないからだった。

アプリのデザイン・コンセプトは、そのコア機能を反映したものでなければならない。My Ideal Map App のコア機能は、ユーザーが興味を持った場所を地図に保存できる、ということだ。

この機能を視覚化するにはどうすればいいか、考えてみた。

地図上にピンを刺す、というモチーフは適当でない

約10年前であれば、部屋の壁に飾ってある地図にピンを刺す、というアニメーションによって、地図上の場所を保存するという作業を視覚化するのが、王道のUIデザインだった。

（画像元: Not On The High Street）

当時は、まだスマホが新しいものであり、操作方法を直感的に覚えてもらうには、こういった物理的メタファーが有効だったし、iOSのデフォルトアプリもそのようにデザインされていた。

iOS 6 までの Notes アプリ（画像元：idownloadblog.com)

しかし、2021年の今日、スマホの使い方は誰でも知っている。物理的メタファーを用いる必然性はない。

また、My Ideal Map App は、上記の「ユーザー体験その２」で書いたように、地図上の保存した場所から、その場所について自分が作成したメモを参照できる、という点で、紙媒体の地図とは大きく異なる。そのことを強調するには、ピンを刺す、というメタファーはむしろ不都合である。

スマホの地図上に興味のある場所を保存することは、真っ白なキャンバスに絵を描くことに似ている

地図上の自分の興味のある場所を保存するとは、本質的にはどういうことか？

Google Maps のような、スマホの画面上に表示される地図は、誰のものでもない。その誰のものでもない地図に、自分の関心のある場所を一つ一つ保存して印をつけていくことで、地図が段々と自分だけのものになっていく。

このことは、視覚的には、真っ白なキャンバスに絵を描いていく作業に似ている。誰のものでもない地図は、真っ白なキャンバス。地図上に保存した場所は、キャンバスに落とした絵の具。

（画像元: SurajFineArts)

自分の関心のある場所がたくさん表示されている地図は、自分が描いた絵と言える。

ここまで考えた後、ふと頭に浮かんできたフレーズが

"Dye me in your hue" (あなた色に私を染めて）

グーグルしてみると、Amir Khusro という13世紀インドの詩人が作った詩に出てくるフレーズらしい。

My Ideal Map App との関連で言えば、「あなた色」(your hue) は、ユーザーの関心。「私を染めて」(Dye me) は、地図に場所を保存すること。

デザイン・コンセプトとして結構いい線を言っている、と思ったが、何かが足りない。。。

地図とは、空から見下ろした景色である

足りないのは、地図とは何か、についての掘り下げであると気づいた。キャンバスは地図ではない。地図とはそもそも何なのか。デザインにはこのような「そもそも」論が多くの場合必要である。

地図というものがあまりにも当たり前すぎて、最初は気づかなかったのだが、地図とは、そもそも、我々人間が空を飛べたとしたならば見ることができるものを、抽象化したものだ。航空写真や衛星写真が手に入る前から、人は、空を飛んだ時のことを想像して地図を作成してきた。

ということは、街を歩きながらスマホで地図を見るとは、タケコプターを頭につけるなりして空へ高く舞い上がり、下を見下ろすことで、今自分のいる場所の周りに何があるかを確かめる作業だと言える。

地図とは、本質的には、空の上から真下を見下ろした風景だ。

航空写真（画像元：朝日航空）

"Dye me in your hue from the sky"

以上の考察から、My Ideal Map App は、「白いキャンバスに絵を描く作業」と「空から見下ろした街の風景」を組み合わせたものになる。

この組み合わせを表す言葉として、思いついたのが

Dye me in your hue from the sky （空からあなた色に私を染めて）

というフレーズ。足りなかったのは "from the sky" だった。

このフレーズに辿り着いた時、腑に落ちた。My Ideal Map App を端的に表した言葉だと。

「あなた色」(your hue) は、ユーザーの関心。「私」(me)は、アプリ上に表示される地図。「染め」る (dye)とは、ユーザーが関心のある場所を保存すること。そして、その行為は「空から」(from the sky) 行われる。地図は空から真下を見下ろした景色だから。

次のステップ：コンセプトの視覚化

この記事のトップ画像として表示されているのは、このコンセプト "Dye me in your hue from the sky" を視覚化している画像を検索した結果、見つけたもの。以下に再掲する。

(画像元: 100architects)

100architects という建築事務所が上海に作った公共空間デザインらしい。

しかし、何かが違う。My Ideal Map App が目指すものとはズレている気がする。

デザイン・コンセプトを的確に表すイメージを、コラージュ手法を使って作り出す必要がある。つまり「ムードボード」を作る必要がある。

（次回に続く。）

注: この記事は、英語で書いた同内容の記事を和訳すると同時に日本人向けに編集したものです。