Daily UI #010 Social Share

「月曜〜金曜のお昼頃更新」を見事に破りました。
そして来週から無事（？）社会復帰を果たすのでマガジンの説明文変えなきゃな…笑
遅ればせながら、本日のDailyUIもやっていきます。よろしくお願いします。

#010 Social Share
ソーシャルメディアでシェアする用のパーツです。

ページ全体とかじゃなくてパーツとしてのデザインをするのは#005のアプリアイコン以来とかかしら…。

他サービスを見てみた

実は今回のお題、個人的には前々から気になっていたことがありまして。
それは、シェアボタンなのかそのwebサイトの公式アカウントへのリンクなのかわからない問題がたま〜にあること。

どっちなのかわからなくなる問題は下記が絡んでいそう
・シェアボタンもアカウントへのリンクも同じアイコン（レギュレーション上しゃーなし感はある）
・ボタン付近に数字があってもコンテンツのシェア数なのかフォロワー数なのかが読み取れない

どんなSNSへのシェアボタンが設置されているか

ざっくり見るとこんな感じ
・Twitter
・Facebook
・LINE
・ソーシャルシェアではないがメール送信
・Instagram
・Google+
・Pinterest
・LinkedIn

とはいえ全部のボタンをむやみに配置するのではなく、サービスの特性であったりユーザーSNS利用状況を見た上でボタンの配置は考えた方が良い感はある。
あとはそのサービスが持っている公式アカウントと共通させるとかもCS向上には良さそう。。！
（エゴサからユーザーの反応を拾いにいける）

作ってみた

ページに配置したイメージはこちら
https://youtu.be/0PfjqoUjbwU

シェアボタンとして配置するのであれば、下記の要素があればアカウントへのリンクと混合されなさそうかなと思いました。

・パーツの近くに「シェアしよう！」的なラベルをつけちゃう
・シェアするコンテンツの直前または直後にパーツを配置することで「シェアをするためのボタンですよ」をコンテキストとして伝える
・ボタン内に「Tweet」や「Share」などの行動を表すラベルをつける
・シェアボタンから各種シェアボタンが展開される

あとは下記の要素があると「どのサービスでシェアするか」がわかりやすいと思い盛り込んでみました。

・シェアボタンを各SNSごとの色にする
・すでにシェア済みのSNSは異なるデザインにする（ボタンが押されている状態みたいな）