「精霊の花祭り」はライアットゲームズ初の複数のタイトルにまたがるイベントであり、リーグ・オブ・レジェンド(LoL)レジェンド・オブ・ルーンテラ(LoR)の両方で精霊の花祭りの世界を楽しむことができます。その制作の過程について話す前に、精霊の花祭りとは何なのかについてお話ししておきましょう。

精霊の花祭りは、物語(リーグ・オブ・レジェンドの正史)の中に登場する行事であり、アイオニアの「精霊の花」と呼ばれる(物語上の)実際の花が咲く時期に行われます。アイオニアの人々はこの花の霊的な特性を使って、かつて自分が愛した故人たちと触れ合って、死後の世界で安らかに過ごしていることを祝ったり、あるいは未だ成仏できていないことを悼みます。

Spirit Blossom

しかし、リーグ・オブ・レジェンドとレジェンド・オブ・ルーンテラはゲーム内容がまったく異なり、一方はMOBAで、もう一方はカードゲームです。アートの方向性もプレイヤー層もまったく異なるこれらのタイトルで、統一感のある体験を楽しんでもらうにはどうすればいいのでしょうか?

ビジュアルデザインについて

ライアットのビジュアルデザインは2つの主要な分野に分かれており、プロダクトに携わるデザイナーたちはゲーム内のアイコンやボード、ユーザーインターフェースなどの個々のアセットを作成し、アセットのブランドとパブリッシングに携わるデザイナーたち(リンク先英語)は、ゲーム内で手に入れられるものをプレイヤーが明確に理解できるようにします。

この2つの分野のビジュアルデザイナーたちが協力して、どのように2つの異なるタイトルに統一感のあるデザインランゲージとスタイルを実現したのかについて聞いていきます。

まずは、「精霊の花祭りのビジュアルブランドを見つける」ことについてです。

精霊の花祭りのビジュアルアイデンティティを作り出す

リーグ・オブ・レジェンド ビジュアルデザイナー、Craig “Riot MrParkinson” Parkinson

Key art

最初はテーマを開発するチームに尋ねることから始めました。彼らはLoLのマルチバースの作成を担当するアーティスト、ライター、プロデューサーたちの集団であり、精霊の花祭りはまさに「LoLのマルチバース」でした。テーマについて彼らに話を聞くと、風変わり、霊的、優雅、平和的、抽象的、魅力的といったキーワードが繰り返し登場していたので、これらの言葉をドキュメントにまとめて…それを起点としました。

精霊の花祭りは、死後の世界とそこに住む精霊に焦点を当てています。彼らは本質的に霊界に結びついており、おおむね平和の中で暮らしています。言うなれば、私はそれを北極星として利用しました。なぜなら、ビジュアルのリファレンスを引き出し、それらの印象を想起させるムードボードを作成する必要があったからです。

それから、精査する必要がある主要なエリアにリファレンスを分割して、シェイプランゲージ、色、テクスチャに注目しました。これは精霊の花祭りのブランドの方向性を決めるために役立ちました。しかし、これらのパーツ──主にアニメのインスピレーション、東アジアの神話、そしてLoL──を組み合わせて、統一感を感じさせるにはどうすればいのかを考える必要もありました。

シェイプランゲージ

イベントの優雅さを独特なシェイプランゲージで表現しようと考えました。それは抽象的で柔らかな印象でありながら、新鮮で見覚えのないものでなければいけません。これをガイドとして、私は求められる形のタイプの模索を始めました。

すると、すぐに幾何学図形が思い浮かびました。これらの優雅な形を使って、精霊の花祭りに登場する様々な物を示すシンボルを作り出しました。幾何学図形の意図はそれを見るもの次第となるので、全体的なテーマにも合っていました。つまり、それは様々な物の意味を表せると同時に、何の意味も成さないこともあります。

exploration

私は東アジアの花柄や渦巻、雲といったアートのリファレンスイメージを使用しました。それがUIにどのように当てはまるかを考えながら試行錯誤しているうちに、何かが欠けていると感じました──テーマ開発のチームが作成している作品とのより深いつながりが欠けていたのです。だったら、スキンのコンセプトアートをデザイン自体の中に使用するのはどうでしょう?

Yasuo concept

プレイヤーがゲーム内で見て、操作するものとしっかりと結び付けたかったので、私はそれを枠組みのようなものとして追加しました。私はヤスオの服に描かれた民族的な模様を参考にして幾何学図形を模索することにしました。これをもとにして、この特徴的な民族的な模様と形でブランドをサポートする方法について考えました。そこで次のパートである「色とテクスチャ」に移ります。

色とテクスチャ

テーマを開発するチームは、イベント用に水彩画をもとにした美しいカラーパレットを作成していました。これらはすべて、とても風変わりで夢のように感じられるものになっています。リファレンスとして用意した水彩画を見ていると、そこには独特な質感が存在することに気付きました。紙の上に落ちたインクからですら、独特な質感が感じられたのです。

colors

私はビジュアルデザインをスキンと結び付けようと考えました。これを行うことで、すべてが互いに結びついていると感じられるからです。しかし、すべてが単一色だと感じられてしまうことを避けるには、独特な質感が必要でした。木の幹や筆のタッチ、さらには葉脈などもインスピレーションとして利用してみたところ、そこからイベントのビジュアルデザインの小さな試作品のようなものが見つかりました。

初期にこれらを発見できたことと、開発チームから熱烈な「イエス」がもらえたことで、私は「クレイジー」モードのような状態に入りました。それからおよそ90個くらいロゴをデザインしたと思います。本当にクレイジーでした。そしてプレゼンを繰り返して、さらなるフィードバックを得て、現在使われているものに絞り込みました。

final logo

すべてが確定した時、ガイドを作成し、開発チームのイベントの作業を行っている残りのメンバーに渡しました。LoRの開発チームは、それをもとにして作業を開始したのです。

LoRに花を

レジェンド・オブ・ルーンテラ シニアビジュアルデザイナー、Tom “Riot Tomukus” Sayer

LoR Key Art

私はレジェンド・オブ・ルーンテラのアセットのデザインと実装を担当しています。具体的には、ユーザーエクスペリエンスデザイナー、コンセプトアーティスト、ライターたち──基本的にはLoRの開発チームの全メンバーと協力して、プレイヤーが見て、操作して楽しいものを作り出しています。

UXデザイナーからワイヤーフレームを手にしたときに作業は始まります。ワイヤーフレームというのは基本的には灰色、黒、白のボックスの集まりで、私たちが作成する必要があるパーツがどこに当てはまるのかを把握するためのものです。私の仕事はこれらを並べ替えて、個々の要素の優先順位を決めることであり、背景になるものと前景になるものを決定します。これはプレイヤーにとってもっとも重要な情報をもとに決定します。

「精霊の花祭り」のクライアントスペースのデザインを行った際に、プレイヤーがリワードを獲得していく進行状況を見ることができるように、トラッカーを追加することを決めました。これはプレイヤーが地域を選択して、その中でリワード獲得を目指すことができるLoRの地域リワードと同じように機能します。精霊の花祭りのトラッカーのビジュアルがLoLのスタイルと統一感が感じられ、地域の報酬とは異なって見えるようにするために、ビジュアルデザインではこの情報のすべてが必要でした。

そこで、Riot MrParkinsonが準備してくれたアセットとビジュアルデザインのガイドラインを利用して、それらをLoRで利用可能な形式に変換しました。LoLとLoRは同じIP(と同じ会社)に属しますが、それぞれが独特なアートとビジュアルデザインのスタイルを持っています。LoLのクライアントは、一部には立体的で派手な部分もあるもののモダンでフラットなUIであり、LoRの実在する物に似せたスキュアモーフィックなアプローチのUIとは異なります。

スキュアモーフィックなデザインというのはリアルに感じます。実際のスマートフォンを思い返せば、さまざまなアプリのデザインはかなりリアリスティックでした。メモ帳には実際に紙のテクスチャが使われていて、ペンや鉛筆でメモを取っているようなフォントが使われています。これは人々がタッチ画面でメモを取る方法に不慣れだったからです。私たちはLoRで同じアプローチを用いて、プレイヤーがルーンテラの世界観に没入できるようにしました。操作できるものは、すべて実在する物のように感じさせるべきだと考えたからです。そこで、精霊の花祭りのビジュアルデザインに関しては、LoRに合うように少しひねりを加えようと考えました。これはUIのあらゆる部分に現れていますが、もっとも分かりやすい例は「雲」です。

logo transformation

Riot MrParkinsonからビジュアルガイドラインを受け取ったとき、インスピレーションの要素として雲が含まれていることに気付きました。それは東アジア風のスタイルであり、同じように様式化されたLoRにも上手くはまりました。たくさんの渦や全体的にソフトな見た目が共通していたのです。しかし、これらをクライアントで機能させるには、テクスチャを追加して、雲をもっとメタリックに見せる必要がありました。なぜなら、それが私たちが利用するスタイルだったからです。

雲のデザインを始めたときはリファレンスを利用しました──Adobe Illustratorを開いてRiot MrParkinsonから渡されたビジュアルリファレンスをアートボードに貼りつけてデザインを描いていたのです。しかし、メタリックでゴツゴツした感じにしたいと思ったので、トレースはせずに自分で描きました。

そして個人的にIllustratorでドローイングを始めました。これならクリーンなベクターが得られるからです。そうすれば、線を太くしたり、細くすることが可能になります。その後、Photoshopにシェイプとしてインポートしました。

ベクターをPhotoshopに取り込んだら、ベベルとエンボスのようなレイヤースタイルを使い、グラデーションオーバーレイとストロークを追加し、インナー/アウタードロップシャドウとグロウを作成しました。狙い通りのものができたら、これらのレイヤースタイルを雲のベクターの上に重ねました。

clouds

最後にレイヤースタイルにドロップシャドウを追加しました。なぜなら、雲を前景に配置して、背景の上に浮いているように感じさせたかったからです。

そして、表現を追加します。

少し光のフレアを加えて、一部に影も入れました。そして、クライアントの上に金属の平たい板があるように見えなくするため、暗いラインを追加してプレイヤーに向かって傾いて見えるようにもしました。

満足のいくものができたので、それをチームに渡しました。それからイベントの他のすべてのアセットでも同じことを行ったんです。全部で約40個ありました。すべてのアセットが手描きのように感じられることが重要だったのです──なぜなら、実際に手描きなので!

Client

LoLとLoRの両方をプレイしたプレイヤーが、私たちが作成したものを見て、すぐに同じイベントだと認識できるように願っています。そうなれば、私たちの努力は実を結び、両方のゲームをプレイするプレイヤーに一体感のある素晴らしい体験を提供できたことになりますからね。