シェアされるシェアボタンとは。BLOGコーディングシェアされるシェアボタンとは。2018.03.09シェアされるシェアボタンとは。CSSだけで作られた12のオリジナルレスポンシブシェアボタン【無料ダウンロード】Advertisementソーシャルメディアでのシェアは、そのサイトの人気を左右する非常に重要な要素であることは多くの方が認識していることだと思います。多くのWEBページにはシェアボタンが設置されているわけですが、シェアボタンのデザイン・配置位置の違いで、クリック率(シェア率)が変化することを意識している方はそう多くはないのではないでしょうか。なんとなくサイトのデザインにマッチしているからという理由でシェアボタンを設置しているなら、もしかすると、この記事にある通りに配置やデザインを工夫しただで、シェア数がグンとUPするかもしれません。今回は、多くのユーザーにシェアされやすいボタンのデザイン・配置について解説いたします。CSSだけで作られた12例のシェアボタンのデザインソースも併せて提供させていただきます。シェアボタンはファーストビュー内かつ、記事タイトルのすぐ近くにまず、最も重要なシェアボタンを設置する位置についてですが、「できるだけファーストビューの中で、尚且つ、記事タイトルの付近、もしくはアイキャッチ画像の付近」に設置しましょう。この位置が良いかというと、人はページの左上(ファーストビュー内に記事タイトルがある場合はその位置)を始点に、Fの法則に乗っ取って、ページを流し見るためです。ユーザーは、ページの隅から隅まで熟読することはほとんどなく、特に最初の接触の時(ページに初めて訪れた時)は、重要であろうポイントを流し読むだけということが多くあります。それでも多くの場合、ページ内で最も重要な記事タイトルや、(画像の内容にもよりますが)アイキャッチ画像には視線が集まりやすく、この付近にシェアボタンを設置するだけで、その存在を認識してもらいやすくなるのです。ユーザーによっては、「とりあえず【はてぶ】しておいて、後で読むか」という人もいますので、ボタンの存在に気が付いてもらえるだけで、シェア率はぐんと上がります。それぞれのSNSブランド”らしさ”を壊さない例えばですが、ただ【シェア】と書かれただけのボタンをクリックしてみようという冒険者はそう多くはありませんよね。どこのSNSのシェアボタンなのかが一目でわからなければ、誰も怖くてボタンをクリックできません。インターネットの世界に慣れ親しんだ私でも、どこにリンクされているのかわからないボタンを気軽にクリックしたりはできませんから。このような潜在的に感じる恐怖は多くのユーザーに存在します。WEB担当者やデザイナーは、こういった潜在的な恐怖をユーザーに与えてはいけません。シェアボタンのデザインで最も大切なことは、そのSNSブランド”らしさ”を壊さないことです。Twitterであればさわやかな水色、LINEであれば鮮やかなグリーンというように、そのブランドを象徴する色は特に目立つようにするべきです。次に、ロゴマークをボタン内に掲載することで、どこのSNSのシェアボタンなのかを明確にします。色でなんとなく、「Facebookのいいねだろうな」と感じさせ、ロゴマークでそれを確かにしてあげるイメージです。ボタンの大きさや周辺の余白も重要です。したページであれば、大きめの余白の中に小さめのボタンを横並びさせることでシェアボタンの存在を目立たせられるかもしれませんが、この辺りは、それぞれのページのデザインで変わってくるので、自社のスタッフ数人に意見を聞いて、どれくらいの大きさと余白であれば、シェアボタンが目立つか、また記事そのものに悪影響がないかを話し合うことが重要です。シェアボタンばかりが目立ち、記事そのものがユーザーの頭に入らないようであれば、意味がありませんからね。これは2013年ごろのデータになるのですが、「オリジナルデザインのシェアボタンと、公式デザインのシェアボタンではどちらがよりクリックされるのだろうか」という簡単な実験を行ったことがあります。その時は公式のシェアボタンが20%ほど多くにクリックされていたのですが、最近では大きな違いが無くなってきているようです。多くのサイトで似通ったオリジナルデザインのシェアボタンが設置されるようになり、ユーザーの学習が進んだからだと思われます。サイトの特性によっては今でも公式デザインのシェアボタンの方がクリックされるかもしれませんので、一度検討してみるのも良いかと思います。最後に、オリジナルデザインのシェアボタンを12例紹介したいと思います。正確には3デザイン4パターン程度のバリエーションですが、気に入ったものがあればぜひご利用ください。実際の表示に関しては下記のデモページをご覧ください。hoverエフェクトやactiveエフェクトもデモページで確認できます。実際にこれから紹介するシェアボタンデザインを利用するには、下記のダウンロードボタンからデータ一式を取得していただき、icon.cssファイルとfontフォルダ内の各種WEBフォントデータを読み込んでいただく必要があります。ダウンロードファイルのindex.htmlは下記のデモページと同じ作りになっていますので、HTMLとCSSの理解があれば、このファイルを頼りに容易に自身のサイトでご利用いただけると思います。ダウンロード共通HTMLhtml/*head内に下記を読み込みます。href="css/style.css">/*サンプル7以降のデザインを利用するには下記を読み込んだほうが美しくなるはずです。title="LINE"></a></li></ul>※HTMLは全デザイン共通となっています。※href=”#”となっていますが、こちらは環境に合わせて編集してください。none;}今より満足できるサイトを作りませんか?FITでは、誰もが良質なコンテンツをインターネット上に公開できるようにWordPress用無料テーマ「LION」を提供しています。・表示速度アップが期待されるAMPに対応LIONテーマを使えば、SEO対策はもちろん、ユーザビリティに強化された美しいデザインのWEBサイトを作ることができます。広告収益や売上に結びつけるためのマーケティング動線が強化されたLIONテーマを利用して、あなたのビジネスにお役立てください。画像を使用することなくHTMLとCSSだけでデザインした見出しのデザインサンプルを20パターン紹介いたします。先日、とある案件で、背景画像をスライドさせて切り替える必要が発生しました。[...]画像編集ソフトを使わずに画像をトリミングできるobject-fitプロパティ画像編集ソフトを利用した画像のトリミングは、便利な使い方さえ知っていれば、とても簡単にかつ短時間で行えます。フィット代表2008年にWEBデザイナーとして独立し、フリーとして活動。その後、WEBディレクターとして一部上場企業とベンチャー企業で経験を積み、2016年から再びフリーのクリエイティブディレクターとして活動。現在は、関東圏内で企業のWEBコンサルティング、WEB制作、コンテンツマーケティング支援、SEO対策を行っています。ご相談がありました......2019.07.02ご相談・ご依頼コスメメーカー様よりご相談がありまし......すべてのニュースを見るCONTACTご相談・お見積り無料お気軽にお問い合わせください。消費者が求めているものを理解し、価値あるコンテンツを届けることが、今ホームページには求められています。他社に無い、御社ならではの強みを生かしたWEB戦略を提案いたします。メールでお問い合わせをする個人事業主/中小企業にこそ必要な「選ばれる理由のある」ホームページを提案します。