公式サイト更新のウラ側を大公開！ | 公式ブログ

このサイト、実はAIと作りました

こんにちは！LightSheet代表のあいぬるんとです。

新しくなったこの公式サイトですが、実はコードの大部分はAIによって書かれています。 LightSheetでは、ビジネス向けGoogle WorkSpaceを契約しており、そのプランにはなんとGemini Advancedが付属しています。せっかくなら使い倒さないと勿体無い！ということで、代表の私はブレインストーミングから企画書作成、そして今回のサイト制作まで、AIを優秀な部下としてフル活用しています。

今回は、非エンジニアである私がどのようにしてAIと共にこのサイトを構築したのか、その舞台裏を少しだけお見せしたいと思います。

旧サイトからの進化：手動から自動へ

実は旧バージョンの公式サイトもGeminiと一緒に作ったのですが、当時は生のHTMLファイルを手で管理していました。

旧構成では、

ローカルでHTMLやCSSを編集する
完成したファイルを、手動でCloudFlare Pagesにアップロードする

という手間が必要で、お知らせを一つ追加するにも一苦労でした。
そこで、この開発体験を抜本的に改善すべく、以下のようなモダンな構成に刷新しました。

新構成

VSCodeで開発する
変更点をGitHubにプッシュする
GitHub Actionsが自動でビルド＆Cloudflare Pagesにデプロイ！

今回、Webサイト構築フレームワークとして**“Astro”を採用したのが大きなポイントです。Astroのおかげで、ヘッダーやフッターなどの共通パーツを使い回したり、このブログ記事やプロジェクト紹介、メンバー紹介といったたくさんのコンテンツを、プログラミング不要のMarkdown**で簡単に管理できるようになりました。

AIとの進め方：「書けない私」の戦い方

私はエンジニアではありません。コード経験なんて、学校の授業で書いたHello Worldくらい。そんな私がどうやってAIと対話して、このサイトを作り上げていったのか。

重要なのは、自分が**「建築家」や「監督」になり、AIを「超優秀な大工さん」**として扱うことです。

最初に私がAIに投げたプロンプトは、今見返すと恥ずかしいくらいフランクなものでした。

LightSheet.jp公式サイトリニューアルをする。

LightSheet.jpサイト構成案.mdが新サイト構築案
index.htmlが現在のサイト

デプロイにはCloudFlare Pages(静的)を利用するため、Astroで静的なHTMLを生成してGitHub専用レポジトリにPush、それをPagesで読み込んでデプロイする。
このワークフローを確立することで、ローカルでMarkdownなどの編集ファイルを編集してAstroのコードを実行するだけでサイトを生成できるので、静的なWebサイトである点と頻繁な更新に対応する点の二点でメリットがデカい、ヤバい、マジでデカいWWWWW

てことで、Astroのことはな〜〜〜んもわからないんで、初心者AIコーディングしかできないマンに指南してくださいな

しかし、これに加えて**「こういうサイトを作りたい」という明確な設計図**（サイト構成案のMarkdownファイル）を渡したのが功を奏しました。

この「設計図」をAIと共有し、**「“どこ”を”どう”修正するのか」**という共通認識を100%作り上げるまで、ひたすらチャットで壁打ちを繰り返す。そして、仕様が完全に固まったら「じゃあ、このファイルのコードを全部書いて！」とお願いする。この繰り返しで開発を進めました。

### LightSheet公式サイト 新サイト構成案

現在の1ページ構成から脱却し、訪問者が目的の情報にたどり着きやすいように、以下のページ構成を提案します。

**【サイト構成案】**

1. **トップページ (Home)**
    
    - 団体の顔。最新情報と各ページへの入り口。
        
2. **LightSheetとは (About Us)**
    
    - 団体の理念、設立経緯、組織概要などを紹介。
        
3. **プロジェクト (Projects)**
    
    - 活動の主軸である各プロジェクトを詳しく紹介する、サイトの核となるページ。
        
4. **実績紹介 (Portfolio)**
    
    - これまでに開催・協力した大会の実績をまとめるページ。
        
5. **メンバー紹介 (Team)**
    
    - あなたが提案してくれた、代表・幹部・メンバーを紹介するページ。
        
6. **メンバー募集 (Join Us)**
    
    - 活動に興味を持った人が、参加したくなるような情報を提供するページ。
        
7. **お知らせ (News)**
    
    - 最新の活動報告や告知を掲載するブログ形式のページ。
        
8. **お問い合わせ (Contact)**
    
    - 外部からの協力依頼や質問を受け付ける窓口。
        

---

### 各ページに掲載する内容の詳細

#### 1. トップページ (Home)

- **メインビジュアル:** LightSheetのロゴと、最も象徴的な大会の画像を配置。
    
- **キャッチコピー:** 「"あなたのやりたい"をお手伝いします。」を大きく掲載 1。
    
- **What's LightSheet?:** LightSheetが何をする団体なのかを3行程度で簡潔に紹介 2。
    
- **最新のお知らせ:** 「お知らせ」ページへのリンクと、最新記事のタイトルを3件ほど表示。
    
- **開催予定の大会:** 近日中に開催されるLS杯や大規模大会の告知へのリンクを設置。
    
- **各ページへの誘導:** 「LightSheetとは」「プロジェクト」「実績紹介」など、主要ページへの分かりやすいリンクを設置。
    

#### 2. LightSheetとは (About Us)

- **設立経緯:** 活動レポートに記載されている、中島さんと大谷さんの出会いから団体設立までのストーリーを掲載 3。"何をすればいいかわからない"という課題感など、設立の背景を丁寧に伝えることで、理念への共感が深まります。
    
- **モットー:** 「あなたの"やりたい"を叶えるお手伝いを」というモットーに込めた想いを解説 4。
    
- **組織概要:**
    
    - 組織形態（任意団体であること） 5
        
    - 役職の種類（代表、幹部、アドバイザーなど） 6
        
    - 利用ツール（Discord, Google Workspaceなど）の簡単な紹介 7
        

#### 3. プロジェクト (Projects)

- 各プロジェクトへの入り口となるポータルページを作成。
    
- **プロジェクトごとの詳細ページを作成:**
    
    - **LightSheet杯:** 毎週開催の研修という目的、LSPの仕組み、Premium大会の存在など、レポートに書かれている詳細な内容を紹介 8。
        
    - **大規模大会開催:** 「クラン対抗戦2025Revival」のような主催大会について、企画意図や結果を掲載 9。
        
    - **Project Sekai Rating Match:** Midoさんからの提案で始まったこと、開発中であることなどを紹介 10。
        
    - **講習会:** ノウハウ共有という目的や、過去の開催実績を紹介 11。
        
    - **外部大会運営協力:** どのような協力ができるのかを明記 12。
        
    - **過去のプロジェクト:** 「難易度表大改造計画」などもアーカイブとして掲載すると、活動の幅広さが伝わります 13。
        

#### 4. 実績紹介 (Portfolio)

- 現在のサイトにある「実績」を、より詳細にしたページ 14。
    
- 大会ごとに、以下の情報を整理して掲載。
    
    - 大会名
        
    - 開催日
        
    - 担当内容（主催、運営協力、技術協力など）
        
    - 大会概要
        
    - 結果（配信アーカイブへのリンクや、結果報告画像など）
        

#### 5. メンバー紹介 (Team)

- **代表・幹部紹介:**
    
    - 顔写真（イラスト等でも可）、名前、役職、担当分野、そしてLightSheetにかける想いなどを掲載。レポートにある「中島は界隈への理解が深く、大谷は組織保守管理に長けている」といった紹介文は非常に良いと思います 15。
        
- **メンバー一覧:**
    
    - 本人の希望に基づき、名前（HN）、主な役割（〇〇班、デザイン担当など）、個人のSNSアカウントへのリンクなどを掲載。あなたのアイデア通り、団体の活動が個人の実績としてもアピールできる場になります。
        

#### 6. メンバー募集 (Join Us)

- 現在のサイトにある募集要項を、より詳しく記載 16。
    
- **求める人物像:** どのような人に来てほしいかを具体的に記述。
    
- **募集中の役職:** 「デベロッパー」「デザイナー」など、レポートにある役職ごとに、具体的な活動内容や求めるスキルを明記すると、専門スキルを持つ人が応募しやすくなります 17。
    
- **活動の流れ:** 応募から実際に活動に参加するまでのフローを説明。

この定義書も、AIとチャットをしながら決定しました。

このプロンプトを投げることでAIは「優しく教えるモード」かつ「相談しながら進めるモード」になってくれます。相談をしながら、AIと私とで共通認識を作りながらコーディングを進行させました。

非エンジニアがAIと開発するときの3つのコツ

この経験を通して、私のような非エンジニアがAIと協業する上で大切だと感じたポイントを3つご紹介します。

エディタ内で完結させず、チャットで対話する VSCodeの拡張機能でAIを使うのも便利ですが、私はあえてブラウザのGeminiとチャット形式でやり取りすることを重視しました。これにより、会話の文脈が保たれ、「さっきの話なんだけど…」といった形で、より人間同士の相談に近い形でプロジェクトを進めることができました。
まず動かす、エラーは丸投げする AIが生成したコードは、とりあえずコピペして動かしてみる。エラーが出たら、そのエラーメッセージを（時にはスクリーンショットも添えて）そのままAIに投げます。「こういうエラーが出たんだけど、何が原因？」と聞けば、AIは優秀なデバッガーにもなってくれます。
エラーの解説をちゃんと読む 最初のうちはエラーの原因なんてサッパリ分かりませんが、AIは「なぜこのエラーが起きたのか」を毎回丁寧に解説してくれます。これを繰り返すうちに、「このエラー表示、前にも見たな…もしかしてアレが原因かも？」という”カン”が働くようになります。これが、非エンジニアが開発の解像度を上げていく上で、非常に重要なプロセスだと感じました。
とにかく何度も壁打ちする AIは一気に完成形まで作り上げてくれません。(最新のCodex5などは割と完璧だそうですが…)なので私は、細かい修正を何度も何度もAIとやり取りしました。Gemini Advancedは幸いチャット回数に制限がないので、バンバン投げました。私たちLightSheetの活動理念や活動レポート、私の個人的な思い入れまで全て話して、そのうえで**その理念をWebサイトに落とし込むには？**という問いを投げて、コードを少しずつよくしていく。計200回以上はやり取りしている気がします。
GitHubとGemini連携が便利すぎる このWebサイトは先述のとおりGitHubのプライベートレポジトリで管理しています。なんと最近のアップデートでGeminiにGitHubレポジトリを読み込む機能が追加されました。なので、GitHubに最新の変更をPushした状態で、開発に必要な共通認識をあらかじめ記述したGemにレポジトリを食べさせると、新しいチャットなのに、すでに共通認識が出来上がっている状態にできるわけです。というのもAIというのはチャットを重ねるうちに混乱してしまうので、そのうちおかしなことを言うようになります。(過去のコードと最新のコードをごちゃまぜにされたりしました)なので、割と定期的に新しいチャットに移ったのです。これはみんなにもぜひ試してほしい。

まとめ：コードが書けなくても、モノは作れる

今回のサイトリニューアルを通して私が確信したのは、コードを書くスキル（実装）と、何を作るかを考えるスキル（設計）は別物であるということです。

AIプログラミングの登場により、わざわざコードを書かずともプログラミングができるようになってしまいました。LightSheet杯公式サイトも、Aiと共にコーディングして、Webダッシュボードからページの管理ができるような仕組みを整えています。

旧バージョンの公式サイトも、新バージョンの公式サイトも、合計開発時間は10時間程度だと思います。圧倒的なスピード感だと思います。まじすげえ。

非エンジニアでもここまでいけたで！というご紹介でした。新公式サイトを楽しんでいってください！