APL用のAlexa Design System ツールキットを使用して、マルチモーダル体験をデザインする
※このブログは、 Anna Van Brookhoven のブログをToshimi Hatanakaが日本向けに翻訳し加筆修正したものです。
本日は、Alexaデザインガイドにも掲載れている２つのAlexa Deisgn System ツールキットをご紹介します。
Alexa Presentation Language（APL）を使用すると、Alexaスキルのマルチモーダルな体験を素早く、かつデザインに一貫性を持たせることができるようになります。これらのツールキットは、Adobe XDやSketchなどの無限のデザインキャンバスプログラム 用に設計されています。ツールキットには、コードベースのAlexaスタイルとレイアウトパ ッケージのライブラリが含まれています。これらのデザイン要素、ツール、タイポグラフィ は、さまざまな Viewport プロファイルに適応するため、あなたのプロダクトが最終的にど のような見た目になるかを事前に体感することができます。
これらのツールキットは、APL エディタを使用して、スキルに実装可能な一貫性のある高品質なビジュアルアセットのデザインを支援します。
Alexaは音声ファーストのテクノロジーですが、スキルに視覚的な補助機能を追加することで、ユーザーの体験をリッチにすることができます。APLを使用することで、独自のブランディング、カラー、スタイリングなどを追加できる補完的なビジュアルを作成できます。APLを使用してスキルにビジュアル体験を追加することにまだ慣れていない場合は、トレーニングコ ース「マルチモーダルなAlexaスキルの作り方」をご覧ください。
リストアイテム、アイコン、カラーなどのスタイルとコンポーネントが含まれています。このプラグインには、ライブラリからのコンポーネントとスタイルで構築された複数の ViewportをサポートするAlexaレスポンシブレイアウトが含まれています。
補足: Sketchのライブラリは自動的に更新されるため、Amazonの最新バージョンを保持することができます。
カラー、文字スタイル、コンポーネントなどのアセットが１つのソースファイルに含まれており、レイアウト全体で一貫性のあるデザインを素早く構築できます。シンボルとスタイルは全てコードベースのAlexaレスポンシブレイアウトです。
ツールキットには、Amazonの書体であるAmazon Ember DisplayとBookerlyも含まれています。これらのフォントをダウンロードしてデザインに使用することで、他のAlexaスキルやサービスとデバイス間で一貫したユーザーエクスペリエンスを実現できます。これらの書体は、SketchとAdobe XDのどちらでも使用できます。
APLを使用したスキルのデザインや構築を行ったことがない方は、トレーニングコース「マルチモーダルなAlexaスキルの作り方」をご覧ください。 スキルのデザインを始めるには、 Adobe XD または Sketch の最新バージョンをダウンロードする必要があります。その後、関連するツールキットについて以下の指示に従ってください。
Alexa Design System LibraryコンポーネントをSketchキャンバスに追加する例
- Sketchの最新バージョン（バージョン58以上）をダウンロードします。
- Alexa Design System Sketchプラグインをインストールします。 このライブラリは自 動的に更新されるので、常に最新のAPLビジュアルアセットを利用できます。
- Alexa Design System SketchテンプレートとAmazon書体ファイルをダウンロードしま す。
- レイアウトファイルからアートボードをコピー＆ペーストするか、独自のカスタムテ ンプレートとして保存します。
補足: ファイルタイプ間の競合を避けるために、レイアウトは常に新しいライブラリではな くテンプレートとして保存してください。
Alexa Design Systemライブラリを使用したAdobe XDで利用できるテンプレートの例
- Adobe XDの最新バージョンをダウンロードします。
- Alexa Design SystemのAdobe XDテンプレートとAmazon書体ファイルをダウンロードします。
- .xd ライブラリファイルを開き、クラウドドキュメントとして保存します。
- XDファイルを新規作成し、左側のAssetsパネルを開き、Link Assets（+アイコン）を選択してAlexa-Design-System.xdファイルを選択します。
補足: 新規に作成したAdobe XDファイルにライブラリアセットを使用する場合もこの手順に従ってください。
ユーザーにとって魅力的なマルチモーダルな体験のデザインを始める準備はできましたか？
より詳しい情報は、Alexaエクスペリエンスの視覚デザイン をご覧ください。みなさまが作るスキルを楽しみにしております。