コンサルタントのしおかぜです。ちなみにこの記事も私の情報をもとにClaude codeが私のライターとなり制作してくれています。
---
先日、あるサンプルサイトを公開しようとしたとき、不思議な現象に遭遇しました。
制作ツール上では「ビルド成功」と表示されている。エラーも出ていない。なのに、実際のURLにアクセスすると**画面が真っ白**。
「壊れた？」と一瞬焦りましたが、原因を調べてみると、設定ファイルのたった1行が抜けていただけでした。
今回は、この経験をもとに「完成したはずのサイトが表示されないときの確認ポイント」と、店舗サイトやLPを安く・速く・安全に公開するためのヒントをお伝えします。
---
## 「作り置き型」のサイトが中小企業・個人事業のビジネスに向いている理由
私がこの課題に取り組む際に活用しているのが **Claude Code** です。日々の作業ログや設定ファイルの確認、記事の構成案まで、Claude Codeに相談しながら進めることで、一人でも高速に質の高いアウトプットを出せるようになりました。
まず、今回制作したサイトは「静的サイト」と呼ばれるタイプです。
飲食店で例えるなら、**注文が入ってから調理するのではなく、あらかじめ作り置きした惣菜を並べておく**ようなイメージ。お客さまがページを開くたびにサーバーが処理をするのではなく、完成済みのページをそのまま表示するので、表示がとても速いのが特徴です。
この方式が中小企業・個人事業主や中小企業・個人事業主のサイトに向いている理由は3つあります。
- **表示が速い**：スマホでもサクサク開くので、予約ページへの離脱が減ります
- **サーバー費用が安い**：月額数百円のレンタルサーバーでも十分に運用できます
- **セキュリティリスクが低い**：WordPressでよく聞く「プラグインの脆弱性で改ざんされた」というトラブルとは無縁です
更新頻度が月に数回程度のコーポレートサイトやLPであれば、この方式は第一候補としておすすめできます。
---
## 真っ白画面の原因は「出力形式の設定」だった
さて、冒頭の「ビルド成功なのに表示されない」問題。
原因は、**サイトを「作り置き型」で出力するための設定が抜けていた**ことでした。
制作ツールの設定ファイルに、出力形式を指定する1行を追加するだけで解決。この設定がないと、サーバーにアップしても正しく表示されないファイル形式で出力されてしまうのです。
同じ現象でお困りの方は、以下の3点を順番に確認してみてください。
1. ビルド完了のメッセージに「成功」と出ているか
2. 出力用のフォルダが生成されているか
3. そのフォルダの中に「index.html」というファイルがあるか
この3ステップで、問題の切り分けができます。
---
## 繰り返し修正をしていたら「同じファイルが2つ」に
今回のプロジェクトでは、AIを活用したコード編集ツールを使ってセクションの追加・修正を繰り返していました。
とても便利なツールなのですが、何度も修正を重ねるうちに**同じ役割のファイルが複数生成されてしまう**という問題が発生。たとえば、トップ画像を表示する部品が「Hero」と「HeroSection」の2つ存在していたり、古いスタイルファイルと新しいスタイルファイルが並んでいたり…。
この整理で役立ったのは、**作業の履歴を振り返ること**でした。
「どの修正で・どのファイルが生まれたか」を時系列で確認し、実際に使われているファイルだけを残して、どこからも参照されていないファイルを削除。中小企業・個人事業主の業務でいえば、カルテを見返してから業務対応方針を決めるのと同じ感覚です。
記憶に頼らず、履歴を読めば判断に迷いません。
---
## サーバーへのアップで意外と多い「フォルダごとアップ」の失敗
ファイルの整理が終わったら、いよいよサーバーへのアップロードです。
ここで意外と多いミスが、**出力フォルダ「そのもの」をアップしてしまう**こと。
正しくは、出力フォルダの**中身だけ**をアップします。フォルダごとアップしてしまうと、URLが「○○.com/out/」になってしまい、トップページが「ページが見つかりません」になる原因に。
アップロード後は、以下の3点を最低限チェックしています。
- 画像が正しく読み込まれているか
- リンクをクリックして正しいページに移動するか
- スマホで表示が崩れていないか
この確認を済ませてから、本番公開に進めるようにしています。
---
## まとめ：速く・安く・安全に公開するための3つのポイント
今回の作業を振り返ると、要点は3つに集約されます。
1. **出力形式の設定を忘れない**：これが抜けると表示されません
2. **繰り返し修正したときは履歴で重複ファイルを整理**：記憶より記録を信じましょう
3. **サーバーへは出力フォルダの「中身だけ」をアップ**：フォルダごとは失敗のもとです
中小企業・個人事業主や中小企業・個人事業主のサイトは、凝った動的機能よりも「速く・安く・安全に表示される」ことのほうが集客に直結します。
「うちのサイト、表示が遅い気がする」「制作を頼みたいけど、どんな方式がいいかわからない」という方は、お気軽にプロフィールページからご相談ください。ご状況を伺ったうえで、最適な方法をご提案いたします。
---
WEBサイト制作・広告運用・業務自動化など、Claude Codeを活用した仕組みづくりをご支援しています。「何から始めればいいか分からない」という方も、お気軽にプロフィールからご相談ください。
.png)
