ソーシャルメディアは、あらゆるWebサイトの人気を左右する重要な要素となっています。ソーシャルプルーフ （社会的証明）と呼ばれる心理的現象を利用して、ソーシャルメディアでのシェア行動は、人々がコンテンツを閲覧するか、または自分たちでシェアするかどうかに大きな影響を与えます。そのため、ソーシャルメディアボタンはインターネット上のあらゆるページに視覚的に表示されているのです。
ここでは「これらのボタンのデザインには、何が必要となるのか」という疑問を投げかけることになります。これらのボタンがそれぞれの機能に合わせた方法で表示されることは、偶然ではありません。皆さんは、ページの位置や配置、サイズ、色などの要素は、ユーザーにコンテンツをシェアさせることを促すことに影響を与えると考えることでしょう。デザイナーたちは、これらのボタンを作成する際に無計画であるわけではありません。ボタンのデザインの裏には、全体的な基盤となる考えが存在するのです。
それは非常に効果的でありながらも、同時に極めてシンプルなものとなっています。もし皆さんのコンテンツをソーシャルメディア上で広くシェアされたいのであれば、以下の手順に従っていただければと思います。
F字型配置を意識する
大事なことをまず最初に行いましょう。実際のボタンのデザインを心配する前に、ボタンをページ上のどこに配置するかを考えるほうが良いでしょう。
ユーザー行動に関する、多くの支持を集めている研究によると、サイト訪問者は主に、F字型のパターンに従ってページのコンテンツを理解しています。このパターンは、画面の左上の隅にある目の動きから始まり、そこから目は右へ水平方向に移動します。そして、サイト訪問者の視線はページの読み始めた地点から少し下のほうへと移動します。しばらくすると、その視線は再び右へ水平方向に移動しますが、最初の水平方向への読み取り動作よりも短い距離となり、これは最後にもう１度ページの左側へと目が移動する前に行われます。
ソーシャルメディアボタンが、通常あらゆるページに表示されていることに注目してみましょう。ボタンはページの左上の部分に表示されていることがわかります。これは決して偶然ではありません。この場所にボタンを設置しているデザイナーは、人々がどのようにWebサイトを閲覧しているかについて、科学が証明していることに従っているのです。もしこの場所にボタンを設置しないとしたら、人々はその存在にさえも気がつかない可能性があるので、結果としてサイトに悪影響を与えていることになります。
そして、大部分の人がページ全体を注意深く読むのではなく、内容にざっと目を通していることを考慮すると、このように結論付けることは極めて理に適っています。
これを示した素晴らしい例が、Wall Street Journal のサイトのあるページにあります。Appleがストリーミング音楽配信サービスの提供開始を決定したことに関する記事において、読者が予期している場所、つまりページの左上、及び一番目立っている見出しのすぐそばに、ソーシャルメディアボタンが配置されているということに注目してみましょう。F字型のパターンに従って、このページを初めて閲覧している人はソーシャルシェアボタンにまず気がつき、そして水平方向に移動して見出しの内容を理解するのです。この記事が執筆された当時は、2,800以上のFacebookの「いいね！」と、約1,200のツイートを獲得しています。
形状が明確でわかりやすい
人々はページにざっと目を通しながら読み進めるため、ページ上のコンテンツが人々の目に留まるように目立たせることが、常に最良の方法です。訪問者によるページのシェア率を向上させるには、ボタンが認識されやすいような、必要最小限のシンプルな形でデザインを行う必要があります。
長方形や円形、またはこの２つを組み合わせたような、基本的な幾何学図形を取り入れることで、ユーザーはそれが何であるか、そしてそれによってどのような動作を促されているかを理解することができます。さらに、多くのサイトがこれらの図形をソーシャルメディアボタンに使用しており、この手法を取り入れることでUXに悪影響を与える心配はありません。
とりわけ、ユーザーは自分がどのソーシャルメディアプラットフォームでシェアしているのか、そして何人のユーザーがすでに同じコンテンツをシェアしているのかを理解する必要があります。この目的を達成するためには、各プラットフォームのシンボル、またはロゴが、目立つ配色と共に明確にユーザーに視覚化されて提示される必要があります。これはつまり、以下のことを意味しています。
・Facebookのボタンは「#3C5B97」であり、かつ企業名を表す「F」がはっきりと表示される必要があります。
・Twitterのボタンは「#55ACEE 」であり、かつ有名な鳥のロゴを表示する必要があります。
・LinkedInのボタンは「#008CC9」であり、かつ「in」のロゴが表示される必要があります。
・Pinterestのロゴは「#BD081C」であり、かつ渦を巻いたようなPのロゴを表示する必要があります。
また、ボタンデザインで最良の実践方法であるこれらのデザインから派生した、いわゆるカスタムボタンをデザインすることは避けたほうが良いでしょう。クライアントに大きな印象を与えるため、またはデザイナーとして自分自身を目立たせるために、サイトの要素をより面白いものにしようとする試みは常になされていますが、上記に述べた理由から、このような試みは実際には効果がありません。最悪の場合、ボタンが過剰にカスタマイズされているために、ユーザーがこれらのボタンに対してどうすればよいのかわからなくなってしまいます。
このような最良の実践方法を見事に行っているページのお手本となるような例として、コンバージョン率に関するアドバイスを記載したDaily Eggのブログを見てみましょう。優れたパフォーマンスを果たしているランディングページに対する逆行分析に関する記事において、ソーシャルメディアボタンの配置や形、色に注目してみましょう。ボタンはページの左上に表示されており、形は長方形で、各ソーシャルメディアプラットフォームのトレードマークとなっている色を使用しています。
スクロール時に固定されている
ユーザーがページをスクロールするのに合わせて付いて回るような、固定されたナビゲーションのように、ソーシャルメディアのシェアボタンバーもこれと同じようにする必要があります。人々に対して、皆さんのコンテンツがシェアできることを絶えず知らせたいと思いますよね。スクロール固定のボタンを取り入れることで、ユーザーはボタンを探すためにわざわざ画面をスクロールする必要がないため、容易にコンテンツをシェアすることができます。
このようなボタンを実際に取り入れているサイトは、広告に関するアドバイスや最良の実践方法を提供しているハブサイトであるMarketing Profsが挙げられます。このサイトの記事は、サイト訪問者がページをスクロールしても常に画面の左上に表示される、固定されたソーシャルメディアボタンが特徴となっています。
ソーシャルメディアでのシェアは重要
ソーシャルメディアでのシェアは、サイトの人気を左右する非常に重要な要素であることは周知の事実です。より多くの人が皆さんのコンテンツをシェアすればするほど、より多くの他のサイト訪問者がそのコンテンツを見つけて、愛読者、または常連客になる可能性が高まります。この理由により、シェア可能なコンテンツを掲載している全てのページにおいて、ソーシャルメディアのボタンを容易に利用可能にし、かつ気づきやすいものにすることが必要となるのです。
ユーザーにとって、自分のお気に入りで、愛着があるコンテンツのシェアを困難にしていることは何でしょうか？ 結局のところ、ソーシャルメディアでより広くシェアしてもらうことは、皆さんがデザインしたサイトの検索エンジンにおける順位を上げることにつながるのです。
