お問合せ株式会社ジェイコス
TEL 03-5428-8733

Webコンサルティング会社、首都圏(東京)を中心に戦略的なホームページの制作、Webマーケティングをご提供

Webコンサルティング.jp HOME > Blog Top

Profile

通称:株式会社ジェイコス
誕生日:2005年4月1日
出身地:三軒茶屋
現住所:麹町
職業:Webコンサルタント

2016年8月14日

そのボタン、本当に必要?設置する前に知っておきたいソーシャルボタンの大原則

snsbotton_eyecatch.jpg

そのシェアボタン、ちゃんと使われてる?

 

コンテンツマーケティングが流行し、オウンドメディアを持つ企業が近年どっと増えました。専門的なメディアとまではいかなくとも、ブログを設置している企業も多いのではないでしょうか。

記事を更新したらたくさんの人に読んでほしいですよね。

そこで、記事を「拡散」させるのに役立つのがSNSシェアボタン。

TwitterFacebookなどの各SNSが公式にコードを発行しています。

この2つはもちろん、人それぞれ使っているSNSが違うから、あれもこれもシェアボタンを設置しておいて、たくさんの経路で拡散してもらえればいいな......

でもちょっと待って、本当にそのシェアボタン、使われてますか?

 

この記事では、各SNSシェアボタンの特徴と選び方を紹介いたします。


ソーシャルボタンが多ければ多いほど良いわけではありませんので
必要に応じて、SNSシェアボタンの整理と断捨離をしてみましょう!

 

シェアするボタン


Facebook(いいね!)

いいねボタン.png

名称:Facebookいいね!ボタン

特徴:URLをタイムラインにシェアすることができます。

コード取得:https://developers.facebook.com/docs/plugins/like-button

 

Facebook(シェア)

fbシェアボタン.png
名称:
Facebookシェアボタン

特徴:読者が追記をしてタイムラインに投稿することができます。

コード取得:https://developers.facebook.com/docs/plugins/share-button

 

Twitter(ツイート)

twitterボタンツイート.png

名称:Twitterボタン

特徴:読者が追記をしてツイートできる。公式のボタンを使う場合、シェアされている数は取得できない。

コード取得:https://about.twitter.com/ja/resources/buttons#follow

 

LINE

lineで送るボタン.png

名称:LINEで送るボタン

特徴:LINEというサービスの仕様上、スマートフォンでないとほぼ機能しない。タイムラインではなく個人やグループ宛に送られる。

コード取得:http://media.line.me/howto/ja/

 

Google+

googleplus1ボタン.png

名称:Google+1ボタン

特徴:「いいね!」と似たイメージ。ユーザーは少ない?

また、GoogleのサービスのためSEO効果があるという噂もありますが、定かではありません。

コード取得:https://developers.google.com/+/web/+1button/

 

 

保存するボタン

"人のため"に拡散するというよりも、"自分のため"に保存する意味合いが強いものはこちら。

 

はてなブックマーク

hatebuボタン.png

名称:はてなブックマークボタン

特徴:ソーシャルブックマークと呼ばれ、コメントを付けてシェアできる。一度に多くのユーザーに「はてブ」されたURLは「ホットエントリー」等の欄に掲載され、大量のアクセスが見込める。

コード取得:http://b.hatena.ne.jp/guide/bbutton

 

Pocket

pocketボタン.png

名称:Pocketボタン

特徴:クローズド傾向の強い「後で読む」サービス。

コード取得:https://getpocket.com/publisher/button

 

 

フォローするボタン

その記事のURLをシェアしてほしいのではなく、メディアやブログそのもの、各SNSアカウントをフォローしてほしい時に設置したいソーシャルボタンです。

 

Twitter(フォロー)

twitterボタンフォロー.png

@アカウント名...と、どのアカウントをフォローするのか分かりやすいのが良いですね。

コード取得:https://about.twitter.com/ja/resources/buttons#follow

 

Feedly追加

feedlyボタン.png

大手RSSリーダーのFeedly。メディアやブログそのもののファンを増やしたいなら載せる価値あり。

コード取得:http://www.feedly.com/factory.html

 

Instagram(非公式)

insta_follow.png

Instagramは大幅なUIのリニューアルを経て、新たに取得できるフォローボタンの項目を失くしてしまいました。

非公式ではありますが、http://instafollowbutton.com/ からフォローボタンのコードを取得できます!

 

Pinterestフォローボタン

pinterestフォローボタン.png

URL中の画像をPinしてもらうのではなく、Pinterestのアカウントをフォローしてもらうボタンです。

コード取得:https://developers.pinterest.com/tools/widget-builder/?type=follow

 


こんなボタンもあります

上記のSNSシェアボタンと比較すると優先度は下がってしまいますが、ターゲット層によっては有効になり得るシェアボタンを紹介します。


mixiいいね/チェックボタン

mixiチェックボタン.png

一時の勢いは落ちてしまったものの、根強い人気のあるmixi。いいね、チェックの2種類が主流です。チェックボタンは6種類の中からサイトのデザインに合うデザインが選べます。

コード取得:http://developer.mixi.co.jp/connect/mixi_plugin/favorite_button/spec/


YouTubeチャンネルフォロー

youtubeボタン.png

YouTubeチャンネルのフォローボタンも簡単に作成できます。チャンネル名やチャンネル登録者数の表示/非表示も選べて便利。

コード取得:https://developers.google.com/youtube/youtube_subscribe_button


Tumblrシェアボタン

tumblrシェアボタン.png

クリエイターや海外ユーザーに人気の強いtumblr

シェアボタンは3つ用意されていますが、基本は1番上の「Post」。スキ、リブログ、返信をすべてカウントしてくれます。

コード取得:https://www.tumblr.com/buttons


LinkedInシェアボタン

linkedinボタン.png

海外の採用市場では良く活用されているLinkedIn。コーポレートサイトとの相性が良さそうですね。デザインはFacebookのシェアボタンと良く似た印象です。

コード取得:https://developer.linkedin.com/plugins/share


GREEいいね!/気になる/オススメ/シェアボタン

greeボタン.png

ソーシャルゲームのGREESNS。シェアの種類は4つもあります。

コード取得:https://docs.developer.gree.net/ja/platform/connect/socialfeedback


 


おすすめのソーシャルボタンは?

設置するシェアボタンの正解はメディアの扱うテーマやターゲット層によって異なります。競合メディアのシェアボタン設置状況を見て検討してみましょう!

各SNSとの相性を考えてボタンを設置しましょう。

 

Twitter(ツイート)ボタン

twitterボタンツイート.png

日本ではやはりTwitterが強いです。どんなジャンルでも外せないシェアボタンです。

しかし、公式のボタンではツイート数がカウントされません。ステータスとしてシェア数を表示したい場合は、Facebookやはてなブックマークのボタンと一緒に設置すると有効です。

 

Facebookいいねorシェアボタン

iine_share.png

思わず「いいね!」したくなる"まとめ"のようなコンテンツなら「いいね!」ボタン。時事ニュース等、読者がコメントを付けて拡散したくなるコンテンツならシェアボタンと使い分けるのが良いでしょう。いいね!とシェアの両方がセットになっているものもあります。

 

はてなブックマークボタン

hatebuボタン.png

テクノロジー・ライフハック系など、はてなブックマークのユーザー層にウケるコンテンツであれば設置しておいて間違いないボタン。

バズの足がかりとして非常に有効な機能です。

ただし、ファッション・音楽など、好みが分かれるテーマはブックマークが付きにくい傾向があります。

 

Pocketボタン

pocketボタン.png

Pocketは比較的クローズドな使われ方をしますが、他のボタンとは違って後からの再訪を促せる効果があります。Pocketされた数はステータスにもなるので、取扱うテーマによってはシェアボタンを設置した方が良いでしょう。

まとめ記事やライフハック記事などのお役立ち系記事が良くPocketされます。

 

LINEで送るボタン

lineで送るボタン.png

LINEを活発に利用する若年層をターゲットとした場合や、ソーシャルゲームやアプリのようなスマートフォンならではのテーマを扱った場合には設置してあると便利でしょう。PCビューの場合はボタンを隠し、スマホビューでのみ有効にしてあるメディアも見られますね。

 

おわりに

あなたのメディアには、どのSNSシェアボタンが相性ピッタリでしょうか?

冒頭でも述べたように、ソーシャルボタンは拡散の手助けになりますが、闇雲に設置することでゴチャゴチャした印象になるだけでなく、ページの読み込みが遅くなって離脱やGoogleからの評価の低下にもつながります。

ソーシャル流入等アクセス解析のデータを見ながら、最適な条件を見つけていきましょう!


2016年4月25日

やみくもに使うのはNG! レスポンシブウェブデザインを採用するべきシチュエーションと、Web担当者が押さえておきたいメリット・デメリット

Responsive 9-01.jpg

数年前からWebデザイン業界で話題になっている「レスポンシブウェブデザイン」。
検索してみてもWeb制作者向けの記事が多く、Web担当者の方はそのメリット・デメリットについて分かったような分からないような...というケースが起こりがちです。
本記事ではテクニカルな要素は極力排除し、企業のWeb担当者の皆様目線のレスポンシブウェブデザインのメリット・デメリットをご紹介します。


これだけは押さえたい!重要ポイント
・レスポンシブウェブデザインは、OSやブラウザではなく閲覧画面の横幅でレイアウトやデザインが変わる
・URLが単一、Googleからの評価が高い等のメリットがある
・表示速度が遅くなる、デザインに制約が出る等のデメリットがある
・ターゲットユーザー、コンバージョン、運用体制等によって適しているかどうかは変わってくる
・ひとりで悩まず、専門家に相談してみましょう!


レスポンシブウェブデザインとは何か?

PCサイトとスマートフォンサイトを用意している場合、サーバ側がユーザーの使用している閲覧環境がPCかスマートフォンかを判断して、それに適したURLのページを表示します。
パソコンでは http://www.○○○.com/
スマートフォンでは http://www.○○○.com/sp/ のように、複数のHTMLファイルからどちらかを見せています。

ところがレスポンシブウェブデザインでは、URLを http://www.○○○.com/ のように1つに統一して、ユーザーが横幅何px(ピクセル)の画面(ブラウザ)で見ているか?だけを基準にしてデザインを決めることができます。
※PCから閲覧していても、ブラウザの横幅をスマートフォンくらいに狭めればスマートフォンと同じ表示になります。面白いですよ!

PC・タブレット・スマートフォン用の3つの区切り(ブレイクポイント)を設定しているサイトもあれば、
PC・スマートフォン用の2つの区切りだけ設定していサイトるサイトもあります。

例1: 3つ以上のブレイクポイントを設定しているサイト
早稲田大学 http://www.waseda.jp/top/

wasedapc.png
wasedatablet.png
20160219_001921000_iOS.jpg

例2: 2つのブレイクポイントを設定しているサイト
日本女子大学 http://www.jwu.ac.jp/sp/
jwupc.png
jwusp.jpg

先進的に見えるレスポンシブウェブデザインですが、Web担当者の皆様も導入に向けてしっかりとメリット・デメリットを押さえておく必要があります。
以下で紹介するメリット・デメリットとユーザー層を比べて、じっくり考えてみましょう!
現在お付き合いのあるWeb制作会社があるならば、そちらの担当者の方に相談してみても良いでしょう。


レスポンシブウェブデザインのメリット

  1. URLがひとつである
これはユーザーにとっても運営者にとっても大きなメリットになります。
SNSでシェアされたURLをクリックしたり、アドレスバーにURLを直打ちした場合でも、閲覧環境に適合したデザインのサイトが表示されます。
レスポンシブウェブデザインを採用すれば、
スマートフォンから閲覧しているのにPCサイトが表示されてしまった
→ユーザーにとってストレスとなり、すぐに離脱
といった機会損失を防ぐことができます。

  1. PCサイトとスマホサイトが一気に更新できる
こちらは主に運営サイドのメリットです。
レスポンシブウェブデザインのサイトは1つのHTMLに複数のCSSを組み合わせて構成されています。
1回だけHTMLの更新や修正を行えば、PCサイトも(タブレットサイトも)スマホサイトも全てが更新されます。

PCサイトとスマホサイトを別々に持っていたら、HTML・CSSが2つずつとなります。
更新や修正を行う場合2回ずつ行わなければなりません。
レスポンシブウェブデザインの場合、この手間や、片側だけでの更新・修正ミスを回避することができます。

  1. Googleの「モバイル対応」認定を受けやすい(SEOで有利!)
あなたの運営するWebサイトをGoogle検索してみましょう。「モバイル対応」の文字は付いていますか?
昨年から、GoogleはモバイルフレンドリーなWebサイトを高評価すると発表しています。
その中でも、「URLがひとつ」で「HTMLファイルがひとつ」なレスポンシブウェブデザインを採用したWebサイトはユーザーにとっても利便性が高いと判断され、Googleから高く評価されます。
検索結果で上位表示される可能性が高くなるということにつながります。
いわゆるSEO的観点で有利!ということです。


レスポンシブウェブデザインのデメリット

  1. 1つのファイルだからといって、安い訳ではない
先述のように、レスポンシブウェブデザインのWebサイトは1つのHTML・CSSで構成されています。
それではPCサイト・スマホサイトを別々に作るよりも制作費が安いのか?というと、そうとは限りません。
むしろ、横幅ごとの切り替えの対応や確認等にコストがかかり、レスポンシブウェブデザインの方が高額となる可能性もあります...。

  1. データが重くなり、表示が遅くなる可能性あり
スマホサイトはPCサイトよりも情報量が少なくなりがちです。
例えば、横幅○○○px以下の環境で閲覧する場合は有用性の低いサイドバーのコンテンツは非表示にしましょう、という設定をすることがあります。
また、画像のサイズも小さいものになったりしますね。
それでもスマートフォンが読み込むファイルはPCサイトと同じ量。
サイトの仕様によっては、スマートフォンユーザーから「あれ?このサイト重い...」という感想を持たれることがあるかもしれません。
ユーザーにとってストレスになるとともに、離脱のリスクにもつながります。

  1. スマートフォンからPCサイトが見られない
スマホサイトからだと情報量が少ないことを予想したユーザーや、以前そのサイトをPCから訪問したことのあるユーザーは、スマートフォンからもPCサイトを見たいと言った場合があるでしょう。
PCサイトとスマホサイトが別々であればPCサイトとスマホサイトを行き来することができますが、画面の横幅で表示される要素やデザインが全て決められるレスポンシブウェブデザインではそうはいきません。
「あえて」スマートフォンからPCサイトを見ることができなくなってしまうということです。

  1. デザインに制約ができてしまう
レスポンシブウェブデザインは万能ではありません。
PCから見た時に最もユーザーにとって使いやすいデザインと、スマートフォンから見た時に最もユーザーにとって使いやすいデザインが、1つのHTMLファイルから実現できるとは限りません。
レイアウトやデザインを修正したい場合、まるごとHTML・CSSを書き換える必要があるのです。


レスポンシブウェブデザインを採用するべきシチュエーション

デメリットもあるレスポンシブウェブデザイン。
それでもメリットがデメリットを上回り、コストパフォーマンスが良いと判断できれば採用したいですよね。
どんなシチュエーションがレスポンシブウェブデザインに向いているのでしょうか?

マルチデバイスにおいて、SNS等ユーザー間でのシェア(拡散)を狙っている場合
→URLが単一なことがマルチデバイス拡散の際に有利に働きます。キャンペーンサイト等で採用すると良いでしょう。
 ただし、広告用LP等で表示速度第一だったり、ターゲットがPC・スマホどちらか決まっている場合は話が別になります。
 よく考えて決めましょう!

デザイン面以外の更新・修正が多い場合
→内容の更新・修正、ページの追加が多い場合は、一度の修正でPCサイトもスマホサイトも更新・修正できるレスポンシブウェブデザインが有利に働きます。
 自ら運用を行う場合はレスポンシブウェブデザインの方が手間がかからないかもしれないですね。

Webサイトの大幅なリニューアルを行う場合
→GoogleはモバイルフレンドリーなWebサイト、特にレスポンシブウェブデザインのWebサイトを高く評価しています。
 既にPCサイトを持っていてスマホサイトを新しく構築する場合は別々でも構わないかもしれませんが、PCサイトもリニューアルしてモバイルフレンドリーに対応したい場合は、SEO的観点も踏まえてレスポンシブウェブデザインを検討してみてはいかがでしょうか。


まとめ

ここで冒頭に示した重要ポイントを振り返ってみましょう。

・レスポンシブウェブデザインは、OSやブラウザではなく閲覧画面の横幅でレイアウトやデザインが変わる
・URLが単一、Googleからの評価が高い等のメリットがある
・表示速度が遅くなる、デザインに制約が出る等のデメリットがある
・ターゲットユーザー、コンバージョン、運用体制等によって適しているかどうかは変わってくる
・ひとりで悩まず、専門家に相談してみましょう!

本記事がレスポンシブウェブデザインの導入に向けた一助となれば幸いです。

また、レスポンシブウェブデザインを採用するか否かは問わず、スマートフォン用のサイト構築は今後必須となっていくでしょう。
BtoCサイト、CtoCサイトの多くでスマホサイト構築やアプリ展開が進んでいます。
PC閲覧が多いBtoB企業のWeb担当者様も、今一度スマートフォン対応について検討してみてはいかがでしょうか?

WebConsulting.jpでは、スマートフォンサイト構築相談を無料で行っております。
どんな質問でも分かりやすくお答えします。是非お気軽にお問合せくださいませ!



2016年3月28日

パララックスを使いたい人必見!メリット・デメリットと思わず触ってしまう商品紹介ページ・採用サイト


20160229102253.jpg
数年前からWebデザイン業界で流行している「パララックス(視差効果)」

スクロール操作に合わせて各々の層で別のアニメーションが起こったり、違う速度でスクロールされるように見えて奥行きが感じられるエフェクトに使われている手法をパララックスといいます。

単語を聞いてピンと来なくても、実際のサイトを見れば「これだったのか!」と思うはずです。


パララックスがもたらす効果

まずは1つ例を見てみましょう。最後までスクロールしてみてください!

tokyu.png

普通の告知サイトよりも洗練されて、おしゃれな印象を受けませんか?
見た目が美しく、能動的な操作であるスクロールを使って画面に効果を与えることで、ユーザーはコンテンツに入り込みやすくなります。

自社サイトにも導入してみたいな、と思いましたか?
パララックスは使う場面によっては非常に良い効果もありますが、単におしゃれなだけではユーザーには響かず、提供側も利益を得ることができません。
それどころか使いづらさを感じさせてしまったり、離脱を増やしてしまう場合もあります。

メリット・デメリットを押さえて、有効活用しましょう!


パララックスのメリット
・Webページにストーリー性を持たせることができる
・「カッコいい」「おしゃれ」「先進的」「綺麗」等のポジティブなイメージを与えることができる
・スクロール操作に飽きを感じさせず、ユーザーに能動的にスクロールをさせることができる

パララックスのデメリット
・Webページに含まれる情報が多くなり、表示が重くなる
・上手く使わないと見た目に気をとられてしまい、肝心の情報が伝えづらくなる
・パララックスに隠されて、ユーザーが一目でアクセスしたい情報に辿り着きづらい場合がある


パララックスを有効活用しまくりの「Nikon」!

今回注目したのはカメラメーカーの「Nikon」
製品ページに多くのパララックスを使って、閲覧したユーザーがNikonの世界観に入り込んでいくストーリーが出来上がっています。
お手本となるようなNikonの製品紹介ページをどうぞご覧ください!


Nikon 1 AW1
nikon1aw1.png

パララックスを使ったNikonのページで最も有名なのがこちらなのではないでしょうか?
ページの読み込みには少々時間がかかりますが、とにかく凝った作りになっています。
防水・耐衝撃・寒冷地対応といったNikonのカメラの機能性をパララックスで表現し、スクロールした最後には購入ページへのリンクボタンが設置されています。
ページ全体のデザインは青基調ですが、「耐衝撃」等のシーン別で様々な色を仕様しているので、視覚的にも飽きがありません。


Nikon D5
nikond5.png

こちらは高級なデジタル一眼レフカメラ。
コンテンツは左から「スペック」「インデックス」「ギャラリー」。
パララックスが使われているのは横移動の時の動作と、「インデックス」の縦スクロール。
ユーザーからしてみれば、例えどんなに製品紹介ページが綺麗であっても、ここまでの高額製品を購入するときは、じっくり情報を見て決めたいもの。
余計なページには一切パララックスの要素を入れていない、引き算を上手く使ったページです。


Nikon 1 J5
nikon1j5.png

このページでは3カラムを採用しています。
メインとなる製品情報を示す半透明のカラムが実際のスクロール速度で動き、7つのスペックを紹介するごとに左カラムの背景が切り替わります。
更に、右カラムはボディの2色を交互に紹介するという、見ていて驚きが途絶えないつくりになっています。
使う色数を抑えているので視覚的にもうるさくなく、「ちょっと検討してみようかな」という気持ちになりますね。


Nikon COOLPIX 2015 春モデルキャンペーン

nikoncoolpix.png

比較的廉価なデジタルカメラの春モデルを比較できるキャンペーンサイト。
このページで面白いのは、スクロールではなくPCのカーソルボタンで操作ができること。
(ページを表示すると、最初にカーソルボタンで動かすように指示が出ます!)
戻る、進む...を繰り返さずとも簡単に商品の比較ができる、ユーザーにやさしい作りになっています。

全体的に、価格帯やターゲット層に合わせてパララックスの使い方も変えているのが特徴的です。


採用サイトでもパララックスが力を発揮!

今までは商品紹介をしてきましたが、次は自社の紹介でユーザーの心を掴んでみましょう!
採用サイトでもパララックスが使われている場面が多々あります。

株式会社エー・ピー・カンパニー採用サイト
apcompany.png

飲食店や食品販売店の経営をしている株式会社エー・ピー・カンパニー。ファーストビューに大根がチラッと見えるのが可愛いくてスクロールをしたくなります(笑)。
上部のエントリーボタンとメニューボタンは固定。エントリーしたい!と思った時にいつでもエントリーできます。


株式会社アイスタイル
istyle.png

ひたすらトップの右画面を下へスクロール!ストーリーが進んでいって、引き込まれるつくりになっています。
反対に左のサイドメニューから各ページに飛ぶと、パララックスは控えた読み込めるページが現れます。
パララックスの足し算と引き算をうまく組み合わせた採用サイトになっていますね。


まとめ

いかがでしたでしょうか?
パララックスは上手く使えば直接のコンバージョンのみならず、ブランディングや新規ファン獲得にも使えます。
今回紹介した商品紹介のキャンペーンサイト、採用サイトのようなサイトでは特に力を発揮するのではないでしょうか?
パララックス導入、その他デザイン手法のご相談も、WebConsulting.jpにて承ります!


Recent Entries

  1. そのボタン、本当に必要?設置する前に知っておきたいソーシャルボタンの大原則
  2. やみくもに使うのはNG! レスポンシブウェブデザインを採用するべきシチュエーションと、Web担当者が押さえておきたいメリット・デメリット
  3. パララックスを使いたい人必見!メリット・デメリットと思わず触ってしまう商品紹介ページ・採用サイト
  4. Google Search Consoleの新機能「AMPエラーレポート」とは? Webコンサルタントが解説します!
  5. 【あなたにピッタリのサービスがわかる】スマホでお得にエンタメ動画を楽しもう~全ての動画配信サービスを視聴してみた!~
  6. 個人の居酒屋もカフェもレストランもクレジットが安価に簡単に導入できる~ビジネスチャンスが広がる"モバイルクレカ"比較まとめ~
  7. 驚異の6秒動画プロモーション「Vineを活用した8つのキャンペーン事例」をご紹介!
  8. "スモールビジネス"LINE@活用法~PR戦略成功事例をご紹介!~
  9. 企業の存続危機に発展するかも!?Twitter炎上事例からわかるリスクの実態とその対策
  10. 注目のオウンドメディア100サイト「訪問者」ランキング!~Webマーケティング戦略に勝利したサイトはどれ?~6/6