Iconとは?」です。Iconてなんだろう?何を作ればいいの?と言うデザイナーの方向けに、特徴や簡単な作り方についてまとめてみました。Iconの特徴についてお話したいと思いますが、そんなことより早くサイズや作り方が知りたい!と言う方はコチラをクリックして下さい。8.0以降から実装された機能の事です。どんな機能なのかと言いますと、Androidのホーム画面などに表示されるアイコン全体のアウトラインを統一したり、ディスプレイを操作した時の動作に合わせてアニメーションが付くようになりました。これまでのAndroidのアイコンは、デバイスやアプリによって形や大きさがバラバラでした。オリジナリティのあるデザインを設定出来るので、サービス認知や目立つと言うメリットがありましたが、それはあくまで開発側のメリットです。ユーザーにとっては寧ろ、一貫性の欠如や見辛さが伴いデメリットになり得る物でした。サービス認知や目立つと言うメリットについても、スタンダードな角丸アイコンが多かった初期は目立って良かったかもしれませんが、現在のような全てがユニークなアイコンの中では結局目立たなくなってしまい、意味を持たなくなってきていました。Iconは2つのレイヤーとマスクを使って構成されています。8.0以降はレイヤー2つ分の画像(もしくはbackground-color指定)を用意する必要があります。アイコン全体のアウトラインを統一してホーム画面を見やすくしたり、ディスプレイを操作した時にアニメーションが付くようになり、一貫性やUXの向上に繋がりました。注意点ここで注意点が2つあります。Iconのアウトラインやアニメーションについてアプリ開発側で指定することは出来ません。メーカー毎に設定、またはユーザーが任意に設定する為です。8.0以降のバージョンでも機能しない事があります。Launcher」と言うHomeアプリを使ってみて下さい。Launcherをダウンロードした所ちゃんと反映されるようになりました。Iconの機能を確認できるようです。Iconのポイントとして、「2つのレイヤー」と「マスク」があります。Iconを作る際は「背面」と「前面」の2つの要素を用意する必要があります。1つ目のレイヤーである「背面」は画像を用意、もしくはbackground-colorで色を指定します。こちらはアイコンの背景的な要素です。2つ目のレイヤーである「前面」は画像を用意します。こちらはアプリの内容を表す、アイコンの顔となる要素です。下の図で言うと、「背面」は青い格子状の画像で、「前面」は白い歯車の画像です。このように2つのレイヤーを重ねて1つのデザインとして見せます。次に「マスク」についてですが、上記の2つのレイヤーの上からマスクを掛けることで、アイコンのアウトラインを統一する事が出来ます。Square」「Square」「Teardrop」の5種類の形にすることが出来ます。2つのレイヤーに分かれている事、マスクが掛かっている事で、様々なアニメーションが付けられるようになりました。Iconを作る時に必要な画像サイズは下記の通りです。「背面」も「前面」も画像の場合は各サイズ2つずつ作成します。「背面」はbackground-colorで指定することも出来ますので、その場合は「前面」用の画像を各サイズ1つずつで大丈夫です。Iconの全体の大きさは108dp×108dpありますが、ここに72dp×72dpの円や四角などのマスクが掛かる為、それを考慮したデザインを行う必要があります。zoneとされ、切り取られないことが保障されています。zoneの中に収まるように配置して下さい。zoneを考慮せずデザインすると、はみ出した要素が意図しない形で欠けて見える場合があるので注意しましょう。Iconは、使っていてテンションの上がる良いUX機能だと思います。ホーム画面の統一感もさる事ながら、アイコンを操作した動作に合わせてプルプル動くアイコンはとても可愛いです。Iconに対応しているHomeアプリが少ないようなので、デフォルトでどの端末でも見られるようになると良いなと思いました。今よりもっと技術が進めば、より多彩なアウトラインやアニメーションが付くようになりそうで楽しそうですね!今回は基礎的な特徴と作り方についてお話ししましたが、実装方法に関してはGoogle公式のソースコードやテンプレートをご覧ください。ICONSそれではまた!デジマースのコンでした。