Advertisement

realicon2014_top

 

多くのサイトがブックマーク時に表示されるファビコンを設定しています。iPhoneのホーム画面にブックマークしたときに表示するアイコンデザインも設定してみてはいかがでしょう。クリエイティブなデザインアイコンを利用することで、その他サイトとの差別化を図ることができます。

 

 

海外デザインブログDesignWoopで、ユニークなデザインが魅力的なiOSアプリ用アイコンデザインをまとめたエントリー「20 Stunning App Icon Designs」が公開されていたので、今回はこちらをベースに、アイコンの設定方法もいっしょにご紹介します。

 

 

 

詳細は以下から。

 

 

 

iOSアプリアイコンの設定方法

 

アップルの各デバイスによってアイコンの解像度は異なります。まずは一度サイズを確認しておきましょう。Retinaディスプレイの場合、通常アイコンの2倍サイズが必要になる点がポイントになります。

 

デバイスiPhone & iPod Touch(Retinaディスプレイ)iPhone & iPod TouchiPad(Retinaディスプレイ)iPad
サイズ114x114px57x58px144x144px72x72px

 

 

ポイント HTMLファイルへの追記方法

 

まずHTMLファイルにファビコンを加えるには以下のコードを追記します。

 

 

 

次にiOS用アプリを追記してみましょう。設定するときのポイントとしてrelリンクにはapple-touch-iconを記述し、57x57pxなど詳細なサイズを書き足しておきましょう。

 

 

 

 

ポイント スペシャルエフェクト

 

アイコンの周りをデコレーションするドロップシャドウや、光の反射エフェクトなどは自動的に追加されます。エフェクトを必要としない場合は、relリンクに-precomposedを追加しましょう。

 

 

 

 

ポイント Androidやその他の端末は?/strong>

 

iOS用アイコン素材は、Android 2.2以降の機種やBlackberry v6.0以降の端末でも同様に表示される仕組みとなっています。異なる端末用にアイコンデザインを新たに作成し、用意する必要はありません。

 

 

 

デザインの参考にしたい、ユニークなiOSアプリアイコンデザインまとめ

 

Water

0056_iOS7_App-Icon

 

 

Leica Raw Edition iOS Icon

20-icon

 

 

[G]arden

6

 

 

Snow Whites Coffin

13-icon

 

 

Bag Icon

10-icon

 

 

DryGood Icon

03-icon

 

 

Magic Potion Icon

0022_iOS7_App-Icon

 

 

Set of iOS Icons

0015_iOS7_App-Icon

 

 

Bilora Camera iOS Icon

0041_iOS7_App-Icon

 

 

App Icon for ZenFinance

0023_iOS7_App-Icon

 

 

Icon Dribbble

04-icon

 

 

iOS Wedding Planner Icon

0044_iOS7_App-Icon

 

 

Droplet iOS

0016_iOS7_App-Icon

 

 

PicShift Icon

05-icon

 

 

Music Player Icon

0026_iOS7_App-Icon

 

 

Sweet Mustashe App Icon

2

 

 

Music App Icon

006_iOS7_App-Icon

 

 

Slot-Machine Icon

06-icon

 

 

Dribbble Chip

0018_iOS7_App-Icon

 

 

Paradise Island iOS

11-icon

 

 

 

0017_iOS7_App-Icon

 

Color Picker

4

 

 

Drops iOS

5

 

 

iOS 7 Long Shadow Icons

0024_iOS7_App-Icon

 

 

GiftBox

0021_iOS7_App-Icon

 

 

 

参照元リンク : 20 Stunning App Icon Designs – DesignWoop

参照元リンク : Creating Home Screen Icons for iOS and Android Devices – Designmodo