RTA配信で見かけることも多い、おなじみのタイマーツール『LiveSplit』。デフォルトのレイアウトもシンプルでかっこいいですが、時にはおしゃれに・時には個性的にレイアウトを変更している走者さんも珍しくはありません。
『もっと自分らしいレイアウトにしたい』『LiveSplitを配信に映してみたけど、このレイアウトだとどこか浮いてしまう…』
今回はそういったお悩みを解決する助けになれば…と思い、この記事を書きました。個人の主観が含まれる場面もあるので、承知の上でお読みいただければと思います。
こちらはRTAGamers Advent Calendar 2025、18日目の記事です。
LOGO ILLUSTRATION:© YOSHITAKA AMANO
「記載されている会社名・製品名・システム名などは、
各社の商標、または登録商標です。」
1. 設定編～レイアウトを変えてみよう
1-1. レイアウトエディターについて
ここからは『LiveSplitレイアウトを変える方法』について説明していきます。
まず、右クリック→『Edit Layout』でエディターを開きます。
『LiveSplit』のレイアウトエディター。こちらはデフォルト時の設定
左に４つ並んでいるボタンでは、以下のような設定ができます。
- 一番上（＋）→コンポーネント（項目）の追加
- 二番目（－）→コンポーネントの削除
- 三番目（↑）＆一番下（↓）→選択中コンポーネントの表示順入れ替え
画面下の『Horizontal』『Vertical』はタイマーの形を設定するもので、表示順の入れ替わり方もそれによって変わります。
- 『Horizontal』は横に長いタイプのレイアウトです。
- 表示順入れ替えをすると、↑で左側／↓で右側に移動します
- 『Vertical』はやや縦に長いタイプのレイアウトです。
- 表示順入れ替えをすると、↑で上側／↓で下側に移動します
『Set Size』を選択すると、タイマー自体のサイズを変更することもできます。
『LiveSplit』レイアウトのサイズ設定画面。
上から順に、『横幅』『高さ』『縦横比を固定するかどうか』を設定することができるので、『配信画面のスペースからあふれてしまう…』という方はサイズ変更を試してみるのも選択肢のひとつです。
1-2. タイマー全体の見た目を設定する
左下の『Layout』を選択することで、タイマー全体や各コンポーネントの設定を変更・カスタマイズすることができます。ここでは、全体の設定にかかわる『Layout』から見ていきましょう。
『LiveSplit』のレイアウト設定画面
『Background』はタイマー全体の背景スタイルや背景色などを設定できます。このうち『Image』を選択すると、お好きな画像を背景として設定することができます。
LiveSplitのレイアウト例。イラストは手描き。
『Opacity』はタイマー全体の不透明度を変更する項目です。ただし、タイマーの文字も含めて変更されるため、あまり透明に寄せすぎると見えづらくなる点には注意しましょう。
『Fonts』は文字通り、使用するフォントを設定する項目です。
- Timer：『Timer』などの総合タイムを表示する部分に適用されるフォントです。『Detailed Timer』の区間タイマーにも適用されます。
- Times：『Splits』系など、主に区間タイムを表示する部分に適用されるフォントです。
- Text：ゲームタイトルやラップ名など、その他のテキスト部分に適用されるフォントです。『Counter』の数字などもこちらに該当します。
『Title』や『Text』など別途フォントを設定できるコンポーネントもありますが、その一方で『Detailed Timer』の一部設定のように、上記３項目の設定が影響しない部分もあります。後者の場合は、以下のようにコンポーネント設定からフォントを指定する必要があります。
『Detailed Timer』のフォント設定。
『Colors』はタイマーやテキストの文字や区切り線（Separaters系）などの色を設定する項目です。
左列の上から５項目（『Best Segment』と『Ahead／Behind』系）は、比較対象のタイム（自己ベストなど）との差によって変化する部分です。
- 『Best Segment』は任意の色を設定できるほか、横のチェックボックスをONにすることで虹色のアニメーション文字で表示することもできます。
- 『Ahead』は比較対象のタイムより速いペースのときに、『Behind』は遅いペースの時に適用されます。
- ５項目すべてを同じ色に統一すると『タイマー進行中は色を変えず、タイマーが動いていないときは別の色に変わる』といったこともできます。
- また、『Ahead／Behind』系で設定した色は、『Timer』などで『～With Delta Color』を背景色に設定した時にも反映されるようです。
1-3. コンポーネントによるレイアウト設定
次に、各コンポーネントの設定から、レイアウトのヒントになりそうな部分を抜粋して説明していきます。
『Layout』ではタイマー全体の背景スタイルや色を設定できますが、各コンポーネント単位でも同様に設定が可能で、部分的に背景を変更することができます。
『Splits』の背景スタイル４種を比較した画像。
例として『Splits』で適用できる背景スタイル４種をまとめました。いずれも１つ目の背景色を水色、２つ目を青に設定しています。
『Altarnating』以外はタイマー全体の背景に加え、『Title』や『Timer』などの背景スタイルの選択肢にも含まれています。
『Title』や『Timer』などの一部コンポーネントでは『Override Layout Settings』のチェックボックスが項目によって含まれており、これをONにすることで設定中のコンポーネントに限りフォントや文字色を変更することができます。
例えば、『Timer』ではタイマーの状態にかかわらずタイマーの文字色が常に一定になります。
『Splits』系では、『Total Splits』で表示するスプリット数を変更することができます。タイマーを配置したいスペースとタイマーのサイズが合わない場合は、レイアウトエディター内にある『Set Size』と併せて、ちょうどいい大きさになるように調整してみるといいでしょう。
2. 実例編～いろんな場面でのレイアウト例
ここからは、わたしが実際に配信で用いているレイアウトを例に挙げながらお話をしていきたいと思います。とはいえ、あくまで自分自身のスタンスに基づいて組んだものなので、読み物程度に見ていただけるとありがたいです。
基本的には、背景画像や（時計等の）ブラウザソースなどはお借りした素材を使い、部分的なパーツ（次項でいうと、ゲーム画面上下のうちテキスト部分の背景＆画面右側の大部分で使われているいくつかの四角い枠）は別途ペイントソフトで自作した画像やOBSの『色ソース』を重ねることが多いです。
2-1. 通常のRTA配信などでのレイアウト
まず例に挙げるのは、先日行われた『パズルボブル２』並走会に参加した際の配信画面です。
『パズルボブル２』並走会配信の画面。Windows版アケアカNEOGEOでのランでした
『主に普段のRTA配信などの、いわゆる自分の枠だけで完結する配信で用いているレイアウト』を取り上げ…たいところなのですが、ここ数カ月はそういった配信が少なく…。
そのため、同じレイアウトを用いた配信の画面レイアウトを取り上げています。
タイマーは右上に縦型（Vertical）に設定したものを表示しています。背景や画面右側のレイアウトとなじむように、配色も水色～青系を基調にしています。
2-2. ミラー形式を想定したレイアウト
続いて、結構前にはなりますが、リレーイベントの中間企画のひとつとして実施された、ピクセルリマスター版『ファイナルファンタジー（初代）』の並走会参加時の配信画面です。
『FF1PR』並走会の配信画面（一部モザイク加工あり）。本部ミラーではゲーム画面のみ表示される形式でした
こちらはいうなれば、並走会などの『ミラー形式を想定したレイアウト』です。
実際のミラー配信では大抵の場合、自らの視点配信よりも画面のサイズが小さくなります。そのためわたし自身の配信環境も踏まえ、ゲーム画面を先ほどのレイアウトより大きめにとることで、ミラーされたときにより画面が見やすいように工夫しています。
この場合、画面右側の幅が狭くなることから、見やすさを考慮してタイマーの設定を横長型（Horizontal）にして画面下部に配置しています。ただ、表示スプリット数が先ほどと同じだと画面に収まらないため、表示数を減らすなどして幅の調整を行っています。
配色は先ほど同様水色系を基調にしていますが、アクセントにミントグリーン系を用いています。
3. おわりに
今回は『配信画面を彩るLiveSplitレイアウト』についてお話しました。
時にはレイアウトの雰囲気に合わせてタイマーを着飾ってみるのはいかがでしょうか？ そういった場面が来たとき、わたしの記事がひとつの助けになれば幸いです。
『RTAGamers Advent Calendar 2025』、これから公開予定の記事もお楽しみに！
北の大地のゆずシャーベットです！
主にパズルゲームやファイナルファンタジーシリーズ（ピクセルリマスター版）のRTAを走っています！
コメント