Messaging
hr.icon
iMessageアプリとSticker packsは、友達とコンテンツを共有したり、表現力豊かなコミュニケーションをしたり、コラボレーション体験を共有したりするためのメッセージング拡張機能です。
iMessage Apps
iMessageアプリは、メッセージの会話の中で、インタラクティブな体験を提供します。
iMessageアプリでは、データやメディアの共有、共有タスクのコラボレーション、ゲームなどが可能です。
https://gyazo.com/74b163a47d58b71919198ad0f97fd217https://gyazo.com/24ddaab90e1dee37e928edd129383284
直感的なインターフェイスをデザインする。
iMessageアプリがテキスト、写真、ビデオなどの静的なコンテンツを提供する場合は、人々が簡単に閲覧し、会話に挿入するアイテムを選択できるようにします。
多人数のゲームボードや共同でのテイクアウト注文など、インタラクティブなアプリの場合は、その機能が便利でわかりやすいものであることを確認してください。
焦点を絞ったコンテンツを提供する。
わかりやすく、使いやすくするために、各メッセージングエクステンションには1つの焦点を当てるべきです。
例えば、ステッカーとライドシェアリングの両方を組み合わせたアプリをデザインするのはやめましょう。
iMessageアプリは、通常、2人以上の人間がテンポよく非公式な会話をするときに使われます。
このような環境をクリエイティブに活用し、コンテンツの共有、編集、追加など、双方向の参加を促します。
すべての関係者が一緒にアプリを使用している場合、コンテンツの更新はリアルタイムで行われます。
iOSアプリの面白いコンテンツを紹介する。
iOSアプリケーションのコンテンツをメッセージスペースに表示することで、その機能を拡張することができます。
人々が共有したいと思うのはどんな種類の情報なのか、そして活発な会話の中であなたのアプリケーションとどのようにやり取りできるのかを考えてみましょう。
クロップを避けるためにコンテンツを挿入する。
アプリのコンテンツは角の丸いメッセージバブルで表示されるので、重要な情報は角に入れないようにしましょう。
コンパクトビューと拡張ビューを区別する。
アプリは会話の下にコンパクトビューで表示されます。
このビューは、アプリを他のアプリと視覚的に区別し、頻繁に使用する機能にアクセスできるようにする必要があります。
また、高度な機能にアクセスしたり、より多くのオプションを一度に見たりするために、アプリを拡張ビューで開くこともできます。
テキストの編集は、拡張ビューでのみ可能です。
コンパクトビューは、キーボードとほぼ同じ高さです。ユーザーが編集内容を確認できるように、テキスト入力は拡張ビューでのみ可能にします。
Stickers
ステッカーを使うと、メッセージの会話の中で、文字を入力したり絵文字を使ったりせずに、楽しく自分を表現することができます。
ステッカーは画像やアニメーションで、メッセージや写真、他のステッカーの上に置いて送信すると、強調したり感情を伝えたりすることができます。
https://gyazo.com/2152414da40fd7198203b374c9f289c4https://gyazo.com/f206372de2057fb5936a79d82d81d41f
表現力のあるデザイン。
人は気分や反応を視覚的に伝えるためにステッカーを使います。
人の感情を揺さぶるようなステッカーを提供することを心がけましょう。
また、会話に新たな広がりを持たせるために、イメージや言葉、フレーズを取り入れることも検討しましょう。
グローバルに考える。
メッセージングは世界共通のコミュニケーション手段です。
国際的に通用するステッカーを目指しましょう。
画像には説明的な名前をつけたり、代替となるテキストを表示したりしてください。
画面には表示されませんが、画像名や代替テキストラベルを使用することで、VoiceOverがステッカーを音声で説明することができ、視覚障害のある方でも操作しやすくなります。
アニメーションで躍動感を。
ステッカーは静的な画像でもよいのですが、アニメーション付きのステッカーは、会話に活気を与えるのに最適な方法です。
動きが滑らかになるように、フレームレートを高く設定してください。
配置の可能性を試す。
ユーザーは、会話の一部にステッカーを拡大、縮小、回転させて配置することができます。
ステッカーの位置やサイズに関わらず、異なる色やイメージでも読みやすいことを確認しましょう。
鮮やかな色と透明度を考慮する。
鮮やかな色は、会話に豊かさと刺激を与えます。
透過性があると、メッセージや写真、他のステッカーの上にステッカーを効果的に配置することができます。
Sticker Sizes
メッセージは3種類のステッカーサイズに対応しており、それらはグリッドベースのブラウザで表示されます。
コンテンツに合わせて最適なサイズを選び、すべてのステッカーをそのサイズで用意してください。
https://gyazo.com/bec1fe02cf11257e98630319c89378b3
https://gyazo.com/d73f2e43234c1553136df4cc247b1f60
https://gyazo.com/0d8e6012b66b9930f5e033be7453867c
ステッカーの大きさを適切に調整する。
メッセージは、必要に応じて大きなステッカーを縮小しますが、最適な品質とパフォーマンスのためには、あらかじめ縮小されたステッカーを提供するのがベストです。
ファイルサイズの制限にも注意してください。
効率化のため、1枚のステッカーは500KBを超えないようにしてください。
XcodeはPNGアニメーションを24ビットのパレットで保存するため、ファイルサイズが予想以上に大きくなる可能性があります。
Sticker Formats
メッセージは、以下のファイル形式のステッカーに対応しています。
table: Sticker Formats
Format Recommended Supports transparency Supports animation
PNG ● ● 8-bit transparency
APNG ● ● 8-bit transparency ●
GIF ● single color transparency ●
JPEG
iMessage App and Sticker Pack Icons
iOSアプリケーションと同様に、iMessageアプリとステッカーパックにも認識できるアプリのアイコンが必要です。
背景はシンプルにして、1つのフォーカスポイントを設けます。
パッと見て注意を引くような、中央に一点集中したアイコンをデザインしましょう。
背景はシンプルにして、他のアイコンを邪魔しないようにしましょう。
アイコンの角は四角く。
アイコンの角を丸くするマスクが自動的に適用されます。
異なるサイズのアイコンを用意する。
アイコンは、App Store、メッセージ、通知、設定に表示されます。
どのような状況でも、どのようなデバイスでも、アイコンが美しく見えるようにするために、以下のサイズのアイコンのバリエーションを提供できます。
table: iMessage App and Sticker Pack Icons
@2x @3x
iMessage app icons 148px × 110px —
134px × 100px —
120px × 90px 180px × 135px
64px × 48px 96px × 72px
54px × 40px 81px × 60px
Settings icons 58px × 58px 87px × 87px
App Store (prior to iOS 10) 1024px × 1024px
iMessageアプリやステッカーパックのアイコンにも応用できる、優れたアプリのアイコンをデザインするためのガイダンスについては、App Iconをご覧ください。 iMessageアプリとステッカーパックのアイコンのPhotoshopテンプレートをダウンロードするには、Resourcesをご覧ください。