ここでは、架空の修理店「まちの修理室」が初めて会社サイトを公開する例を使います。目的は「初めて依頼する人が、受付できる品物と準備を確認して相談する」です。売上や集客の成果を示す実例ではありません。

サイトの種類と方式も、最初の目的から選びます。会社案内は提供範囲と連絡、ブログは記事の一覧と更新、ECは商品・購入条件・決済等が必要です。今回の修理店は案内が主なので三ページから試します。商品販売や継続記事が目的なら、この三ページだけで必要な機能が満たされるとは判断しません。

最初のページはトップ、修理の案内、店舗案内の三つとします。トップは何の店かと次の行き先を示し、修理の案内は対象品、対象外、持参物を答え、店舗案内は確認済みの営業時間と相談方法を示します。最初から記事や予約機能を増やすより、この三ページが正しい案内として使えるかを確かめます。

文章の原本と、写真の元ファイルを別の準備フォルダーへ保存します。写真には誰が撮影し、何の掲載に使えるかを記録します。住所や受付時間は実際の担当者に確認し、未確定の数字を埋めません。予約確定や支払いが必要なら、案内ページの制作とは別の機能として試験を計画します。

サイトを作る理由も具体的にします。名刺から詳しい条件へ案内したい、店頭で聞かれる質問を事前に答えたい、といった役割なら何を載せるか決めやすくなります。サイトを持つだけで売上や信用が増えるとは限らず、誰がどう使う案内かが出発点です。

HTML方式はファイルを自分で編集し、配置して公開します。WordPress等のCMSは、文章や画像を管理画面から更新する仕組みです。公開先と編集が一組のサイト作成サービスも候補になります。更新の人、必要な機能、公開先の管理、復旧できる範囲で比較します。無料ソフトでも契約や原稿・保守の費用はあり、有料サービスでもすべての仕事が含まれるとは限りません。特定製品の古い無料プランを、現在の選択条件として残しません。

この章の根拠：出典1出典6出典8

パソコン上のHTMLをブラウザで開いても、インターネット上へ公開したことにはなりません。公開するサーバーとアクセス先が必要です。ドメイン名を自社で管理するか、提供サービスのアドレスを使うかも選びます。更新日と契約者を控え、担当者個人の契約に依存しない形を検討してください。

WordPressを使う場合は、サーバーが必要な実行環境を満たすことを提供者に確認します。管理画面の自動導入を使える環境もありますが、ボタン名や導入先は提供者によって違います。既存サイトのある場所へ導入すると影響するため、初めての専用環境か、作業用の別環境で行います。

手動導入にはファイルと記事や設定などのデータを保存するデータベースの準備が必要です。データベース名や認証情報を公開ページや共有メモへ書かず、管理者が公式の導入手順と提供者の手順を照合します。本稿は設定ファイルへ貼るコードを示しません。管理権限がない場合は、導入先と作業範囲を管理者へ渡します。

公開URLを https:// で開けるかは提供者の設定を確認します。ドメインとサーバーの関連づけやHTTPS証明書の準備が完了していない場合、URLが開かないことがあります。設定変更を繰り返す前に、契約したサービス、対象ドメイン、エラー表示をそろえて問い合わせてください。料金は初期費と更新費、バックアップや復旧の範囲を同じ条件で比較します。

この章の根拠：出典2出典3出典5

最初にページの土台となるテーマを、作業環境で選びます。テーマはサイトの外観とページの表示を担当するひな形です。公式のTheme Directoryや現在の管理環境から候補を確認し、使うWordPressの版、更新と対応条件を照合します。原稿の長い見出し、写真、メニューを入れ、スマートフォンでも読めるかを見ます。既存の本番テーマを学習用に切り替えないでください。

管理者が用意した作業環境でWordPressへログインします。「固定ページ」から新規追加し、タイトルと原稿を入れます。段落、見出し、リスト、リンクなどのブロックで情報を分け、まず下書きとして保存します。テーマや版、編集権限で画面名と使える設定は異なります。

「修理の案内」はページタイトルを入れ、本文には対象品と持参物の見出し、対象外の説明、店舗案内へのリンクを置きます。見出しの文字を太くするだけでなく、見出しブロックを使います。テーマがページタイトルを出す場合は、本文へ同じ最上位見出しを重ねないよう、実際の画面を確認します。

作業用の環境では、リンク先のページも作ってからリンクを試します。固定ページを公開しても、自動で適切なメニューへ入るとは限りません。ブロックテーマではサイトエディターのナビゲーション、クラシックテーマではメニュー画面など、テーマに合う方法で項目を追加します。

会社案内をトップにする場合は「設定」→「表示設定」のホームページ表示で固定ページを選び、トップとして使うページを指定します。ブログ一覧を使うなら別のページも指定できます。元の設定を控え、変更後はサイトのルートURLから確認します。下書きページや非公開ページを訪問者向けのリンク先に残さないでください。

ブロックテーマではサイトエディター等で色・文字・テンプレートを、クラシックテーマでは対応する設定画面等で調整します。画面と変更範囲はテーマによって違います。固定ページの本文変更と、全ページの枠や見出しの変更を分け、現在の設定を保存して一つずつ確認します。プラグインは機能を追加する部品です。必要な受付やSEOの機能がある場合も、既存機能、公式の条件、試し環境での動作と戻し方を確認し、同じ目的の部品を重ねないようにします。

この章の根拠：出典1出典4出典6出典9

静的なHTMLを選んだ場合は、たとえば site フォルダーへ index.html、service.html、style.css を置きます。index.html が入口、service.html が修理の案内、style.css が共通の見た目です。以下は二ページが相互に移動できる学習用の最小例で、実際の受付やフォーム送信は含みません。

文字だけでも、ページタイトルと見出し、リンク先が確かめられます。ブラウザで index.html を開き、修理の案内へ移動して戻ります。期待する結果は二ページ間の移動です。リンクが開かない場合はファイル名、大小文字、拡張子、同じフォルダーにあるかを確認します。

公開する際は、提供者が指定する転送方法と公開用フォルダーを使います。ローカルのパソコン全体を送らず、公開するファイルだけを分けます。WordPressが動く既存領域に同名のindexファイルを置くと表示へ影響する可能性があるため、作業先を管理者に確認します。

公開先へ送った後は、https:// の公開URLでページと関連ファイルを開きます。パソコン内の表示と公開先の表示は別に確認してください。CSSが読み込まれない場合はリンクの相対パス、転送漏れ、キャッシュ、Networkでの応答を調べます。変更前の公開ファイルを保管し、失敗したら対象ファイルを戻して確認します。

この章の根拠：出典3出典7

本番で公開する前に、原稿の事実、写真の利用条件、スマートフォンでの読みやすさ、キーボードでの移動、リンク先を確認します。受付機能があるなら、テスト用の入力で送信、到着、保存先、担当者の確認まで試します。入力欄を置いただけで完了にはしません。

作業中のサイトを見せたくない場合は、ログイン制限など提供者のアクセス制御を使います。WordPressの「検索エンジンがサイトをインデックスしないようにする」は訪問者のアクセスを止める機能ではありません。下書きの本文が非公開でも、添付した画像のURLが公開される構成もあるため、機密資料を練習用にアップロードしないでください。

公開時には、公開予定のページだけが見えるか、サンプル原稿や仮の連絡先が残っていないかをログアウトしたブラウザで確認します。公開を許可した範囲で検索抑制設定を見直します。Googleが巡回・登録するかは別で、公開した直後の検索掲載や順位を保証しません。Search Console等で検索の状態を確認する作業へつなげます。

公開後は、訂正の窓口と更新担当を置きます。ファイルとデータベースのバックアップを対象にし、復元先と復元する担当を確認します。誤りを見つけたら該当ページを訂正し、重大な受付の失敗なら担当者と公開範囲を見直します。サイトを作って終わりにせず、実際に使われた質問を原稿へ反映してください。

SEOの基本では、想定する読者が検索する言葉と、原稿が答える疑問を照合します。検索結果の本文も確認し、題名だけを似せません。タイトル・見出し・関連リンク・画像の説明を回答へ合わせ、公開後はSearch Consoleの表示やクリックと、窓口に残る質問を別に見ます。検索量や数値が未観測ならそう記録します。見本の修理店には現行条件や成果の実測がないため、実在する条件へ置き換えて確認する必要があります。

この章の根拠：出典4出典5出典6

修理店の初回公開では、トップから対象と持参物へ進み、確認済みの受付方法まで辿れる状態が完成の目安です。文章の誤りや開けないリンクが残る場合は、その箇所を直してから公開します。色や動きを追加する判断は、必要な案内が使える状態を確かめてから行えます。

下の準備表には完成していない欄を残してください。制作・公開を頼む場合も、原稿、公開先、確認結果を渡すことで、作業範囲と未確認の機能を具体的に相談できます。

この章の根拠：出典1出典5