ヘクステックの視覚言語(ヴィジュアルランゲージ)

Riot Gaussrikによる

はじめに

今後に向けたリーグ・オブ・レジェンドの新たなビジュアル

新しいリーグクライアントのビジュアルの開発を始めた時、ファンタジーゲームのように感じられるビジュアルスタイルが欲しいとは思ったものの、よくあるファンタジーゲームにありがちなUIデザインは避けたいと考えました。過去のクライアントのいたるところで使われていた羊皮紙風のビジュアルはすぐに古さを感じるようになってしまったので、将来追加される複数の機能やメディアに合わせて拡張可能な、「自由度の高い視覚言語」を構築したいと考えました。

さらに、レイアウト作成において特定のビジュアルアーティストが専業で携わる必要のないビジュアルスタイルを確立したいとも考えました。LoLが拡大を重ねていくペースを考えたとき、リソース確保がボトルネックとなって貴重な新機能のリリースに時間がかかってしまい、いざリリースされたときには新鮮味がなくなってしまっているという、過去にあった問題を避けたかったのです。

概要

ヘクステックによる具現化

私たちがビジュアルについて考えていた時、同時にファウンデーション(世界観構築)チームはピルトーヴァーの再構築作業を行っていました。彼らは大まかな方向性やコンセプトアートを作り始めたところで、その中に彼らが「ヘクステック」と呼ぶテクノロジーがありました。テーマ的には、ヘクステックは「魔法の民主化」といえるもので、生まれながらにして魔力を持たない者が魔法を使えるようにするためにあります。ジェイスのハンマーやハイマーのガジェット、ヴァイのグローブがゲーム内におけるヘクステックの実用例です。

この魔法の力で動く機械というコンセプトに魅了され、私たちは考えました——「クライアント自体がヘクステックツールであり、プレイヤーがそれを通してゲームの魔法の世界に触れられるとしたらどうだろう?」私たちはこのアイデアをもとにユーザーインターフェースを構築することにして、そこで使われる視覚言語の基礎となる形や色の開発を始めました。


要素

ヘクステックメタルの言語

拡張可能なビジュアル機能にするために、主要な核となる要素を最初に絞り込んで、そこから構築を始めようと考えました。ヘクステックやピルトーヴァーのコンセプトアートを通してファウンデーションチームと共同で作業を続けながら、私たちはテクノロジーで使われる視覚言語を3つの核となる形に絞り込みました。

ヘクステックの核となる形:

四角形

構造

各要素の安定性の確立とグリッドの強化に

ひし形

進行

大事な情報に目を向けさせるガイドとして

円形

フォーカス

操作が必要となる主要項目にプレイヤーの意識を向けるために



すべてを組み合わせると

ヘクステック視覚言語でこれらの形を挿入して組み合わせると、注目が必要な「鍵となるエリア」に装飾的なフレームができあがります。リーグクライアントやその他のさまざまな場所におけるヘクステックメタルの使われ方を見れば、それぞれの形が組み合わさって重要な場所に目を向けさせていることがわかるでしょう。





ヘクステックマジックの言語

クライアントの複数の画面を利用する際に、ヘクステックマジックが賢いパートナーとして機能し、「大事なポイント」に意識が向かうよう導いてくれます。主要なボタンや重要なゲームプレイUIには特徴的な魔法のエレメントが使われていて、操作が必要な場所にプレイヤーの注意を向けさせます。このエレメントはタイマーやアクティビティーインジケーター、プログレスバーなどのさまざまな場所で使われていますが、すべてはいくつかの核となる要素にもとづいています。



核となる要素:

粘性

ヘクステックの魔法はその場に残る重みがあり、水と煙の間のような存在です。

方向性

魔法の持つ知性が人々を導くために使われ、常に特定の方向に動いています。

色値

もっとも明るい色調は、プレイヤーの注意を引き付けるべき重要な場所で使われます。

クライアント

全体像

クライアント内における実際のフロー

ヘクステックのデザイン言語の核となる部分が確立されたので、これをアップデート・リーグ・クライアント内でどのように使っていくかを考えることになります。ここから先を読み進めていくと、これらのデザインの一つ一つが、特定の問題に対処するために重要な役割を果たしていることに気づくでしょう。



インターフェースレイヤー

主要な機能か補助的な情報かにかかわらず、クライアントの一番手前のレイヤーにはメタルラインワークが使用されていて、鍵となる情報にフォーカスを向けるためのフレームとして機能しています。



インタラクティブレイヤー

クライアントのインターフェースレイヤーに付随して、プレイヤーがクライアントの操作を行うための鍵となるメソッドが存在します。ユーザーインターフェースのこれらのレイヤーはゲームプレイ、セカンダリー、ユーティリティという3つの核となるエリアにまとめられています。


  • ゲームプレイボタン


    クライアントのところどころで、青い「ヘクステックマジック」ボタンが使われています。これはプレイヤーがゲーム自体に関連したアクションを行うために用意されています。



  • セカンダリーボタン

    クライアント内の金色のボタンは、二次情報に関わる操作を行います。放射状メニューの操作、モーダルウィンドウを閉じる操作、アイテムの購入は、すべて同じ種類のビジュアルスタイルが使われています。



  • ユーティリティインターフェース

    ユーティリティ関連のボタンとインターフェースアイテムは、プレイヤーに情報を提供したり、情報を絞り込むために使用されます。ソートやフィルター、ツールチップは、すべてこのインターフェースのレイヤーにまとめられます。




リーグ・オブ・レジェンドのビジュアルのこれから

アップデート・リーグ・クライアントのいたるところでこのビジュアルスタイルが使用されていますが、リーグ・オブ・レジェンドのビジュアルはここでとどまることはありません。すでに複数のメディアを通じて、ヘクステックが別の世界へと広がり始めています。いくつかその例をご紹介します。



ご覧いただきありがとうございました。


2 months ago

タグ付け: 
Dev Blog