みなさんこんにちは！
今回の記事は○分で読む事が出来ます。の機能をWebflowに実装する方法について紹介します。
この記事は○分で読む事が出来ます。のメリット
その記事が何分で読み終える事ができるかわかると、ユーザーの滞在時間が伸びると言われています。例えばあなた気になっている情報を見つけた際に、「この記事は3分で読む事が出来ます」と表示されていると、そんなに早く読み終える事ができるなら読んでみようかな。となりませんか？Simpleview Europeの調査によると、記事に「この記事は○分で読む事が出来ます」を追加すると、エンゲージメント率が最大40%上昇したという報告があります。
心理学的な根拠
そして、「この記事は○分で読む事が出来ます」を付けるメリットの心理学的な根拠もあります。心理学では、「選択のパラドックス」といって、選択肢が多いと意思決定にマイナスの影響を与える現象があります。有名なもので、ジャム実験があります。24種類のジャムを並べた時と6種類だけの時を比較すると、6種類の数が少ないほうが売れたという研究結果です。
記事を読み終えるまでにかかる時間を読者に伝えることができれば、読者がどれだけの時間を費やす必要があるのかわかるので、最初の負担を減らすことができます。
「この記事は○分で読む事が出来ます」Webflowで実装方法
最初に実装に使用するコードは以下になります
1.表示させたい箇所にIDを付与する。
「この記事は○分で読む事が出来ます」を表示させたい箇所にIDを付与します。Webflowのdiv要素にidを付与する方法と、上記に記載した”<div id="estimated-area"></div>”をemdeb code要素の中に記述する方法の２つがあります。
チュートリアル動画では、embed codeを使用しています。
2.ページのbefore<body>にJavaScriptを記述する
次に、上記記載のJavaScriptのコードを、表示させたいページのsettingsから、一番下のbefore<body>のフィールドにコピペしてください。
サイトをPublish
2まで行いましたら、あとはサイトをPublishするだけです。カスタムコードを使用したJavaScriptの動きは、プレビューモードやデザイナーモードでは確認することができないので、必ずPublishをしたサイトで確かめてください。
動画を見ながら実装
今回紹介した実装はYoutubeでも説明していますので参考にご覧ください。
他にもLikePayアカデミーはWebflowに関する情報を発信しています。動画が役に立ったと感じた方は是非チャンネル登録といいねを押してください！
