テンプレートは、配置や見た目の土台です。HTMLのひな形、WordPressのテーマ、サイト作成サービスのデザイン案などが同じ言葉で呼ばれます。見た目が似ていても、編集する場所と公開する仕組みは違います。選ぶ前に、何の環境で使うテンプレートかを確認します。

WordPressのテーマはサイトの外観などを作る仕組みで、その中のテンプレートはページの種類へ対応する配置です。ページの文章そのものと共通配置を混同しないでください。ブロックテーマならサイトエディターを使う方法がありますが、全てのテーマに同じ画面があるわけではありません。

架空の点検案内なら、長い受付条件、三つの準備物、月に一度のお知らせが必要です。大きい写真一枚と短い標語だけの見本が美しくても、この内容を入れる領域が不足する可能性があります。業種名や「SEO対応」の一語より、必要なページと内容を再現できるかを先に見ます。

WordPressの候補は、公式のTheme Directoryで探せます。現在使うWordPressに合うか、ブロックテーマか、説明と更新・対応条件を候補の詳細で確かめます。CMSは文章や画像を管理画面から更新する仕組みです。サイト作成サービスなら、その提供元の公式テンプレート一覧が入口になります。HTMLひな形なら配布元の利用条件と同梱ファイルを読み、非公式のまとめ画像だけで採用しません。候補が公式一覧にあることと、自社の原稿や運用へ合うことは別です。

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

候補を二つか三つへ絞り、トップの短い説明、サービスの詳細、次の行動のページを確認します。ECなら購入条件と商品、飲食店ならメニューと来店情報、記事媒体なら一覧と本文など、目的に応じて置き換えます。全てのサイトに同じ三ページを強いる意味ではありません。

点検案内の架空例では、候補Aは写真が広く説明が短い、候補Bは準備物と条件の説明を置く領域があります。同じ主見出し、長めの条件、三項目の準備物を仮に入れ、狭い画面で最後まで読めるかを見ます。デモの英語の短文や理想的な写真のまま比べないでください。

更新担当者には、本文を直す、画像を替える、下書きを保存する操作を試してもらいます。共通メニューを変えると何ページへ反映されるか、権限を持つ人だけ変更できるかも確かめます。画面を確認できない候補は「未確認」とし、価格が安いことを理由に未確認を合格へ変えません。

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

無料のテンプレートでも、公開先、独自ドメイン、保守、画像、改修に費用がかかる場合があります。有料のテンプレートも、購入すれば必要な文章や写真がそろい、全ての不具合を直してもらえるとは限りません。本稿は価格の相場や特定商品の現行料金を断定せず、見積もりで比べる項目を示します。

購入費や月額のほか、利用できるサイト数、商用利用、改変、表示義務、再配布、契約終了後の利用を配布元で確認します。含まれる画像やフォントの条件が、テンプレート本体と別の場合もあります。ダウンロードした日と利用条件のページを記録し、分からない箇所を販売者へ確認します。

サポートは、問い合わせへ答える範囲と、作業を代行する範囲を分けます。CMSやブラウザーの更新に追随する人、追加機能の保守、バックアップと復旧の担当も決めます。独自サービスでは、文章・画像・URLを書き出して移せるかも重要です。制作会社へ依頼する場合も、テンプレート購入代と原稿・設定・保守を分けて見積もりを確認します。

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

最初に会社名、主見出し、説明、画像、リンク先を実際の内容へ置き換えます。ダミーの実績や写真の説明を残さず、提供できない機能を示すリンクは修正します。次に同じ役割の見出しの大きさ、文字の色、余白などを調整します。ページの構造を大幅に変えたい場合は、ひな形そのものが合わない可能性もあります。

HTMLひな形の練習はtemplate-demoフォルダーへ次の二ファイルを保存します。CSSで.service-card h2を選ぶと、このカード内のh2へ適用できます。h2全体を変える指定より範囲を限定した例です。paddingは枠の内側の余白です。背景やpaddingを変え、同じ文章を狭い幅で読んで確認します。練習の数値を全サイトへ貼る操作は行いません。

コードのremは、ページのhtml要素の文字サイズを基準にした長さの単位です。1.5remならその1.5倍の長さです。文字の拡大へ合わせて幅や余白も変わるため、実原稿と狭い画面で読み直します。数値だけを暗記せず、どの領域の何が変わるかを比べてください。

WordPressで同じ変更をする場所はテーマによって違います。ブロックテーマのStylesやテンプレートの変更は広い範囲へ影響する場合があります。親テーマのファイルを直接編集すると更新時に失われる可能性があるため、子テーマなどで変更を分ける公式の方法を担当者が検討します。子テーマを作っただけで更新後の確認が不要になるわけではありません。

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

細い画面で主見出しが切れないか、条件の表がはみ出さないか、メニューと次のリンクを操作できるかを見ます。文字を拡大し、Tabキーでリンクや入力欄へ移り、選択位置が分かることも確かめます。W3CのEasy Checksはこうした初期確認を示しますが、簡易確認だけで全ての障壁がないとは判断できません。

表示が崩れた場合は、テンプレート本来のデモ、実原稿を入れた版、CSS変更後の版を分けて見ます。長文で崩れるのか、追加CSSで崩れるのか、別のプラグインで崩れるのかを記録します。HTML例でCSSが効かなければ、hrefとstyle.cssの保存場所、綴り、保存・再読込みを確認してください。

変更前のファイルと設定を控え、CMSならデータベースとファイルのバックアップ・復旧担当を確認します。本番で候補テーマを次々と有効化せず、担当が用意した検証環境で試します。バックアップがあることと実際に戻せることは別なので、復旧方法を確かめられない場合は公開への切替を保留します。

この章の根拠：出典3出典1出典4

テンプレートの見本は出発点です。架空の点検案内では、長い受付条件とお知らせを試せる候補を残し、表示と更新操作を確認する流れにしました。候補Bを残した例は説明のためで、特定の商品や実際の採用結果ではありません。

比較表へ必要ページ、実原稿、操作結果、費用の範囲、利用条件、未確認の箇所を残します。大きな独自機能や複雑な会員管理が必要なら、見た目のひな形だけで選ばず制作方式から確認します。必要以上の改変が続く場合も、別の土台が適切かを検討してください。

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