# 特設サイト制作の進め方9工程を実例で解説｜トイレ我慢サイト設計ノート

- ページ: https://toilet-gaman-special.pages.dev/note/
- 作成: 2026-09-23 ／ 更新: 2026-09-26
- 対象: トイレ我慢ゲーム 特設サイト（https://toilet-gaman-special.pages.dev/ ）

トイレ我慢ゲーム特設サイトを作ったときに、事前調査から公開まで、どのような順番で、何を考えて決めたかをまとめた資料です。特設サイトやLPの制作を9つの工程に分け、工程ごとに「考えたこと」「決めたこと」「次回も使えるポイント」を整理しています。

| 項目 | 内容 |
|---|---|
| 完成したサイト | toilet-gaman-special.pages.dev |
| 内容 | 6作品を紹介する1ページのサイト |
| 工程 | 事前調査から公開まで 9工程 |
| 動作確認 | 画面幅5種類 × 表示状態3種類。不具合7件を修正 |

## この資料の要点

- **質問の前に、過去の資料を確認する。** 過去に決めたことや使える素材を先に確認すると、依頼者への質問を減らせます。
- **演出には、テーマと結びつく理由を持たせる。** 渦の演出を「トイレの水の渦」と結びつけることで、派手な演出にも意味が生まれます。
- **複数の画面サイズで確認してから完成とする。** 自分の画面で問題がなくても、スマホなど別の画面サイズでは崩れることがあります。

## 01 事前調査：過去の決定・素材・注意点を確認する

**考えたこと：** 依頼者に改めて聞かなくても、すでに分かっていることは何か。

作業を始める前に、過去の作業記録と、過去の失敗や注意点をまとめたナレッジを確認しました。その結果、同じシリーズでPRサイトを2つ作っていたことが分かりました。記録には、過去に依頼者が決めた方針（「明るく映画のような雰囲気」「アニメーションは多め」「ログインや課金の機能はなし」「動きを減らすボタンを付ける」など）が残っていました。

集めた情報を3つに分類しました。

- 決まっていること：明るい雰囲気（→ 今回は暗めに変更）／アニメーションは多め／個人のサイト（ログインなし）／「動きを減らす」ボタンを付ける
- 使える素材：既存のPRサイト 2つ／作品データ（5作品分）／プレイ動画 5本／イラスト・ゲームオーバー画面・オープニング動画
- 注意点：日本語フォントはページの読み込みを重くする／公開先で「.html」が省略され、下の階層のページが開けなくなることがある／非表示にしたはずの要素が、クリックを邪魔することがある／画像の縦横比のずれを見落としやすい

**決めたこと：**
- 過去の方針は「確定」ではなく「回答案」として使う。今回は変わる可能性もある前提で扱う。
- 注意点は作業前に確認しておく。作った後に気づくと、修正の手間が増える。

**次回も使えるポイント：** 事前調査の情報は「決まっていること」「使える素材」「注意点」の3つに分けて整理する。

## 02 参考サイトの分析：見た目ではなく、仕組みを言葉にする

**考えたこと：** 参考サイトの「どこ」を取り入れるのか。

参考にしたのは、中央の画像が分割され、周囲に大きく変形していく「とろけるような背景」の事例紹介です。記事だけで判断せず、元のサイトも開いて実際の動きを確認し、どういう仕組みで動いているかを3つに分けて書き出しました。

- 構造：中央に円形の画像。その外側を、同じ画像を引き伸ばして埋める。
- 動き：外側を何重かの輪に分け、輪ごとに違う向き・速さで回すと、溶けているように見える。
- 切り替え：次の画像に移るとき、画像が4つに割れて外へ広がり、中心から次の画像が現れる。

本番サイトでは、WebGL（ブラウザで高度な描画をするための技術）で計算しています。

**決めたこと：**
- 参考サイトのプログラムや画像は使わない。仕組みだけを参考にし、プログラムは自分で書く。
- 「処理が重い」という注意点には、動きを止める機能と、画面の外では描画を止める仕組みで対応する（工程07）。

**次回も使えるポイント：** 参考サイトは、「構造」「動き」「切り替え」の3点を言葉で説明できるまで観察する。その説明が、制作の仕様になる。

## 03 素材の選定：演出に合う素材を選ぶ

**考えたこと：** 手元の素材のうち、円形の演出に入れて見栄えがよいのはどれか。

既存の2つのサイトから、画像・動画・作品データを33ファイル（約15MB）集めました。この演出は画像の中心を拡大し、外側に引き伸ばすため、選ぶ基準は「きれいかどうか」ではなく、中心に人物などの主役がいるか、奥行きがあるか、字幕やボタンなどの文字が画像に入っていないか、の3点です。

| 素材 | 判定 |
|---|---|
| 走る会社員（オープニング動画の1場面） | 採用（字幕の部分を切り取って使用） |
| まっすぐな通路（マイクラ風のプレイ画面） | 採用（最も演出に合う） |
| 投手のイラスト（縦長） | 採用 |
| 告知画面（約束の地へ） | 変更 → プレイ中のマップ画面 |
| タイトル画面（マイクラ風） | 変更 → 通路のプレイ画面 |
| ポスター（3D） | 変更 → 動画の1場面 |

2つのサイトで掲載している作品が少し違っていたため、公開中のゲームを両方開いて比べ、同じ仕組みのゲームの元の版と改良した版だと確認してから、6作品として掲載しています。

**決めたこと：**
- 6作品それぞれに、演出用の画像を1枚ずつ選ぶ。作品紹介用のポスターと、演出用の画像は別に考える。
- 動画から画像を切り出すときは、字幕や操作表示を切り取る。

**次回も使えるポイント：** 素材の一覧に「演出に合うか」の項目を追加する。確認するのは、中心・奥行き・画像に入っている文字の3点。

## 04 ヒアリング：依頼者にしか決められないことだけを質問する

**考えたこと：** 最大13問のヒアリング項目のうち、今回本当に質問が必要なのはどれか。

工程01で確認した過去の方針を当てはめると、13問のうち9問にはすでに答えがありました。その回答案は表にまとめて見せ、「違うところだけ教えてください」とお願いしました。残った質問は4つです。

1. 掲載する作品は？（2つのサイトで違っていた）→「全部」＝6作品
2. 新しいサイトにするか、既存サイトを置き換えるか？ → 新しいサイト
3. ページ全体の雰囲気は？ → 暗め（過去の方針と逆）
4. 既存サイトの素材をダウンロードして使ってよいか？ → すべて使ってよい

**決めたこと：**
- 質問する前に回答案を表で見せる。依頼者は違うところだけ直せばよいので、確認の負担が小さい。
- 外部に公開される操作や、取り消しにくい操作は、必ず事前に確認する。

**次回も使えるポイント：** 質問するのは、次のどれかに当てはまる項目だけ。「過去に決まっていない」「外部に公開される、または取り消しにくい」「人によって好みが分かれる」。

## 05 コンセプト設計：演出とテーマを結びつける

**考えたこと：** 「なぜこの演出なのか」と聞かれたときに、理由を説明できるか。

| 演出 | テーマとのつながり |
|---|---|
| 円の外側が渦を巻く | トイレの水の渦 |
| 画像が割れて、中心から次の作品が現れる | 水を流す |
| ページのどこまで読んだかを表示 | 我慢ゲージ |
| スクロールすると画面が溶ける | 我慢の限界、ゲームオーバー（便意 78% → 100%） |
| 読み込み中に円が満ちていく | 我慢ゲージをためている |

演出の数の目安：主役の演出は1つ（円形の渦）。補助は「文字が現れる動き」「斜めの帯」「数字が増える動き」の3種類まで。

**決めたこと：**
- ページを読み進めた量を「我慢ゲージ」で表示し、最後まで読むこと自体を小さなゲームにした。
- 目立つ演出をいくつも重ねない。主役の演出を1つ決め、ほかは主役を邪魔しない補助にとどめる。

**次回も使えるポイント：** すべての演出について、テーマとのつながりを1行で説明できるかを確認する。説明できない演出は使わない。

## 06 ページ構成：各セクションの目的を決める

**考えたこと：** 各セクションは、見る人に何をしてもらうためにあるか。

| セクション | 目的 | ボタン |
|---|---|---|
| HERO | 第一印象をつくる（円形の演出で6作品を自動で紹介） | PLAY |
| WORLD | 世界観を伝える（6作品を路線図のように一覧表示） | なし |
| WORKS | 作品を比べて選んでもらう | PLAY ×6 |
| CAST | 親しみを持ってもらう | なし |
| OPENING | ストーリーに引き込む（音はクリック後に再生） | なし |
| GAME OVER | 笑ってもらい、印象に残す | リベンジ |
| PLAY | 遊んでもらう（6作品のカード） | PLAY ×6 |

**決めたこと：**
- 目的が2つあるセクションは分ける。1つのセクションで「説明」と「笑い」を両方やらない。
- 笑いどころ（ゲームオーバー）は、最後の「遊ぶ」セクションの直前に置く。笑った直後が、いちばん遊びたくなるタイミングだから。

**次回も使えるポイント：** 制作前に「セクション名・目的・ボタンの有無」の3列の表を作る。目的を書けないセクションは不要。

## 07 実装：データ・部品・代替表示の設計

**考えたこと：** 作品が7つに増えたり、演出を別の場所で使ったりしても、壊れない作りになっているか。

- 円形の演出のしくみ：円の中は画像の中心を少し拡大して縁を暗くする。円の外側は中心からの距離で輪に分け、輪ごとに回る向きと速さを変える。切り替えは画像が4つに割れて外へ広がり、中心から次の画像が現れる。
- 同じ部品を使い回す：円形の演出の部品を、最初の画面とゲームオーバーの演出の両方で使う。
- 作品の情報は1つのファイルにまとめる：7作品目を追加するときは、作品データに1件追加するだけで、4か所すべてに表示される。
- 代替表示を最初から用意する：通常／動きを減らす／WebGLが使えない端末 の3つの状態のどれでも、ページの内容は同じように読める。

**次回も使えるポイント：** 「データは1か所にまとめる」「演出は部品にする」「代替表示は最初から用意する」。修正する場所が常に1か所で済む作りにする。

## 08 動作確認：画面幅と表示状態ごとに確認する

**考えたこと：** 自分の画面できれいに表示されていれば、本当に完成と言えるか。

画面幅5種類（390・503・768・1024・1440px）と表示状態3種類（通常・動きを減らす・WebGLなし）の15通りを撮影して目で確認し、プログラムを読むだけでは見つからない不具合が7件見つかりました。

| 不具合 | 原因 | 修正 | 次回のポイント |
|---|---|---|---|
| 句読点が行の先頭に来る | 文字を1つずつ別々の要素に分けると、禁則処理が効かなくなる | 句読点や閉じかっこを、前の文字と同じ要素にまとめる | 文字を1つずつ動かすときは、禁則処理を自分で行う |
| ページが横にはみ出す | 回転する輪の外枠は、回転すると大きくなる | はみ出した部分を切り取る設定にする | 回転や拡大をする要素は、外枠の大きさで確認する |
| 円の中に字幕が写る | 動画から切り出した画像に、字幕と操作表示が入っていた | 上下を切り取って、画像を作り直す | 動画から画像を切り出すときは、画像に入っている文字を確認する |
| スマホで本文が切れる | 1列のレイアウトが、中にある一番幅の広い要素に合わせて広がった | レイアウトの最小幅を0に指定する | 1列のレイアウトでは、最小幅を0に指定する |
| 文字が笑いどころの絵を隠す | 画像の見せたい部分と、大きな文字の位置が同じだった | 文字を右上に移動し、縦長の画面では縦長のイラストを使う | 先に画像の見せたい部分を決め、文字はそこを避けて配置する |
| 読み込み中にスクロールするとエラーになる | 画像の読み込みが終わる前に、動きの計算が始まった | 読み込みが終わるまで計算しないようにする | 読み込みを待つ処理には、「まだ準備できていない場合」の分岐を必ず入れる |
| 高さの低い画面で番号と縦書きが重なる（公開後に発見） | 縦書きの文字は、画面の高さによって長さが変わる | 番号を左下に横一列で並べる | 縦書きを使うときは、高さの低い画面でも確認する |

**次回も使えるポイント：** 確認する画面幅と表示状態を先に決めて、すべての組み合わせを確認する。不具合を見つけたら「症状・原因・修正・次回のポイント」の4項目で記録する。

## 09 公開：アップロード後に、ファイルと表示を確認する

**考えたこと：** アップロードが終わったら、公開は完了と言えるか。

公開用のフォルダを別に作り、設計書などの内部資料は含めないようにしました。セキュリティの設定と、SNSで共有したときに表示される画像（1200×630px）を追加してからアップロードしました。アップロード後は、公開された47ファイルがすべて手元のファイルと同じかを確認し（47 / 47 一致）、実際のブラウザでエラーが0件であることも確認しました。この確認の途中で工程08の7件目の不具合が見つかり、修正して再度公開しています。

工程：公開用フォルダを作成 → セキュリティ設定 → 共有用の画像 → アップロード（47ファイル） → ファイルの確認 → ブラウザで確認 → 修正して再公開

**次回も使えるポイント：** 公開は、アップロードで終わりにしない。すべてのファイルが一致しているかの確認と、実際のブラウザでの表示確認までを、公開作業に含める。

## 次のサイト制作で使うチェックリスト

1. 過去の方針・使える素材・注意点を確認し、3つに分けて整理したか
2. 参考サイトの「構造・動き・切り替え」を言葉で説明できるか
3. 素材ごとに、演出に合うかと、画像に文字が入っていないかを確認したか
4. 質問を、依頼者にしか決められないことに絞ったか
5. すべての演出について、テーマとのつながりを1行で説明できるか
6. すべてのセクションについて、目的とボタンの有無を決めたか
7. データを1か所にまとめ、演出を部品にし、代替表示を最初から用意したか
8. 決めた画面幅と表示状態の、すべての組み合わせで確認したか
9. 公開後に、ファイルの一致とブラウザでの表示を確認したか

## よくある質問

**Q. 特設サイトは、どんな順番で作ればよいですか？**
この資料では「事前調査 → 参考サイトの分析 → 素材の選定 → ヒアリング → コンセプト設計 → ページ構成 → 実装 → 動作確認 → 公開」の9工程で進めました。ヒアリングの前に事前調査を置くことで、依頼者への質問を減らせます。

**Q. ヒアリングの質問を減らすには、どうすればよいですか？**
過去の記録から回答案を作り、表で見せて「違うところだけ教えてください」とお願いします。質問するのは、過去に決まっていないこと、外部に公開される・取り消しにくいこと、人によって好みが分かれることだけです。実例では13問のうち9問が回答済みで、質問は4問でした。

**Q. 参考サイトは、どこを見て分析すればよいですか？**
見た目の印象ではなく、「構造」「動き」「切り替え」の3点を言葉で説明できるまで観察します。その説明がそのまま制作の仕様になります。参考サイトのプログラムや画像は使わず、仕組みだけを参考にします。

**Q. 派手な演出を使うときに、気をつけることは何ですか？**
すべての演出について、サイトのテーマとのつながりを1行で説明できるかを確認します。説明できない演出は使いません。目立つ主役の演出は1つに絞り、補助の演出は3種類までにします。

**Q. 動作確認は、どこまでやればよいですか？**
確認する画面幅と表示状態を先に決め、すべての組み合わせを撮影して目で確認します。実例では画面幅5種類（390・503・768・1024・1440px）と表示状態3種類（通常・動きを減らす・WebGLなし）の15通りを確認し、プログラムを読むだけでは見つからない不具合を7件見つけました。

**Q. 公開した後に、何を確認すればよいですか？**
公開されたファイルがすべて手元のファイルと同じかを確認し、実際のブラウザでエラーが0件であることを確認します。実例では47ファイルすべての一致を確認し、その途中で見つかった表示の不具合を修正して再公開しました。