Apple ヒューマンインターフェースガイドライン日本語訳 - iOS Extensions編

Apple ヒューマンインターフェースガイドライン日本語訳 - iOS Extensions編

August 10, 2021

本記事は、本記事投稿時点の Human Interface Guidelines - iOS を日本語訳したものです。DeepL で機械翻訳を行った後、誤訳が見受けられた際には修正を加えています。

Human Interface Guidelines - iOS #

https://developer.apple.com/design/human-interface-guidelines/

  1. Overview
  2. App Architecture
  3. User Interaction
  4. System Capabilities
  5. Visual Design
  6. Icons and Images
  7. Bars
  8. Views
  9. Controls
  10. Extensions

Extensions - Custom Keyboards #

https://developer.apple.com/design/human-interface-guidelines/ios/extensions/custom-keyboards/

カスタムキーボード #

標準のキーボードの代わりになるキーボード拡張機能を作成することで、カスタムキーボードを提供できます。設定」でカスタムキーボードを有効にすると、セキュリティで保護されたテキストフィールドや電話番号フィールドの編集時を除き、どのアプリケーションでもテキスト入力に使用できるようになります。ユーザーは、複数のカスタムキーボードを有効にして、いつでも切り替えることができます。

カスタムキーボードが本当に必要かどうかを確認してください。 カスタムキーボードは、斬新なテキスト入力方法や、iOS でサポートされていない言語の入力機能など、独自のキーボード機能をシステム全体に公開したい場合に有効です。アプリ内でのみ使用できるカスタムキーボードを提供したい場合は、代わりにカスタム入力ビューの作成を検討してください。詳しくは、「カスタム入力ビュー」を参照してください。

キーボードを切り替えるための明白で簡単な方法を提供します。 iOS 標準キーボードの Globe キーは、マルチキーボードを有効にしている場合に絵文字キーの代わりとなり、他のキーボードにすばやく切り替えられることを知っています。あなたのキーボードでも、同じように直感的な操作ができることを期待しています。複数のキーボードがインストールされている場合、Globe キーが Emoji キーの代わりになります。

システムが提供するキーボード機能を重複させない。 一部のデバイスでは、カスタムキーボードを使用している場合でも、絵文字/グローブキーとディクテーションキーが自動的にキーボードの下に表示されます。アプリがこれらのキーに影響を与えることはできないので、キーボードでこれらのキーを繰り返すことで混乱を招くことは避けてください。

アプリでキーボードのチュートリアルを提供することを検討します。 人々は標準のキーボードに慣れており、新しいキーボードを学ぶには時間がかかります。キーボード自体ではなく、アプリの中で使用方法を説明することで、オンボーディングのプロセスを容易にします。キーボードを有効にする方法、テキスト入力時にキーボードを有効にする方法、キーボードを使用する方法、標準のキーボードに戻す方法などを説明します。

開発者向けのガイダンスは、「カスタムキーボードの作成」を参照してください。

カスタム入力ビュー #

カスタム入力ビューは、システム全体ではなくアプリ内でのみ、標準キーボードをカスタムキーボードに置き換えます。カスタム入力ビューを使用すると、独自の効率的なデータ入力方法を実現できます。例えば、Numbers では、スプレッドシートの編集中に数値を入力するためのカスタム入力ビューを実装しています。

機能を明確にする。 カスタム入力ビューのコントロールは、アプリの文脈の中で意味をなすものでなければなりません。データ入力は明確で直感的なものでなければならず、追加の説明は必要ありません。

入力中に標準のキーボードクリック音を再生する。 キーボードのクリック音は、ユーザーがキーボードのキーをタップしている間、音によるフィードバックを提供します。入力ビューのカスタムコントロールをタップしても、この音が鳴ります。なお、このサウンドは表示されているカスタム入力ビューでのみ利用可能で、システム全体のサウンドを「設定」>「サウンド」で無効にすることもできます。開発者の方は、UIDevice の playInputClick メソッドを参照してください。

必要に応じて入力アクセサリビューを提供する。 一部のアプリでは、キーボードの上に表示されるカスタム入力アクセサリビューが追加で実装されています。Numbers では、標準的な計算や独自の計算を入力する際に、入力補助ビューが役立ちます。

Extensions - File Providers #

https://developer.apple.com/design/human-interface-guidelines/ios/extensions/file-providers/

ファイル プロバイダ #

ファイルプロバイダーエクステンションは、システム上の他のアプリケーションからアプリケーションのドキュメントをインポート、エクスポート、オープン、または移動するためのカスタムインターフェースを実装します。ファイルプロバイダーエクステンションがロードされると、そのインターフェースはナビゲーションバーを含むモーダルビューで表示されます。

ユーザーがファイルを開いたり、インポートしたりする際に、コンテキストに応じたドキュメントや情報のみを表示します。 ユーザーが拡張機能を使ってドキュメントを開いたりインポートしたりする際には、現在のコンテキストに適したドキュメントのみを表示します。例えば、PDF 編集アプリが拡張機能を読み込む場合、開いたり取り込んだりできる可能性のあるドキュメントとして PDF ファイルのみを表示します。修正日、サイズ、ドキュメントがローカルかリモートかなど、役に立つと思われる他の情報も必ず表示してください。

ドキュメントをエクスポートしたり移動したりする際には、保存先を選択できるようにしてください。 アプリケーションが単一のディレクトリにドキュメントを保存している場合を除き、ユーザーはディレクトリ階層内の特定の目的地に移動することができます。また、新しいサブディレクトリを追加する方法も検討してください。

カスタムナビゲーションバーを提供しない。 拡張機能は、すでにナビゲーションバーがあるモーダルビュー内にロードされます。2 つ目のナビゲーションバーを用意すると、混乱を招き、コンテンツのスペースを奪ってしまいます。

開発者向けのガイダンスとしては、FileProvider を参照してください。

Extensions - Messaging #

https://developer.apple.com/design/human-interface-guidelines/ios/extensions/messaging/

メッセージング #

iMessage アプリとステッカーパックは、友達とコンテンツを共有したり、表現力豊かなコミュニケーションをしたり、コラボレーション体験を共有するためのメッセージング拡張機能です。

iMessage アプリ #

iMessage アプリは、メッセージの会話の中で、インタラクティブな体験を提供します。iMessage アプリを使えば、データやメディアの共有、共有タスクのコラボレーション、ゲームなどが可能です。

直感的なインターフェースをデザインする。 iMessage アプリがテキスト、写真、ビデオなどの静的コンテンツを提供する場合は、ユーザーが閲覧して会話に挿入するアイテムを選ぶのが簡単にできるようにします。多人数参加型のゲームボードや共同でのテイクアウト注文など、インタラクティブなアプリの場合は、その機能が便利で理解しやすいものであることを確認してください。

焦点を絞ったコンテンツを提供する。 わかりやすく、使いやすくするために、各メッセージングエクステンションには 1 つの焦点を当てるべきです。例えば、ステッカーとライドシェアリングの両方を組み合わせたアプリをデザインするのはやめましょう。

iMessage アプリは、通常、2 人以上の人間がテンポよく非公式な会話をするときに使われます。 このような環境をクリエイティブに活用し、コンテンツの共有、編集、追加など、双方向の参加を促します。すべての関係者が一緒にアプリを使用している場合、コンテンツの更新はリアルタイムで行われます。

iOS アプリの面白いコンテンツを紹介する。 iOS アプリケーションのコンテンツをメッセージスペースに表示することで、その機能を拡張することができます。人々が共有したいと思うのはどんな種類の情報なのか、そして活発な会話の中であなたのアプリケーションとどのようにやり取りできるのかを考えてみましょう。

クロップを避けるためにコンテンツを挿入する。 アプリのコンテンツは角の丸いメッセージバブルで表示されるので、重要な情報は角に入れないようにしましょう。

コンパクトビューと拡張ビューを区別する。 アプリは会話の下にコンパクトビューで表示されます。このビューは、アプリを他のアプリと視覚的に区別し、頻繁に使用する機能にアクセスできるようにする必要があります。また、高度な機能にアクセスしたり、より多くのオプションを一度に見たりするために、アプリを拡張ビューで開くこともできます。

テキストの編集は、拡張ビューでのみ可能です。 コンパクトビューは、キーボードとほぼ同じ高さです。ユーザーが編集内容を確認できるように、テキスト入力は拡張ビューでのみ可能にします。

ステッカー #

ステッカーを使うと、メッセージの会話の中で、文字を入力したり絵文字を使ったりせずに、楽しく自分を表現することができます。ステッカーは画像やアニメーションで、メッセージや写真、他のステッカーの上に置いて送信することで、強調したり感情を伝えたりすることができます。

表現力のあるデザイン。 人はステッカーを使って気分や反応を視覚的に伝えます。人の感情を揺さぶるようなステッカーを提供することを心がけましょう。また、会話に新たな広がりを持たせるために、イメージや言葉、フレーズを取り入れることも考えてみましょう。

グローバルに考える。 メッセージングは世界共通のコミュニケーション手段です。国際的に通用するステッカーを目指しましょう。

また、画像には説明的な名前をつけたり、代替となるテキストを表示したりしてください。 画面には表示されませんが、画像名や代替テキストラベルを使用することで、VoiceOver がステッカーを音声で説明することができ、視覚障害のある方でも操作しやすくなります。

アニメーションで躍動感を。 ステッカーは静的な画像でもよいのですが、アニメーション付きのステッカーは、会話に活気を与えるのに最適な方法です。動きが滑らかになるように、フレームレートを高く設定してください。

配置の可能性を試す。 ユーザーは、会話の一部にステッカーを拡大、縮小、回転させて配置することができます。ステッカーの位置やサイズに関わらず、異なる色やイメージでも読みやすいことを確認しましょう。

鮮やかな色と透明度を考慮する。 鮮やかな色は、会話に豊かさと刺激を与えます。透過性があると、メッセージや写真、他のステッカーの上にステッカーを効果的に配置することができます。

ステッカーのサイズ #

メッセージは 3 種類のステッカーサイズに対応しており、それらはグリッドベースのブラウザで表示されます。内容に合わせて最適なサイズを選び、すべてのステッカーをそのサイズで用意しましょう。

  • スモールサイズ 300px × 300px
  • レギュラーサイズ 408px × 408px
  • ラージサイズ 618px × 618px

ステッカーを適切にスケールしてください。 メッセージは、必要に応じて大きなステッカーを縮小しますが、最適な品質とパフォーマンスを得るためには、あらかじめ縮小されたステッカーを提供するのがベストです。

ファイルサイズの制限に注意してください。 効率を上げるために、個々のステッカーは 500KB を超えないようにしてください。Xcode は PNG アニメーションを 24 ビットのパレットで保存するので、予想以上にファイルサイズが大きくなる可能性があります。

ステッカーのフォーマット #

メッセージは、以下のファイル形式のステッカーに対応しています。

フォーマット 推奨 透明度をサポート アニメーションに対応
PNG ● ● 8 ビットの透過
APNG ● ● 8 ビットの透過 ●
GIF ● 単色透明 ●
JPEG

iMessage アプリとステッカーパックのアイコンについて #

iOS アプリケーションと同様に、iMessage アプリとステッカーパックにも、認識できるアプリのアイコンが必要です。

背景はシンプルにして、フォーカスポイントを一つだけにします。 パッと見て注意を引くような、中央に一点集中したアイコンをデザインしましょう。背景はシンプルにして、他のアイコンを邪魔しないようにしましょう。

アイコンの角は四角く。 アイコンの角を丸くするマスクが自動的に適用されます。

異なるサイズのアイコンを用意する。 アイコンは、App Store、メッセージ、通知、設定に表示されます。どのような状況でも、どのようなデバイスでも、アイコンが美しく見えるように、以下のサイズのアイコンを用意してください。

2x @3x
iMessage アプリアイコン 148px × 110px -
134px × 100px -
120px × 90px 180px × 135px
64px × 48px 96px × 72px
54px × 40px 81px × 60px
設定アイコン 58px × 58px 87px × 87px
App Store（iOS 10 以前） 1024px × 1024px

iMessage アプリとステッカーパックのアイコンに適用できる、優れたアプリのアイコンをデザインするためのガイダンスについては、「App Icon」をご覧ください。

iMessage アプリとステッカーパックのアイコンの Photoshop テンプレートをダウンロードするには、「リソース」をご覧ください。

開発者向けガイダンスについては、「メッセージフレームワーク」をご覧ください。

Extensions - Photo Editing #

https://developer.apple.com/design/human-interface-guidelines/ios/extensions/photo-editing/

写真編集 #

写真編集エクステンションを使うと、「写真」アプリ内で写真やビデオにフィルタを適用したり、その他の変更を加えたりすることができます。編集した内容は、常に新しいファイルとして写真アプリに保存され、オリジナルバージョンが安全に保存されます。

写真の編集機能を利用するには、写真が編集モードになっている必要があります。編集モードでは、ツールバーの拡張機能アイコンをタップすると、利用可能な編集機能のアクションメニューが表示されます。拡張機能を選択すると、その拡張機能のインターフェースが、ナビゲーションバーを含むモーダルビューで表示されます。このビューを閉じると、編集を確定して保存するか、編集をキャンセルして写真アプリに戻ります。

編集のキャンセルを確認する。 写真やビデオの編集には時間がかかります。誰かが「キャンセル」ボタンをタップしても、すぐに変更内容を破棄しないでください。本当にキャンセルするのか確認してもらい、キャンセルすると編集内容が失われることを伝えます。まだ編集していない場合は、この確認をする必要はありません。

カスタムナビゲーションバーを用意しない。 拡張機能は、すでにナビゲーションバーがあるモーダルビュー内にロードされます。2 つ目のナビゲーションバーを設けることは、混乱を招き、編集中のコンテンツからスペースを奪うことになります。

編集内容をプレビューできるようにする。 編集内容を確認できなければ、編集を承認することは困難です。拡張機能を閉じて写真アプリに戻る前に、編集結果を確認してもらいましょう。

写真編集エクステンションのアイコンには、アプリのアイコンを使用しましょう。 これにより、その拡張機能が実際にあなたのアプリで提供されていることを確信できます。

開発者向けのガイダンスについては、「アプリ拡張機能での写真編集 プログラミングガイド」を参照してください。

Extensions - Sharing and Actions #

https://developer.apple.com/design/human-interface-guidelines/ios/extensions/sharing-and-actions/

共有とアクション #

共有エクステンションは、現在のコンテキストにある情報をアプリケーションやソーシャルメディアアカウント、その他のサービスと共有する便利な方法を提供します。アクションエクステンションでは、ブックマークの追加、リンクのコピー、画像の保存など、コンテンツに応じたタスクを実行できます。共有エクステンションやアクションエクステンションにアクセスするには、アプリのアクションボタンをタップしてアクティビティビューを表示します。アクティビティビューには、現在のコンテキストに関連するエクステンションのみが表示されます。例えば、ビデオの編集中にテキスト操作のアクションが表示されることはありません。アクティビティビューでは、共有エクステンションがアクションエクステンションの上に表示されます。

単一の集中したタスクを可能にします。 拡張機能はミニアプリケーションではありません。拡張機能は、現在のコンテキストに関連した、狭い範囲のタスクを実行します。

慣れ親しんだインターフェイス。 共有エクステンションでは、システムが提供するコンポジションビューがなじみ深く、システム全体で一貫した共有体験を提供します。可能な限りこれを使用してください。アクションの拡張機能では、アプリの名前を入れるか、認識できるインターフェイスをデザインし、アプリの自然な延長線上に感じられるようにします。

インタラクションを合理化し、制限する。 最高のエクステンションは、人々がわずかなステップでタスクを実行できるようにします。例えば、共有エクステンションは、1 回のタップで画像をソーシャルメディアのアカウントにすぐに投稿することができます。インターフェイスは必要なときだけ提供します。

エクステンションの上にモーダルビューを置かないようにしましょう。 エクステンションは、デフォルトではモーダルビューの中に表示されます。拡張機能の上にアラートが表示されることはあっても、モーダルビューを重ねることは避けましょう。

長時間の操作の進捗状況を表示するには、メインアプリを使用してください。 アクティビティビューは、共有やアクションを開始した直後に表示されます。時間のかかるタスクはバックグラウンドで継続するべきであり、メインアプリはこれらのタスクのステータスを確認する方法を提供する必要があります。その際、通知は使わないようにしましょう。人々は、タスクが完了するたびに通知を見ることを望んでいません。ただし、問題が発生したときに通知するのは構いません。

アクション拡張アイコンにテンプレート画像を使用する。 テンプレート画像は、マスクを使用してアイコンを作成します。白黒で適切な透明度とアンチエイリアスを使用し、ドロップシャドウは付けないでください。テンプレート画像は、70px×70px 程度の大きさで、中央に配置してください。

その他のガイドラインについては、「アクティビティビュー」を参照してください。開発者向けのガイドラインは、「App Extension Programming Guide」の「Share and Action」を参照してください。

ヒント

シェアエクステンションでは、自動的にアプリのアイコンが使用されるため、そのエクステンションが実際に自分のアプリで提供されていることを確信できます。