ストーリーズへのシェア

コンテンツをFacebookストーリーとしてシェアします。

ストーリーズへのシェア機能を使用すると、コンテンツをFacebookストーリーとしてシェアすることをアプリのユーザーに許可できます。

概要

Androidの暗黙的インテントとiOSのカスタムURLスキームを使用して、あなたのアプリから写真、動画、スタンプをFacebookアプリに渡すことができます。Facebookアプリはそのコンテンツを受け取ってストーリーズコンポーザーに読み込み、ユーザーが自分のFacebookストーリーで公開できるようにします。

Facebookアプリのストーリーズコンポーザーは、バックグラウンドレイヤーとスタンプレイヤーで構成されています。

バックグラウンドレイヤー

バックグラウンドレイヤーはスクリーンを埋めるもので、写真、動画、ソリッドカラーやグラデーションカラーでカスタマイズできます。

スタンプレイヤー

スタンプレイヤーの使用は任意で、画像とテキストの両方またはいずれかを挿入できます。ユーザーはストーリーズコンポーザー内でスタンプレイヤーをさらにカスタマイズすることができます。

利用を開始する

ストーリーズへのシェアを実装する前に、Facebookプラットフォーム利用規約と開発者ポリシーをお読みください。

デザインの原則

ユーザーがシェアしたくなるデザインにフォーカスする

簡潔でユーザーの期待に沿うデザインを心がけます。タップ可能(操作可能)に見える視覚的エレメントが競合しないようにする必要があります。コンテンツは、透過的で見たままのエクスペリエンスを提供するものにしてください。

ストーリーのエクスペリエンスを重視する

視覚的スタイルを作成する際は、ストーリーの全体的なエクスペリエンスを考慮します。ユーザーがストーリーを見る時間は約5秒に過ぎません。最も重要な情報を前面に押し出し、ユーザーの注意が散漫にならないようにします。

明確性を追求する

シンプルなデザインを心がけてください。ストーリーで重要なのは、ユーザーがシェアしたくなるメディアにすることです。コンテンツは最小限に抑え、適切な方法で視覚的エレメントを補完するようにします。

デザインガイドライン

キャンバス

Facebookの標準のストーリーのキャンバス(こちらにあります)からプロジェクトを始めることができます。

安全な領域

小型のデバイス(AndroidまたはiPhone 8以前のデバイス)のユーザーを考慮します。ストーリーの最上部と最下部は、FacebookストーリーズUI用に空けておいてください。

レイヤーエレメント

インタラクティブなデザインより情報を伝えるデザインを心がけてください。シンプルな視覚エクスペリエンスをデザインすると、ユーザーはシェアされたメディアそのものに集中できます。

コールトゥアクション(CTA)ボタンに類似したエレメントや、ユーザーが操作できないその他のUIコンポーネントは使用しないでください。

コンテキスト

ユーザーがストーリーの表示中に何に注意を向けているかを考慮することが重要です。追加コンテンツは最小限に抑えます。コンテンツはコンテキストに合ったものを使用し、シェアされたメディアを補完するようにします。

不必要なコンテキストや不正確なコンテキストは追加しないでください。たとえば、静止画像を表示しているときの「動画を再生中」などです。

アクセシビリティ: 色とコントラスト

シェアされたメディアに集中できるように、背景は簡潔にして、最小限に抑えます。

ウェブコンテンツアクセシビリティガイドラインでは、色のコントラストについて、テキストでは4.5:1、見出しまたは画像では3:1が推奨されています。

すべてのデザインは、ウェブコンテンツアクセシビリティガイドラインに準拠する必要があります。

アクセシビリティ: テキスト

色のコントラストの原則を適切に使用して、背景からテキストを際立たせます。

すべてのデザインは、ウェブコンテンツアクセシビリティガイドラインに準拠する必要があります。

デザインシステム

自社のブランドをデザインに取り入れましょう。Facebookのブランドに似たエレメントや色は避け、デザインを明確に差別化してください。

その他の推奨事項

コンテナ

可能であればコンテナの角は丸くしてください。そうすると、統一感があり魅力的なデザインになります。

実装

Instagramストーリーズへのシェア

アプリのユーザーがコンテンツをInstagramストーリーとしてシェアすることも許可できます。そのための方法については、Instagramのストーリーズへのシェアに関するドキュメントをご覧ください。