VALORANT配信で以下のような現在のランクを表示している人を見たことはないでしょうか？
本記事ではこのとても素敵なデザインのランクオーバーレイを表示する方法を紹介します。
ざっくりとした流れ
- 「画面の端っこ」にアクセス
- HENRIK APIキーを取得
- アカウント、テーマを設定しオーバーレイ作成
- OBSでオーバーレイを追加
準備するもの
- Discordアカウント
- OBS
手順
1. 「画面の端っこ」にアクセス
画面の端っこ (https://gamen-hashikko.com/valorant/rank)というサイトにアクセスします。
サイトにアクセスすると以下のような画面になります。
ここに必要な情報を入力していくことで自分のランクを表示させるオーバーレイを作成できます。
2. HENRIK APIキーを取得
まずはHENRIK APIキーを取得する必要があります。
入力欄の下にある「こちらをクリックしてください。」のリンクをクリックします。
クリックすると以下のページに遷移します。
このページにAPIキーの取得までの流れが分かりやすく書いてあります。
基本的にはこのページに書いてある通りに進めていけば問題ないです。
ですが細かい操作の部分は省かれているため本記事でも改めて解説します。
まずは「Discordサーバーに参加する」ボタンをクリックします。
「既にアカウントをお持ちですか？ログインしましょう」をクリック。
ログイン後以下のような質問の画面になります。
質問の画面が出ればサーバーに参加できています。
ここからはブラウザのままでもDiscordアプリの方でも進められます。
質問の画面で「VALORANT API」をクリックして次へ進む。
次に進むとまた質問画面になります。
ただここは任意選択のようなので特に何も選択せずに進めることができます。
なのでそのまま「完了」をクリック。
その後以下のようにDiscordサーバーに入ることができます。
サーバーに入れたらユーザー認証を行う必要があります。
画面左のチャンネルリストから「#✅verify」チャンネルをクリック。
その後チャット欄に表示される「Verifizieren」というボタンをクリック。
ボタンを押した後に
- 画面左のチャンネル欄にチャンネルが増える
- チャット欄に「Verification Successful」というメッセージが出ている
という状態になっていればユーザー認証ができています。
APIキーの取得に移っていきます。
「#get-a-key」チャンネルをクリック。
その後チャット欄に表示されている「https://api.henrikdev.xyz/dashboard」のリンクをクリック。
基本的にはブラウザでリンクが開かれるのでDiscordアカウントのログインを求められる場合があります。
その場合は「既にアカウントをお持ちですか？ログインしましょう」のリンクからログインしてください。
アカウントへのアクセスを要求されるため内容を確認し「認証」をクリック。
認証が完了すると以下のような画面になります。
「API Keys」をクリック。
API Keysページに遷移するのでここでAPIキーを発行します。
「Generate New Key」をクリック。
すると以下のような小さい画面が表示されるので内容を入力、選択します。
| Application Name | なんでもOK。 |
| Description | なんでもOK。 |
| Game | 「VALORANT」を選択 |
| Access Tier | 「Twitch」を選択 |
文字を入力する箇所の内容はなんでも大丈夫だと思います。
もしAPIキーを複数発行した場合に何のために発行したのか後で分かるように設定しておくのが良いかと思います。
入力ができたら右下の「Generate Key」をクリック。
下記のような画面になっていればAPIキーの発行ができています。
「ACCESS TOKEN」となっている箇所がAPIキーです。
コピーボタンでキーをコピーしておきましょう。
3. アカウント、テーマを設定しオーバーレイ作成
APIキーの準備ができたので画面の端っこに戻りましょう。
「HENRIK APIキー」の入力欄にAPIキーを入力します。
次に「プレイヤーID」を入力します。
プレイヤーIDは
- Riotクライアントの右上の人型のアイコンマークをクリック
- ゲーム内画面右側のフレンドリストの一番上の自分をホバー
などで確認できます。
リージョンは日本の方は「AP（アジア太平洋）」のままで基本的に大丈夫なはずです。
アカウントの国に合わせて選択しましょう。
全て入力出来たら「取得」ボタンをクリック。
すると以下のようにオーバーレイが生成されます！
下のテーマを選択するとオーバーレイの見た目を変更できます。
Google、Discord、Twitchのいずれかのアカウントでログインすればより細かいデザイン変更もできるようでした。
4. OBSでオーバーレイを追加
オーバーレイのデザインを決めたら残りはOBSで表示するのみです。
「COPY」ボタンをクリック。
これでオーバーレイのURLがコピーできます。
OBSを起動しましょう。
ソースの+ボタンをクリック。
「ブラウザ」をクリック。
すると小さいウィンドウが出てきます。
好きな名前を付けて「OK」をクリック。
すると以下のような画面が表示されます。
「URL」にすでに入っているURLは削除。
その後先ほどコピーしたオーバーレイのURLを入力。
次に幅と高さを入力します。
画面の端っこで目安とされているのが
| 幅 | 412 |
| 高さ | 120 |
のようなのでこちらをそれぞれ入力。
他は特に変更せずでOKです。
「OK」をクリック。
少し待つとオーバーレイが表示されます。
好きな位置に調整すれば完了です！お疲れさまでした！
さいごに
たまたま見たVALORANT配信でこの画面の端っこが使用されており、デザインに一目惚れしたので紹介させていただきました。
少しでも参考になる内容がありましたら幸いです。
もし参考になりましたらYouTube、Twitch、Xのフォローを是非よろしくお願いします。
また製作者さんがホロじゃさんという日本の方のようでしたのでそちらも是非チェックしていただければと思います。
それではまた。
