ホームページの数字が表示されない原因と、直し方の実測記録

先に結論を書きます。スクロールすると数字が増えていく演出は、実装を間違えると「JavaScriptが動かない環境では0のまま」になります。そして自分のサイトが、まさにそうなっていました。実績の4項目はすべて0で、修正するまで機械から見える数字は1つもありません。

2026年8月8日時点の自分のサイトのHTMLを開いたところ、トップページに並べていた実績の数字4つが、すべて 0 と書かれていました。臨床15年も、執筆200本超も、すべてです。ブラウザで普通に見れば正しい数字が出るので、1年近く気づきませんでした。

この記事では、何がどう間違っていたのかを、修正前後の実測で書きます。あわせて、あなたのサイトが同じ状態かどうかを1分で確かめる手順も置きました。

こうした「見た目では気づけない不具合」を含めて確認するのが無料のサイト診断です。制作や運用の範囲はサービスと料金の考え方にまとめています。

<!-- def --> JavaScriptとは、ページを開いたあとに動いて、表示を変えたり数字を数え上げたりする仕組みのことです。止まっても、HTMLに書いてある文字そのものは残ります。

何が起きていたのか

制作会社のサイトには、こういう数字がよく並んでいます。

• 創業◯年
• 制作実績◯件
• 顧客満足度◯%

これをスクロールに合わせて0から increment させる演出は定番です。実装はだいたい次の形になります。

``html <span class="z-count" data-to="200">0</span> ``

HTMLには 0 と書いておき、JavaScriptが data-to の値まで数え上げる。画面で見れば200まで増えるので、作った本人は正しく動いていると思います。

問題は、JavaScriptが動かなかったときにHTMLの 0 がそのまま残ることです。 数字が出ないのではなく、「0」という別の数字が表示されます。実績200本が、実績0本として読まれます。

誰がその「0」を見るのか

「今どきJavaScriptを切っている人なんていない」と思われるかもしれません。実際、ブラウザで意図的に切っている人はごく少数です。ただし、JavaScriptが動かない状況はそれだけではありません。

自分のサイトは、アニメーション用のライブラリを外部のCDN（cdnjs.cloudflare.com）から2本読み込んでいます。この2本が届かなければ、演出は動きません。自分のサーバーが正常でも、他社のサーバーの都合で数字が0になるという作りだったわけです。

修正前と修正後を実測しました

2026年8月10日に、修正前のバックアップファイルと、現在公開中のサイトの両方を測りました。

測り方は単純です。HTMLから <script> を全部取り除いた状態、つまりJavaScriptが1行も動かないブラウザが見る文字列を取り出し、実績数字の中身を読みました。

結果

修正前は4つとも0でした。1つも例外はありませんでした。

修正後は、公開中のサイトが返すHTMLにも実数が入っています。同じことは、ターミナルが使える方なら次の1行で確認できます。

``bash curl -s https://yutaka-web.jp/ | grep -o 'class="z-count" data-to="[0-9]*">[^<]*' ``

2026年8月10日時点の出力は data-to="15">15 のように、指定値と表示値が一致しています。修正前のバックアップに同じ処理をかけると、すべて >0 で終わります。

直し方はHTMLを1文字変えるだけでした

やったことは2つです。

1. HTMLに実数を書く。 >0< を >15< に変えるだけです。JavaScriptが動かなければ、この実数がそのまま残ります。
2. 数え上げる直前に0へ落とす。 アニメーションを始めるタイミングでJavaScript側が0にしてから増やします。演出は今までどおりです。

さらに、ライブラリが読み込めなかった場合は処理全体を中断する分岐を入れてあります。CDNが落ちた日でも、HTMLに書いた実数が画面に残ります。演出は消えますが、数字は正しく読めます。見た目を守るか、情報を守るかで迷ったら、情報のほうを残すという判断です。

「0」が正しい場合もあります

ここは間違えやすいところなので分けて書きます。同じサイトの別の場所に、HTMLに 0 と書いてある数字がもう1つあります。セルフチェックの「◯/5 該当」という集計です。

こちらはチェックが入るたびに増える設計なので、開始時点で0が正しい値です。 JavaScriptが止まれば0のままですが、それは嘘ではありません。まだ1つもチェックしていない状態を正しく表しています。

見分け方は「JavaScriptが動かなかったとき、その0は事実か」を問うだけです。

• 実績200本を0と表示する → 事実と違う。直す
• チェック0個を0と表示する → 事実。直さなくてよい

数字を機械的に全部書き換えるのではなく、1つずつ意味を見る必要があります。

あなたのサイトを1分で確かめる手順

専門知識は要りません。ブラウザだけでできます。

手順1：JavaScriptを切って自分のサイトを開く

Google Chromeの場合です。画面に出る文字のとおりに書きます。

1. 自分のサイトを開く
2. キーボードの F12 を押す（開発者ツールが開きます）
3. Ctrl + Shift + P（Macは Command + Shift + P）を押す
4. 出てきた入力欄に javascript と打つ
5. 一覧の中の 「Disable JavaScript」 を選ぶ
6. F5 を押してページを読み込み直す

これでJavaScriptが止まった状態のサイトが見えます。数字の部分を確認してください。

確認が終わったら、同じ手順で 「Enable JavaScript」 を選んで戻してください。戻し忘れると他のサイトも動かなくなります。

手順2：数字以外も見る

止めた状態で、次が読めるかどうかを見てください。

• 会社名・事業所名
• 電話番号と住所
• サービス内容の説明文
• 問い合わせフォームへのリンク

このあたりが消えるサイトは、数字より深刻です。 制作を依頼している場合は、制作会社に「JavaScriptを切った状態で主要な情報が読めるようにしてほしい」と伝えれば通じます。

手順3：ついでに全ページ見ておく

自分のサイトは、この機会にトップ階層とコラムを合わせた19ページ全部を測りました。JavaScriptを止めた状態で読める文字数を数え、極端に少ないページがないかを確認しています。

結果、19ページ中0ページが「本文500字未満」でした。トップページはJavaScriptを止めた状態でも6,668字が読めます。数字の演出以外は、もともとHTMLに書いてありました。壊れていたのは演出をつけた4か所だけだったわけです。

裏を返せば、演出をつけた場所こそ疑うべきということです。動きをつけた箇所は、動かなかったときの状態を必ず確認してください。

この件から言えること

制作会社を選ぶとき、実績の数字を見る方は多いと思います。ただ、その数字がどう作られているかまで見る方はほとんどいません。

自分のサイトで見つけたこの不具合は、見た目の派手さを優先した実装が、情報の正しさを削っていた例です。演出そのものは悪くありません。演出が失敗したときに何が残るかを設計していなかったのが問題でした。

同じ考え方は、数字以外にも当てはまります。スマートフォンでの見え方についてはスマホ対応ができているかの確認方法に、制作会社の検索実績の確かめ方については「SEOに強い」制作会社かを確かめる方法に書きました。どちらも自分のサイトを測った記録です。

制作の考え方や進め方はサービスのご案内にまとめています。

まとめ｜ホームページの数字が表示されない原因と直し方

• スクロールで数字が増える演出は、実装を間違えるとJavaScriptが動かない環境で「0」のままになります
• 自分のサイトでは、トップページに並べた実績4項目がすべて 0 と書かれていました（2026年8月8日時点）
• 直し方は順番を入れ替えるだけです。HTMLに正しい数字を先に書き、JavaScriptが動いたときだけ0から数え上げる形にします
• 確かめ方は1分。ページのソースを表示して、実績の数字が 0 になっていないかを見ます
• 「0」が正しい場合もあります。事実と違う数字が出ているかどうかで判断してください

よくいただく質問

JavaScriptを切って見る人なんて本当にいるんですか

意図的に切っている人は少数です。ただ、この記事で問題にしているのは「人が切る」場合だけではありません。外部CDNの障害、企業や医療機関のネットワーク制限、通信の失敗など、利用者の意思とは関係なくJavaScriptが動かない状況があります。自分のサイトはアニメーション用ライブラリを外部から2本読み込んでいるため、その2本が届かない日には演出が止まります。頻度は低くても、起きたときに実績が0と表示されるのは避けたい、という判断です。

検索順位に影響しますか

Googleは JavaScript を実行してページを見るため、この不具合が直接的に順位を下げるとは考えていません。この記事は順位対策の話ではなく、表示された情報が事実と違っていたという話です。ただし、HTMLをそのまま読む要約ツールやプレビュー生成の類は実行しないものもあるため、HTMLに正しい値を書いておく意味はあります。

自分のサイトが同じ状態だったら、どう直せばいいですか

多くの場合、HTMLの数字を書き換えるだけで済みます。>0< と書いてある部分を >200< のように実数に変え、JavaScript側で数え上げを始める直前に0へ落とす1行を足します。演出の見た目は変わりません。制作会社に依頼している場合は、この記事のURLを渡してください。「JavaScriptが無効なときに実数が残るようにしてほしい」と伝えれば通じます。自分で触れない仕組み（ページビルダーやテーマの機能）で入れている場合は、その機能の設定に「初期値」の項目がないかを先に探してください。

数字の演出はやめたほうがいいですか

やめる必要はないと考えています。実際、自分のサイトでは演出を残したまま直しました。大事なのは、動かなかったときに何が残るかを決めておくことです。演出は「あれば良いもの」、数字そのものは「無いと困るもの」と切り分けて実装すれば、両立します。

この記事の測定について

• 測定日：2026年8月10日
• 対象：yutaka-web.jp のトップページおよびコラムを含む19ページ
• 修正前の状態：2026年8月8日付のバックアップファイル（index.html.backup-2026-08-08）
• 測り方：HTMLから <script> 要素をすべて除去し、実績数字の要素に書かれている文字列を取り出して、指定値と一致するかを機械的に照合
• 公開中のサイトについては、同日にHTTPで取得した生のHTMLに対して同じ照合を実施

この記事に書いた数字は、すべて上記の方法で自分で測った値です。修正前の4項目がすべて0だったこと、修正後に指定値と一致したことは実測値です。19ページ中0ページが本文500字未満だったこと、トップページのJavaScript無効時の可読文字数が6,668字だったことも同じです。

なお、JavaScriptを有効にした状態でのアニメーションの最終表示値については、今回使った検証環境ではブラウザの表示領域の高さが正しく取得できず、スクロール連動の処理を再現できませんでした。そのため「演出が完走したときの表示」は測定できていません。 この記事で扱っているのは、あくまでJavaScriptが動かない状態のHTMLに何が書かれているかです。

この記事でやったのは、HTMLから <script> を外して、残った文字だけを読むという確認です。手順は難しくありません。自分で測ってみて、数字がどう出たかの読み方だけ聞きたい、というご相談でも構いません。測り方を相談する（無料・売り込みはしません）。