画像でわかる、
ホームページ制作の12手順。
準備・文章・写真・フォーム・公開後の更新まで。必要なところから読み進められます。
準備から公開後まで、12の手順。
このガイドでは、Studioで「お店の紹介・料金・アクセス・問い合わせ」が分かるサイトを作ります。操作はPCで行い、最後にスマホで確認します。予約管理や決済の独自開発は別の工程です。
すでに作り始めている人は、困っている項目から読めます。各手順の末尾に、終わったかを確かめる目安を付けました。
何をしてもらうサイトか、
先に一つ決める。
最初に「誰に、何を知ってもらい、何をしてほしいか」を一文にします。例なら「近隣で美容室を探す人に、料金と店の雰囲気を伝えて、予約ページへ進んでもらう」。この目的を、文章や写真を選ぶ基準にします。
ここで使う店名・文章・数値は説明用の架空例です。自分のサイトでは、確認できた営業情報に置き換えてください。
① 載せる事実を集める
料金表、営業時間、住所、連絡先は、一つのメモに集めます。「税込か」「祝日は営業するか」「予約なしでも利用できるか」まで書くと、公開前の確認項目になります。
② 写真を用途で分ける
最上部に使う1枚、店内・サービスを説明する数枚、外観・入口が分かる1枚を候補にします。ここでの枚数は編集例で、サービスの規定ではありません。
③ 管理する人を決める
ログインを管理する人、料金を直す人、問い合わせへ返事をする人を決めます。一人で担当する場合も、受信箱と確認するタイミングを先に決めておきます。
文章がまだない場合：このメモから始める
対象：初めて利用する人
特徴：少人数・予約制／落ち着いた店内
掲載：メニュー・税込料金・営業時間・アクセス
連絡：既存の予約ページへのリンク
未定：メイン写真、紹介文、公開日
「未定」はそのまま残します。AIに文章を整えてもらう場合も、実績・資格・料金・効果を勝手に補わせず、元の情報と照合します。
誰に何をしてほしいかを説明でき、未定の情報と確認する相手が分かっている。
必要な情報を、
読む順番に並べる。
最初からページを増やさず、訪問者の疑問を並べてみます。「何のお店？」「自分に合う？」「いくら？」「どこ？」「どう予約する？」に答える構成なら、載せる理由が明確です。
右の並びは、このガイドで使う1ページ構成の例です。長くなる内容や、別の検索目的に答える内容は、後から独立したページに分けます。
1ページでまとめる場合
店舗紹介が中心で、料金やサービスを短く説明できる場合の出発点です。上部のメニューから、同じページ内の「料金」「アクセス」へ移動できる構成も使えます。
ページを分ける場合
サービスごとに説明量が多い、料金表が長い、記事を継続追加する場合は分割します。「トップ・サービス・料金・アクセス・問い合わせ」など、各ページの役割を決めます。
問い合わせフォームを置く場合は、取得する情報や扱い方の案内も準備します。既存の予約サービスへ送るだけなら、そのリンク先で利用者が何をするかも説明してください。必要な案内の内容は、実際の運用に合わせて確認します。
各見出しに載せる内容があり、ページの最後まで読んだ人の連絡先が用意されている。
Studioに登録し、
近いテンプレートを選ぶ。
Studioの編集環境として公式が案内しているのは、PCの最新Google Chromeです。スマホは完成したサイトの確認に使います。
アカウントはログインする人、プロジェクトは一つのサイトの作業場所です。公開URLや料金プランはプロジェクトごとに管理します。
- 公式サイトからアカウントを作る。
Googleアカウント、またはメールアドレスなど、公式の登録方法を選びます。後から管理できるメールアドレスを使い、登録した方法を控えてください。
- プロジェクトを選び、テンプレートを探す。
プロジェクト一覧の［＋新しいプロジェクト］から進めます。［テンプレートから始める］ではStudio Storeを開けます。無料・有料を確認し、店舗・会社など近い用途を探します。
- デモを開いて、必要な項目を確認する。
写真の雰囲気だけでなく、料金表・地図・問い合わせ欄の有無、スマホの表示を見ます。採用後に大きく組み替えるより、準備した構成に近いものを出発点にします。
テンプレートを使うと新しいプロジェクトが作られます。既存プロジェクトにそのまま適用できないため、文章を大量に入力する前に方向を決めます。有料テンプレート代と公開プラン料金は分けて確認しましょう。
無料で試してから、有料プランを決めてもいい？
無料プランでもStudioサブドメインで公開できます。独自ドメインを使う場合は、有料プランと外部でのドメイン取得が必要です。ページ数・フォーム回答の閲覧上限・更新履歴など、必要な機能でプランを選びます。
Miniは2ページ＋404ページの上限があります。問い合わせ完了ページや案内ページも含めて数え、料金表の条件と照合してください。Studio.Assistantなど別契約の機能は、このテンプレート編集手順には含めていません。
使うプロジェクトを開けて、掲載したい情報に近い構成のテンプレートを選べた。
操作の参照：アカウントとプロジェクト ↗ ／ プロジェクトの作成 ↗ ／ テンプレート一覧 ↗
文章は、
訪問者の疑問への答えにする。
テンプレートの店名・見出し・説明文を、自分の情報に置き換えます。最上部は「何のサイトか」、サービス欄は「何をしてもらえるか」、料金欄は「支払う条件」を伝える場所です。
文章を短くするだけでなく、判断に必要な条件を残します。たとえば「相談できます」に加えて、相談方法・対応時間・費用の有無を、確認した範囲で示します。
架空の予約制ヘアサロン
SORA
初めての方にも、髪の悩みと希望を伺ってから施術します。メニューと料金を確認し、予約ページからご希望の日時をお選びください。
実際に提供する内容に置き換えて使います。- 書き換えるテキストを選ぶ。
ダブルクリックまたはEnterで編集します。右パネルの［テキスト］欄からも書き換えられます。狙った文字を選べないときは、左のレイヤーパネルで対象を探します。
- 見出しと本文を分けて入力する。
見出しは「料金」「アクセス」など内容が分かる言葉に。本文は、一段落に一つの説明を入れます。見た目を合わせるための空白や改行を大量に入れる前に、ボックスの幅と余白を確認します。
- 固有情報を照合する。
価格・税込表示・対象条件・営業時間・電話番号を、STEP 1のメモと見比べます。テンプレートの架空の実績やレビューを、自分の実績として残さないようにします。
文字を変更できない・全部同じ内容に変わってしまう
紫の枠：共通部品の場合
コンポーネントは複数箇所で共有する部品です。編集すると他の箇所も変わるため、共通の内容かを確認してから編集します。
水色の枠：一覧の場合
リストはデザインを共有し、内容をデータで持ちます。右パネルの［データ］で、エディタ側の表かCMSかを確認し、各項目の元データを変更します。
CMSは、お知らせやブログなどの内容を管理する仕組みです。記事本文とページのレイアウトは、編集する場所が異なります。
サンプルの店名や料金が残っておらず、読んだ人が内容・条件・次の行動を理解できる。
操作の参照：テキストボックス ↗ ／ テンプレート編集 ↗ ／ リストの見分け方 ↗ ／ コンポーネント ↗
写真は、
伝えたい場所に差し替える。
メイン写真は店の雰囲気、サービス写真は内容、外観写真は入口を伝えるために選びます。実際の店舗や商品を紹介する場所には、その実物が分かる写真を用意します。
生成画像や素材写真を使う場合は、イメージと分かる場所で使います。掲載する画像は、利用条件と人物・ロゴ等の扱いを確認したものにします。
- 写真のボックスをダブルクリックする。
［アップロード＆置き換え］を開き、［アップロード］から用意した写真を選びます。通常ページの画像では、この流れで差し替えられます。
- 表示の切り抜きを確認する。
横長の枠へ縦長の写真を入れると、全体が見えないことがあります。写真自体の比率と、枠への収め方を確認します。元の比率を保つ用途はImgモード、文字を重ねる背景用途はBoxモードが使えます。人物の顔や商品名が切れないかを見てください。
- 画像の意味を文章でも伝える。
写真だけで料金や営業時間を説明せず、重要情報は本文にも書きます。Imgモードの画像を選び、右パネル［画像］の［代替テキスト］に説明を入力します。説明（alt）は、「写真」ではなく「店舗正面の入口」のように内容を表します。背景として扱うBoxモードではaltを設定できません。
ロゴや料金表を入れるとき
小さな画像を無理に拡大すると文字や輪郭を確認しにくくなります。元データを用意し、スマホで読めるかを確認します。料金表は文章や表でも掲載すると、数字を直しやすくなります。
画像が重く感じるとき
巨大な元画像を何枚も載せる前に、必要な表示サイズとファイル容量を確認します。圧縮前の原本は別に残し、公開後はスマホ回線でも読み込みを確認してください。
必要な画像が自分の素材に替わり、縦横の比率や表示位置を変えても大切な部分が欠けない。
操作の参照：画像の追加・置き換え ↗ ／ 画像の表示方法 ↗ ／ 代替テキストの設定 ↗
色と文字をそろえ、
余白で読みやすくする。
文章と写真が入ったら、見出し・本文・ボタンの見た目をそろえます。Studioの「スタイル」は、色や文字の設定を複数の場所で共通利用する機能です。
右の数値は、迷ったときの編集上の開始例です。正解やStudioの必須設定ではありません。実際の文章量とスマホ表示を見て調整してください。
見出しで、内容が分かる。
本文は16px前後から確認。
行間を取り、段落ごとに話題を分ける。
文章や写真
① 共通設定を確認
左の［スタイル］を開き、テキストとカラーの登録を見ます。共通スタイルの変更は、適用している全箇所に反映されます。一箇所だけ変えたい場合は、その影響範囲を確認します。
② 大きな箱から調整
ページはボックスの組み合わせです。外側の箱が内側の文章や画像をまとめています。幅や並び方を変えるときは、選択している箱がどの範囲かをレイヤーで確認します。
③ 余白の場所を選ぶ
内側の余白はパディング、外側はマージン、並んだ要素同士の間はギャップです。文字に空白を足すのではなく、空けたい場所に対応する設定を変えます。
説明を増やしたら、ページが窮屈になった
先に見出しを増やして内容を分けます。関連する写真を横または直後に置き、料金の条件は表や短い補足にします。色付きの枠を増やし続ける前に、段落間・写真との間・セクション間の余白を確認します。
強調は「金額」「対象条件」「次に押すボタン」など必要な箇所に絞ります。本文全体が太字だと、どこを先に読むべきか区別しにくくなります。
見出しと本文の違いが分かり、背景に文字が埋もれず、内容のまとまりを余白で区別できる。
操作の参照：文字・色のスタイル ↗ ／ ボックスレイアウト ↗ ／ 余白の設定 ↗
ボタンと地図を、
実際の行き先につなぐ。
ボタンは色付きの箱を置くだけでは動きません。予約ページ・LINE・問い合わせページなど、押した先を設定します。
「こちら」だけでなく「予約ページへ」「料金を見る」のように、移動後の内容が分かる文言を付けます。外部の予約先は、管理画面用URLではなく、お客様が開くURLを使ってください。
同じ予約ボタンは、同じ行き先に。
- ボタンの下地のボックスを選ぶ。
文字だけにリンクを付けるのではなく、ボタン全体を選択して設定します。選びにくい場合はレイヤーで親子関係を確認します。
- 右パネルの［設定］→［リンク］を開く。
外部への移動はURLを入力し、サイト内の別ページは一覧から選びます。リンク先を新しいタブで開くかも、必要に合わせて設定します。
- ライブプレビューで押してみる。
URLの入力ミス、非公開のリンク先、テンプレートのサンプルリンクが残っていないかを確認します。公開済みサイトへの変更は、後でサイト更新が必要です。
店舗の地図を入れる手順
- Google Mapsで正しい場所を開き、［共有］→［地図を埋め込む］からコードを取得します。
- Studioの［追加］→［基本］→埋め込みの［Map］を配置します。
- そのボックスの［埋め込み］→［エディタを開く］で内容を差し替えます。
- プレビューでピンの場所を確認。住所・建物名・入口の案内も本文に書きます。
同じ名前の別店舗を選ばないように、地図だけでなく住所も照合します。地図の設置と、お店のGoogleビジネスプロフィールの登録は別の作業です。
上部メニュー・予約・連絡先・地図を実際に押し、意図した場所が開く。
操作の参照：各種リンク ↗ ／ Google Mapsの埋め込み ↗
問い合わせは、
送って届くまで確認する。
まず「名前・返信先・相談内容」など、返答に必要な項目を決めます。ここでの項目は例です。不要な情報まで入力させない構成にします。
フォームの見た目、回答の保存、担当者への通知、回答者への自動返信は、それぞれ別に確認します。Studio標準フォームには、回答者への自動返信メール機能はありません。
- フォーム内の入力欄を整える。
［フォーム］→［項目一覧］で氏名・返信先メール・相談内容を設定します。返信に使うメール欄は、タイプをメールアドレスにして必須にします。「必須」と表示している欄は、実際の必須設定も一致させます。返信先に使うメール欄の内容が回答として残るかも確認します。
- 回答を受けるメールアドレスを設定する。
フォームを選び、右パネルの［フォーム］→［通知先の設定・集計結果］へ。初回は［有効化する］を選び、［設定］で全体設定または対象フォームの個別設定を開きます。初期通知先はプロジェクト作成者です。別の担当者へ変更し、メンバー以外のアドレスは届くメールで認証します。
- ライブプレビューからテスト送信する。
テストと分かる名前で送信し、完了表示・管理画面の回答・受信メールの3点を見ます。通知が来ない場合は迷惑メールも確認し、回答自体が保存されているかを切り分けます。
完了ページへの通常リンクを付けると、フォームを送信せずに移動する原因になります。完了画面が出たことだけで成功とせず、回答が保存されているところまで確認します。独自の完了ページを使う場合は、フォーム側の［送信後のページ］で指定してください。
未入力でも送れてしまう
必須表示の文字と、入力欄の必須設定を見直します。すべて入力した送信だけでなく、必須欄を空にした場合の挙動も確かめます。
自動返信も必要な場合
担当者への通知メールとは別の要件です。対応する外部フォーム等を検討し、費用・連携条件・返信内容を確認してから選びます。設定したと思い込まないことが重要です。
テスト回答が管理画面に入り、担当者の通知先で受信でき、回答者が送信完了を確認できる。
操作の参照：フォームの設置・設定 ↗ ／ 通知先メール ↗ ／ 送信されない場合 ↗ ／ 自動返信について ↗ ／ 公開前の確認 ↗
スマホで、読む・押す・
入力するまで試す。
画面の幅に合わせて並び方を調整するのが、レスポンシブ対応です。PC用の表示が整ったら、画面下部のツールバーでタブレット、モバイルの順に切り替え、サイズや並び方向を調整します。スマホの幅でも上から最後まで確認します。
エディタの表示切り替えだけで終わらせず、右上の［ライブプレビュー］を開き、QRコードから実際のスマホで表示します。文字だけでなく、メニューの開閉やフォームへの入力も試します。
① 文字と写真
長い店名や見出しが変な位置で折れていないか、本文が小さすぎないか、写真の主役が切れていないかを見ます。スマホの画面に合わせて、余白とサイズを調整します。
② 横並びの内容
PCでは横並びの料金やサービスを、スマホで縦に並べる必要があるか確認します。はみ出す場合は、対象の画像・表・親ボックスの固定幅を見直します。
③ 操作と入力
小さな文字だけでなくボタン全体を押せるか、メニューを閉じられるか、入力中に案内が隠れないかを試します。必須エラーと正常送信の両方を確認します。
プレビューと編集画面の見え方が違うとき
ブレイクポイントごとにサイズや配置は変えられますが、文字や画像の内容、グループ構造は共通です。スマホ表示で文章を削るときは、ほかの表示にも影響する点を確認します。
ライブプレビューは、実際に開いているブラウザーの幅で表示が決まります。エディタ側でタブレット表示に切り替えても、別ウィンドウのプレビューが同じ幅になるわけではありません。プレビューのウィンドウ幅を変えるか、その端末で開いて確認します。
カスタムコードはライブプレビューに反映されないため、使っている場合は公開URLでも確認が必要です。今回の基本手順では、独自コードの追加は前提にしていません。
スマホで横にはみ出さず読めて、連絡先まで進み、必要な入力と送信ができる。
操作の参照：レスポンシブ設定 ↗ ／ ライブプレビュー ↗
ページの名前と説明を、
検索向けにも設定する。
ページの内容ができたら、検索結果などに使われるタイトルと説明文を設定します。タイトルはそのページの主題、説明文は読んで分かる内容を簡潔に示します。
これは検索に伝える準備です。設定した文が必ずそのまま表示される、公開すれば上位になる、という意味ではありません。
- 何も選択していない状態で、右パネルの［ページ］を開く。
個々のページのタイトルと説明文を設定します。複数ページなら「料金」「アクセス」など、ページごとに内容が分かるタイトルにします。
- サイト全体とページ別の設定を確認する。
個別ページの設定が優先されます。共通設定だけを変えて、個別ページにテンプレートの情報が残っていないか確認しましょう。
- 検索に出すページのnoindexを確認する。
noindexは検索結果に出さないよう指示する設定です。集客したい公開ページでオンになっていないか確認し、変更後はサイトを公開・更新します。
タイトルの例
架空の例です。地域・サービス・店名など、ページの内容に合う言葉を使います。「最安」「地域No.1」など、根拠を確認できない表現は付けません。
説明文の例
本文にないサービスや条件を説明文だけに追加せず、本文と一致させます。
サイトマップ・アイコン・共有画像も整える
サイトマップは検索エンジン向けのページ一覧です。ダッシュボード［設定］→［一般］→［サイトマップファイル］をオンにします。公開後に、自分の公開URLの末尾へ /sitemap.xml を付けて内容を確認します。
ブラウザーのタブに出るファビコンや、SNSでURLを共有した際のソーシャルカバーにも、テンプレートの仮画像が残っていないか確認します。
noindexはアクセス制限ではありません。URLを知る人は開けます。まだ見せたくないページは、公開範囲を適切に設定してください。
主要ページのタイトル・説明文が仮文ではなく、検索に出したいページの設定を確認できた。
操作の参照：タイトル・説明文 ↗ ／ noindex ↗ ／ サイトマップ ↗ ／ GoogleのSEOガイド ↗
公開するURLを決め、
本番の画面を確認する。
ドメインはWeb上の住所、サーバーはサイトを配信する場所です。Studioでは配信の仕組みが含まれるため、サイト用のレンタルサーバーを別に契約する必要はありません。
Studioサブドメインなら無料プランで公開できます。独自ドメインを使う場合は、有料プランと外部サービスでの取得・更新が必要です。最初の取得料だけでなく、翌年以降の更新料も確認します。
A. Studioサブドメインで公開
- 右上の［公開］から公開パネルを開く。
- 利用するStudioサブドメインを設定・確認する。
- 公開する内容を確認して公開する。
- 表示された本番URLを開いて確認する。
形は「任意の文字列.studio.site」です。取得できる文字列は画面で確認します。公開後は、プレビューURLではなくこのURLを案内します。
B. 独自ドメインで公開
- 外部でドメインを用意し、対象プロジェクトを有料プランにする。
- ダッシュボード［設定］→［一般］→［公開ステータス］の設定でドメインを入力する。
- 表示されたAレコードを、DNS管理サービスで設定する。
- Studioで接続・証明書の状態を確認して公開する。
Aレコードは住所をStudioの配信先へ結び付ける設定です。数値は古い記事から写さず、設定画面のものを使います。
すでに使っているドメインを移す場合
現在のWebサイトとメールの契約・設定を先に確認します。Studioはメールサービスを提供しません。元のサイトとメールが同じ契約の場合、Aレコードの変更でメールの送受信に影響する構成があります。
変更前のDNS設定を控え、メール用のMX等のレコードや元の契約を一括で消さないでください。管理会社やメール提供元へ、残す設定と移行手順を確認します。既存の公開サイトが切り替わるため、変更する時間も決めておきます。
wwwあり・なし、接続するホスト名、DNSを管理しているサービスは契約によって異なります。全レコードを同じ設定に置き換えず、対象のホスト名を確認して作業します。
独自ドメインが開かない・404になる場合
Studioの接続状態、DNSの設定先、入力したドメイン、証明書の状態を確認します。反映には時間差があり、一定の完了時間は保証できません。証明書はStudio側で自動発行・更新されます。
Studioサブドメインから独自ドメインへ切り替えた直後は、サイトの［更新］が必要です。エラーが続くときは、画面のエラー文と設定内容を添えて公式サポートへ確認します。
プレビューではない公開URLをスマホでも開けて、HTTPS表示・ページ・連絡先が正しい。
操作の参照：ドメイン・公開の流れ ↗ ／ 独自ドメインで公開 ↗ ／ DNSレコード ↗ ／ 同じドメインのメール ↗ ／ TLS証明書 ↗
公開した後も、
情報と問い合わせを管理する。
サイトは、営業時間や料金が変われば更新が必要です。お客様からの質問も、説明を改善する材料になります。更新担当と確認するタイミングを決めて運用します。
Studioの編集内容は自動保存されますが、通常ページの変更は公開サイトに自動反映されません。「保存できた」と「お客様の画面に出た」を区別します。
- 通常ページを直したら、公開パネルで更新する。
プレビュー確認後、右上［公開］→［更新差分を確認する］で内容を確認し、［更新］を実行します。更新は全ページ一括です。ほかの未完成ページや共同編集者の変更も確認してください。
- CMS記事は、記事側の公開状態を確認する。
公開中の記事を編集すると［変更あり］になる場合があります。CMS側の更新まで、公開サイトには旧内容が残ります。表示用の動的ページがすでに公開済みなら、記事の公開・更新だけで反映できます。
- 本番URLを開き直す。
エディタ上の見た目だけでなく、訪問者と同じ公開URLで変更を確認します。表示が古い場合は再読み込みをし、サイト更新とCMS更新のどちらが必要な変更かを見直します。
Google検索で見つかる状態か、Search Consoleで確認する
以下は、有料プランのStudio Apps連携を使う方法です。Search ConsoleはGoogle検索での表示・クリック・登録状況を確認するために使います。
- Search Consoleで［URLプレフィックス］を選び、実際の公開URLを登録します。
- 所有権確認の［HTMLタグ］を選び、タグの
contentに入った確認用文字列をコピーします。 - Studioダッシュボード［ホーム］→［Apps］→［Google Search Console］へ、その文字列を保存します。
- サイトを更新してから、Google側で所有権を確認します。ライブプレビューでは確認できません。
- サイトマップを送信し、主要な公開URLを［URL検査］で確認します。必要に応じてインデックス登録をリクエストします。
ドメインプロパティはDNSで所有権を確認する別の方法です。ここに書いたHTMLタグの手順と混ぜないでください。登録リクエストは掲載や順位を保証せず、同じURLへの繰り返し送信で早まるものでもありません。
情報を更新するタイミング
料金・営業時間・休業日・サービスが変わるときに修正します。営業情報を変えた後は、予約先やSNS等と表示が食い違っていないかも確認します。
改善するときに見るもの
Google検索の表示・クリックと、実際の問い合わせを分けて記録します。アクセスがあっても相談されない場合は、条件の分かりやすさや連絡先の動作を確認します。成果の有無は公開後のデータで判断します。
更新後の本番表示を確認でき、問い合わせの返信と営業情報の更新を続ける担当が決まっている。
操作の参照：公開サイトの更新 ↗ ／ CMSの公開状態 ↗ ／ Search Console連携 ↗ ／ Google所有権確認 ↗ ／ Googleの登録リクエスト ↗
「完成」を確認する12項目。
見た目に加えて、内容・操作・公開状態を確認します。チェックは保存・送信されません。
途中で止まったら、ここから戻る。
SITE PORTの編集の流れも確認する
自分で更新する作業を整理したい方は、SITE PORTの完成例と編集デモも比較材料になります。対応する機能と利用条件は申込前に確認してください。
SITE PORTの編集デモを見る →当メディアとSITE PORTは同じ運営者です。自社サービスの案内を含みます。