本記事は、当社のホームページ制作ページに掲載している架空のデモサイト100本の制作記録です。デモサイトの会社名・商品・人物・住所・料金はすべて架空で、実際の納品実績ではありません。掲載している写真風・イラストの画像は画像生成AIで制作しています。完成したデモはサンプル集でご覧いただけます。
なぜデモサイトを100本作るのか
ホームページ制作を検討する方がまず知りたいのは、「この会社は、うちの業種に合うサイトを作れるのか」ということです。文章で「対応できます」と書くより、実際に触れるサイトを見ていただくほうが早いと考え、コーポレート・学校・医療・飲食・EC・エンタメなど、あらゆるジャンルのデモサイトを用意することにしました。
ただし、100本が似た見た目のテンプレートの着せ替えでは、かえって逆効果です。目標は「業種・デザイン・動き・画像の画風まで、全部違う100本」。100サイト・359ページ・画像609枚という分量になり、看板となる動きも3D部品ビューア、Before/After比較、節税シミュレーター、ブラウザで遊べるミニゲーム、筆で書ける書道キャンバスなど、サイトごとに別のものを実装しています。
100本を「全部違う」にする設計表
100本も作ると、気を抜けばすぐに似たサイトが増えていきます。そこで制作に入る前に、100行の設計表を作り込みました。1行が1サイトで、次の項目が他と重ならないように一つずつ決めています。
- ジャンルと架空の社名——精密部品加工、子供会、歯科医院、寿司店、アパレルEC、人材派遣、美術館など
- ビジュアルの方向性——青焼き図面、クレヨンの手描き、和紙、ネオブルータリズム、ピクセルアートなど
- 看板となる機能——「見かけだけの動き」ではなく、入力に応じて結果が変わる、実際に動く機能を1つ必ず指定
- 画像の画風と配色——写真風・水彩・切り絵・クレヨン画など。サイト間で被らないようにする
子供会や自治会のように手作り感が持ち味のジャンルでは、あえて洗練させすぎない方向を指定しました。逆にホテルや写真家のようなビジュアル主導のジャンルでは、大判の写真と余白で見せる方向です。「どのサイトも綺麗」ではなく「ジャンルらしい」ことを優先しています。
1本ごとの制作工程
各サイトは、設計表の1行と、全サイト共通の制作仕様書をもとに作っています。仕様書には、次のような決まりを細かく書き込みました。
- 架空性と安全——実在の企業・商標に似せない。フォームは送信しない。外部の通信は許可したものだけ
- 必須の表記——全ページに「架空のデモサイト」の表示を出し、検索結果には載せない
- 独自性——レイアウトの構造から作り分ける。書体や配色が他と被りそうなら変える
- 完了の条件——後述の品質検査にすべて合格すること
画像は1サイトあたり約6枚。写真風・水彩・切り絵など、設計表で決めた画風に合わせて1枚ずつ制作し、文字の混入や破綻があれば作り直しています。画像生成やコーディング支援、検査の自動化にはAIツールも活用していますが、何を作るかの設計と、良し悪しの判断は人が担うことを原則にしています。
全件を検査し直して見つかったこと
100本を目視だけで確認し続けるのは現実的ではありません。そこで、1サイトごとに1コマンドで走る品質検査を用意しました。合格の条件は次のとおりです。
- 静的検査——必須表記、リンク切れ、許可外ドメインの混入、画像の枚数と容量
- 実行時検査——JavaScriptのエラー、404、画像の読み込み失敗、横はみ出し
- 画面検査（PC・SP）——語中での改行、数値と単位の分断、行頭禁則、WCAG AAのコントラスト
制作の段階で全サイトが合格していましたが、公開前に、制作時とは別の経路で全件を検査し直しました。これが有効でした。
| 再検査で見つかったこと | 原因と対処 |
|---|---|
| 15本が不合格（初回は85本合格） | 12本は検査スクリプト自身が日本語の出力で文字コードエラーを起こしていた。3本はローカルサーバーの一時的な接続拒否。検査側を直して全件合格 |
| コミットに紛れ込んだ一時ファイル3つ | 作業中に作った検査用スクリプトなど。コミット前の差分確認で発見して除外 |
| 長いSPページで下部が白抜け | ブラウザの全画面撮影には約16,384pxの上限があり、超えた先が白く写ってコントラストを誤判定。分割撮影して結合する形に検査ツールを修正 |
この検査ツールの修正は、サイト本体の品質にも役立ちました。長いページの誤判定が消えたことで、当社のホームページ制作ページ自体にもともとあった画面検査の指摘（PC18件・SP24件）を洗い出して、すべて解消できました。
そして、デザインを一から見直した
機械の検査に合格しても、それだけで「良いデザイン」とは言えません。公開後に100本を並べて見直したところ、業種は違っても、ページの骨格が似通っていることが分かりました。見出しと画像の配置、文字の大きさの強弱、写真の扱い方。一本ずつ見ると成立していても、並べると単調です。これは自分たちの基準では合格にできません。
そこで、デザインの合格基準を一から作り直しました。
- 構図の型を23種類定義し、サイトごとに割り当てる——全面写真に大きな文字を重ねる、文字だけのポスター、縦書き、横スクロール、操作できるアプリ画面、手作りのチラシなど。業種に合う型を1本ずつ選んでいます
- 「やってはいけない」を明文化する——どのサイトにもある定型のヘッダーや、画像を枠に収めただけの挿絵扱い、意味のない番号装飾などを禁止事項として書き出しました
- 文字・余白・画像の必須要件——見出しの大きさ、本文の読みやすさ、日本語の改行位置、写真のトリミングと演出、ロゴやフッターまでの作り込み
- 10項目のデザイン審査——第一印象・構図・タイポグラフィ・余白・画像・色・動き・文章・スマホ・仕上げを10点満点で採点し、平均8点以上かつ全項目7点以上になるまで作り直す
ECのデモも、カートを置いただけの見本から作り直しています。商品の絞り込み、色やサイズの選択と在庫の連動、クーポンや送料の計算、お届け先の入力チェック、確認画面、注文完了まで、決済以外の流れを一通り操作できる形にしています。作り直したサイトから順に差し替えており、サンプル集は少しずつ入れ替わっていきます。
本番配信の制約と、画像・容量の扱い
当社サイトは、PHPを静的HTMLにビルドして、AWSのS3とCloudFrontで配信しています。CloudFrontの手前のURL書き換えは、「末尾スラッシュ付きのURLはスラッシュを外し、拡張子のないURLには.htmlを補う」という規則です。このため、各デモを/web-production/samples/001/のようなディレクトリ形式で置くと、意図したファイルに届きません。
そこで、デモはトップをsNNN.htmlのフラットな配置にし、サブページやアセットはsNNN/配下に置く形にしました。内部リンクはすべて絶対パス＋拡張子付きです。本番インフラの設定を変えずに済むことを優先した判断です。
画像はWebPに圧縮し、モバイル回線でも読み込みやすいよう、1サイトの画像合計を2.8MB以内に制限しています。
よくある質問（FAQ）
- Q. デモサイトはAIで作ったのですか？
- A. 画像生成やコーディング支援、検査の自動化にはAIツールを活用しています。ただし、業種ごとの設計、デザインの合格基準づくり、全件の審査と作り直しには時間をかけており、最終的な品質は当社のエンジニアが判断しています。ツールは手段で、何を良しとするかを決めるのは人です。
- Q. 掲載している100本のサイトは実際の制作実績ですか？
- A. いいえ。技術力をご覧いただくために制作した架空のデモサイトです。会社名・商品・人物・住所・料金はすべて架空で、フォームも送信されません。実際の納品実績は制作実績ページで紹介しています。
- Q. ECサイトのデモでは、実際に購入できますか？
- A. 購入はできません。商品の絞り込みからカート、お届け先の入力、注文完了までの流れは操作できますが、決済は行わず、注文も確定されません。実際のECサイトでは、決済・在庫管理・受注処理まで含めて設計・構築します。
まとめ
業種・デザイン・動き・画像の画風まで全て違う架空のデモサイト100本（359ページ・画像609枚）を、設計表・制作仕様書・品質検査を軸に1本ごとに作ってきました。公開前の再検査では検査ツール自体の不具合まで見つかり、公開後には自分たちでデザインの骨格の単調さに気づいて、合格基準を作り直し、1本ずつ審査と作り直しを重ねています。
「動けばいい」「検査に通ればいい」で止めないことが、私たちのホームページ制作の基本姿勢です。サンプル集で近い業種のデモをご覧いただき、「こんな雰囲気で」「こういう機能が欲しい」というイメージだけの段階でも、お気軽にご相談ください。