GammaでWebページを作るときの使い方

GammaでWebページを作るときの使い方。Gammaなどを対象に、向き不向きが分かるように整理します。

AIものさし編集部

GammaでWebページを作る目的なら、会社紹介、サービス案内、ポートフォリオ、キャンペーンページのような「読んで理解し、リンクから次へ進むサイト」はGamma Siteで形にできます。ログイン、決済、検索、ユーザーごとの保存など、利用者の操作に応じて裏側の処理が変わるWebアプリは別の実装手段が必要です。作り始める前に、ページを見せるだけで足りるか、データを処理する機能まで必要かを分けましょう。

最初に作るものを一文で決める

生成画面を開く前に、サイトの目的を「誰が、何を知り、見たあと何をするか」で定義します。たとえば「採用候補者が事業内容と募集職種を理解し、募集要項へ進める会社紹介サイト」のように書きます。「おしゃれなサイト」だけでは、生成結果の優先順位が定まりません。

入力メモは次の形にすると、生成後の修正が減ります。

・対象読者:初めて訪れる採用候補者

・伝える内容:事業、チーム、募集職種、選考の流れ

・必要ページ:トップ、事業紹介、募集職種、会社概要

・最重要の次の行動:募集要項を見る

・公開範囲:一般公開

・必要な機能:ページ間navigation、外部応募フォームへのlink

・今回作らないもの:会員登録、応募情報のデータベース保存

この最後の「作らないもの」も重要です。Gammaがページを見栄えよくまとめても、フォーム送信や応募データの保管が自動で実現したことにはなりません。サイトを公開することと、業務システムを作ることを分けて考えます。

Gamma SiteかWebアプリかを判定する

| 必要なこと | Gamma Siteで始めやすいか | 追加確認 |

| 会社・サービス紹介を公開 | はい | 内容とnavigationを確認 |

| portfolioや案内ページを見せる | はい | 画像の権利、表示順を確認 |

| 外部フォームや予約ページへ案内 | 条件付き | 遷移先を別途テスト |

| 訪問者が入力した内容を保存 | 要件次第 | 保存先と処理方法が必要 |

| ログイン後に個別情報を表示 | いいえ、別途設計 | 認証、権限、データ保護 |

| 決済、EC、在庫更新 | 向きにくい | Gamma公式案内ではe-commerce非対応 |

| ブログを継続運用 | 向きにくい | Gamma公式案内ではblogging非対応 |

「条件付き」の項目は、ボタンを置けることと、その後の処理まで動くことを分けて確認します。たとえば応募フォームへの外部リンクはページに置けても、送信データの保存や通知はリンク先サービス側の機能です。

生成前にページの役割を決める

複数ページを作る場合は、ページ数を増やすより各ページの役割を先に割り当てます。トップページで全説明を詰め込むと、訪問者が自分に必要な情報を探しにくくなります。反対に、同じ説明をページごとに繰り返すと更新漏れが起きます。

ページ設計例:

| ページ | 読者の疑問 | ここで示す内容 | 次の行動 |

| トップ | 何のサイトか | 対象者、価値、主要案内 | 事業・サービスを見る |

| サービス | 自分に関係するか | 対象、提供内容、対象外 | 詳細資料へ進む |

| 事例 | 何が変わるか | 課題、実施内容、結果の根拠 | 問い合わせ方法を見る |

| 会社概要 | 誰が運営するか | 組織、連絡先、方針 | 募集・問い合わせへ進む |

| 募集 | 応募条件は何か | 職種、要件、選考手順 | 正式な応募フォームへ進む |

結果や実績を載せる場合は、実在する根拠があるものだけを使います。生成AIに「成果を印象的に」と頼んでも、売上や導入数を事実として補ってはいけません。裏付けがない項目は、削除するか確認待ちとして残します。

生成promptの骨格

Gammaのサイト作成では、目的と読者、ページ構成をまとめて渡すと出力を評価しやすくなります。次のような骨格に、確定している事実だけを埋めます。

「目的:[サイトを作る理由]。読者:[対象者]。読者が最後にする行動:[行動]。ページ:[各ページと役割]。必ず使う情報:[提供済みの事実]。使わない情報:[未確認の実績、推測、架空の声など]。デザインの方向:[色・雰囲気]。navigation:[必要なページ間リンク]。公開前に確認する点:スマートフォン表示、すべてのlink、文章中の事実、画像の利用権。」

例として採用サイトなら、「応募者が会社と職種を判断できる。トップ、事業、職種、選考の四ページ。応募ボタンは正式フォームへつなぐ。社員の声や数値は提供された素材だけを使い、架空の証言を作らない」と具体化します。promptは仕様書の代わりではありません。生成後に各ページをその条件と照合します。

まずは使ってみる

記事の文脈に合うToolへ進めます。報酬の有無で見た目は変えていません。

一部のリンクにはアフィリエイトリンクを含みます。おすすめ順位や判定結果には影響しません。

作成から公開までの進め方

Gamma公式の案内では、Sitesから新しいSiteを作り、promptとthemeを指定して生成し、編集後に公開できます。既存のgammaをSiteへ変換する方法もあります。最初から作る場合は、次の順で小さく確認します。

  1. ページ案を生成する。最初に全ページを細かく飾るより、構成と文章の順番を見ます。

  2. 各ページの冒頭を読む。読者がページの目的と対象をすぐ理解できるか確認します。

  3. 事実を照合する。社名、料金、実績、日付、条件、連絡先を提供資料と見比べます。

  4. navigationを確認する。戻る場所、次のページ、問い合わせ先が分かるかを確認します。

  5. CTAを絞る。ページの目的に直結する主ボタンを一つ決め、補助linkとの強さをそろえます。

  6. Previewで画面幅を変える。desktopだけでなくmobile表示で文字の折返し、画像、ボタンを確認します。

  7. 公開先を決める。無料のgamma.site subdomainでよいか、独自domainが必要かを分けます。

  8. 公開後の更新方法を決める。全ページ公開か、一ページだけの公開かを変更内容に合わせます。

各工程で変更理由を一つに絞ると、どの修正が効いたか判断しやすくなります。「文章を短く」「CTAを上へ」「色を変える」を一度に頼むと、問題が解決したか分かりにくくなります。まず読み手が迷う箇所を直し、その後に見た目を整えます。

Previewで見るべき受け入れ条件

公開ボタンを押す前に、ページの見た目だけでなく行動を確認します。

・最初の画面だけで、サイトの目的と対象者が分かる

・各ページに一つの主題があり、同じ説明を重ねていない

・主CTAの文言が、クリック後の行き先を正確に表す

・すべてのnavigationと外部linkが正しい

・mobileで見出しやボタンが切れず、横にはみ出さない

・画像が本文の主張を補い、装飾だけで情報を隠さない

・個人情報や非公開資料を意図せず掲載していない

・独自domainなら、DNS設定とSSL発行の状態を確認できる

・未確認の価格、実績、利用者コメントが公開されていない

確認は「ページ全体を眺める」だけで終わらせず、ページごとに主CTAを実際に開いて行き先を確かめます。リンク切れや意図と違う遷移は、公開前に直します。フォームがある場合は、入力欄が表示されることと送信後の挙動を分け、データの保存先・通知先も確認します。

よくある失敗と切り分け

| 症状 | まず見る場所 | 対応 |

| サイト全体が一枚の長い資料に見える | ページ役割 | 目的ごとに分け、navigationを置く |

| 生成文が抽象的 | promptの素材 | 読者、提供内容、実際の事実を追加 |

| CTAが何個も同じ強さ | 行動設計 | 最優先の行動を決め、補助linkは弱める |

| mobileで文章が詰まる | Preview | 一段落一論点にし、画像との順序を調整 |

| 公開後の変更が反映されない | Publish状態 | Previewと公開済み状態を区別し、対象pageを確認 |

| 独自domainで警告が出る | DNSとSSL | 設定確認後、証明書反映を待つ。未完了のまま公開URLを配らない |

| 入力内容を処理できない | 機能要件 | 外部フォーム等の担当範囲と保存先を決める |

Gammaの公式説明では、サイトはGamma側でhostingされ、gamma.site subdomainへ公開できます。Pro加入者は外部で取得したcustom domainを接続できます。custom domainはDNS確認後にSSL発行まで時間がかかることがあるため、接続した直後に証明書が成立したと決めつけず、実際のHTTPS表示を確認します。独自domainの条件は変更される可能性があるため、契約判断前に現行プラン表示も読み直します。

公開後の変更と運用

編集を保存したことと、公開ページが更新されたことは同じではありません。Gammaの案内では変更をpreviewしてからpublishし、すべてのページを公開する方法と、個別ページを公開する方法があります。更新範囲を確認してから公開します。公開を止めたい場合も、Site設定からdisableできる案内があります。

更新担当が複数いるなら、誰が原稿の事実を確認し、誰が公開操作をするかを決めます。料金、サービス内容、応募要件のような更新頻度の高い情報は、確認日と担当を運用上記録すると古い案内が残りにくくなります。ページを増やす前に既存ページの情報が現行かを確認してください。

AIものさしの判断

Gamma Siteを選ぶ判断軸は「サイトらしい見た目になるか」より、必要な読者行動がページとlinkで完結するかです。内容を伝えて外部の正式な申込み先へ案内するなら候補になります。一方、利用者データの保存、認証、決済、複雑な検索や業務処理が中心なら、必要なシステムを別に設計します。

生成後は、ページ目的、事実、主CTA、mobile表示、公開domainを確認してから公開します。公開できたという事実は、内容の正確さや事業要件への適合を保証しません。Gamma公式の案内では、現在Siteにe-commerceやblogging機能はありません。機能の範囲が変わり得るため、実際に必要な処理は最新の公式案内で再確認してください。

引用・データ出典

公式情報を編集部が見た内容です。Hands-on未実施の記述は本文かここに分けています。

確認日:

Gamma:Create and publish a site(新しいタブで開く)

Gamma:Set up and customize a site(新しいタブで開く)

Gamma:Publish or disable a site(新しいタブで開く)

次の一手

記事の内容を踏まえて、公式とTool詳細から続けられます。

一部のリンクにはアフィリエイトリンクを含みます。おすすめ順位や判定結果には影響しません。

次に読む・使う

この記事の次に必要な情報へ進めます。