XIV Frameの使い方：SSの追加からPNG保存までの完全ガイド

XIV Frameは、ブラウザ上でスクリーンショットを配置し、完成したキャンバスをPNGとして保存するツールです。まずフレームの形を決め、その中に画像と必要なオーバーレイを追加していきます。

まず知っておきたいこと

• 1つのキャンバスに使える画像は最大4枚です。
• 1枚の画像ファイルは50MB以下です。大きな元画像はアップロード後、ブラウザ内で自動最適化されます。
• 画像はブラウザ内で処理され、元画像がサーバーへアップロードされることはありません。
• プレビューのズームは画面上の見え方だけを変えます。保存される画像のサイズは変わりません。

1. レイアウトを選ぶ

1. PCでは左側、スマートフォンでは下部のレイアウトを開きます。
2. 横分割は画像を左右に並べます。前後の姿を比べたいときに向いています。
3. 縦分割は画像を上から下へ並べます。全身とディテールなど、上下の流れを作りたいときに使います。
4. グリッド配置は3枚以上で2×2の枠を埋められます。3枚未満でも、選んだレイアウトはそのままです。

2. スクリーンショットを追加する

1. PCでは左側、スマートフォンでは下部の写真を開きます。
2. 空いている写真を追加 1のカードをクリックしてファイルを選びます。
3. 追加のカードにも同じ操作で画像を入れます。アップロードした順番が基本の配置順になります。
4. 差し替える場合はカードの変更、削除する場合はカード右上のXボタンを使います。
5. カードの順番移動ボタンで、画像を1つずつ前後へ動かせます。

3. 合成画像を追加する

1. 写真の下部にあるキャラクターを展開します。キャラクターだけでなく、光、エフェクト、装飾などのPNG要素にも使えます。
2. 合成画像を追加をクリックしてPNG、JPG、WebPを選びます。透明PNGはそのまま使え、背景がある画像は次の手順で背景を削除できます。
3. 元画像と背景削除結果のプレビューを確認し、背景を削除をクリックします。初回はブラウザでモデルを準備するため、時間がかかる場合があります。
4. 不要な部分が残った場合は輪郭を補正を開き、消すを選んでプレビューをドラッグします。必要な部分まで消えたときは戻すで復元できます。
5. キャンバス配置で画像を直接ドラッグし、画像サイズ、不透明度、左右反転、自然な影を調整します。
6. 合成画像を外したいときは合成を削除をクリックします。写真ソースと署名の設定はそのまま残ります。

4. キャンバス比率を設定する

1. PCではレイアウトパネルの比率、スマートフォンでは保存内の比率設定を開きます。
2. 自動は現在のレイアウトに合わせてキャンバスを決めます。最初の確認にはこの設定が便利です。
3. 16:9は一般的な横長キャンバスに向いています。
4. 2:1は複数の画像を横長のバナーのように見せたいときに使います。

5. 画像ごとに位置と拡大率を調整する

1. カードをクリックして調整したい画像を選びます。選択中のカードには枠が表示されます。
2. 選択中の画像のサイズスライダー、または数値入力で50～300%の範囲を設定します。
3. キャンバス上の画像をドラッグして位置を動かします。スマートフォンでは1本指でドラッグします。
4. 選択中の画像の上でマウスホイールを動かすと、すばやく拡大・縮小できます。
5. PCでShiftキーを押しながらドラッグすると、横または縦の一方向に動きをそろえられます。
6. リセットを押すと、選択中の画像だけが初期のサイズと位置に戻ります。
7. 調整が終わったら画像位置をロックをオンにすると、キャンバス上で誤って動かすことを防げます。

キャンバス全体を確認するときは、キャンバス下の表示ドックで画面に合わせるまたはズームを使います。100%以上でキャンバスを動かす場合は、Spaceキーを押しながらドラッグします。

6. 余白とつなぎ方を整える

1. レイアウトのトランジションで、なしまたはソフトブレンドを選びます。
2. なしでは画像の間隔を0～100pxで調整します。
3. ソフトブレンドではつなぎ目の幅を調整し、隣り合う画像の重なり方を決めます。
4. 枠線の太さでキャンバス外周の余白を0～50pxの範囲で加えられます。

7. 背景と質感を決める

1. 仕上げで背景をホワイト、ライトグレー、透明から選びます。
2. 画像の外側を透明なままPNGにしたい場合は透明を選択します。
3. フィルムノイズは0%から始め、画像全体に控えめな質感を加えたいときだけ少しずつ上げます。

8. 署名を追加する

1. PCでは左側、スマートフォンでは下部の署名を開きます。
2. テキストを展開し、上部テキストにキャラクター名、下部テキストにサーバー名などを入力します。
3. 各行の太字・斜体・文字間隔を個別に調整します。
4. 位置、整列、フォント、サイズ、色、不透明度をプレビューを見ながら決めます。
5. 顔や装備の重要な部分に重ならない位置へ移動します。
6. 署名設定の下にある著作権オーバーレイで、アプリに用意された著作権表記の表示・非表示を切り替えます。この表記は自由入力のテキストではありません。
7. 表示をオンにしたら、著作権の位置で左・中央・右を選び、著作権の色で黒・白・グレーを選択します。プレビュー上で読みやすさを確認してください。

9. PNGとして保存する

1. PCでは右上のPNG保存をクリックします。
2. スマートフォンでは保存を開き、比率を確認してPNGで保存をタップします。
3. ブラウザのダウンロードフォルダーに ffxiv-screenshot-日時.png のような名前で保存されます。
4. 別の作品を作る場合は、PC上部のリセットまたはスマートフォンの初期化を使います。残したい作品は先に保存してください。

設定の保存について

XIV Frameの設定はブラウザのローカルストレージに保存されます。同じブラウザで再び開くと設定が残っている場合がありますが、完成画像はPNGとして保存しておくと安心です。