はじめに
先日、個人開発で作った Alexa Skill をリリースしました！
このときサービスのアイコンを生成AIを使って作成しました。
Alexa Skillに限らず、サービスのアイコン作成に応用できるので、手順を残しておきます。
ちなみに、Alexa Skillのアイコン作成に関しては、Alexa Icon Builderという公式ツールもあります。
このツールを利用すれば定型のアイコンを作れるのですが、定型のデザインでは物足りないという方には今回の方法がおすすめです。
ツール
使ったツールはこれだけです。
- MS Edge Image Creator
- Windowsペイント3D
方法
デザイン作成
まずは、Image Creatorを使ってアイコン画像をデザインします。
上図のように適当に入力しても、それっぽいものを作ってくれます！
Alexa Skillアイコンは他のサービスとは異なり丸形のアイコンになります。
丸形を意識するなら、プロンプトにも「円形」という言葉を含めると円形のロゴを作ってくれます。
画像の調整
Image Creatorで気に入ったアイコンを作成できたら、ダウンロードしておきましょう。
ダウンロードするといくつか気づくポイントがあります。
- ダウンロードされた画像のフォーマットはJPEG
- 作成した画像の背景は完全な白ではない
- 画像の左下の隅に黒い染みのような加工が含まれる
また、Alexa Skillアイコンは以下のフォーマットが決まっています。
- 円形のデザイン
- 108x108 (small icon)
- 512x512 (large icon)
ペイント3Dを使って、作成した画像を修正しアイコンのフォーマットに合わせていきます。
アイコンの切り抜き
まずは、512x512のlarge iconを作成していきます。
ペイント3Dを開き、「新規作成」をクリックします。
トップに並んでいるメニューから「キャンバス」を選択します。
ここが大事！
右サイドのメニューにキャンバスのサイズが表示されるので、ここでサイズを512x512にしておきます。
「縦横比を固定する」のチェックボックスを解除しないと、幅と高さが連動してしまうので、チェックは外しておきましょう。
作成した画像を貼り付けます。
このときキャンバスサイズが画像サイズに合わせて変わってしまうので、512x512に戻しておきます。
今回は画像が正方形でしたが、長方形なら長辺を512にして512x512の枠に収まるようにします。
上部のメニューにある「マジック選択」を使って、アイコンのみを切り抜きます。
「マジック選択」を起動すると、切り抜き部分を選択できるようになるので、可能な限り余白を削るように選択範囲を狭めます。
「次へ」進むと、自動で背景を認識して削除してくれます。
アイコン画像の一部も削除対象になってしまうので、「追加」の鉛筆アイコンをクリック、削除したくない領域に鉛筆で書き込むと、上手く調整できます。
これでアイコンのみをきれいに切り抜きできるようになるので、アイコン部分をコピーしておきます。
Alexa Skill Iconフォーマットに合わせる
次に、新しいキャンバスを新規作成します。
ここでもキャンバスサイズを512x512に調整しておきます。
また、キャンバスは「透明なキャンバス」を有効にしておきます。
Alexa Skill Iconは円形ですので、2D図形の円を挿入しておきます。
ここは手作業になりますが、円形図形がキャンバスエリア目いっぱいに広がるようにマウスで調整します。
このキャンバス上で「貼り付け」を行います。
先ほどのアイコン画像の切り抜きが、クリップボードに保存されているはずです。
また、コピー元とコピー先のキャンバスサイズを同じにしているので、ここでペーストすれば、アイコンがキャンバス中央に位置させることができます。
左右対称のアイコンならこれでいいのですが、今回作成したアイコンは非対称ですので、少し調整しました。
あとは、この画像をPNGで保存すれば作成完了です。
Small Iconの方はこの画像をリサイズすることで作れます。
アイコン画像の適用
最後に、作成したアイコンの適用方法も記載しておきます。
作成したアイコンを以下のパスに配置。
.
├── LICENSE.txt
├── README.md
├── ask-resources.json
├── infrastructure
├── lambda
└── skill-package
├── assets
│ └── images
│ ├── ja-JP_largeIcon.png
│ └── ja-JP_smallIcon.png
├── interactionModels
│ └── custom
│ └── ja-JP.json
└── skill.json
skill.jsonにアイコンへのパスを記載。
{
"manifest": {
"publishingInformation": {
"locales": {
"ja-JP": {
"summary": "",
"examplePhrases": [],
"name": "hello",
"description": "sample skill",
"keywords": [],
"smallIconUri": "file://assets/images/ja-JP_smallIcon.png",
"largeIconUri": "file://assets/images/ja-JP_largeIcon.png"
}
},
"isAvailableWorldwide": false,
"testingInstructions": "Sample Testing Instructions.",
"category": "KNOWLEDGE_AND_TRIVIA",
"distributionCountries": [
"JP"
]
},
"apis": {
"custom": {
"endpoint": {
"uri": "<lambda function ARN>"
}
}
},
"manifestVersion": "1.0"
}
}
ask deployコマンドでスキルをデプロイするば、アイコンが適用されます。
デプロイは成功しますが、以下のエラーが出ます。
$ ask deploy
Deploy configuration loaded from ask-resources.json
Deploy project for profile [default]
...
==================== Deploy Skill Infrastructure ====================
✔ Deploy Alexa skill infrastructure for region "default"
[Error]: [object Object]
元々、Alexa Skillのアイコンはパブリックアクセス可能なストレージに配置して、そのパスをskill.jsonに記載する想定らしく、ローカルに置いた画像ファイルへのパスだとエラーが出るようです。
エラーが出るのが嫌な場合は、最初だけask deployでデプロイするか、Alexa Developerコンソールから手動でデプロイします。
その後でaskコマンドでskillの情報を取得すれば、デプロイ済みのアイコンへのパスが記載されています。
それをskill.jsonに書き込めばエラーは出なくなります。
ask smapi get-skill-manifest -s <skill ID> skill.json