いよいよ、サッカーワールドカップ2026日本代表チームの初戦が迫ってきました。
前回までに、FIFAワールドカップ2026 グループFの日程ページと、日本代表メンバー表の作成について書きました。
今回はその続きです。
最初は日程確認用の小さなページでしたが、作業を進めるうちに、代表メンバー、放送・配信ガイド、過去対戦、開催都市、スタジアム情報まで含めたサイトに広がってきました。
先に書いておくと、このサイトはAIを使って作っています。Claude codeとCodexです。
リサーチ、情報整理、HTML・CSS・JavaScriptの作成、デザイン案、修正指示、コードの調整まで、かなりの部分をAIとやり取りしながら進めています。
変更履歴を書き残します。
- 遠藤航キャプテンの離脱にともないページを更新しました
- ページ数が増えた
- 日本代表と他チームの過去の対戦成績をまとめました
- CSSとテーマを整理した
- 放送・配信ガイドを追加した
- 他国代表ページとサマリー表示を追加した
- チーム紹介文とWikipediaリンクを追加した
- 開催都市・スタジアム情報を増やした
- 選手変更にも対応した
- 5日間で小さな特設サイトになった
遠藤航キャプテンの離脱にともないページを更新しました
中盤の底で安定したフィルターとなっていた遠藤航キャプテンが、リスフラン関節捻挫手術後の再受傷で日本代表チームを離脱しました。板倉滉が主将を引きつぎ、三重県伊賀市出身の町野修斗選手が追加招集されました。
リスフラン関節捻挫は手術してもしなくても、いろいろと問題の多い捻挫です。知り合いに受傷した人が二人いるので苦労話を聞いたことがあります。遠藤選手におかれましては、時間がかかってもいいので完全回復をおいのりしております。
ページ数が増えた
今回の作業で、サイトは8ページ構成になりました。
index.html グループF日程・順位表・チームガイド watch-guide.html 放送・配信ガイド head-to-head.html 過去対戦成績 host-cities.html 開催都市・スタジアム詳細 japan-squad.html 日本代表メンバー表 netherlands-squad.html オランダ代表メンバー表 sweden-squad.html スウェーデン代表メンバー表 tunisia-squad.html チュニジア代表メンバー表
第1段・第2段では、主に日程と日本代表メンバー表を扱いました。
今回はそこから、放送・配信ガイド、開催都市、過去対戦、他国代表メンバー表まで広げています。
日程確認用の1ページから、グループFの小さな特設サイトに近づいてきました。
wc2026-groupf-japan.vercel.app
日本代表と他チームの過去の対戦成績をまとめました
オランダ、チュニジア、スウェーデンとの対戦記録
wc2026-groupf-japan.vercel.app
CSSとテーマを整理した
ページが増えると、同じようなCSSがあちこちに増えます。CSSとはWebページのデザイン決めるファイルです。HTMLごとに埋め込めますが、ページが増えると修正が面倒になるので、これを機にCSSとJavaScriptを共通ファイルに分けました。
assets/ theme.css site.css squad.css theme.js groupf-host-cities-900.webp
theme.css には色やテーマの設定。
site.css には、ヘッダー、ナビゲーション、セクション、カード、リンクなど全ページ共通の骨格。
squad.css には、代表メンバー表専用のテーブルとカード表示。
theme.js には、ライトモードとダークモードの切り替え処理。
右下にはテーマ切り替えボタンを設置しました。初回表示時はOSの設定に合わせ、一度切り替えると localStorage に保存されます。
最初のダークモードは、背景とカードの差が弱く、少し見づらい状態でした。そこで、背景をさらに深くし、カード面を少し明るくして、ボーダーも強めました。
AIに作らせると、最初からそれらしくはなります。ただ、実際に見ると「背景にカードが沈んでいる」「文字は読めるが印象が重い」などの違和感は出ます。
そこは人間側が見て、言葉にして、修正していく必要があります。
放送・配信ガイドを追加した
watch-guide.html を新しく作りました。
ここでは、グループFの各試合について、地上波や配信サービスの情報を整理しています。
特に注意したのは、2022年大会の印象で書かないことです。
2022年大会はABEMAの印象が強かったですが、2026年大会の放送・配信情報は別物として確認する必要があります。
そのため、AIにWebリサーチをさせながら、DAZN、NHK総合、日本テレビ系などの情報を整理しました。
確定しているものは明記し、未確定のものは「番組表で確認」という扱いにしています。
スポーツの放送情報は変わりやすいので、断定しすぎないようにしました。
他国代表ページとサマリー表示を追加した
日本代表メンバー表に続いて、オランダ、スウェーデン、チュニジアの代表ページも追加しました。
各ページは、PCでは表形式、スマホではカード形式で表示されます。スマホで横スクロールしながら表を見るのはしんどいので、画面幅が狭いときはカード表示に切り替えています。
代表ページの上部には、サマリーカードも置きました。
登録人数、GK、DF、MF/FWの人数だけでなく、平均年齢、平均身長、平均体重も表示します。
これらは手入力ではなく、JavaScriptで players 配列から計算しています。選手データを修正すれば、サマリーも自動で変わります。
単なる名簿ではなく、チームの大まかな特徴が見えるページにしたかったので、この機能を入れました。
チーム紹介文とWikipediaリンクを追加した
日本代表とオランダ代表のページには、チーム紹介文も追加しました。
ヘッダーの下に、左側にアクセントバーを置いた紹介カードを配置しています。PCでは、リード文を全幅で見せたあと、本文が2段組になるようにしました。
少し新聞や大会パンフレットに近い見え方を狙っています。
また、各選手名の横にはWikipediaへのリンクボタンを付けました。
基本的には、選手名からURLを自動生成しています。
const wikiUrl = n => 'https://ja.wikipedia.org/wiki/' + encodeURIComponent(n.replace(/\s+/g, ''));
ただし、同姓同名や曖昧さ回避が必要な選手もいます。そのため、一部の選手は個別にURLを上書きするようにしました。
AIが作ったリンク生成は便利ですが、必ず正しいページに飛ぶとは限りません。実際にクリックして確認し、必要なところは手で直しています。
開催都市・スタジアム情報を増やした
host-cities.html も大きく作り直しました。
最初は開催都市のインフォグラフィックを置く程度でしたが、4会場それぞれの詳細カードを作りました。
対象は、ダラスのAT&T Stadium、ヒューストンのNRG Stadium、カンザスシティのArrowhead Stadium、モンテレーのEstadio BBVAです。
スタジアム写真は、Wikimedia CommonsのCCライセンス画像を使っています。
AIに候補を探させ、使えそうな画像を確認しながら埋め込みました。
ここも「AIで探して終わり」ではなく、ライセンスや出典を確認する作業が必要です。
開催都市ページには、タイムゾーンの情報も入れました。
アメリカの3会場は CDT (UTC−5) で、日本より14時間遅れ。一方、モンテレーは CST (UTC−6) の年間固定で、日本より15時間遅れです。
同じグループFでも、会場によって日本との時差が1時間変わります。
観戦予定を考えると、この差は意外と大事です。
選手変更にも対応した
作成中に、日本代表の選手変更もありました。
2026年6月12日に、遠藤航選手が負傷離脱し、町野修斗選手が追加招集されました。背番号6は町野選手が引き継ぎ、新キャプテンは板倉滉選手になりました。
この変更は、japan-squad.html に反映しました。
ページ上部には UPDATE 6/12 のバナーを入れ、選手データも更新しています。
また、サポートメンバーについては、非公表方針があるため、名前を無理に書かず、その事情を説明するセクションを設けました。
不明なものを、わかったように書かない。
ここはAIを使うほど注意が必要です。
5日間で小さな特設サイトになった
今回の制作期間は、2026年6月9日から6月14日までの約5日間です。
コミット数は20以上になりました。
使っている技術は、素のHTML、CSS、JavaScriptです。ReactやNext.jsなどのフレームワークは使っていません。
それでも、複数ページ構成、共通CSS、ライト／ダークモード、レスポンシブ表示、代表メンバー表、平均値の自動計算、Wikipediaリンク、放送・配信ガイド、開催都市・スタジアム情報までは実装できました。
AIを使うと、作業の初速はかなり上がります。
特に、ゼロからHTMLやCSSを書き始めるところ、ページの型を増やすところ、似た構造のページを展開するところは速いです。
今回は、AIでリサーチからサイト作成まで進めた作業記録として、ここまでにやったことをまとめました。
間違った情報があれば、ご指摘ください。
