Moleculeプロフィール: Taty Bernardo

Taty Bernardoの仕事は、簡単に言うと、このwebサイトが崩壊しないように支えることです。しかも、最小限の応急処置と、最大限の巧妙なコーディングを駆使して。皆さんがこうしてドリームズ・ユニバースに関するあらゆる種類の魅力的な、そして(自画自賛ですが)よくできた記事とガイドが読めるのは、その天才的な才能のおかげなのです。今回はそんな彼女に、ブラジルからイギリスへの移住、医学部に行きそうで行かなかったこと、そしてポップなwebページのデザインを考えることについて、話を聞いてみました。

よろしく、Taty! Media Moleculeではどんな仕事をしていますか?

森の中の魔女のようなTaty Bernardoの写真。

森の中の魔女のようなTaty Bernardoの写真。

Tatyといいます。webチームで働いています。シニアwebデザイナーとして入社したのですが、最近はwebデザイナーとweb開発者のハイブリッドみたいな感じです。以前は自分の中で開発者の比重が大きかったのですが、デザインに興味を持つようになり、今は両方を武器に、求められることを何でもこなすようになりました。デザインの打ち合わせや、Indreams.meのアニメーションやデザイン、このインタビューのような新しいブログ記事などに関する仕事は、私が担当しています。変ですよね。自分についてのページを公開する仕事をするなんて、すごくシュールです。

日常的な仕事はどんな感じですか? 毎日どういうことをしてるんですか?

日々、Media Moleculeのコミュニティチームや他のチームとコミュニケーションをとり、webで何ができるか、どんな新しいものを作ったり改善したりできるかを話し合っています。例えば、あるページや記事を見ている人が少ない場合、記事の見栄えをよくしたり、デザインを新しくしたりして、より多くの人に見てもらえるようにます。Ancient Dangers: A Bat’s Taleの時は、みんなこれがビッグプロジェクトだと分かっていたので、『Ancient Dangers』のページを他のページとは違うものにできないか、という話をしました。それで、アセットをたくさん集めてその中からより良いものを選び、楽しいデザインを考えていったんです。

サイトの中にアートの夢 Mm オリジナル のセクションを作った時は、『アートの夢』が音楽をテーマにしていることを活かして、音楽にまつわるデザインにしました。楽譜を使ったりするのはもちろん、ゲームの音声も取り入れています。

でも、デザインを考える仕事ばかりではありません。何かが動作しない時にはバグを修正するし、webコードを整理する作業もあります。あまりクリエイティブではない側面ですが、むしろこちらのほうが大事な仕事と言えます。

webページをデザインする上で、心がけていることはありますか?

Tatyがデザインしたイベントカレンダーの画像。

Tatyがデザインしたイベントカレンダーの画像。

常に心がけていることの一つは、そのブランドにとって何が最適かを重視するということです。Dreams Universe™はとてもクリエイティブでキラキラしていて、紫色が多用されているので、それに合わせてボタンやアイコンのデザインも紫を基調としました。ちょっとひねったデザインにしたい時に、ブランドそのものや、人々がそのブランドに求めるもの、期待するものを理解することはとても役に立ちますね。

Webデザイン界にたくさんある定石は、できるだけ守るようにしています。例えば、最近のwebサイトはフラットデザインやミニマルデザインが多いので、メニューやGIFが画面いっぱいに表示されるのは避けるとか。でも、一番大事なのは、ユーザーにとって使いやすいことです。ちゃんと文字が読めるか、あるいはスクリーンリーダーのようなツールでアクセスできるか、そういった点を考慮することがとても重要です。

視覚的な面白さがありつつも、アクセスのしやすさ・使いやすさを保ったサイトを作るために、あなた自身はどうやってバランスを取っていますか?

そうですね、いわゆる「業界標準」のような、多くのwebサイトで行われ、かつうまく機能していることはたくさんあります。でも、個人的には、まずは制約を気にせず、何ができるかをクリエイティブに考えてみるやり方が好きです。そうやって風呂敷を広げておいてから、モバイルや他のフォーマットで機能するかどうか、あるいは視覚障害者やその他の障害を持つ皆さんにとってどうなのか、上手くいかないならどうすればいいか、といったことを考えて形を整えていくんです。

やりたいと思ったクールなことがすべて実現できるとは限らないので、バランスは確かに難しいですが、確実にアクセス可能で簡単に操作できるものを作るほうが、それよりずっと大事です。

webサイト内の『アートの夢』のセクションには、Tatyが取り入れた楽譜のデザインが。

webサイト内の『アートの夢』のセクションには、Tatyが取り入れた楽譜のデザインが。

これまで手がけたwebデザインの中で、視覚的に最も印象的、または面白かったものはどれだと思いますか?

難しい質問ですね。Media Moleculeの採用に応募していた頃、Indreams.meや他の色々なwebサイトについて、かなりの数のアイデアを提案したことがあります。見た目はとてもクールだったと思いますが、あまり現実的なものではなかったので、実現は不可能か、かなり難しいんですよね。

Media Moleculeに入る前の仕事で、アドベントカレンダーみたいなwebサイトを作ったことがあります。毎日違うボタンをクリックすると、小さなキャラクターたちが踊ったり、様々に動いたりするんです。とても面白くて視覚的にもインパクトがありましたし、とてもインタラクティブだったので、心から楽しんで作れました。

最近リニューアルしたIndreams.meのwebサイトは、あなたが新しくデザインしたものです。新しいサイトで一番満足していることは何ですか?

新しくなったサイトでは、以前より効率的にコンテンツを探せるようになりました。サイトのコンテンツをどう分類して、それぞれのセクションにどんな名前をつけるかを何度も議論して、そこがとても難しかったのですが、最終的にはサイト全体をレゴのように分解することになりました。いったんバラバラにしてから組み立てて、より良いものを作ることにしたんです。

新バージョンでユーザーテストを実施できたのは本当にラッキーでした。デザインプロセスの中で、とても役立つことなので。旧サイトと新サイトの両方をユーザーに見てもらって、新バージョンのほうがより早く情報を見つけられるという事実が分かった時は嬉しかったです。以前は、いいコンテンツはたくさんあるのに、そこにたどり着くまでにメニューを5つも6つも通らなければいけなかったのが、今は最大でも2つのメニューを通るだけでいいんですよ。

Tatyがデザインを手がけた、新しいイベントカレンダー。

Tatyがデザインを手がけた、新しいイベントカレンダー。

webデザインの分野に足を踏み入れたきっかけと、Media Moleculeに入社した経緯について教えてください。

大学に行く年齢になったとき、家族は私に医師になってほしいと思っていました。でも正直言って生物学が大嫌いだったから、「やだー」と思って。それでゲームデザインの勉強をすることにして、ブラジルで学位を取ったのですが、ラッキーなことに在学中に当時FacebookでやっていたビンゴゲームのQAの仕事をもらえたんです。それからブラジルのデザイン事務所に入って、ゲームデザイナーを少しやりました。

その後イギリスに移住したのですが、当時はゲームデザイナーとして仕事を見つけるのは難しかったんです。それでもゲーム業界にはいたかったので、好きでやりたいと思えるもう一つのことだった、Webサイトのデザインを仕事にしました。イギリスに渡ってからは、webサイトのQAアナリストとしてスタートし、webデベロッパーを経て、今はデザイナーです。ゲーム業界に入って13年になりますが、やってきた仕事は様々なので、ずっと新鮮な気持ちで働けています。

Indreams.meはwebサイトですが、ゲームと連動している部分があります。webサイトとゲームの両方で確実に動作するコードが必要ですが、これまでの仕事と比べて複雑だと感じますか?

Tatyがデザインした、サイト内の『Ancient Dangers: A Bat's Tale』のセクション。

Tatyがデザインした、サイト内の『Ancient Dangers: A Bat's Tale』のセクション。

前職では、マーケティング用のwebサイトをよく作っていました。ゲームを宣伝して買ってもらう目的のサイトですから、主にトレーラーやスクリーンショット、素材などを見せるだけでした。Indreams.meでは、Dreams Universe™を体験してもらうことに重点を置いているので、サーバーチームとコミュニケーションを取りながら、新しい機能を確実に取り込んでいくようにしています。でないと、例えばゲームのスコアボードをWebサイトで動作させたい時に、どうやって移植して、ゲームとサイトの両方で実行させればいいか分かりませんよね。それと、Dreams Universe™はマウスとキーボードではなく、コントローラーで操作するゲームなので、入力方式の変換も問題になります。ゲームをコントローラーで操作するのと、webサイトをマウスとキーボードで操作するのでは、全然違いますよね。どちらもそれぞれの環境では機能しますが、ゲームの操作をwebにそのまま適用しても、きっと意味がないし、機能しないでしょう。

だから、UIをゲームからwebに変換する時に難しいのは、一貫性を保つことだと思っています。同じ環境を提供しながら、ゲームとは異なるインタラクションを実現しないといけないので。Indreams.meを作る上での大きな課題はそれだと思います。

では、実際どのようにサイトをデザインしているんですか? また、ゲームのどの部分をサイトに反映するかはどうやって決めているのですか? 例えば、ゲーム内のアイコンやドリームサーフィンの操作は同じですが、その他のデザインは異なりますよね。

そうですね、場合によっては、ゲームからそのまま持ってくることもあります。例えばスコアボードがそうです。スコアボードはゲーム内とweb上の両方で同じように見えないと、混乱してしまいますから。最終的な目標は、Webサイト上でもDreams Universe™と同じ感覚で操作できるようにすることです。当然、いつもそうできるわけではありませんが、できる限りそれに近づけようとしています。

例えば、webの検索結果の絞り込みは現状ではゲーム内と同じように動作しないので、まだまだ手を加える余地があると思っています。一方で、ホームページはドリームズ・ユニバースの操作方法を再現していて、見た目も感覚も同じまま、コントローラーの代わりにマウスとキーボードでプレイリストをスクロールできます。作り手としては、かなり満足している部分です。

Tatyがデザインしたイベントリストの画像。

Tatyがデザインしたイベントリストの画像。

副次的な位置づけのサイトなので、サイト内の要素はゲームの文脈の中で意味を持つものにすることが重要です。ゲームのデザインやスタイルも参考にできるので、そこはいいところですね。ただ、常にそうできるとは限りません。例えば、光のエフェクトなんかはとても素敵ですが、webではうまく機能しないことがあります。そんなふうにwebならではの壁にぶつかった時は、「まったく同じではなくても、似たような表現をするにはどうしたらいいだろう」と考えます。Indreams.meをゲームに合わせることで、その2つが連動していると感じられるように知恵を絞っているんです。

サイトにはリソースやガイドなどの文書を保管して提供する役割もありますが、こうした部分はゲームとの連携が少ないので、もう少し自由にデザインできます。文書については、ブランドに適したスタイルを使う必要がありますが、実際のゲーム体験そのものに近付けることはそれほど重要ではありませんから。

Media Moleculeのスタッフは、みんなデスクに面白いものを置いていますね。今、デスクには何を置いていますか?

そりゃもう、いろいろ置いてありますよ。まず、このPop Martのフィギュア。デスクには少なくとも3つあるし、後ろにも5、6個飾ってます。それに、ひまわり頭の赤ちゃんの人形とか、いちごを食べてるかわいい羊とか。すごくキュートでしょ! あとは… このチョコボのカレンダーは、ブロックを回転させて日付を変えて一年中使えるんです。今は日付があってないけど、そこは気にしないで。

この冬は日本へ旅行に行って、生活必需品ではないものをたくさん買い込みました。セーラームーンの和紙テープホルダーとかね。誰しも人生には無駄なものが必要ですから。日本では他にも、カビゴンがドーナツを食べているコースターや、テープカッターになってる猫も買いました。ものはまだまだ増やすつもりです… デスクはとても広いですから。

日本に行ったんですね!? 滞在中、何が一番良かったですか?

スタジオジブリのテーマパークに行ったことですね。よくあるテーマパークとは違っていて、とても気に入りました。乗り物もそれほどなく、アトラクションに長い行列ができるわけでもなく、ただ、ジブリ映画のあらゆるものが再現されていて、まるでロケ地を探検してるみたいでした。それから、運よくスーパー・ニンテンドー・ワールドにも行けて、これまた素晴らしい体験ができました。でも、そっちはいわゆる従来型のテーマパークで、何時間も行列に並ばなければいけないのはあまり楽しくなかったですね。

最後に、Dreams Universe™ゲームのお気に入りやオススメしたいものがあれば教えてください。

どこまでも並ぶたくさんのぬいぐるみ。Tatyの夢の光景!?

どこまでも並ぶたくさんのぬいぐるみ。Tatyの夢の光景!?

うーん、難しい質問ですね。Dreams Universe™をプレイする時間はそれほど多くなくて、新しいコンテンツがどんどん出てくるので、ちょっとついて行けてないぐらいなんです。でも、すごく衝撃を受けた作品が一つあって、これはDreams Universe™がリリースされた時にJen(Jen Simpkins)がTwitterで紹介しているのを見て、「私の人生に必要なものはこれだ」と思ったのを覚えています。Yah_DehllCaptain_MorganElca_Gamingによる、Deh Plushiesという作品です。

動物×食べ物のかわいいぬいぐるみがたくさん! 私たちの一推しは、猫のワッフルとカメのメロンパン。

動物×食べ物のかわいいぬいぐるみがたくさん! 私たちの一推しは、猫のワッフルとカメのメロンパン。

これを読んでいる皆さんにお見せできないのが残念ですが、オフィスの私の後ろには、ぬいぐるみがたくさんあります。本当にたくさんです。病的かもってくらい。だから、ぬいぐるみとDreams Universe™の組み合わせは、個人的にとても魅力的でした。自分にぴったりで、共感できたんです。私はよく自分のお店を持つことを空想してて… いえ、自分のぬいぐるみは絶対に売りませんが、仮にお店を持てるとしたら、この作品みたいな店にしたいです。スタイルとレイアウトがとても素敵だし、ぬいぐるみもユニークでリアルに作られていますよね。

このお店がもし現実にあったら我が家の貯金がピンチになりそうなので、なくて良かったと本気で思っています。

このお店がもし現実にあったら我が家の貯金がピンチになりそうなので、なくて良かったと本気で思っています。

それに、登場する食べ物や生き物がとてもクリエイティブだと思います。猫もいれば、ドラゴンもいて。お餅も登場したような気がします。お寿司猫はお気に入りの一つで、もう大好き! 猫バーガーも最高だし、スパゲッティのパグも素晴らしい。好きになるしかないですよね? 突き詰めると、一生ぬいぐるみ屋に住みたいという私の夢を叶えてくれる作品だから、こんなに心を奪われたんでしょうね。

Dreams Universe™のユーザーガイドはただいま作成中。これからプレイのヒントに関するコンテンツを増やしていく予定なのでチェックをお忘れなく!