menu

CTRが約300%UPしたオウンドメディアも。SNSシェアボタンの配置・デザインについて

制作

多くのWebサイトに設置されているFacebookやTwitterといったSNSのシェアボタン。ページ全体のレイアウトやコンテンツの内容と比べれば、ユーザーに与える影響はそれほど大きくないようにも思えますが、シェアボタンの設置の仕方やデザインによって効果が大きく変わってくることもあります。

・SNSシェアボタンの思いがけない効果
ある企業のオウンドメディアでは、SNSのシェアボタンのデザイン・設置方法を変えたところ、クリック率が約300%アップしたという事例があります。変更前に使われていたのは「シェアする」というボタン。ユーザーがそれをクリックすると各SNSのアイコンが表示され、コンテンツを共有することができました。

それに対して変更後は、FacebookやTwitter、Lineのシェアボタンを直接ページ上に直接配置。結果的にアクションまでのステップが1つ少なくなったことで、大きな拡散効果を生み出しました。「シェアする」という文言からその後の具体的なアクションをイメージできなかったユーザーを取り込むことができたという点もあるかもしれません。

SNSを利用者の大半はスマートフォンユーザーです。何気ないシェアボタンの設置の仕方1つでも、より簡潔によりスピーディにすることによって、ユーザーの行動は大きく変わってきます。

・SNSシェアボタンのデザインについて
FacebookやTwitterをはじめとした多くのSNSのアイコンは、カラフルで視認性に優れています。デフォルトのアイコンに近いシェアボタンをそのまま使っても問題ないケースも多いのですが、Webサイトのテイストと合わない場合や、変化をつけたい場合などは、Web上で無料公開されているアイコンを利用するのも1つの方法です。

・JUSTVECTOR SOCIAL ICONS
シンプルなデザインで、色を好きなようにカスタマイズできるSNSシェアボタンのパッケージです。

・Picons Social
モノトーンのシルエットタイプのSNSシェアボタンです。画像のクオリティが売りのWebサイトなど、あえてシェアボタンを目立たせたくない場合に使ってみるのもいいかもしれません。

・Isometric 3D Social Icons Set
斜めに置かれたブロック型のSNSシェアボタンです。豊富なサイズが用意されています。

Web制作に関するご依頼、ご相談、お見積はこちら

小野 良勝

小野 良勝 代表取締役

投稿一覧

横浜の制作会社アイティネットの代表取締役。WEB、モバイル、DTP、デジタルサイネージを事業展開。それぞれの特性を活かした メディアミックスを得意とする。iPhoneやiPadを活用したBtoB向けのアプリケーションを開発。モチベーションの高い人や異業種との交流がたまらない。華の47年組。趣味はオートキャンプ

marketing15ターゲットに合わせて使い分けたい、ネイティブアドの掲載メディア&サービス3選

renewal10Web制作/リニューアルの素材を効率的に管理できるオンラインツール

関連記事

  1. web03

    ファイルをコンパクトにして表示速度をUP。JavaScript/…

    スマートフォンやタブレットの普及によってコミュニケーションのスピードが早まるなか、Webページに表示…

  2. フラットデザイン化に使える無料アイコンのダウンロードサイト

    フラットデザイン化に使える無料アイコンのダウンロードサイト

    ページの表示速度アップやレスポンシブ対応、アピールしたい要素を強調できることなど、さまざまなメリット…

  3. web06

    Webサイトのコンテンツをどう見せるか。共有・拡散されやすい3つ…

    Webサイトのコンテンツは内容に加えて「どう見せるか」、「どう届けるか」という視点も非常に大切です。…

  4. GoogleChrome

    上手く使って確認やオペレーションの手間を軽減。Google Ch…

    ソースの修正や検索キーワードのピックアップ・確認など、何かと細かい作業がつきもののWebディレクター…

  5. web03

    Webサイトのプランニングに活用できる「マインドマップ」(前編)…

    ユーザービリティ向上やコンバージョン率改善など、Webサイト制作の目的はさまざまです。目的を実現する…

  6. webdesign01

    日常的に使うPhotoshopだからこそ知っておきたい、初期設定…

    画像のレタッチやリサイズなど、Webディレクター業務でも何かと使う機会の多いPhotoshop。Ph…

  7. web04

    Webサイトのプランニングに活用できる「マインドマップ」(後編)…

    1つの主題から関連するキーワードやイメージを放射状に書き出していくことによって、複雑な概念や情報を分…

  8. ハイクオリティな動画素材を無料でダウンロードできるWebサイト3選

    ハイクオリティな動画素材を無料でダウンロードできるWebサイト3…

    従来のリスティング広告やバナーに対して圧倒的に多くの情報量を伝えられ、商品開発の陰に隠れたストーリー…

PICKUP

  1. SEO対策ほど変化の激しい業種はめずらしいものです
  2. 販売戦略のヒントとして知っておきたい「フレーミング効果」
  3. 【2】Canary
  4. BLEBeacon18
  5. ツールを使って効率的に配色。カラーパレットのWebサービス4選
  1. 【SEO】 「クローラビリティ」を向上させるアプローチ
  2. 定量データでWebサイトの課題を見える化。「Google-アナリティクス」活用法1
  3. Leeo
  4. 次世代のビジネスチャンスを拓くVR&AR活用術 
  5. 企画担当者必見!インバウンドマーケティングの必要性
  6. ホームページリニューアル実現のための企画書&プレゼンのコツ
  7. seo08
  8. director06
  9. ターゲットの行動を理解するヒント「イノベーター理論」
PAGE TOP