# ホームページ制作サンプル100本の制作記録｜業種ごとの設計・デザイン基準・検証の舞台裏｜株式会社テクノスフィア > 業種もデザインも動きも全て違う架空のデモサイト100本（359ページ・画像609枚）の制作記録です。重複を防ぐ設計表と制作仕様書、PC/SPの品質検査、全件の再検査で見つかった落とし穴、そして公開後にデザインの合格基準を一から作り直して1本ずつ審査と作り直しを重ねている過程を解説します。 URL: https://technosphere.co.jp/blog/web-sample-100-ai-agents ** 目次 1. なぜデモサイトを100本作るのか 2. 100本を「全部違う」にする設計表 3. 1本ごとの制作工程 4. 全件を検査し直して見つかったこと 5. そして、デザインを一から見直した 6. 本番配信の制約と、画像・容量の扱い 7. よくある質問（FAQ） 8. まとめ ** 本記事について 本記事は、当社のホームページ制作ページに掲載している**架空のデモサイト100本**の制作記録です。デモサイトの会社名・商品・人物・住所・料金はすべて**架空**で、実際の納品実績ではありません。掲載している写真風・イラストの画像は画像生成AIで制作しています。完成したデモは[サンプル集](https://technosphere.co.jp/web-production/samples)でご覧いただけます。 ## なぜデモサイトを100本作るのか ホームページ制作を検討する方がまず知りたいのは、「この会社は、うちの業種に合うサイトを作れるのか」ということです。**文章で「対応できます」と書くより、実際に触れるサイトを見ていただくほうが早い**と考え、コーポレート・学校・医療・飲食・EC・エンタメなど、あらゆるジャンルのデモサイトを用意することにしました。 ただし、100本が似た見た目のテンプレートの着せ替えでは、かえって逆効果です。目標は「**業種・デザイン・動き・画像の画風まで、全部違う100本**」。100サイト・359ページ・画像609枚という分量になり、看板となる動きも3D部品ビューア、Before/After比較、節税シミュレーター、ブラウザで遊べるミニゲーム、筆で書ける書道キャンバスなど、サイトごとに別のものを実装しています。 ## 100本を「全部違う」にする設計表 （図: 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のデモも、カートを置いただけの見本から作り直しています。商品の絞り込み、色やサイズの選択と在庫の連動、クーポンや送料の計算、お届け先の入力チェック、確認画面、注文完了まで、決済以外の流れを一通り操作できる形にしています。作り直したサイトから順に差し替えており、[サンプル集](https://technosphere.co.jp/web-production/samples)は少しずつ入れ替わっていきます。 ## 本番配信の制約と、画像・容量の扱い 当社サイトは、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本ずつ審査と作り直しを重ねています**。 「動けばいい」「検査に通ればいい」で止めないことが、私たちのホームページ制作の基本姿勢です。[サンプル集](https://technosphere.co.jp/web-production/samples)で近い業種のデモをご覧いただき、「こんな雰囲気で」「こういう機能が欲しい」というイメージだけの段階でも、お気軽にご相談ください。