「大人になったらマンガ家になる」。そう言って、塾や学校をさぼっては古本屋に通い詰め、マンガを書いて読み続けた結果。UIUXデザイナー(職種としては開発系webディレクター)となるに至った。

今もマンガは好きで、佐々木倫子や羽海野チカの新刊が出ては本屋に走るし、ブックオフで『なんて素敵にジャパネスク』とか『きらきら馨る』を一気に買ってきては「ヒサギかっこいいー」ときゅんきゅんしている。
「ホットロードが映画化される、主演は能年ちゃん」ときまってからは再びホットロード熱が上がる始末。現在、会社の先輩とともに、『ホットロード』『瞬きもせず』などの紬木たく名著を回し読みしている。半徹夜でクッソ忙しい日だってちゃんとマンガは読みつづけている。先日ついに会社のノートのすきまに春山書いてしまった。その中毒性は押して測るべし。

マンガを読んで書く過程と同じように。
UIを作ることには、中毒性があると思う。
UI作る仕事を私が好きなのは、ひとえにマンガを読んで書くのとUI設計が、おんなじ感覚だからだ。
その感覚についてつらつら書いてみようと思う。

心に響く『余白』をつくる

ホットロードはじめ、紬木たくのマンガの中毒性の理由の一つは、『余白が多い』ことだと思う。
余白というのは、紙面での余白・・・もあるけど。より重要なのは『伝えたい何かがつたわり』『読者に想像させる余白』だ。
音楽だと、音が届いて、さらに周囲に響きわたるというイメージ。
この『心に響く余白』は、よいストーリーだけじゃ決して作れないものだ。

ストーリーだけじゃ足りない、というのを教えてくれたのは母だった。
小学一年生の頃、原稿用10枚にわたる作文を書いたことがあった。当時、それだけの文章量を書ける同級生なんて私と双子の妹くらいしかいなかったし、ある程度のストーリーはあったので、先生からはそこそこ高い評価をもらったと思う。
作文を家に持って帰って母に見せたとき、母はこんなアドバイスをくれた。
「何を伝えたいか、次は一個決めるともっといいね」。

何を伝えたいか。
作文や絵の中で、たった一つ、伝えたいこと。
作品の中で、たった一つ、伝えたいこと。

伝えたいことってなんだろう。

4歳のころから中学生くらいまで、マンガのネームを書く中で、私は『ストーリー』と、『何を伝えたいか』をずっと考え続けてきた。

・ストーリー：中学生の親友二人が、吹奏楽部で競い合う話
・何を伝えたいか：6月頃、部活が終わった後の帰宅中、坂を自転車でくだってるときに感じた、周囲がめっちゃきらきらして見える現象

↑ほんとにこういうの書いていた。恥恥恥。

そして文章や絵を書き続けて、気づいたことがある。
たった一つの伝えたいことは、直接書くと、とても陳腐になるのだ。

伝えたいことを、陳腐にさせないよう気をつける

「6月頃、部活が終わった後の帰宅中、坂を自転車でくだってるときに感じた、周囲がめっちゃきらきらして見える現象」なんて、文章でこうやってかいてしまえば、陳腐にもほどがある。直接的には書かず、絵と文章の組み合わせで見ている人にどう伝えるか・・・そこを必死に考えるのが、マンガを書くおもしろさだった。そして辛さでもあった。

たとえば、ホットロード。心のよりどころにしてた相手と離れたときの心境。

一言で簡潔に表すと「さみしい、会いたい」だ。
そういったら身も蓋もない。けど、周囲のざわめきや体育館のボールの音と対比して、一言もしゃべらずに、ぼんやり相手につながることを考えてしまうとか。そういうディティールが積み重なって、伝えたい何かははじめて伝わり、心の中で響くと思うのだ。

デザインも同じ。「キャンセルしたいときはこのボタンをおしてください。次はキャンセル内容確認画面で、まだキャンセルにはなりません」「このフォームにこれとこれを入力してください」とか、指示の文章をこと細かく書かないと伝わらないデザインは陳腐だ。

たとえばイーツアーのダイナミックパッケージ。

入力フォームでは、フライトで乗る人数＝ホテルにとまる人数が同じでなければいけないらしい。でも、フライトで2名を選んでも、ホテルの部屋は1名がデフォルト。なんとなく目に留まらず先に進もうと「航空券とホテルを検索」ボタンをおすと、「搭乗人数と部屋割タイプの人数が一致しません。」というエラーが返される。

フライトで乗る人数＝ホテルにとまる人数が同じでないといけないなら。そもそも『ボタンを押せないようにしてエラーを返しておく』とか、部屋割り選択は『フライトで入力した人数でのみ可能な部屋割り（2名なら、1名1室×2部屋or2名1室）のみだす』という手法で、ユーザーがいちはやく気づくようにできる方法がある。こういうUIのディティールの積み重ねが、「なんとなく買いやすいサイト」か「なんかわけわからんサイト」という評価を分けることにつながるんだと思う。

ディティールを、ストーリーのどこでいれるかを考える

また、そのディティールは「ストーリーのどこでどのように入れるか」も考える必要がある。
たとえばホットロードで、春山が大きな事故にまきこまれたとき。
普通の人だったら、事故のシーンそのものを描くのかもしれない。
でも、紬木たくは違った。
「春山は　5m　そらをとんだ」という和希からの客観的視点で、江の島と海のシーンをバックに、ぶちぬきで描かれていた。
事故にあったシーンを描かないで、事故を暗示するという手法。
暗示であるがゆえ、かえって何かを考えてしまう。私は今でも、読み返すたびにそのシーンで息をのんでしまう。

webサイトの情報構造を考える時も、極力ユーザーの遷移中の意識にそったタイミングで、必要な入力をさせる必要がある。ユーザーの遷移で「なんでここでこれを入力しなきゃいけないの」と思わせない作りや文章にするよう限界までUIUXデザイナーは考え抜く必要があると思う。

違和感を感じた例としては、「箱根　エクスペディア」で検索したときに着地したページ。

エクスペディアは、ホテルについてのページで「チェックイン日」「チェックアウト日」をきいてくるのだ。
エクスペディアは大好きなサイトなんだけども、単にいつが安いのかをなんとなく知りたいとき、このＵＩだされるといらっとしてしまう。「じゃらんだとすぐホテルのだいたいの価格感がみれるのにっ」て。

※そうは書きつつも。きっとエクスペディアの構造上仕方なかったのかなとも思う。エクスペディアは『チェックイン日』『チェックアウト日』をユーザーにまず入力させ、空室のあるホテルのプランを即座に返す、というのが主眼のサービスだ。他方で、じゃらんや楽天トラベルなど、日本のホテルサイトは、日付未定状態で「カレンダー形式で価格一覧をだす」「そのカレンダーから日付を選び空室照会」というＵＩが非常に多い。日本のホテルサイトと同じような見方でエクスペディアのサイトで価格を探そうとすると、価格を見つけるのが難しいのだ。
ユーザーがこのあと価格に辿りつけず離脱してしまうので、きっとやむなくユーザーの文脈を無視して、ホテルの画面で『チェックイン日』『チェックアウト日』入力をさせているんじゃないかと思う。むーん、難しい。

何を伝えたいか。その伝えたいものを、どうやってストーリーの中で、ディティールを積み重ねて伝えるか。
この作業は、マンガを書くのも、物語を書くのも、卒論を書くのも、webサイトの情報設計をするのも、そう変わらないと思ってる。マンガを書くのと同じ感覚で、私はUIを設計してる。

他のUI/UXデザイナーのみんなは、どう考えてUIを作っているんだろうなあ。
小さい頃マンガとか物語とか書くのが好きだった人、きっと多いんじゃないかなあと私は勝手に思ってる。

※ホットロードの画像は「集英社文庫＜コミック版＞『ホットロード』」から引用しました。

—–
『ホットロード』は、表現を考えるうえでも少女漫画という意味合いでも名著だと思う。
あと『瞬きもせず』も。主人公が恋人を「男性」として意識してどーしていいかわからんとかもうきゅんきゅんしすぎて死にそう。