iPhone系ブロガー向け|アプリのアイコン画像をiTunes11からドラッグ&ドロップできなくなったので代替案

@JUNP_Nです。iPhoneアプリ系のレビュー記事を書いているブロガーさんは、アプリのアイコン画像を利用していた人も多いかと思います。以前のiTunesでは購入したアプリのアイコンはドラッグ&ドロップで画像を保存することができていましたがiTunes11からそれもできなくなってしまったようなので僕が行なっている代替案をシェア。

用意するものはブラウザとiMageToolの2つ

現在の男子ハックはとりあえずの代替案としてこの方法でアイコン画像を用意しています。

アイコン画像を主にどこに使っているかというと、記事のアイキャッチ画像に利用しています。やっぱりアプリのアイコンが一番特徴を表していると思うので。

Iphoneapp icon 22

もっと他に良い方法がありそうなので、どなたか知っていたら教えていただけると嬉しいです。そもそも僕がやり方を知らないだけでiTunes11でできるよ!ってことなら方法を教えて下さい…。

さて今回の方法はiTunesからアイコン画像を用意するのではなく、WebのiTunesStoreのアイコンから用意する方法です。

まずはブラウザからiTunesStoreのアプリページへ行きます。僕はChromeユーザーなので説明ではChromeですが、Safariでも問題無いです。

アプリのページへ行ったら「要素の検証」を行います。Chromeだと「command + Option + I」、もしくはコンテクストメニュー(右クリックで表示されるメニュー)から要素の検証を開きます。

Iphoneapp icon 86

表示されたところからアプリのアイコン画像のURLを探してきてダブルクリック。

するとアプリのアイコン画像だけが表示されるのでそれを適当なところに保存しましょう。

Iphoneapp icon 11

iTunesStoreのWebページにあるアイコン画像は基本的に角丸になっていません

記事内で利用した画像ではアイコンの絵柄は角丸になっていますが、背景が黒いですね。このままでは利用することができません。

というわけで、ここからは角丸にする作業に入ります。

Iphoneapp icon 3

角丸にするために僕が利用しているのはiMageToolというアプリ。無料でしかも優秀なアプリなのでオススメです。

iMageToolで画像のリサイズと角丸を同時行います。

男子ハックでのアイキャッチ画像は「150px × 150px」です。先ほど保存したアイコン画像は「175px × 175px」なので少し大きいです。

そして角丸は「Curve」の設定をします。角丸にしたい角をチェックしてRadius(半径範囲)を指定します。

Iphoneapp icon 43 2

地味ですがRadiusの設定が重要です。

ちゃんと指定してあげないと綺麗なアイコン画像になってくれません。下記の画像では背景の黒が少しだけ残ってしまいました。

Iphoneapp icon 65 2

僕は22pxに指定してあります。画像のリサイズも合わせて行なっているので、僕の設定は参考程度にしていただき、皆さんも試してみてください。

丁度良い設定が決まったらiMageToolに今回の処理を保存しておくと次回以降はこの作業がドラッグ&ドロップでSTARTボタンを押すだけなので捗りますよ!

Iphoneapp icon 54 2

というわkで完成した画像が以下。

背景の黒い部分も消えて綺麗なアイコン画像になりました。

Iphoneapp icon 7

今回紹介した流れを簡単にまとめると…

  1. ブラウザでアプリのページへ行って要素を検証
  2. アプリアイコン画像を適当に保存
  3. アイコン画像をiMageToolでリサイズ&角丸

という感じです。

お試しください。そしてもっといい方法があったら教えて下さい。

関連する記事
関連するカテゴリ
Facebook
LINE@ "友だち追加"

スマホでLINEを起動 > その他 > 友だち追加 > QRコード

メール配信登録
ランキング