Daily UI #010「SNS Share」SNSシェア

制作の流れ

SNS共有画面の特徴

SNS共有（Social Network Sharing）とは、ウェブサイトやアプリ内のコンテンツを、ソーシャルメディアプラットフォーム（Facebook、Twitter、Instagramなど）で簡単に共有することを指します。

機能と仕組み

• 共有ボタン
  • クリックすることで、コンテンツを選択したソーシャルメディアプラットフォームに簡単に共有することができる
• シェアダイアログ
  • 共有ボタンをクリックするとシェアダイアログが表示され、共有したいソーシャルメディアプラットフォームを選択し、メッセージやキャプションを入力して共有することができる

利点

• 情報の拡散
  • SNS共有を通じて、ウェブサイトやアプリ内のコンテンツが簡単に多くの人に拡散され、コンテンツの知名度が高まることで新しいユーザーを獲得できる
• 有益情報としての証明
  • コンテンツが多くの人に共有されると、コンテンツの信頼性や魅力が向上
  • SNS上でのシェアやいいねなどの反応が多いと、コンテンツをより価値のあるものと評価する傾向がある
• ユーザーエンゲージメントの促進
  • 自分の興味や好みに合ったコンテンツを見つけ、それを共有することで、そのコンテンツに対するエンゲージメントが促進され、ウェブサイトやアプリへの流入に繋がる

など総じて、SNS共有はコンテンツの拡散や有益情報としての証明、ユーザーエンゲージメントの促進などユーザー情報を含めた認知において利点が多いので、多くのウェブサイトやアプリで採用されている傾向があります。

ペルソナを設定

ペルソナは前回のミュージックアプリを利用している女性ユーザーをターゲットにしました。

SNSシェア画面を調査

ミュージックアプリで前回に引き続き、「Youtube Music」「Spotify」の共有画面とサブスクアプリから「Amazonプライムビデオ」などを調査しました。

ミュージックアプリの2点はソーシャルボタンによる具体的な共有先がはっきりとわかるようになっていますが、Amazonプライムビデオは基本白黒で文言を強調したデザインになっています。

それぞれの違いを考察しました。

デフォルトのアイコンを使っているパターン

• 視覚的な認識
  • デフォルトのSNSアイコンは一般的によく知られていることやユーザーにとって馴染みがあるので共有先のSNSプラットフォームが一目で分かる
• シンプルさとコンパクトさ
  • アイコンは小さくて単純なデザインなので画面上のスペースをコンパクトにできる

文字による共有先を強調したパターン

• 具体的な共有先の表示
  • 文字を使って共有先を表示することで、共有先の名前を明確に理解することができる
• ブランドやスタイルの一貫性
  • 文字による共有先表示は、ウェブサイトやアプリのブランドやデザインに合わせてカスタマイズすることができる

アプリの設定画面でアイコンと文字を組み合わせることによる視覚的な認識の向上やデザイン観点の魅力などデザインコンセプトに合わせた共有デザインにする必要がありそうです。

UIデザインを作成

SNS共有

全体的なデザインコンセプトからアイコンによる共有ボタンで今回は実装しました。

利用者数の多いX（旧Twitter）やFacebookなどのSNSを中心に、ミュージックアプリということで「Bluetooth」への共有をあえて追加しています。

リンクをコピー

参考にしたアプリでは、リンクコピーは他のSNSボタンと同様のボタン形式になっているパターンが多いですが、今回は具体的なリンク内容も含めたコピペ形式にしました。

こちらのメリットとしては、具体的なURLを表示することで、正確なリンクをコピーして他の場所に共有することができる点がありますが、スペースを節約できる利点があるアイコンボタンには少々合わないかもしれないですね。

まとめ

#010「SNS Share」SNSシェアのUIデザインのまとめです。

• デザインコンセプトに合わせた共有ボタンを実装する
• スペースがコンパクトになるメリットを活用したデザインを考える

Daily UI #010 「SNS Share」SNSシェア プロトタイプはこちら ↓ ↓

共有画面はアイコン共有ボタンによる似通った見た目のものが多いイメージがありましたが、アマプラのように文字を使った独自性のデザインを持ったものがあることを知れたのは、今回の学びになりました。

最後までご覧いただきありがとうございました！