アイコンリングくっつけツール - ヘルプ

2. 画面構成と基本操作

ツールは主に以下のエリアで構成されています。

• ヘッダーエリア: ページ上部にあり、アプリ名とハンバーガーメニューが表示されます。
• 画像選択エリア: メイン画像とアイコンリング画像をアップロードし、選択するエリアです。
• メイン画像の切り抜き設定エリア: アップロードしたメイン画像を切り抜くための詳細設定を行います。
• 重ね合わせプレビューエリア: 切り抜いたメイン画像とアイコンリングを重ねた結果をリアルタイムで確認できます。
• 保存された重ね合わせ画像エリア: 作成して保存した画像の一覧が表示され、ダウンロードできます。

3. 画像の準備とアップロード

アイコン作成を始めるには、まず「メイン画像」と「アイコンリング画像」の2種類の画像を準備します。

3.1. メイン画像の選択

1. 画面左側の「メイン画像を選択」ボタンをクリックするか、点線枠内に画像をドラッグ＆ドロップします。
2. 画像ファイルを選択すると、下にサムネイルとして表示されます。
3. 複数の画像をアップロードした場合、使用したい画像のサムネイルをクリックして選択します。選択中の画像は枠線が強調表示され、プレビューエリアにも表示されます。
4. サムネイル右上の「x」ボタンで、アップロードした画像をリストから削除できます。

3.2. アイコンリング画像の選択

1. 画面右側の「アイコンリングを選択」ボタンをクリックするか、点線枠内に画像をドラッグ＆ドロップします。
2. 操作方法はメイン画像と同様です。透過PNG形式のリング画像を使用すると、より自然な仕上がりになります。

4. メイン画像の切り抜き設定

メイン画像とアイコンリングの両方を選択すると、このエリアが表示されます。ここでメイン画像をアイコンリングの形に合わせて調整します。

4.1. 切り抜きキャンバスでの操作

• 画像の移動: キャンバス内のメイン画像を直接ドラッグすることで、表示位置を調整できます。
• 画像の拡縮:
  • マウスホイールを上下にスクロールすることで、メイン画像を拡大・縮小できます。
  • スマートフォンでは、ピンチイン・ピンチアウト操作で拡縮できます。
• 切り抜き範囲の操作:
  • アイコンリングのアスペクト比に合わせた四角い枠（切り抜き範囲）が表示されます。この枠内が最終的にアイコンリングと合成されます。
  • 枠自体をドラッグして、切り抜く位置を調整できます。
  • 枠の四隅にあるハンドルをドラッグすることで、枠の大きさを変更できます（アイコンリングのアスペクト比は維持されます）。

4.2. スライダーコントロール

• メイン画像拡縮: スライダーを動かすことでも、メイン画像の表示スケールを調整できます。
• 切り抜き範囲拡縮: スライダーで切り抜き範囲の大きさを調整できます。
• 切り抜きプレビューでのアイコンリング不透明度: このスライダーは、切り抜き設定中のプレビューで表示されるアイコンリングの透明度を調整します。最終的な画像の透明度とは異なります。

4.3. マスク設定

• 円形マスクを有効にする: チェックを入れると、最終的な重ね合わせ結果が円形にマスクされます。チェックを外すと、四角い切り抜き範囲のまま重ね合わせられます。
• マスクを切り抜き範囲に追従させる:
  • チェックが入っている場合（デフォルト）、円形マスクは常に四角い切り抜き範囲に内接する形で自動調整されます。
  • チェックを外すと、円形マスクの位置とサイズを個別に調整できます。切り抜きキャンバス上に表示される赤い点線の円をドラッグして移動、右下のハンドルで半径を変更してください。
• 円の外側の透明度: 「円形マスクを有効にする」がオンの場合、このスライダーで円形マスクの外側の部分の透明度を調整します。最終的な重ね合わせプレビューでは、この設定に関わらず円の外側は白で塗りつぶされます。 このスライダーは切り抜き設定時のプレビュー用です。

4.4. 切り抜きの適用

設定が完了したら、「切り抜きを適用」ボタンをクリックします。これにより、ここでの設定が「重ね合わせプレビュー」に反映されます。

5. 重ね合わせプレビューと最終調整

「切り抜きを適用」後、または画像を再選択した際に、このエリアで最終的な仕上がりを確認できます。

• アイコンリングの不透明度: スライダーを調整して、重ねるアイコンリングの最終的な透明度を変更できます。
• 画像を重ねる: このボタンをクリックすると、現在の設定（切り抜き範囲、アイコンリングの不透明度、円形マスクの有効/無効）でプレビューが更新されます。
• プレビューサイズ: 重ね合わせプレビューは、PCでは513x513ピクセルの固定サイズで表示されます。スマートフォンなど画面幅が狭い場合は、画面幅に合わせて自動的に縮小表示されます。保存される画像も513x513ピクセルです。

6. 結果の保存とダウンロード

作成したアイコンは、ツール内に一時的に保存したり、お使いのデバイスにダウンロードしたりできます。

6.1. 結果を保存

「結果を保存」ボタンをクリックすると、現在の「重ね合わせプレビュー」の状態が画像としてツール内に保存されます。保存された画像は、「保存された重ね合わせ画像」エリアにサムネイルとして表示されます。

6.2. 画像をダウンロード

• 保存済み画像のダウンロード: 「保存された重ね合わせ画像」エリアでダウンロードしたい画像のサムネイルを選択し、「画像をダウンロード」ボタンをクリックすると、その画像がPNG形式でダウンロードされます。
• 現在のプレビューのダウンロード: 保存済み画像を選択していない状態で「画像をダウンロード」ボタンをクリックすると、現在の「重ね合わせプレビュー」に表示されている画像が current_overlay_preview.png というファイル名でダウンロードされます。

7. ハンバーガーメニュー

画面右上の三本線のアイコン（ハンバーガーメニュー）をクリックすると、ナビゲーションメニューが開きます。ここから他のページ（ホームページ、マイページなど）へ移動できます。

8. トラブルシューティング

• 画像がうまく表示されない:
  • 対応している画像形式（JPEG, PNG, GIFなど）か確認してください。
  • ファイルサイズが大きすぎる場合、ブラウザの処理が遅くなることがあります。
• 切り抜きが思った通りにいかない:
  • メイン画像とアイコンリングのアスペクト比が大きく異なる場合、調整が難しいことがあります。
  • 各種スライダーやドラッグ操作で微調整してみてください。
• その他:
  • 問題が解決しない場合は、ページを再読み込みしてみてください。
  • 変更履歴を確認し、最新バージョンであることを確認してください。

このヘルプページで、ツールの使い方がご理解いただければ幸いです。