STUDIOでホームページを作成する方法

会社概要、サービス、問い合わせなど、一つずつ内容とデザインを作るページは固定ページとして作成します。実績、スタッフ、物件、メニュー、お知らせなど、同じ項目を繰り返し追加する情報はCMSが向いています。

例えば制作実績なら、「タイトル」「概要」「カテゴリ」「公開日」「画像」「本文」といった項目をCMSモデルに定義し、実績ごとのデータを登録します。一覧と詳細のデザインを共通化できるため、更新のたびにページ全体を複製するより表示を揃えやすくなります。

ただし、数件しかなく更新予定もない情報までCMSにすると、設計と運用が複雑になる場合があります。更新件数、並べ替え、絞り込み、担当者を考えて選びます。

サイトはプロジェクト単位で管理し、必要に応じてメンバーを招待します。デザイナー、文章担当、確認担当などが同じ画面で作業できます。

共同制作では、誰でも公開設定や重要ページを変更できる状態にせず、役割と公開手順を決めます。料金表、規約、ドメイン、フォーム通知先など、事業に影響する設定は確認者を置いてください。

Freeプランは、エディターの操作、レイアウト、CMS、フォーム、Studio上での公開を実際に試す段階に向いています。独自ドメインが不要で、無料枠の条件が用途に合う小規模サイトにも利用できます。

ただし、公開URL、Studioのバナー表示、解析、ページ数以外の各種上限を確認します。事業サイトで長期利用する場合は、独自ドメインだけでなく、必要な計測と公開後の更新方法まで試してみましょう。

Miniは独自ドメインで小規模サイトを公開しやすい価格帯ですが、公式料金表上のページ数は2ページと404ページです。ホーム、サービス、料金、会社概要、問い合わせ、プライバシーポリシーなどを別ページにすると上限を超えます。

1ページ構成またはごく小規模なサイトに向く条件であり、一般的な複数ページの事業サイトではPersonal以上を比較することになります。CMSで生成するページやシステムページの数え方も、実際の構成を作って確認しておきましょう。

年間費用は、Studioのプロジェクトプランだけでは決まりません。

• Studioのプラン料金
• 独自ドメインの取得・更新料金
• ビジネスメールの料金
• 有料テンプレート、写真、フォント、動画など
• 外部フォーム、予約、決済、会員機能
• 制作、原稿、撮影、翻訳、保守の費用
• 移行や改修に必要な作業費

年払いの「月額相当」と月払いの請求額を混同せず、契約周期と更新日を確認します。制作費を含む全体はホームページ作成費用・相場もあわせてご覧ください。

Studioへ登録し、新しいプロジェクトを作成します。空白から始めるか、テンプレートを利用します。複数人で制作する場合は、個人のアカウントを共有せず、それぞれのアカウントを招待します。

試作プロジェクトと本番プロジェクトを複数作る場合は、どれが正式版か分かる名前を付けます。ドメインや有料プランを誤ったプロジェクトへ接続しないよう注意します。

テンプレートを使う場合は、業種名や写真の印象だけでなく、必要ページ、文章量、CMS、フォームの構成を確認します。購入条件や利用範囲があるテンプレートはライセンスも確認しておきましょう。

空白から作る場合は、最初に次の共通要素を決めます。

• ヘッダーとナビゲーション
• 本文の最大幅
• 見出し・本文・注記の文字スタイル
• 色とボタンのルール
• セクション間の余白
• フッターの情報
• スマートフォンでのメニュー

テンプレート選びの基準はホームページテンプレートの選び方で詳しく扱います。

ページ一覧をもとに固定ページを作り、ナビゲーションへ配置します。ページ名とURLは短く意味が分かるものにし、公開後に何度も変更しないようにします。

事業サイトの例は次のとおりです。

• ホーム
• サービス・商品
• 料金・利用方法
• 実績・事例
• 会社・運営者情報
• よくある質問
• 問い合わせ
• プライバシーポリシー

実績やお知らせをCMSで作る場合は、一覧・詳細・カテゴリなどの関係もここで決めます。

ボックス、文字、画像などを配置し、ページごとに情報を組み立てます。各ページは一つの主題に絞り、H1に相当する大見出し、その下にH2、H3相当の見出しを順序立てて設定します。

文章は、テンプレートの仮文やAI生成文をそのまま公開せず、実際のサービス、対象者、料金、条件へ置き換えます。画像は権利と利用条件を確認し、必要に応じて代替テキストを設定します。

CMSを使う場合は、更新情報の項目をモデルとして定義し、一覧・詳細のデザインと接続します。公開日、カテゴリ、画像、本文など、更新担当者が迷わない項目名にします。

フォームでは入力項目、必須・任意、送信後の表示、通知先を設定し、実際に送信します。個人情報を取得する場合は、利用目的、保存、閲覧権限、削除、プライバシーポリシーを整えます。

パソコンで作ったレイアウトをもとに、タブレットやスマートフォンなど画面幅ごとの表示を調整します。

特に確認するのは次の点です。

• 大きな見出しが不自然に折り返さないか
• 横並びの項目が狭い画面で重ならないか
• 画像の重要部分が切れていないか
• 本文の文字サイズと行間が読みやすいか
• ボタン同士が近すぎず押しやすいか
• メニューを開閉して各ページへ移動できるか
• 長い表や埋め込みが画面からはみ出さないか

エディターの表示だけでなく、実際のスマートフォンでも確認します。

ページタイトル、説明文、URL、検索・共有時に使う画像など、Studioで利用できる設定をページごとに入力します。見出しの構造、画像の代替テキスト、内部リンクも本文制作と合わせて整えます。

独自ドメインを使用する場合は対応プランを契約し、ドメイン側のDNSを設定します。Google AnalyticsやGoogle Tag Managerなどを利用する場合は、対応プランと現在の設定方法、Cookie等への対応を確認します。

プレビューだけでなく、公開URLで次を確認します。

• パソコン・スマートフォンの表示
• メニュー、ボタン、本文リンク、ロゴの動作
• フォーム送信、完了表示、通知メール
• 料金、住所、連絡先、営業時間の正確性
• CMS一覧と詳細の表示、並び順
• 非公開ページ、テストデータ、仮文章があるかどうか
• 独自ドメイン、SSL、計測タグ
• ページタイトル、共有時の表示

公開後の修正は、影響範囲を確認してから反映します。大きな変更前は、利用できるバージョン履歴の期間も確認しておきましょう。

CMSモデルは、デザインより先に「何を入力し、どう一覧化し、どう探すか」を決めます。

例えば事例ページなら、次の項目が候補です。

• 事例名
• 業種・カテゴリ
• 課題
• 対応内容
• 成果
• メイン画像
• 公開日
• 関連サービス

カテゴリや日付を単なる文章にせず、並べ替えや絞り込みに使える項目として設計すると運用しやすくなります。一方、モデル数、アイテム数、共同編集の権限はプラン条件を確認します。

問い合わせフォームを置く場合、入力欄だけでなく、送信後の処理を決めます。

• 誰が回答を閲覧できるか
• どのメールアドレスへ通知するか
• 何営業日以内に返信するか
• 迷惑送信や誤送信へどう対応するか
• 回答をいつまで保存し、どう削除するか
• 上限到達時に受付がどうなるか
• プライバシーポリシーで何を説明するか

公開前に異なる端末とメールアドレスでテストし、通知が迷惑メールへ入らないかも確認します。

StudioにSEO設定項目があっても、入力するだけで上位表示されるわけではありません。

• 検索する人の疑問に合うページを用意する
• ページごとに主題を分ける
• タイトルとH1を内容に合わせる
• 見出しで情報を順序立てる
• 関連ページを内部リンクでつなぐ
• 画像を軽くし、表示を確認する
• 公開後にクロール・インデックス状態を確認する
• 古い情報を修正する

CMSページでは、同じタイトルや説明文が大量に作られないよう、項目との接続を確認します。不要なテストページや重複ページを公開しないことも重要です。

別のレンタルサーバーへCMSをインストールせず、作成したプロジェクトをStudioから公開できます。サーバー側の細かな初期設定より、構成、文章、デザインへ集中しやすくなります。

案内ページだけでなく、実績、お知らせ、スタッフなど、繰り返し更新する情報をCMSとして管理できます。更新担当者は決められた項目へ入力でき、一覧・詳細のデザインを揃えやすくなります。

公式にはリアルタイム共同編集や権限管理が案内されています。デザイン、原稿、確認を複数人で進める場合、ファイルを何度も送り合う工程を減らせます。

Freeプランでエディター、CMS、フォーム、公開状態を試せます。有料契約前に、自分のサイトに近い1〜2ページを作り、スマートフォン表示と更新作業まで体験できます。

コードを書かなくても、Webレイアウトの知識が不要になるわけではありません。親子関係、幅、高さ、余白、整列、画面幅ごとの変化を理解しないと、修正時に崩れやすくなります。

自由に配置する前に、公式の基本操作とレスポンシブの考え方を学び、共通部品を使います。複雑な動きや装飾を増やすと、確認端末と保守範囲も増えます。

予約、決済、会員、複雑な検索などは、Studio標準機能だけで完結しない場合があります。外部サービスを埋め込む・連携する場合は、次を確認します。

• Studioのプランと外部サービスの料金
• スマートフォン表示と読み込み速度
• Cookie、個人情報、利用規約
• 障害時の問い合わせ先
• データの保存先と出力方法
• 外部サービス終了時の代替手段

見た目として埋め込めるかだけでなく、業務全体が完了するかをテストします。

Studioは公開基盤を含むクラウドサービスです。別のCMSやサーバーへ移る場合、現在のデザイン、CMS、フォーム、設定を同じ状態で移せるとは限りません。

公式の現在の書き出し・移行機能を契約前と移行前に確認し、少なくとも次の元データは手元でも管理します。

• ページ原稿と見出し構成
• 元画像、ロゴ、動画、PDF
• ページとURLの一覧
• CMSへ登録した情報
• フォーム回答の保存・出力方法
• ドメイン、メール、計測の契約情報
• 外部サービスのアカウント

サービス変更時にデザインを再構築する費用と期間も想定しておくと、長期的な比較ができます。

独自ドメインとビジネスメールは、Studioのサイト公開とは別に管理する項目があります。ドメインの取得先、登録名義、更新料金、DNS、移管方法を記録します。

制作担当者だけが契約情報を持たず、事業者側でも管理できる状態にします。プランを解約・変更するときは、サイト、ドメイン、メール、外部サービスへの影響を分けて確認しておきましょう。

クラウドサービスの料金、プラン名、上限、機能は変更される可能性があります。公開後も、契約更新前に料金表とお知らせを確認し、現在のページ数、CMS、フォーム回答、必要機能がプラン内に収まっているか確認します。