Expression Design でアプリのアイコンを作ろう！ #wpdev_jp #win8dev_jp

昨日のCLR/Hで「アプリをエイッと作ってみたもののアイコンで困りますよね」とお話していたので私の方法を紹介します。ガイドラインやデザインについては触れません。

Expression Designとは

• 透過PNGが扱える
• ベクタが扱える
• 無料（Microsoft Expressionが終了へ、「Expression Web」「Expression Design」は無償化 - 窓の杜）

ダウンロード

日本語版がとてもわかりにくい感じに配布されているのでメモ。

• Download Microsoft Expression Design 4 (Free Version) from Official Microsoft Download Center

上記ページの[Details]を展開後に[Japanese]をクリック。ファイル名は[Design_Trial_ja.exe]です。

アイコン作成

1. 一番下のレイヤーにアクセントカラーの下地を置く
   • 作業用と後述の注意のため。
2. 上のレイヤーにアイコンを作る
   • レイヤーは適宜わけてください。
3. 一番下の下地レイヤーを目玉マークで非表示にする
   • 背景を非表示にしないとアクセントカラーが反映されない残念タイルになります。ブランドカラーがある場合以外は背景無しで作成しましょう。
4. [ファイル]メニューの[エクスポート]をクリック
5. [ドキュメント全体]を選択してサイズを調節してエクスポート
   • 決められたサイズがいくつかあるので確認してください。
   • 忘れやすいですが、画面上でアプリ名の表示とマッチしているか確認してください。たまにアイコンデザインに名前がかぶってなんだかわからないアプリを見かけます。

Windows Phoneアプリの場合の注意

Windows Phoneアプリの場合は、ストアに提出する画像には注意が必要です。先ほどのアイコン作成手順でアクセントカラーの下地を置いた意味がココにあります。ストアに提出する画像は、下地レイヤーを表示状態でエクスポートしてください。アプリ内で使用するアイコンと同じものを提出するとストア上ではアクセントカラーの背景がないので下記のようになります。

下地レイヤーを表示してエクスポートすると下記の通り。

縦横比率を変える場合

スプラッシュスクリーン用などで縦横比率を変える場合は、[ファイル]メニューの[アートボード サイズ]から変更します。アートボードサイズとは下記の通り。

アートボードのサイズとシェイプを変更するには、次の 2 つの方法があります。
•アートボードのサイズのみを変更し、ページ上のオブジェクトを変更しない場合は、[アートボード サイズ] を使用します。
•ページ上のすべてのオブジェクトの大きさを変更するには、[ドキュメント サイズ] を使用します。

ドキュメント サイズの変更

つまり、縦横サイズを変える時に[ドキュメント サイズ]を変更するとデザインの比率も変更されてしまいます。[アートボード サイズ]を変更しましょう。