iPhoneのアプリアイコンを、イラストに被らない位置に配置する方法

こんにちは、ちにゅりです。
『 まっちゃねこ 』を描いているイラストレーターです。
数年ぶりのnote投稿...！

iPhoneホーム画面で、イラストに被らないように
アイコンを配置してみた覚え書きです。

【端末】iPhone12 ( iOS 14.4 )

先日描いたさくらテーマのイラストがお気に入りで
スマホの壁紙（背景）にしようと思ったのですが
アイコンとまっちゃねこの位置が被ってしまう…。
（画像赤枠部分）

androidだと、避けるようにアプリを自由に配置できますが
iPhoneだとできません。

自由に配置できる方法はないか調べたところ
『 iEmpty 』というサイトを利用するとできました！

サイトの仕様がコロコロ変わっているようで
調べて出てきた手順と多少異なっていたため
備忘録として手順を残しておきます。

仕組み

正確には自由に配置できるようになるわけではなく
背景と同じ画像を使用して
サイトのブックマークアイコン（透明アイコン）を作り
背景と同化させることで、
アプリを配置していないように見せています。

なのでアイコンを長押ししたり、
ホーム画面を横にスワイプしてページ移動すると
アイコンが置いてあることが分かります。

それでは実際に同化アイコンを制作してみましょう。

①背景画像を作成

まずは同化アイコン制作の下準備で、
背景にしたい画像をiPhoneの壁紙に設定します。

【 iPhoneの壁紙 設定方法 】
「設定」アプリ ＞ 「壁紙」 ＞ 「壁紙を選択」 ＞ 好きな画像を選ぶ ＞ 位置調整をして「設定」＞ 「ホーム画面に設定」または「両方に設定」

壁紙を設定できたら、
適当なアイコンを長押しして
アプリ削除・位置移動ができる状態にします。

その状態で一番右までスワイプすると、
アプリが何もないページが出来るので
下の画面の状態でスクリーンショットを撮ります。

【スクリーンショットの撮り方 】
・iPhone12
 「電源ボタン」と「音量＋ボタン」を同時押し
・ホームボタンがあるiPhone
 「電源ボタン」と「ホームボタン」を同時押し

今回の方法では、このようにホーム画面を
スクリーンショットで撮った画像でないと
これから作るアイコンがうまく同化しません。

②同化アイコンを作成

①でスクリーンショットが撮れたら、
下記のサイトにアクセスします。

iEmpty　https://iempty.tooliphone.net/

この時、iPhoneにデフォルトで搭載されている
safari のブラウザで開いてください。

この後 safari の機能を利用するため、
ChromeやFireFoxなどの他ブラウザで手順を進めても
うまく作れません。

safari で上記リンク先（iEmpty）にアクセスできたら
ページを下の方までスワイプして、
下記の手順で進めてください。

【１】「Add empty icons」を押す

【２】Your screenshot の「Choose File」を押す

【３】①で撮った画像を選択して「Send」を押す

画像がアップロードできたら
Get empty icons というページに遷移し
アップロードした画像が表示されます。

【４】Options の「Bookmark」を選択

【５】Your empty icons の、同化アイコンを表示させたい箇所を１つ選択

【６】下にある「Add 1 icons」を押す

Your empty icon というページに遷移したら

【７】画面下の真ん中にある「ダウンロードマーク」を押す

【８】「ホーム画面に追加」を押す

【９】「追加」を押す

これで作成したアイコンがホーム画面に追加されます。

【１１】作成したアイコンを長押しし、【５】で選んだ箇所と
　　　　同じところに移動させる

おつかれさまでした。これで一通りの手順は完了です！

他にも同化アイコンを作成したい場合は、
【５】から【１１】の手順を繰り返して
１つ１つ作成してください。

今回のさくら壁紙の場合は、
同化アイコンを２つ作れば十分でした。

アイコンの活用法

今回制作したアイコンは
「iEmpty」のブックマークとして制作しました。
つまり、作った同化アイコンの箇所を押すと
iEmptyのサイトが開きます。

同化アイコンを作れば作るほど
普段使わないアイコンが増えていくことになります。

そうした同化アイコンも活用したい！という場合は
別のアプリやウェブサイトを開けるように
設定することもできるようです。

詳しくは参考にさせていただいたブログに
記載されていますので、
設定したい方いましたらご覧ください。

参考：iPhoneのホーム画面のアイコンの位置を自由に変更する裏ワザ
https://musiatui.blog.fc2.com/blog-entry-1143.html#chapter-3

さいごに

今回使用したさくらテーマの壁紙は
下記サイトにて無料配布しています。
PC用壁紙もあります🖥🌸

BOOTH　ちにゅり の おみせ＊*
『さくら』無料配布壁紙
URL：Coming soon (3/28中にアップ予定)

（※個人使用のみ可、商用利用は禁止です。）

まだまだ外でのお花見は気軽にできない世の中ですが
少しでも春気分を味わえますように🌸