アップルタッチアイコンを作ろう in Adobe Illustrator

アップルタッチアイコンはios用のホーム画面などで表示されるアプリケーションやWebサイト向けのタッチアイコンです。

今回はWebサイト向けにアップルタッチアイコンを作ろうかと思います。

制作理由

アップルタッチアイコンを設定するWebサイトは、メディア系サイトが多いです。
理由としてはブックマークされることが多くiosであればホームに追加した際、ホーム上にショートカットが作成されます。

その際、アップルタッチアイコンがあるのとないのとでは大きく見た目が異なります。
ですので、メディア系サイトを立ち上げる際は、ユーザーのため(ユーザビリティ)にもアップルタッチアイコンを設定しましょう。

~制作の流れ~

新規作成で縦192px横192pxの新規ドキュメントを作成します。
新規ドキュメント作成後、角丸長方形ツールを使ってアップルタッチアイコンの型となる角丸長方形を作成します。

iosのバージョンによって角丸の半径が異なりますがios13で試したところ長方形の幅192px高さ192pxで角丸半径が30pxがもっとも最適なサイズでした。
この作成した角丸長方形の形に合わせてお好みでデザインしてみましょう!

アップルタッチアイコンの作り方

私はリトルムービー用にこのようなアップルタッチアイコンを作りました。

リトルムービーアップルタッチアイコン

作成の流れは動画でも紹介しています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です