【Cocoon】滞在時間が13.8％もUPする『この記事は○分で読めます』を実装してみた

日々沢山のブログを読んでいるとたまに『この記事は○分で読めます』みたいに書いてあるブログを見かけます。
私も初めて見た時は『ぉ！これすげー！』ってなりました。

何故か？

だって、記事を全部読もうと思ってブログを訪問するわけですよね？
そこで右端を見ると、スクロールバーがめちゃくちゃ小さくなっていたらゲンナリしてしまいませんか？

また理解しにくい文章だった場合などは読み飛ばしてしまう事もしばしばありますよね？

最悪の場合はブラウザバーック！なんて事にもなり大変な機会損失をしているわけです。

しかし、そんな時に読了時間がある事で、あぁ思ってる程の長い記事では無いな？と言う目安になる事で、読了時間を最初に提示して滞在時間が13.8％も上がったと言う報告がありました。

読了時間を入れるとなぜ滞在時間が上がるのか？

読了時間とは単純にブログの記事を全て読み終わるのに掛かる所要時間の事ですが、これを頭に書いておく事で、ブックマークに入れて後日読むことにするか、今読み終える事が出来るかの目安になります。

この違いは非常に大きいと思いませんか？

読了時間の近くにSNSブックマークなどを置いておくと更に、『はてブ』などのブックマークのクリック率も上がりSEO的にも有効な被リンクを獲得できる仕組みにも変化出来るのです。

滞在時間が上がる理由(メリット)

1. 読了目安時間で文章のボリュームを認識出来た
2. ブックマークを獲得出来るかも知れない
3. ブックマークして後からじっくり読んだ
4. 腰を据えて読む気になる(集中力が上がる)
5. 5分と書かれていて5分以内に読もうとするチャレンジ精神

と、たった1行を記事の頭に付けておくだけで、こんなに沢山のメリットがあるのです。

1行だけだからたいして邪魔にもなりません。

読了時間の妥当性

人が文章を読む速度の平均は1分間500文字～800文字と言われていますので、600文字を1分として基準値を設けて3000文字なら5分で読めますと言う風に表示する事にしています。

もちろん人によって文章を読む速さに個人差がありますので、一概に1分間で500文字！とは言い切る事は出来ませんが、一般的な速度で計算するのが妥当かと思います。

この文章が一体何分で読めるのか？と言う目安がある事で、これ何メーターあるの？50メーターです。と言われれば、その距離が分かるのと同じで今から走ろうとする人にとっては良い心構えになると思います。

もくじと一緒に表示しておく事で、『あぁこの記事は長いから必要な所(知りたい所)だけ読もう』と言う選択にも繋がります。

『○分で読めます』の表示が嫌いな人も居る

もちろん、『○分で読めます』の表示が嫌いな人も居ます。その理由は

余計なお世話だよー読みたかったら勝手に読むし！

と言う方です、実際に6分以内だったら読もうと思うけど、それ以上だったらブックマークにするか、必要な所だけ探して読む(もくじが必要)と言う方が一定数存在しているようです。

これがあると便利っす。
僕は〜6分くらいが読むかどうかの目安にしてます。

スクロールが長くて文章に変化のない記事や、1記事にページャーのあるコンテンツは良し悪し関係なくすぐ離脱します。

— たっくん (@totetote0212) 2018年7月6日

Cocoonに『○分で読めます』を実装するサンプルコード

取りあえず能書きはこれくらいにしておいて、実際のコードをWordPressに実装してみようと思います。
色々コードが書かれているブログが沢山あったのですが、実装方法についてはWordpressのカスタマイズについて理解している前提の記事ばかりでしたので、私のブログでは出来るだけ丁寧に解説したいと思います。
まずは私がこのブログで使っているWordPressテーマのCocoonに実装してみたいと思います。

サンプル-コードに関して参考にしたブログは以下の通りです。
参考ブログ: 固定ページにこの記事はOO分で読めますを表示する方法

手順① 小テーマのFunction.phpに以下を記述する

小テーマとは、親テーマCocoonのChild-masterのフォルダを意味しています。
Cocoonは子テーマにもFunction.phpが空で用意されていますが、存在しない場合は新しいファイルをFTPやファイルマネージャーからアップロードして下さい。

function countdown($content){
	if ( !is_single() ) {
		// 個別のページ以外は表示しない
		return $content;
	}
	$count = round(mb_strlen(strip_tags($content)) / 600) + 1;
	return '<span class="countdown"><i class="fa fa-clock-o"> </i> この記事は <strong>約'.$count.' 分</strong>で読めます。</span>'.$content;
}
add_action('the_content','countdown');

CocoonではFontAwesomeがデフォルトで導入されていますので<i class=”fa fa-clock-o”>の部分でタイマーのアイコンを表示するようにしています。

手順② Contents.phpに表示を追加する

Cocoonのテーマではtmp/content.php のファイルが記事の表示部分になりますので、好きな場所に以下の記述を追加すると『この記事は○分で読めます』を追加する事が出来ます。

一般的なテーマの場合は小テーマフォルダのsingle.phpに記述すると表示出来るはずです。

 <?php //記事本文の表示
countdown($content); // ←この行が『約○分で読めます』の部分
the_content(); ?>

上記を追加して完了です。下記画像の76行目を見て下さい。Cocoonで76行目にこの記述があります(Ver1.01)

ですがWordPressの小テーマの場合は、そもそもtmp/content.phpのファイルがありません。
ですのでファイルマネージャーかFTPを利用して『tmp』フォルダを新規で作ります。

そして親テーマのフォルダにある cocoon-master/tmp/content.php をコピーしてファイルを編集したファイルを小テーマに新しく作ったtmpフォルダに設置して完了です。

小テーマに設置する場合の補足事項

小テーマとは上記のように２つインストールしたCocoonテーマのChildと書かれている方のテーマの事です。

作業の全体像は上記の図のようになります。
Cocoonの場合は子テーマにFunction.phpが用意されていますので、そちらに①のコードをコピペします。

他のテーマもオススメのテーマとして私が紹介しているテーマについては後日、説明詳細を記載して行こうと思っていますが、私が持っていない有料のテーマの場合は説明詳細の手順を書く事が出来ませんのでご了承ください。

手順③ CSSで見た目を目立つように装飾する

当ブログではこのような装飾をしています。
もし良かったらマネしてみて下さい。

.countdown{
position:relative;
background: yellow;
padding: 0.3em;
}
.countdown:after{
content: "";
position:absolute;
top:0;
right:0;
width:0;
height:0;
border-style: solid;
border-color: transparent #fff transparent transparent;
border-width: 25px 15px 25px 0;
}

『約○分で読めます』の記述を考えてみる

さて以上で『約○分で読めます』の記述が実装出来たかと思います。

この約○分で読めますの記述は滞在率を13.8％もUPするのだから、表示の仕方次第ではもっと無限の可能性を秘めているのではないか？と思うんです。

例えば・・・

• この記事を5分を読んでみよう！よーいドン！
• この記事を読むには5分以上掛かるかも知れません
• この記事はみんな5分で読んでます。あなたは何分掛かりますか？
• この記事を5分で読めたら天才！
• 記事の最後に『はい！ジャスト5分で読めましたね！』と表示する
• この記事は20分以上掛かりますのでブックマークしといて下さい。
• この記事は30分以上掛かるので『後で読む』に追加して下さい。

こんな記述を表示する事で、また新たな扉が開かれるかも知れませんね(笑

この記事を読んだあなたにオススメしたい記事

オススメの記事【Googleアクセスアップ対策】Googleの評価が低いページを整理して滞在率とCV率をアップさせる方法