#Illustrator30_30 #Ai30th 記念連載 | Vol.27 UIデザイナー 森本友理さん

連載

Illustrator 30_30

photo: Taio Konishi Photography

https://blog.adobe.com/media_b34255743412297f5ca86f932f342320afde6253.gif

「Illustratorと私」制作作品

Illustrator30周年（#Ai30th）を記念し、Illustratorをクリエイティブの味方として活用する若手クリエイター30人をご紹介する本企画。第25回にご登場いただくのはデザイナーの森本友理さん。andropのミュージック・ビデオ・ゲーム「bell」ではデザインを手がけたことで知られる森本さんは、現在はグッドパッチに所属しUIデザイナーとして活躍されています。森本さんとIllustratorの関係とは？

手を動かしていたい

https://blogs.adobe.com/creativestation/files/2017/09/image.jpg

グッドパッチ社にて

——まずはクリエイターになったきっかけを教えて下さい。

**Morimoto：**出身は大阪です。絵を描くのが好きだったので、地元にあった、美術系の工芸高校のビジュアルデザイン学科に進学しました。高校の時から徹夜でデザインして「もう朝５時だ！」なんてことをやっています。卒業後は高校と提携している専門学校に進学して、そこでもデザインを学びました。そこでは「産学共同プロジェクト」という企業さんと一緒に商品開発をするというプログラムがありました。個人で作品を作るというよりも、チームで作ることが多かったですね。

——すると、もうデザインのキャリアは20年近くになりますね。クライアントワークのような実践的な授業を早くから行っていたことが、今も役に立っていそうです。

**Morimoto：**すごく今やっていることに近い授業でした。その時に面白かったのが、学生でチームを組むと、自然にディレクター的なポジションとデザイナーのポジションに分かれていくんです。私は当時から仕切る側ではなくて手を動かす側でしたね。

——物心ついた時からデザイン一筋という感じですね。森本さんが普段メインで使っているツールを教えて下さい。

**Morimoto：**IllustratorとPhotoshopです。他には、RAKU-GAKIの西田さんたちがすごく独特な作品をネット上にアップしていたのに触発されて、2005年くらいからflashを覚えました。flashはタイムラインで配置していくことができるので、スクリプトを書けなくても簡単なアニメーションができるのが楽しいんですよね。

古びないデザイン androp「Bell」

//www.youtube.com/embed/jkqMwQfxhk8?rel=0” frameborder=“0” allowfullscreen>
ミュージック・ビデオ・ゲーム版は http://www.androp.jp/bell/。

——androp「Bell」（2011年）はミュージックビデオであり横スクロールのゲームでもある、画期的な作品でした。この作品にはどのように関わられたのでしょうか？

**Morimoto：**前職のAID-DCC時代の仕事で、わたしはイラストを担当しました。直線的でロウポリゴン的な表現だったので、かなりの部分をIllustratorで描きました。ラインだけの状態にして、Illustratorで一通り描いてから、Photoshopでテクスチャを貼り付けるんです。そのイメージをエンジニアさんに渡して、MAYAで3D化してもらい、アニメーションがつき、さらにゲームになる、贅沢なプロジェクトでした。

——映像でもありゲームにもなるということで、描いたイラストの量もかなり膨大だったのでは？

**Morimoto：**映像もゲームも、初めてやることだったのでたしかに大変でした。制作のフローは、まず監督の川村真司さんが絵コンテを描いて、わたしが詳細を描いていくというかたちです。そもそもこの世界観を作るまでが大変だったんです。初期段階は2Dなのか3Dなのかもまだ決まっていなくって、「文字がキャラクターになる」というアイデアからトーンを決めていったんです。

——たしかに、初期の世界観は全然違いますね。シュールレアリスムな雰囲気です。

**Morimoto：**このシュールな世界観だけで見ればすごく良いんですが、andropのイメージからはかけ離れてしまう。一旦トンマナが決まってからも、アウトラインがついている／ついていない、ということだけでも決めるのが大変なことで…

https://blog.adobe.com/media_7e97f72a1d606d104c18eb8651828c37169df71e.gif

——それほど気を使ったからこそ、今見ても全く古びない作品になっているんでしょうね。

**Morimoto：**ブラウザで遊べるゲームは、dot by dotのさくーしゃさんが自費でサーバー費を払って維持してくださっているので、是非あるうちに遊んでほしいです。

目で弾くピアノのUIデザイン

//www.youtube.com/embed/VHXx7XTPULE?rel=0” frameborder=“0” allowfullscreen>

——UIデザイナーとして活動されていますが、いまUIといってもたくさんのフォーマットがありますよね。森本さんはどのような仕事を手がけられているのでしょうか。

**Morimoto：**視線追跡機能を搭載したヘッドマウントディスプレイ『FOVE』を使って、視線でピアノを弾くアプリケーション「Eye Play The Piano」のインターフェイスをデザインしました。肢体不自由なこどもたちが「自分たちの力で楽器を演奏し、音楽会を開くことをサポートする」というプロジェクトでした。

——普段手がけられている広告などとは全く別のプロジェクトですね。

**Morimoto：**これまでは、派手なことというか、新しいもの、見たこともない尖った表現を求められていましたし、デジタルで人の体験を変えられるいろんな方向を探っていました。もちろんそこにもクリエイターとして作る喜びがあったんですが、このプロジェクトでは、今までできなかったことがデジタルのクリエイティブによって実現できるという可能性をすごく実感したんです。

https://blogs.adobe.com/creativestation/files/2017/09/image2.jpg

「Eye Play The Piano」インターフェースデザイン

https://blogs.adobe.com/creativestation/files/2017/08/th_170818_morimoto_yuuri0042.jpg

Illustratorでのパーツ制作

——VRのユーザーインターフェイスはスマホなどとはまた別の次元の難しさがありそうですね。

**Morimoto：**開発者と話して、目線で追って音を鳴らせるのは1画面にパネル8枚くらいということがわかりました。一画面にそれぞれ音が割り当てられた8枚のパネルを設置して、首を振ることで単音モードと和音モードを切り替えることができるレイヤー構造になっています。ボタンひとつ取ってみても、実装してみないと検証ができないことがPCやスマートフォンのデザインとの大きな違いでした。目線を動かすといっても、ヘッドマウントディスプレイ自体の重さもあるので、自由度が少ないんですよね。そういったユーザー体験について、リアリティを持って関われたことで、広告業界からサービス業界に転職したところもあるかもしれないです。

「良いUIデザイン」とは

——いまのVRの例にもあるように、UIデザインのメディアは多岐に渡るわけですが、「UIデザイナー」は何をデザインする職能だと思われますか？

**Morimoto：**定例会議にも出席して、「この機能は必要なのかどうか」という話からしていくわけです。ですので、実際に手を動かしてデザインをする前の段階は結構長いんです。グッドパッチの仕事ではサービスが抱えている課題を分析する案件調査や競合調査からはじまり、仕様策定・ワイヤーにもかなり時間を取っています。

——単なる見た目のデザインの範疇を超えるお仕事ですよね。

**Morimoto：**定例会議にも出席して、「この機能は必要なのかどうか」という話からしていくわけです。ですので、実際に手を動かしてデザインをする前の段階は結構長いんです。仕様決めもワイヤーもかなり時間を取っています。サービスのデザインというものはブランドのビジネスを支えるところなので、クライアントにとってもすごく重要な事なんです。

https://blogs.adobe.com/creativestation/files/2017/09/image3.jpg

「モチベーションクラウド」のUIデザイン

——そこまで深く関わってデザインされているとは驚きました。

**Morimoto：**私はデザインだけで実装はしないんですが、実装期間中のフェーズにもずっとクライアントのところにいるんです。実装されたデザインを見て調整したり、リリース後の改善に入る事もできるので。そういう関わり方ができるのは、ちょっと広告業界とは違いますよね。

——森本さんが考える「良いUIデザイン」とは？

**Morimoto：**ビジュアルとユーザビリティが両立していること。整理されている正しいデザインは人を幸せにします。使う人のことを考え抜いて、何度もユーザーテストなどの検証を繰り返して作られるストレスのないデザイン。その一方で、もうちょっと言語化できない、「なんか気持ちいい」「なんか素敵」っていうものに人の心って動きますよね。その両方を成立させたい。今まで表現的な部分をデザインしてきたところを、もう少し前の段階から考えるようにしたいと思っています。

——これからどういうことを身に付けたいと思っていますか？

**Morimoto：**夢でいえば小説を書きたいんですが…直近でいえばビジュアルとユーザビリティの両立です。今はデジタルのクリエイターがジャンルをすごく横断するようになって、flashでゴリゴリプログラムしていた人がプロダクトを作ったり、映像を監督したり、望む望まないと関わらず、いろんなことに巻き込まれる状況になっていますよね。デザインするものが、もはやスクリーンにも囚われない。そういう状況を楽しみたいと思っています。

——Illustrator Drawでの作品制作をしてみた感想をお教えください。

**Morimoto：**ラフに描いていけるのがいいですね。デスクトップアプリケーションに共有できるのが、「未来だ」と思いました（笑）。筆圧判定も優秀だと思います。

——最後に座右の銘を教えてください。

**Morimoto：**流れに逆らわない。今までの転職も、誘われるままに入社したり、案件も「やったことないけどやってみますね」みたいな感じで、チャンスを与えて頂くことが多かったんです。だから、流れに逆らわないように頑張りたいと思っています。

——ありがとうございました。

https://blogs.adobe.com/creativestation/files/2017/09/image4.jpg

森本友理
公式サイト

1985年大阪生まれ。AID-DCC Inc.で、デジタルプロモーションを中心としたデザインを担当後、現在はUIデザイナーとしてGoodpatch Inc. に所属。「Kirin green name」のWebデザイン、「androp “bell” music video game」のアートワーク、「Eye play the piano」のインターフェイスデザインなど幅広い領域でデザインワークをおこなう。東京TDC賞、The One Show、カンヌライオンズ、ほか受賞多数。

◾️この企画について
いまやデザインに欠かせないツールとなったAdobe Illustrator CC。1987年3月19日に初めてPostScript専用ベクターツール「Adobe Illustrator 1.0」がリリースされて30年。いまでは世界中で、毎月1億8000万点以上のグラフィックがIllustratorを使って作成されています。

本企画「Illustrator30_30（イラストレーター サーティー サーティー）」は、Illustrator30周年（#Ai30th）を記念して、さまざまなジャンルでIllustratorをクリエイティブの味方として活用する、30代までの若手クリエイター30人を連載でご紹介します。本企画では、クリエイターのみなさんのポートレートを撮影し、その上に自由にイメージを描いていただくビジュアル・コラボレーション「Illustratorと私」も毎回お届けします。インタビューと合わせてお楽しみください。