パッケージ
ELDEN RING NIGHTREIGN公式サイトへ
レビューを書く
準備中
お気に入りタイトル/ワード

タイトル/ワード名

最近記事を読んだタイトル/ワード

タイトル/ワード名

LINEで4Gamerアカウントを登録
「ELDEN RING」の世界はいかに構築されたか。フロム・ソフトウェアが明かす,背景レイアウトの品質と印象を強化する手法[CEDEC 2025]
特集記事一覧
注目のレビュー
注目のムービー

メディアパートナー

印刷2025/07/24 06:00

イベント

「ELDEN RING」の世界はいかに構築されたか。フロム・ソフトウェアが明かす,背景レイアウトの品質と印象を強化する手法[CEDEC 2025]

 国内最大級のゲーム開発者会議「CEDEC 2025」で2025年7月23日,「背景レイアウトから読み解く,『ELDEN RING』の世界」と題されたセッションが開催された。

画像ギャラリー No.001のサムネイル画像 / 「ELDEN RING」の世界はいかに構築されたか。フロム・ソフトウェアが明かす,背景レイアウトの品質と印象を強化する手法[CEDEC 2025]

 このセッションでは,フロム・ソフトウェア 3Dグラフィックセクション 3Dグラフィックアーティストの佐藤秀憲氏片平怜士氏が,「ELDEN RING SHADOW OF THE ERDTREE」と「ELDEN RING NIGHTREIGN」の背景グラフィックス制作において活用した,印象を強化する背景レイアウトの手法と,その活用事例の紹介が行われた。
 本稿では,セッション前半に紹介された背景レイアウト手法についてレポートする。なお活用事例が語られた後半部分は,後日別記事として掲載の予定だ。

※CEDEC運営事務局からの要請により,本稿は講演の一部内容を省略したダイジェスト版として掲載している。

左から片平怜士氏,佐藤秀憲氏
画像ギャラリー No.002のサムネイル画像 / 「ELDEN RING」の世界はいかに構築されたか。フロム・ソフトウェアが明かす,背景レイアウトの品質と印象を強化する手法[CEDEC 2025]

「ELDEN RING NIGHTREIGN」公式サイト



背景レイアウトの品質を高める手法


 背景レイアウトとは,画面内に複数の要素を配置し,それらを組み合わせて絵を構築することを指す。要素は樹木やテントのような物体に限らず,色や光なども含むとのこと。例えば以下のスライドに示された画像だと,影の形やフォグのグラデーションが光に該当する。

画像ギャラリー No.003のサムネイル画像 / 「ELDEN RING」の世界はいかに構築されたか。フロム・ソフトウェアが明かす,背景レイアウトの品質と印象を強化する手法[CEDEC 2025]
画像ギャラリー No.004のサムネイル画像 / 「ELDEN RING」の世界はいかに構築されたか。フロム・ソフトウェアが明かす,背景レイアウトの品質と印象を強化する手法[CEDEC 2025]

「SHADOW OF THE ERDTREE」と「NIGHTREIGN」の印象的な背景グラフィックスが紹介された
画像ギャラリー No.005のサムネイル画像 / 「ELDEN RING」の世界はいかに構築されたか。フロム・ソフトウェアが明かす,背景レイアウトの品質と印象を強化する手法[CEDEC 2025]
画像ギャラリー No.006のサムネイル画像 / 「ELDEN RING」の世界はいかに構築されたか。フロム・ソフトウェアが明かす,背景レイアウトの品質と印象を強化する手法[CEDEC 2025]

 レイアウトの品質を高めるために,フロム・ソフトウェアの3Dグラフィックセクションが重要だと考えているのは,「単調な部分をなくす」「視線誘導のバランスを取る」の2点だ。逆に言うと,悪いレイアウトには単調な部分が多く,視線誘導が不安定ということになる。会場では,同じシチュエーションを使った悪い背景レイアウトの例と良いレイアウトの例も示された。

このセッションのために用意した悪いレイアウトの例
画像ギャラリー No.007のサムネイル画像 / 「ELDEN RING」の世界はいかに構築されたか。フロム・ソフトウェアが明かす,背景レイアウトの品質と印象を強化する手法[CEDEC 2025]

「SHADOW OF THE ERDTREE」に採用された良いレイアウトの例
画像ギャラリー No.008のサムネイル画像 / 「ELDEN RING」の世界はいかに構築されたか。フロム・ソフトウェアが明かす,背景レイアウトの品質と印象を強化する手法[CEDEC 2025]

 佐藤氏は,映画や写真などと同じく,シチュエーションが同じであってもレイアウトによって画面の品質に大きな差が生まれると考えているという。品質を高める方法はシンプルで,レイアウトを分析し,単調な部分と視線誘導のバランスが悪い部分を探し出し,修正していくだけだ。なお分析に当たっては,カメラをあまり動かさず,静止画として捉えるとチェックする範囲が限定され,問題を発見しやすくなるとのこと。

画像ギャラリー No.009のサムネイル画像 / 「ELDEN RING」の世界はいかに構築されたか。フロム・ソフトウェアが明かす,背景レイアウトの品質と印象を強化する手法[CEDEC 2025]
画像ギャラリー No.010のサムネイル画像 / 「ELDEN RING」の世界はいかに構築されたか。フロム・ソフトウェアが明かす,背景レイアウトの品質と印象を強化する手法[CEDEC 2025]

 悪いレイアウトが単調に感じる原因は,まず「同じ形の繰り返し」である。スケールが違ったり,ミラーリングされていたりと多少の変化は付けられているが,そっくりな図形がたくさん並んでいる印象は拭えない。また「曲線のみで構成されている」ことにより,やはり同じ種類の要素だけが配置されているように感じてしまう。

画像ギャラリー No.011のサムネイル画像 / 「ELDEN RING」の世界はいかに構築されたか。フロム・ソフトウェアが明かす,背景レイアウトの品質と印象を強化する手法[CEDEC 2025]
画像ギャラリー No.012のサムネイル画像 / 「ELDEN RING」の世界はいかに構築されたか。フロム・ソフトウェアが明かす,背景レイアウトの品質と印象を強化する手法[CEDEC 2025]

 さらに目的地までの道のりが直線なために,視線の動きが単調になっている,「動線が単純」な点も指摘された。

画像ギャラリー No.013のサムネイル画像 / 「ELDEN RING」の世界はいかに構築されたか。フロム・ソフトウェアが明かす,背景レイアウトの品質と印象を強化する手法[CEDEC 2025]

 同じビジュアルが2回繰り返されることで単調に見える,「左右対称の配置、形状」の問題もある。ただし左右対称には強い印象を残すメリットもあるので,単調さをほかの要素でカバーできれば採用されることもある。また,建造物など人工的なシチュエーションでは,左右対称のレイアウトが必須になることも示された。

画像ギャラリー No.014のサムネイル画像 / 「ELDEN RING」の世界はいかに構築されたか。フロム・ソフトウェアが明かす,背景レイアウトの品質と印象を強化する手法[CEDEC 2025]

 「明度、色相の変化が少ない」という指摘では,画面のほとんどの部分で色の変化が小さいと単調に感じられることが示された。画像にモザイク処理をすると色の変化が,モノクロ処理をすると明度の変化がそれぞれ分かりやすくなるそうだ。

画像ギャラリー No.015のサムネイル画像 / 「ELDEN RING」の世界はいかに構築されたか。フロム・ソフトウェアが明かす,背景レイアウトの品質と印象を強化する手法[CEDEC 2025]

 視線誘導のバランスでは,まず「左側に要素の偏りがある」という点が挙げられた。以下のスライドの赤い枠で囲われている領域は,左側に要素が多くなっているため,視線が左側に誘導されやすい状態となっている。
 視線は目的地に誘導されるべきなので,この状態は望ましくない。また「目的地が周囲に馴染んでいる」ために目立たず,視線が誘導されにくくなっている点も指摘された。

画像ギャラリー No.016のサムネイル画像 / 「ELDEN RING」の世界はいかに構築されたか。フロム・ソフトウェアが明かす,背景レイアウトの品質と印象を強化する手法[CEDEC 2025]
画像ギャラリー No.017のサムネイル画像 / 「ELDEN RING」の世界はいかに構築されたか。フロム・ソフトウェアが明かす,背景レイアウトの品質と印象を強化する手法[CEDEC 2025]

 では良いレイアウトはというと,同じ形の繰り返しは完全に排除しているわけではないが,数は少なくなっている。見る人に違う形だと認識させるために,パーツの向きを少し変えたり,スケールや高さを不規則にするといった工夫がうかがえる。またパーツの向きを目的地側に揃えることで,視線誘導を安定させていることも紹介された。

画像ギャラリー No.018のサムネイル画像 / 「ELDEN RING」の世界はいかに構築されたか。フロム・ソフトウェアが明かす,背景レイアウトの品質と印象を強化する手法[CEDEC 2025]

 多くの要素が曲線で構成されている点は悪いレイアウトと変わらないが,奥に直線的なライトシャフトを配置することにより,異なる性質の要素を加えて単調さが軽減されている。これには,目的地の近くに目立つものを配置することで,視線誘導を強める狙いもあるとのこと。

画像ギャラリー No.019のサムネイル画像 / 「ELDEN RING」の世界はいかに構築されたか。フロム・ソフトウェアが明かす,背景レイアウトの品質と印象を強化する手法[CEDEC 2025]

 目的地までの動線は,曲線になったため単調さは感じられない。このようにS字で動線を作る方法は,作中でも多用されているという。またパーツの配置や形状が左右対称ではないことも,やはり単調さを和らげている。

画像ギャラリー No.020のサムネイル画像 / 「ELDEN RING」の世界はいかに構築されたか。フロム・ソフトウェアが明かす,背景レイアウトの品質と印象を強化する手法[CEDEC 2025]
画像ギャラリー No.021のサムネイル画像 / 「ELDEN RING」の世界はいかに構築されたか。フロム・ソフトウェアが明かす,背景レイアウトの品質と印象を強化する手法[CEDEC 2025]

 色相の変化は,悪いレイアウトと変わらず少ないままだが,コントラストが高く,明度の幅は広くなっている。

画像ギャラリー No.022のサムネイル画像 / 「ELDEN RING」の世界はいかに構築されたか。フロム・ソフトウェアが明かす,背景レイアウトの品質と印象を強化する手法[CEDEC 2025]
画像ギャラリー No.023のサムネイル画像 / 「ELDEN RING」の世界はいかに構築されたか。フロム・ソフトウェアが明かす,背景レイアウトの品質と印象を強化する手法[CEDEC 2025]

 左右にバランスよく要素を配置し,かつ左右対称にならないよう,奥行きに対して交互に偏りを発生させている。また目的地のパーツにライトを当てて明度を上げ,周囲から浮いた感じにしつつ,視線誘導を強化している。

画像ギャラリー No.024のサムネイル画像 / 「ELDEN RING」の世界はいかに構築されたか。フロム・ソフトウェアが明かす,背景レイアウトの品質と印象を強化する手法[CEDEC 2025]
画像ギャラリー No.025のサムネイル画像 / 「ELDEN RING」の世界はいかに構築されたか。フロム・ソフトウェアが明かす,背景レイアウトの品質と印象を強化する手法[CEDEC 2025]


背景レイアウトの印象を強める手法


 背景レイアウトは,画面の品質を高めるほかにも印象を強める効果がある。いくら品質が高くても,同じような内容が続けば見る人が飽きてしまうことだろう。そこでそれぞれのエリアを異なる印象にして,飽きられにくくするわけだ。

画像ギャラリー No.026のサムネイル画像 / 「ELDEN RING」の世界はいかに構築されたか。フロム・ソフトウェアが明かす,背景レイアウトの品質と印象を強化する手法[CEDEC 2025]

 レイアウトの印象を強めるにあたっての留意点が2つあり,1つは「世界観に合わせた変化をつける」ことだ。
 あまりにも大きすぎる変化は,世界観に合わないという理由で採用されないことが多いという。もう1つは「ゲーム全体で印象変化の設計をする」ことで,ゲームデザインと連動して画面の印象が変化していくと,多くの人にとって受け入れやすいものとなるそうだ。

 ではどうやってレイアウトの印象を強めるのかというと,「違和感になる要素を入れる」手法が挙げられた。違和感になる要素とは,「周囲と異なる方向性のデザイン,性質を持つもの」であり,これには「物体」「色や光」「要素の向き(ベクトル)」「質感」などがある。フロム・ソフトウェアの3Dグラフィックスセクションでは,こうした要素は「ランドマーク」「画面の大きな面積」に入れることが多い。

 ランドマークは「視線を誘導したい要素」を指し,レイアウトの主役になることが多い。そのため周囲の環境とまったく異なるデザインにして違和感を出すことで,画面の印象を強めている。また視線を誘導する対象なため,違和感のある見た目にしても問題が発生しにくいそうだ。

画像ギャラリー No.027のサムネイル画像 / 「ELDEN RING」の世界はいかに構築されたか。フロム・ソフトウェアが明かす,背景レイアウトの品質と印象を強化する手法[CEDEC 2025]

 画面の大きな面積に違和感を入れる例としては,以下のスライドのように同じ向きの大量の直線で構成された画像が示された。ただ,一歩間違えると単調なレイアウトになってしまうので,この画像では向きの異なる直線を重ねて単調さが軽減されている。

画像ギャラリー No.028のサムネイル画像 / 「ELDEN RING」の世界はいかに構築されたか。フロム・ソフトウェアが明かす,背景レイアウトの品質と印象を強化する手法[CEDEC 2025]

 遠景の空に違和感を入れるために,近景とは異なる色でライティングした画面の例も示された。近景と遠景を同じライティングにすると,右の画像のように自然な白い雲になってしまうとという。

画像ギャラリー No.029のサムネイル画像 / 「ELDEN RING」の世界はいかに構築されたか。フロム・ソフトウェアが明かす,背景レイアウトの品質と印象を強化する手法[CEDEC 2025]


制限について


 背景レイアウトは,品質や印象のみを優先して好き勝手にできるわけではなく,「作業コストの制限」および「ゲーム要件による制限」を守る必要がある。上記のレイアウト手法は作業コストが大きいため,すべてのシーンに適用するのは現実的ではなく,フロム・ソフトウェアの3Dグラフィックセクションでは品質を上げる場所を限定している。

 集中的に品質を上げる場所は,「ビューポイント」と呼ばれる。
 ビューポイントはシチュエーションが切り替わる位置に設定されることが多く,またカメラが動線を方向を向くように作られている。新しいシチュエーションに切り替わった直後は,風景に注目する人が多いと考えて,レイアウトの品質にこだわっているそうだ。

画像ギャラリー No.031のサムネイル画像 / 「ELDEN RING」の世界はいかに構築されたか。フロム・ソフトウェアが明かす,背景レイアウトの品質と印象を強化する手法[CEDEC 2025]

 ゲーム要件による制限とは,ゲームデザインの都合で発生するレイアウトの制限のことだ。ここでは戦闘を快適に行うために部屋や通路を大きくする,緊張感を演出するために足場を狭くする,指定の場所へ誘導するといった例が示された。

画像ギャラリー No.032のサムネイル画像 / 「ELDEN RING」の世界はいかに構築されたか。フロム・ソフトウェアが明かす,背景レイアウトの品質と印象を強化する手法[CEDEC 2025]

CEDEC 公式サイト

4Gamer「CEDEC 2025」記事一覧

  • 関連タイトル:

    ELDEN RING NIGHTREIGN

  • 関連タイトル:

    ELDEN RING NIGHTREIGN

  • 関連タイトル:

    ELDEN RING NIGHTREIGN

  • 関連タイトル:

    ELDEN RING NIGHTREIGN

  • 関連タイトル:

    ELDEN RING NIGHTREIGN

  • この記事のURL:
4Gamer.net最新情報
プラットフォーム別新着記事
総合新着記事
企画記事
スペシャルコンテンツ
注目記事ランキング
集計:07月25日〜07月26日