IRIAM(イリアム)アイコンリングのサイズは?作り方・つけ方も徹底解説

「IRIAMのアイコンリングを作りたいけれど、正しいサイズがわからず、文字やイラストが枠から見切れてしまう…」と悩んでいる方もいるでしょう。円形で表示される仕様を知らないと、せっかくのデザインがはみ出してしまうことがあります。

この記事では、IRIAMのアイコンリングのサイズをはじめ、アイビスペイントを使った作り方・つけ方、IRIAMアプリでの設定手順、きれいに表示されない原因と対処法、配布時の注意点までまとめて解説します。

無料アプリだけで完結する流れなので、絵の経験がなくても問題ありません。手順どおりに進めれば、短時間でリング付きアイコンを設定できます。ぜひ参考にしてください。

IRIAMアイコンリングのサイズ

IRIAM公式が案内しているプロフィールアイコンの推奨サイズは、縦513px・横513pxです。アイコンリングも、アイコンに合わせて513×513pxの正方形で作成すると重ねやすくなります。

プロフィールアイコンは、配信時にホーム画面のサムネイルとしても表示されます。顔や文字などの見せたい要素は、リングや各種表示アイコンに隠れないよう中央寄りに配置しましょう。

出典:IRIAM「プロフィールについて

※仕様は変更される場合があります。最新情報は公式ヘルプで確認してください。

サムネイルの作り方や見切れを防ぐ方法を詳しく知りたい方は、以下の記事も参考にしてください。

>>IRIAM(イリアム)のサムネサイズは?作り方と見切れ対策も紹介

IRIAMアイコンリングの作り方【アイビスペイント】

配信で使うアイコンリングは、無料アプリ「アイビスペイント」があればスマホだけで作成できます。Android版とiOS版に共通する基本操作をもとに、キャンバスの準備から透過PNGでの保存まで、アイコン作成の流れを5つの手順で解説します。

513×513pxのキャンバスを作る

513×513pxのキャンバスを作る

IRIAM用のアイコンリングを作成するため、最初に正方形のキャンバスを用意します。アイビスペイントを起動して「マイギャラリー」を開き、画面下部の「+」をタップしてください。

新規キャンバスでは、サイズを513px×513pxに設定します。

  • 幅:513px
  • 高さ:513px

完成後に元画像へ重ねるため、この段階では人物画像を配置する必要はありません。表示位置が気になる場合は、IRIAM公式の位置調整用テンプレートを読み込み、装飾を置ける範囲だけ確認しましょう。

円定規で枠を描く

円定規で枠を描く

アイコン枠の作り方では、円定規を使って外周の線を作成します。あとから太さや色を調整しやすいよう、画面右下のレイヤーアイコンから「+」をタップし、外枠専用の透明レイヤーを追加してください。

次に、画面上部の定規アイコンから「円定規」を選び、キャンバスの中央に合わせて位置と大きさを整えます。配置が決まったら、好みの太さに設定したブラシで円周をなぞりましょう。

線が端に接すると欠ける可能性があるため、アイコン枠の外側には少し余白を残してください。

装飾を別レイヤーに置く

装飾を別レイヤーに置く

外枠が描けたら、文字やリボン、模様などの装飾を追加します。要素を同じレイヤーへまとめると、あとから位置や色を変えにくくなるため、「外枠」「文字」「模様や小物」のように分けて配置してください。

新しい透明レイヤーは、画面右下のレイヤーアイコンを開き、「+」をタップすると追加できます。元のアイコン画像はここでは合成せず、リング素材だけを編集します。別のデザインへ流用できるよう、統合前の編集データも残しておきましょう。

文字を内側に配置する

文字を内側に配置する

名前や短いメッセージは、アイビスペイントの「文字入れ」ツールから追加します。画面下部のツールアイコンをタップし、一覧から「文字入れ」を選んだあと、「文字追加」から内容を入力してください。

フォント、文字サイズ、文字色、縁取り、文字間隔を調整し、チェックマークで確定します。文字は円の内側へ寄せすぎず、公式テンプレートを重ねた状態で、サムネイル上の表示要素に隠れない位置へ移動してください。

透過PNGで保存する

透過PNGで保存する

リング素材が完成したら、背景を透明にしたままPNG形式で保存します。保存前に、白い背景レイヤーや位置確認用テンプレートが表示されていないか確認してください。背景が残った状態で保存すると、元画像へ重ねたときに白い四角形で隠れてしまいます。

保存後は画像をアイビスペイントへ読み込み直し、下に色付きレイヤーを置いて中央部分が透けるか確認しましょう。編集用データも残しておくと、文字や色をあとから修正できます。

完成したアイコンリングは、プロフィール画像だけでなく、自己紹介カードの装飾にも活用できます。自己紹介カードの作り方は、以下の記事で解説しています。

>>Vライバーの自己紹介カードの作り方は?載せる項目・公開手順・注意点を解説

IRIAMアイコンリングのつけ方【アイビスペイント】

作成したアイコンリングは、アイビスペイントで元画像に重ね、1枚の画像として書き出してからIRIAMに設定します。元画像とリングを読み込み、レイヤーの順番や画像サイズを調整して保存するまでの手順を、5つのステップに分けて解説します。

元のアイコン画像を読み込む

元のアイコン画像を読み込む

最初に、リングを付けたい元のアイコン画像を読み込みます。アイビスペイントで縦513px・横513pxの新規キャンバスを作成し、レイヤーウィンドウのカメラマークから立ち絵やイラストを選択してください。

読み込んだ画像は、あとで追加するリングより下に置く「元画像レイヤー」として使います。この段階では、顔がキャンバスの中央付近に収まるよう、おおまかに位置を整えるだけで問題ありません。細かな調整はリングを重ねたあとに行います。

アイコンリングを読み込む

元画像を配置したキャンバスへ、先ほど保存した透過PNG形式のアイコンリングを追加します。レイヤーウィンドウのカメラマークからリング画像を選んでください。

背景が白い四角形で表示される場合は、透過保存できていない可能性があります。その場合はリングの編集データを開き、背景レイヤーを非表示にして再度PNG形式で保存しましょう。

必要に応じてIRIAM公式のアイコンリング用テンプレートも読み込みますが、完成画像へ写り込まないよう、保存前に非表示または削除してください。

リングを上のレイヤーに置く

リングを上のレイヤーに置く

レイヤーウィンドウを開き、アイコンリングのレイヤーを元画像レイヤーより上へ移動しましょう。レイヤー右側の並べ替え部分を上下にドラッグすると、表示順を変更できます。リングが前面、元画像が背面になれば、中央の透明部分から人物が見える状態になります。

リングが表示されない場合や人物の後ろへ隠れる場合は、レイヤーの順番が逆になっていないか確認してください。ここでは画像を統合せず、位置調整が終わるまで別レイヤーのまま残します。

画像サイズをリングに合わせる

画像サイズをリングに合わせる

リングを前面に配置したら、元画像の大きさと位置を調整しましょう。元画像レイヤーを選択し、移動変形ツールの「移動拡大縮小」を開いてください。枠の内側をドラッグすると位置を動かせ、角のハンドルを使うと拡大・縮小できます。

顔や髪が円形の表示範囲から不自然にはみ出していないか、IRIAM上の文字や各種アイコンと重ならないかを確認しましょう。

最後に表示を縮小し、小さなサムネイルでも顔とリング内の文字を判別できる状態へ整えます。

完成画像をPNGで保存する

元画像とリングの位置が決まったら、完成画像をPNG形式で保存します。ここで保存するのは、リング単体の素材ではなく、元画像とリングを重ねたIRIAM設定用の画像です。

保存後は端末の写真アプリやギャラリーで開き、リングの一部や文字が切れていないか、人物の位置がずれていないかを確認してください。

問題がある場合はアイビスペイントの編集画面へ戻り、レイヤーを分けた状態のまま修正してから、再度PNG形式で保存します。

IRIAMでアイコンリング付き画像を設定する方法

完成したアイコンリング付き画像は、IRIAMアプリのマイページからプロフィールアイコンに設定できます。

手順は次の4ステップです。

  1. マイページを開く
  2. プロフィール編集を選ぶ
  3. 完成画像を指定する
  4. 表示結果を確認する

マイページを開く

IRIAMアプリのホーム画面から「マイページ」を開きます。

マイページで設定したプロフィールアイコンは、配信時にホーム画面へ表示されるサムネイルにも使用されます。顔や名前が見やすいデザインになっているか、設定前に確認しておきましょう。

プロフィール編集を選ぶ

プロフィール編集を選ぶ

マイページ内の「プロフィール編集」を選び、アイコンを変更できる画面へ進みます。

編集画面では、ニックネームや自己紹介、ヘッダーなども変更できます。今回は、プロフィールアイコンの編集項目を選択してください。

完成画像を指定する

プロフィールアイコンの編集項目を開き、端末に保存したリング付きの完成画像を選択します。画像一覧から、アイビスペイントで書き出したファイルを指定してください。

似た画像を複数保存している場合は、次の点を確認して選びましょう。

  • リングのデザイン
  • 文字の位置
  • ファイル名や作成日時

表示結果を確認する

画像を設定したら、プロフィール画面とホーム画面のサムネイルを確認します。

主な確認ポイントは次のとおりです。

  • 顔や名前が円形の表示範囲から切れていないか
  • 文字が読みにくくなっていないか
  • サムネイル上部の各種アイコンと重なっていないか

プロフィールアイコンが更新されない場合は、画像ファイルを縮小してから再設定してください。

IRIAMで初めて配信する方は、配信開始までの流れもあわせて確認しておきましょう。

>>IRIAM(イリアム)配信の始め方|初心者向けに6ステップでやり方を解説

IRIAMアイコンリングがきれいに表示されない原因と対処法

アイコンリングがきれいに表示されない場合は、主に次の5点を確認してください。

  • 画像の縦横比
  • 背景の透過設定
  • 文字の位置
  • 元画像の解像度
  • 画像の大きさと配置

当てはまる症状を確認し、原因に応じて修正しましょう。

画像が正方形ではない

画像の縦横比が1:1でないと、表示時に縮小や切り抜きが行われ、構図が崩れる場合があります。

キャンバスを正方形に設定し、完成画像をIRIAM推奨サイズの513×513pxで書き出してください。

作業前にキャンバスと出力サイズをそろえておくと、完成後の作り直しを防げます。

背景が透過されていない

リングの背景が透過されていないと、白色などの背景が残り、下に重ねたアイコン画像が隠れてしまいます。

編集画面でキャンバスの背景を透明に設定し、透過情報を保持できるPNG形式で保存してください。保存後は別の画像に重ね、背景が正しく透明になっているか確認しましょう。

文字が外周に寄っている

文字が外周や上端に近いと、円形の表示範囲から切れたり、サムネイル上のアイコンと重なったりする場合があります。

公式の位置調整用テンプレートを重ね、文字や名前を円の内側へ移動してください。画面上部と重なりやすい位置も避けると、プロフィールやサムネイルでも読みやすく表示されます。

元画像の解像度が低い

輪郭や文字が粗く見える場合は、元画像の解像度が不足している可能性があります。解像度とは、画像のきめ細かさを示すものです。

小さな画像を大きく引き伸ばすと、輪郭がぼやけ、文字もにじみやすくなります。できるだけ513×513px以上の元画像を用意し、拡大率を抑えてリング内へ配置してください。

アイコン画像が大きすぎる

元画像を大きく配置しすぎると、顔や髪型などの重要な部分が円形の表示範囲から切れてしまいます。

編集ソフトの移動・変形ツールを使い、顔まわりが円内に収まるまで画像を縮小してください。中央からずれている場合は、位置もあわせて調整します。

プロフィール画像を更新できない場合は、画像の縦横サイズやデータ容量も小さくしてから、再度読み込みましょう。

IRIAMアイコンリングを配布・利用するときの注意点

アイコンリングの配布や利用では、ファイル形式や利用条件、素材の権利などの確認が欠かせません。配布者は使用ルールを明記し、利用者は条件を確認してから使用しましょう。

透過PNGのまま共有する

配布用のリングは、背景を透明にしたPNG形式で書き出し、元のファイルをそのまま共有してください。スクリーンショットやJPEGに変換すると、背景の透過が失われたり、画質が劣化したりする可能性があります。

共有前には別の色の背景へ重ね、以下の点を確認しましょう。

  • 白い縁が残っていないか
  • 塗り残しがないか
  • 不要な画像や背景が含まれていないか

利用範囲を明記する

配布ページや投稿文には、アイコンリングをどこまで利用できるか明記してください。少なくとも、以下の条件を示しておく必要があります。

  • 個人利用・商用利用の可否
  • 加工の可否
  • 再配布の可否
  • クレジット表記の要否

条件があいまいだと、配布者が想定していない使い方をされる可能性があります。利用者も、作者が定めた条件を確認してから使用しましょう。

素材の権利を確認する

IRIAMのアイコンリングに使う素材は、配布元ごとに利用条件が異なります。イラストや写真、フォント、模様などを使用する前に、以下の行為が認められているか確認してください。

  • 素材の加工
  • アイコンリングへの使用
  • 完成したリングの配布
  • 商用利用

「フリー素材」と記載されていても、商用利用や再配布が禁止されている場合があります。権利者の許可がない素材や、利用条件を確認できない素材は使用しないでください。

人物の実写画像を避ける

IRIAMでは、人物の実写画像をアイコンやヘッダー、サムネイルとして配信・投稿・送信する行為が会員規約で禁止されています。

配布用リングの見本画像にも、本人や第三者を特定できる実写写真を使用しないでください。見本を作成するときは、人物のイラストや模様などを使用しましょう。

出典:IRIAM「アイコンやヘッダーに人物の実写画像を使う行為、配信用イラストに実写画像を使う行為について

他枠での使用方針を伝える

配布時には、IRIAM以外のアカウントや媒体でも使用できるか明記してください。利用できる範囲を具体的に示すと、配布者と利用者の認識違いを防げます。

主に示しておきたい項目は以下のとおりです。

  • IRIAM内の別アカウントで使用できるか
  • XなどのSNSで使用できるか
  • 他の配信プラットフォームで使用できるか
  • 複数人で共有できるか
  • 別キャラクターへ流用できるか
  • 第三者へ再配布できるか

使用先や利用人数まで定めておけば、配布者が想定していない範囲で使われる事態を防ぎやすくなります。

IRIAMから配信の幅を広げるなら「Alive Studio」で画面も整えよう

IRIAMでの活動をきっかけに、YouTubeやTwitchへ配信の幅を広げるなら、「Alive Studio」が役立ちます。

Alive Studioは、OBS Studio(映像や音声をまとめて配信・録画するソフト)と連携し、次の素材を組み合わせて配信画面を作れるサービスです。

  • 背景
  • オーバーレイ(画面に重ねる枠や装飾)
  • BGM
  • 効果音

フリープランでは、400点以上の画像・音素材を無料で利用できます。有料のプレミアムプランは、会員登録後7日間の無料体験が可能です。無料体験後に自動で課金されることはなく、個人・法人を問わず商用利用できます。

>>Alive Studioのサービス内容をチェックする

※Alive StudioはIRIAMアプリの配信画面へ直接導入するサービスではありません。PCとOBS Studioを使ったYouTube・Twitch配信に挑戦する際の、画面づくりや演出にご活用ください。

まとめ

この記事では、IRIAMアイコンリングのサイズや作り方、つけ方、設定方法、表示トラブルの対処法、配布時の注意点までを解説しました。

作業のポイントを振り返っておきましょう。

項目ポイント
サイズIRIAM推奨の縦513px・横513px(1:1の正方形)で作る
作り方アイビスペイントで円定規を使い、装飾はレイヤーを分けて透過PNGで保存
つけ方元画像の上にリングを重ね、大きさを合わせてPNGで書き出す
設定マイページのプロフィール編集から完成画像を指定する
配布透過PNGのまま共有し、利用範囲と素材の権利を明記する

リングは無料アプリだけで作れて、円の内側に収める意識さえあれば、初めてでもきれいに仕上げられます。人物の実写画像を避けるなど、IRIAMのルールを守る点も忘れないようにしましょう。

まずは513×513pxのキャンバスを開いて、自分だけのアイコンリング作りを楽しんでください。

この記事を書いた人

ストマガ編集部

「ストリーマーマガジン」は、VTuberや配信クリエイターに興味がある方、ご自身でも活動されている方、そしてこれから配信をはじめてみたい方を応援するWebメディアです。 配信初心者さんからベテランさんまで、幅広く楽しめる情報をお届けします。

Share

Elgato:PC