限界エンジニアの冒険録

システムエンジニアが「趣味・健康・仕事」を限界まで楽しみ、全力で発信していく。そんなブログです。

スマホだけ「はてなスター」を非表示にした経緯と方法

f:id:nandemoya_future:20161117154325j:plain

どうも。

 

先日、GoogleAdSenseに合格した記事を投稿させていただきました。

www.gengineer.net

 

この時から、本格的にブログカスタマイズと、より良いブログのマーケティングについて勉強しています。

そんな中で、このブログにおける「はてなスター」の存在意義について色々と考えてみたんです。結果的に僕としては「スマホ版でだけ「はてなスター」を非表示にする」という結論に至りました。

 

本記事では、なぜ僕が、このような結論に至ったのかということを説明し、「はてなスター」を非表示にする方法と、そのメリット・デメリットについて紹介したいと思います。

※ちなみに、この記事、結構長いです。

「スマホではてなスターを非表示にする方法が知りたいだけ!」と言う方は、目次から「「はてなスター」をスマホで非表示にする方法」の項目までジャンプをお願いします(;^_^A

「はてなスター」の存在意義

今までもされてきた「はてなスター」についての議論

そもそも「はてなスター」の存在意義については、今までも多くのブログで議論されていました。「はてなスター メリット」などと検索してもらうと、様々な見解の記事が出てきます。

これらの先人の方々のブログを読んで僕が感じたことは、「はてなスターの必要性」を考える上での争点が大きく2つあることです。

 

それは「はてなブログへの依存」「SEO的な利点の無さ」です。

 

「はてなスター」自体が「はてなブロガー」にしか利用できないコンテンツです。さらに、SEO的な利点は無く、欠点になることが多い。ならば、アクセス数を増やしたい場合に表示する意味が無いのではないか、という見解です。

確かに、ブログはインターネット上に公開されています。外部からのアクセスを考慮してカスタマイズをした方が、多くのアクセスが見込めるはずです。AdSenseやアフィリエイトをやっている方に多く見られる意見だと思います。

 

また、「はてなスター」のつけ合いが「馴合い化」していることを指摘する方も多くいました。「記事を読んでもいないのに、安易にスターをポチる人が多くないかい?」って意見ですね。「自己顕示欲」なんて言葉を使っている方も見られました。

しかし、本来のはてなスターは、同じブロガーとして「ブログを称賛する、応援する」ためにあります。はてなブログの「コミュニティ」としての機能を果たすために、この「スターのつけ合い」は運営側の意図通りなものとも言えるわけです。

 

このように色々と調べた結果、最終的に僕が辿り着いた結論としては、

「はてなスター」には一長一短があるわけで、そのブログの個性やブランドに合わせて表示・非表示を判断するべきだ

と言うことです。

一概に、全てのブログに対して表示・非表示を推奨できるものでは無いんですよね。

 

自分のブログで表示すべきか具体的に考えてみる

これだけ色々と書き連ねたにもかかわらず、結局、そのブログ次第という頼りない結論に辿り着いたわけです(;^_^A

 

なので、上述した「はてなスター」の表示・非表示におけるメリデメを具体的に整理して、自分のブログにおける対応を考えてみました。

 

「はてなスター」を表示することのメリット

モチベーションの向上に繋がる

はてなスターを設置することで、他のはてなブロガーの自分のブログに対する反応を知ることができます。特にブログを始めたての頃は「自分の書いた記事が誰にも評価されていないのではないか」という不安感を防ぐための良いコンテンツだと言えます。

ブックマークやコメントよりもハードルが低く、気軽にポチることができるのも、大きな利点の一つだと思います。

 

ちなみに、これは「はてなスター表示派」の方々に最も多かった意見だと、個人的には感じています。運営側が意図した「はてなブログのコミュニティとしての機能」を実現しているコンテンツの一つだとも言えるでしょう。

 

しかし、これにもデメリットとなる一面が存在します。

と言うのも、結局バズって有名ブロガーにならない限りは、ある程度の「はてなスターのつけ合い」に参加する必要があることです。読者が増えてくると、結構な作業量になります。互いに興味のあるブログジャンルで、自然とスターを付け合えるブロガー同士であれば問題無いんですけどね。

 

「引用スター」によるブログへの詳細な反応が分かる

「引用スター」って皆さんはご存知ですか?「はてなスター」を利用する上で、記事のクオリティーに直接的に活かせる機能です。

 

以下の図のように、はてなブログの記事中の文を範囲選択すると、右側に「はてなスター」の星マークが出てきます。(他にも引用とTwitterリンクマークが出てきます) 

f:id:nandemoya_future:20161117175642j:plain

この星マークをポチると、範囲選択した部分がスターに添付され、その人が称賛したり、共感した内容を具体的に示すことができるわけです。

 

この機能を利用すれば、自分の記事のどこに共感してもらえたかを具体的に知ることができます。ブコメよりも若干ハードルが低く、気軽に利用できますし、読み手の評価ポイントを今後の記事に活かしやすくなるわけです。

 

ただ問題は、この機能の認知度が低いことですよね。かく言う僕も、この記事を書くにあたり、初めて「引用スター」なる機能の存在を知りました(;^_^A

今後は、少しずつ引用スターを使っていこうかなと思います。

 

「はてなスター」を表示することのデメリット

はてなブログ以外の閲覧者に無意味なコンテンツ

そのままの意味ですね(;^_^A

「はてなスター」は、はてなブロガー以外にとって利用できないコンテンツです。そのため、はてなブロガー以外がページを閲覧する場合は「邪魔なコンテンツ」となってしまいます。

間違えてクリックしたりすれば、「はてなブログにログインしてください」なんて表示されますからね。知らない人からすれば「ナニコレ?」ってなって、反射的に戻るボタンを押されてしまうかもしれません。せっかくアクセスして頂いた貴重な閲覧者に対し、「もう1ページ読んでもらうこと」を逃す原因になる可能性があるわけです。

 

ページの表示スピードが落ちる(SEO的に弱化)

「はてなスター」は、その表示に時間がかかることに定評があります(笑)

そのため、「はてなスター」を非表示にするだけで、ページ全体の表示スピードを高めることが可能です。

サイトの表示スピードはSEO的にも非常に重要です。同じネタで記事を書いた場合、表示スピードが0.001秒速いだけで、ウェブ上位に表示される可能性があるわけですからね。

また、ブログの閲覧者としても、クリックしてから表示に時間のかかるブログは、あまり気持ちの良くありません。必要以上に得体の知らないコンテンツを読み込んでいると思うと、これ以上読み進めようとは思えませんよね。隙間時間に何気なくアクセスしている人であれば、尚更ストレスが溜まるはずです。

SEOとユーザビリティを考えると、どうしても「はてなスター」を表示することのデメリットが目立ってしまいます。

 

マネタイズする上でのメリットが無い

そもそも「はてなスター」には、SEOの強化や広告の見やすさ、ユーザビリティの向上など、ブログをマネタイズするためのメリットはほとんどありません。それならば、表示しない方が良いだろう、と言う分かりやすい考え方です。

メリットが無いことがデメリットという具合でしょうか。

確かに、はてなスターを設置したことによって、(相互つけ合い無しで)アクセスが伸びることは考えにくいです。しかし、はてなスターがあるスペースにSNSリンク用のボタンを配置したり、関連記事一覧を置けば、より多くの閲覧者がシェアしてくれたり、もう1記事読んでくれる可能性が生まれます。

 

ただ、これも収益化を目的としている上での極論ではあるので、一概にデメリットとは言えないと思います。収益化しつつ、はてなブログをコミュニティ的に楽しんでいる人も少なからずいると思いますからね。

 

「限界エンジニアの冒険録」への影響

はてなスターの一般的なメリデメについて上述しました。それでは次に、このメリデメが僕のブログにとってどう影響するかを以下で考えてみます。

検索エンジンとSNSからのアクセスが約90%

僕のブログのアクセスは、約90%がGoogleやYahoo!などの検索エンジンとSNSからの流入です。はてなブログ内からのアクセスは全体で見ると非常に少ないので、はてなスターを利用できる人自体が少なく、有用なコンテンツとして活かされていない可能性が高いと言えます。

 

スマホからのアクセスが約80%

上記に加え、僕のブログのアクセスは、約80%がスマホからのアクセスです。

スマホからのアクセスの場合、パソコンよりも画面が小さいことから、表示範囲が大きく限られることになります。そのため、不要な情報が表示されると、閲覧者が「戻る」ボタンを押してしまうリスクが非常に高くなるわけです。これらのことから、スマホ表示では、なるべく不要な情報を削ぎ落す必要が出てきます。

 

上述した「はてなブログ外」からのアクセス者が多いことを加味すると、閲覧者の多くが「はてなスター」を活かすことができないにも関わらず、表示された画面の一部をはてなスターが占領してしまっている状態になります。

つまり「スマホによる、はてなブログ外からのアクセスが多い」僕のブログにとって、はてなスターはデメリットの大きいコンテンツである可能性が高いわけです。

 

JavaScriptやプラグインを多用しており、表示速度に難あり

また、上記に加え、僕のブログはスマホ表示向けにJavaScriptやプラグインを多く使っているため、表示速度に改善の必要があります。実際にGoogleさんのPageSpeed Insightsで測定してもらったところ、スマホの表示についてボロクソに叩かれてしまいました(;^_^A

今も絶賛改善中なわけですが、できることから改善しようと考え、取り急ぎ、表示速度の遅さに定評のある「はてなスター」を非表示にすることが濃厚になったわけです。

 

※2016/11/18追記
本記事で紹介する非表示方法では、「はてなスター」の情報を読み込む処理自体は動いてしまうため、表示速度の改善にはならない可能性が高いことが分かりました。ご了承ください。

 

「はてなスター」によって得られることもある

しかし、はてなスターによって得られることも少なくありません。上述した「引用スター」もそうですが、他ブロガーさんとの繋がりを作ることも非常に重要だと思っています。実際に、モチベーションの向上など、今までも多くの場面でブロガーさんに助けられてきましたし、情報交換や記事の反応を見る上で、気軽にできるアピールとしてはてなスターにもメリットはあると考えたのです。

 

【スポンサードリンク】
 

 

結論:スマホだけ「はてなスター」を非表示にする

これらの様々な葛藤により、結論として、スマホでだけ「はてなスター」を非表示にする案に至りました。全ての人がそうだとは言えませんが、パソコンでのアクセスの多くが「はてなブログ内」からの流入と判断し、

スマホ:はてなブログ外からの閲覧者 ⇒ はてなスター不要 ⇒ 非表示

PC:はてなブログ内からの閲覧者(ブロガーさん) ⇒ はてなスター利用可 ⇒ 表示

と解釈して、カスタマイズする方針にしたわけです。

僕も先輩ブロガーさん達からしたら、まだまだブログ歴3ヶ月程度の「ひよっこ」です。教わることは山ほどあると思っているので、はてなスターによるご指導ご鞭撻のほどよろしくお願いいたします。

(スターポチってください、というわけでは無いです(;^_^A)

 

「はてなスター」をスマホで非表示にする方法

すみません、皆さん待ちくたびれたと思いますが、ここまで来てやっと、はてなスターをスマホでだけ非表示にする方法をお伝えします。長々とすみません。

ちなみに、この方法ははてなブログPro限定でできる方法なので、注意してください。

 

以下のコードを「デザイン」⇒「スマートフォン」⇒「記事下」のhtml記述ボックスに貼り付けるだけです。 

<!-- はてなスター非表示 -->
<style type="text/css">
.hatena-star-container{
display: none;
Width:0px;
height:0px;
}
</style>

少なくとも僕はこのコードを適用することで、スマホ版のはてなスターを非表示にできました。あまり必要とする方もいないと思いますが、機会があれば使ってみてください。

 

※2016/11/18追記
本記事で紹介する非表示方法では、「はてなスター」の情報を読み込む処理自体は動いてしまうため、表示速度の改善にはならない可能性が高いことが分かりました。他の方法が分かり次第、ご報告します。ご了承ください。

 

 

いかがでしたでしょうか。

以上が、僕がスマホで「はてなスター」を非表示にした経緯と方法でした。

 

現状はスマホのみの適用ではありますが、一旦このまま運用を行ってみて、効果を見た上で、PC版の変更も考えてみようかなと思っております。

皆さんも、自分のブログに合ったカスタマイズを今後も追及していってください。

 

では、また。