トイレ我慢サイト設計ノート

作業を始める前に、過去の作業記録と、過去の失敗や注意点をまとめたナレッジを確認しました。その結果、同じシリーズでPRサイトを2つ作っていたことが分かりました。

記録には、過去に依頼者が決めた方針が残っていました。「明るく映画のような雰囲気」「アニメーションは多め」「ログインや課金の機能はなし」「動きを減らすボタンを付ける」などです。これらが分かっていれば、同じ質問を繰り返す必要はありません。

参考にしたのは、中央の画像が分割され、周囲に大きく変形していく「とろけるような背景」の事例紹介です。記事には、技術的に難しい表現なので制作工数に注意が必要、とも書かれていました。

記事だけで判断せず、元のサイトも開いて実際の動きを確認しました。そのうえで「かっこいい」という印象ではなく、どういう仕組みで動いているかを3つに分けて書き出しました。この3つが、そのまま作るものの仕様になります。

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

文字が中心のタイトル画面などは、渦にすると文字がぐるぐる回って読みにくいだけになります（下の×の円を参照）。そこで、プレイ動画やオープニング動画から、演出に合う1場面を切り出して使いました。

サイト設計の手順には、目的・対象者・構成・デザインなど、最大13問のヒアリング項目があります。工程01で確認した過去の方針を当てはめると、多くの項目にはすでに答えがありました。その回答案は表にまとめて見せ、「違うところだけ教えてください」とお願いしました。

残った質問は4つです。そのうちの1つ、ページ全体の雰囲気は、過去の「明るい」から「暗め」に変わりました。過去の方針はあくまで回答案で、決定ではありません。この質問をしたのは正解でした。

理由のない派手な演出は、「どこかで見たことがある」「作り物っぽい」という印象を与えがちです。そこで、1つ1つの演出を、サイトのテーマ（トイレを我慢するゲーム）と結びつけました。

たとえば、円の外側が渦を巻く演出は「トイレの水の渦」、作品の切り替えは「水を流す」イメージです。こうすると、同じ派手な演出でも、このサイトで使う理由がはっきりします。

ページは上から「第一印象 → 世界観の紹介 → 作品を選ぶ → キャラクター紹介 → オープニング動画 → ゲームオーバーの演出 → ゲームを遊ぶ」の順に並べました。「PLAY（遊ぶ）」ボタンはページの最後だけでなく、最初の画面・各作品の紹介・ゲームオーバーの演出・最後の一覧に置きました。どこで興味を持っても、すぐにゲームを遊びに行けるようにするためです。

スクロールに合わせて画面が動くセクション（最初の画面とゲームオーバー）は長めに、読むためのセクションは標準の長さにしました。下の図の縦の長さは、実際のページ（画面幅1440px）の長さの比率です。

実装で意識したのは3点です。作品の情報は1つのファイルにまとめる。演出は部品にして使い回す。動きを止めた表示などの代替表示を最初から用意する。こうしておくと、修正が必要になったときに、直す場所が1か所で済みます。

完成したページは、5種類の画面幅と3種類の表示状態で撮影し、目で確認しました。確認用のブラウザを自動で操作し、スクロール位置を指定して撮影しています。その結果、プログラムを読むだけでは見つからない不具合が7件見つかりました。

公開用のフォルダを別に作り、設計書などの内部資料は含めないようにしました。さらに、セキュリティの設定（読み込めるプログラムを自分のサイトのものだけに制限するなど）と、SNSでリンクを共有したときに表示される画像を追加してから、アップロードしました。

アップロード後は、公開された47ファイルがすべて手元のファイルと同じかを確認し、実際のブラウザでエラーが0件であることも確認しました。この確認の途中で、工程08の7件目の不具合（番号と縦書きの重なり）が見つかり、修正して再度公開しています。