この記事を読むのに約○分かかります。をwebflowで実装する方法

みなさんこんにちは!今回の記事は○分で読む事が出来ます。をWebflowで実装する方法について紹介します。その記事が何分で読み終える事ができるかわかると、ユーザーの滞在時間が伸びると言われています。

矢野 将平
2023
3
1

みなさんこんにちは!

今回の記事は○分で読む事が出来ます。の機能をWebflowに実装する方法について紹介します。

この記事は○分で読む事が出来ます。のメリット

その記事が何分で読み終える事ができるかわかると、ユーザーの滞在時間が伸びると言われています。例えばあなた気になっている情報を見つけた際に、「この記事は3分で読む事が出来ます」と表示されていると、そんなに早く読み終える事ができるなら読んでみようかな。となりませんか?Simpleview Europeの調査によると、記事に「この記事は○分で読む事が出来ます」を追加すると、エンゲージメント率が最大40%上昇したという報告があります。

心理学的な根拠

そして、「この記事は○分で読む事が出来ます」を付けるメリットの心理学的な根拠もあります。心理学では、「選択のパラドックス」といって、選択肢が多いと意思決定にマイナスの影響を与える現象があります。有名なもので、ジャム実験があります。24種類のジャムを並べた時と6種類だけの時を比較すると、6種類の数が少ないほうが売れたという研究結果です。

記事を読み終えるまでにかかる時間を読者に伝えることができれば、読者がどれだけの時間を費やす必要があるのかわかるので、最初の負担を減らすことができます。

「この記事は○分で読む事が出来ます」Webflowで実装方法

最初に実装に使用するコードは以下になります

1.表示させたい箇所にIDを付与する。

「この記事は○分で読む事が出来ます」を表示させたい箇所にIDを付与します。Webflowのdiv要素にidを付与する方法と、上記に記載した”<div id="estimated-area"></div>”をemdeb code要素の中に記述する方法の2つがあります。

チュートリアル動画では、embed codeを使用しています。

2.ページのbefore<body>にJavaScriptを記述する

次に、上記記載のJavaScriptのコードを、表示させたいページのsettingsから、一番下のbefore<body>のフィールドにコピペしてください。

サイトをPublish

2まで行いましたら、あとはサイトをPublishするだけです。カスタムコードを使用したJavaScriptの動きは、プレビューモードやデザイナーモードでは確認することができないので、必ずPublishをしたサイトで確かめてください。

動画を見ながら実装

今回紹介した実装はYoutubeでも説明していますので参考にご覧ください。

他にもLikePayアカデミーはWebflowに関する情報を発信しています。動画が役に立ったと感じた方は是非チャンネル登録といいねを押してください!

この記事をシェア

あなたの事業に成長を

集客に特化したWebflowサイトで自社マーケティングをより柔軟に、より効果的にします。制作依頼を送信したら、無料打ち合わせであなたのニーズをヒアリングして、最適なソリューションを提案します。

支援先企業
株式会社リコー凸版印刷株式会社株式会社NTTドコモフォースタートアップス株式会社株式会社ニジボックス株式会社E-Housing株式会社ファンディオBooko株式会社unique onTerackathon株式会社ココウリE-Three

あなたもNoCodeのプロに

充実したサポートであなたも、最短3ヶ月間でノーコードWeb制作のプロになれます。

  • 300以上のノーコード動画教材

  • チャットサポート

  • 個別ビデオ通話相談