Shopifyでブログ読了時間目安を表示できるアプリについて徹底解説｜ご利用ガイド
はじめに
今回の記事は、Shopify アプリである「シンプルブログ読了時間目安表示｜記事を読むのにかかる時間計算」の解説記事です。
Shopify とは、ざっくり説明すると EC サイトを簡単に構築することができるプラットフォームであり、Shopify アプリとはそのプラットフォームを拡張する機能のようなものです。WordPress のプラグインのようなもの、とご認識頂いて大丈夫です。
「シンプルブログ読了時間目安表示｜記事を読むのにかかる時間計算」は、ブログ記事の読了時間（読むのにかかる時間の目安）を自動計算して表示できるアプリです。
記事ページに「読了時間の目安：◯分」などを表示することで、読者が読み進めやすくなり、結果的に滞在時間やコンテンツ体験の向上につながります。
ご興味のある方は、以下の URL からインストールしてみてください。
シンプルブログ読了時間目安表示｜記事を読むのにかかる時間計算
料金は Basic Plan $2.99/月（1 週間の無料期間あり） です。
「シンプルブログ読了時間目安表示｜記事を読むのにかかる時間計算」でできること
Shopify アプリである「シンプルブログ読了時間目安表示｜記事を読むのにかかる時間計算」は、ブログ記事に読了時間を表示し、コンテンツの読みやすさ・回遊性を高められるアプリです。
主な特徴は次のとおりです。
- ストアにブログ記事の読了時間目安を簡単に追加
ブログ記事ページに読了時間を表示し、読者が読むペースをイメージしやすくなります。 - 読了目安時間の計算ロジックを設定可能
単語数・文字数カウント、1 分あたりの速度（単語数/文字数）を設定して、自ストアに合う計算ができます。 - ノーコードでデザイン・文言を自由にカスタマイズ
表示テキスト、アイコン、文字サイズ、色、余白などを管理画面から調整できます。 - 1 クリックでテーマに追加
テーマへの追加もスムーズ。難しいコード編集は基本不要です。
これらを活用することで、ブログを読みに来たお客様が「読むかどうか」を判断しやすくなり、記事の離脱を抑えつつ、ストアへの理解・信頼感の向上につなげられます。
ストアにブログ記事の読了時間目安を簡単に追加できる
ブログ記事に「読了時間の目安」を表示できます。
記事のボリューム感が伝わることで、ユーザーが安心して読み進めやすくなります。
読了目安時間の計算ロジックを設定できる！
単語数ベース／文字数ベースのカウントや、1 分あたりの速度を設定して、読了時間の算出方法を調整できます。
日本語メディア中心なら「文字数」がおすすめです。
ノーコードでカスタマイズできる！
表示テキストやアイコン、文字サイズ、色、余白などをノーコードで調整できます。
テーマの雰囲気に合わせて自然に馴染ませられます。
1 クリックでテーマに追加できる！
テーマへの追加も 1 クリックで対応。
はじめての方でも導入しやすい構成です。
アプリのインストール
それでは、実際にアプリをインストールしていきましょう。
シンプルブログ読了時間目安表示｜記事を読むのにかかる時間計算
アプリの料金は Basic Plan $2.99/月（1 週間の無料期間あり） です。
- Shopify 管理画面で「アプリ」へ移動します
- 「Shopify App Store」へ移動します
- 検索窓で「シンプルブログ読了時間目安表示｜記事を読むのにかかる時間計算」を検索し、アプリ詳細を開きます
（アプリ検索結果） - 「インストール」をクリックし、権限を確認してインストールを完了します
以上で、アプリのインストールは完了です。
読了時間表示ブロックをテーマに追加
このアプリは「ブログ記事ページ（Blog post）」に追加して使うのが基本です。
ブログ記事テンプレートにアプリブロックを追加して、読了時間を表示させましょう。
自動でアプリをテーマに追加（1 クリック）
アプリ側の管理画面から、対象テーマを選んで一括で追加する方法です。
- Shopify 管理画面 → 「アプリ」から本アプリを開きます
- 「テーマを選択」から、追加したいテーマを選びます
- 「テーマに追加」ボタンをクリックします
- テーマエディタが開いたら、必要に応じて配置を確認し「保存」します
手動でアプリをテーマに追加
自動追加がうまくいかない場合や、表示位置を細かく調整したい場合は手動追加がおすすめです。
- Shopify 管理画面 → 「オンラインストア」→「テーマ」→「テーマを編集する」を開きます
- テーマエディタ上部のページ選択から「ブログ記事（Blog post）」テンプレートへ移動します
- 読了時間を表示したい位置で「セクションを追加」または「ブロックを追加」をクリックします
- 「アプリ」タブから、本アプリのブロック（例：UR: Blog Reading Time Estimator）を選択して追加します
- 表示内容を整えたら「保存」します
アプリブロックのカスタマイズ（設定項目の解説）
テーマにアプリブロックを追加したら、テーマエディタで表示内容を調整できます。
ブロックをクリックすると、以下のような設定項目が表示されます。
ここからは、主な設定項目をわかりやすく解説します。
読了時間の計算設定
読了時間の「計算方法」を決めるパートです。
- カウント方式（単語数 / 文字数）
- 英語中心の記事：単語数ベースが一般的
- 日本語中心の記事：文字数ベースが使いやすいです
- 1 分間の速度
- 1 分間あたりの単語数または文字数を設定します
- 目安として、日本語の場合は 1 分間に 400〜500 文字に設定することが一般的です（記事の難易度や想定読者に合わせて調整してください）
例）
- 日本語ブログ中心：カウント方式「文字数」、速度「450」
- 海外向けブログ中心：カウント方式「単語数」、速度「200〜250」
表示設定
読了時間の「見せ方（文言・アイコン・表記）」を決めるパートです。
- アイコン
- 例：砂時計 など
- 読了時間の横に表示され、視認性が上がります
- 表示テキスト
- 例：
読了時間の目安: {reading_time} {reading_time}は 計算された読了時間の表示に自動で置換されます- 例：
読了時間の目安: 5分
- 例：
- 読了時間の表示形式
XX分：分だけ表示（シンプルでおすすめ）XX分YY秒：分＋秒を表示（より正確）XX:YY：タイマー風の表記
- 読了時間の分ラベル / 分ラベル（複数形）
- 日本語ならどちらも「分」で OK
- 英語表記にしたい場合：単数
min/ 複数minsなどで分ける運用もできます
- 読了時間の秒ラベル / 秒ラベル（複数形）
- 日本語ならどちらも「秒」で OK
スタイル設定
デザイン（色・サイズ・位置）を調整するパートです。
- 表示位置（左 / 中央 / 右）
- ブログ記事内のレイアウトに合わせて選択します
- テキストサイズ（PC / スマホ）
- 端末ごとに読みやすい文字サイズへ調整できます
- テキストの色
- テーマの本文色に合わせると馴染みやすいです
- アイコンサイズ（PC / スマホ）
- 見出しの近くに置くなら少し大きめ、本文に馴染ませるなら控えめがおすすめ
- アイコンの色
- テキスト色と同系色にすると統一感が出ます
余白の設定
読了時間表示ブロックの上下余白を調整できます。
- 上部の余白（PC / スマホ）
- 下部の余白（PC / スマホ）
見出しや本文との間隔が詰まって見える場合は余白を広げる、間延びして見える場合は余白を狭める、という調整がおすすめです。
その他の設定
- 追加の CSS
- 設定項目だけでは調整しきれない見た目を、CSS で上書きできます
- ブラウザの検証機能（DevTools）で、カスタマイズしたい要素のクラス名を確認して CSS を適用してください
例（※クラス名はストアの実際の要素に合わせて置き換えてください）
/* 例：読了時間ブロック全体の余白を微調整 */
.your-class-name {
margin-top: 8px;
margin-bottom: 8px;
}
## おわりに
今回は「シンプルブログ読了時間目安表示｜記事を読むのにかかる時間計算」のご利用ガイドを解説しました。
最後までお読みいただき、ありがとうございました。
[シンプルブログ読了時間目安表示｜記事を読むのにかかる時間計算](https://apps.shopify.com/sa-134-ur-reading-time-app?locale=ja)
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
