【運営コラム】ポケモンフレンダ攻略ガイドができるまで 〜サイト構築の裏側大公開〜

サイトを作る目的や提供したい内容を考えてみます。
サイトにこんな情報を載せ、こんなツールを提供し…といった、おおまかなサイトのイメージを作ります。
(どんな家を建てたいか、外観は、内装は、部屋数と各部屋の役割は、、、)

当サイトはポケモンフレンダのプレイに必要な情報を集め、みんなに楽しくフレンダをプレイしたり情報収集したりできるサイトにしたい、という思いでサイトを構築することにしました。

次に、実際にサイトをどう作るのかを決めます。何もない状態から作る選択肢もあると思いますが、はっきり言って非常に大変になります。
そのため、サイトを作るために提供されているサービスやシステムを検討します。
(家自体をどう建てるか、、、という観点で、1から自分で設計して材料から集めるか、建売のような一式準備されている家を建てるか、のような)

このようなシステムの一つに当サイトでも採用している「Wordpress」というものがあります。(世界的に有名なサイトの作成、管理、更新ができるシステム)
このWordPressは、後述するWebサーバー上にインストールすることで利用可能となります。

建物同様に、Webサイトにもそもそもサイトを置いておく場所(住所)が必要です。サイトの置き場所はどんな場所かというと、インターネットでアクセスできる場所になります。
サイトを利用する人はどうやってそのWebサイトまでたどり着くか、というと、スマホやタブレット、PCを使ってサイトに訪れます。その訪れる際に、インターネットを使用してアクセスしてきます。そのためインターネットでアクセスできる場所にWebサイトを置いておく必要があります。

ではインターネットでアクセスできるWebサイトの置き場所、という場所どこか、というとWebサーバー上、となります。
厳密には、Webサーバーを構築、運用している企業があり、その企業と契約してWebサーバーの一部を借りてそこにWebサイトを構築します。(借りて利用するのでレンタルサーバーとも呼びます)

Webサーバーというものを準備し、そのサーバー上にWebサイトを構築します。そのWebサイトにインターネット上の住所(ドメイン)を作り、サイト利用する人がサイトに訪問できるようにします。

サイトをいざ構築した後、そこから日々の運用やメンテナンスがあります。(サイトにどんな頻度で情報を追加するか、新しいツールをいつ作るか、のような)

おおよそ、「どんなサイトを作るか」を考えるときに、この話題も一緒に決めておくのがよいです。

その中でどれを選べば…と悩んでしまうかと思います。

なぜConoHa WINGにしたのか

タイミングにもよりますが、自分の場合は安さでした。数年単位でのサイト運用を見越しており、長期で費用が安い企業を探していました。また、後の工程のドメインの取得にはだいたい費用が発生します。

上記の内容と、これまでの要件からConoHa WINGでは以下のような点がありました。

• 長期運用のコストが安い
• ドメイン取得が2つまで無料
• Webサーバーの処理速度が速い
• WordPressのインストールが簡単

上記ポイントが、今回の要件に合っていたため、Webサーバーとして利用することにしました。

本サイトで言うと

「frienda-kouryaku.com」

となります。インターネット上の住所であるドメインは、特定のルールに沿った文字列となります。既に使用済みの文字列は使用不可(既に住んでいる人の家には住めない)ですが、それ以外であれば自由に命名できます。その前提で、自分の構築したいサイトのイメージにあったドメインを決めます。

※当サイトは「フレンダの攻略サイトだから、こんなドメインでいっか!!」程度の気持ちで決めました…

WordPressのインストールは、そんなに難しいことではありません。というのも、大半のWebサーバーは契約時(初期セットアップ時)にWordPressをインストールするメニューが出てきます。そのため、そのメニューに沿って実施すれば、インストール自体はできてしまいます。

WordPressのテーマ

WordPressにはテーマというものがあり、WordPressを使用する際このテーマを決める必要があります。

テーマとは、その構築するサイトのデザインやレイアウト、サイトの基本的な機能を提供してくれるものです。このテーマに沿って作られたサイトが、訪問してきた人に見られることになります。

テーマは様々な用途に向けて作成、提供されており、無料、有料と幅広い選択肢があります。

このサイトのテーマは、、、

本サイトで使用しているテーマはSWELL(スウェル)というものになります。

なぜこのテーマにしたかというと、以下の点があります。

• デザインがシンプルに洗練されている
• ページの表示速度が速い
• 専門知識なく使用できるページ作成のための機能が多く提供されている

有料のテーマ(17,600円(税込))ですが、その価値は十分あると感じています。

ConoHa WING + SWELLの効果

当サイトの利用シーンとして、主に休日に外出先のゲーム機の前で閲覧するシーンがあります。そのような状況でもスマホを使ってサクサク快適に目的のツールを実行、またページを閲覧できるよう、表示速度の速いConoHa WINGとSWELLの組み合わせを採用しました。

今回のWebサイト構築において、生成AIに以下の役割を期待して契約＆活用しています。

生成AIには無料で使用できるものもありますが、利用できる回数や依頼に対する成果物の品質を考慮すると、無料版の範囲内では期待値を下回ることも(多々)あります。一度使用してみて、まだ力不足でありそうならば有料版の契約も検討してみてよいかと思います。

生成AIは、困った際のなんでも相談窓口としても活用できます。そのため、まず生成AIと契約し、そこから最初のステップ(Webサーバーの契約)を行うことも非常に有効な進め方となります。
(生成AIに、「おすすめのWebサーバーは?」と聞いて候補を出してもらう、のような)

1. デザイナー

主に画像生成やサイトの雰囲気にあう配色のアドバイスなどをしてもらっています。公式の著作権を侵害しないよう、サイトのイメージ画像やアイコンなどは、権利的にクリーンなAI生成イラストを使用しています。ポケモンの個別記事・攻略記事のサムネイル画像のような、テキストベースの画像も視覚的にわかりやすい形式で生成してくれるので、非常に助かっています。

※管理人は文章作成やプログラミングには、得意意識がありますが、デザイン関連にはどうしても疎く。。。

例えば、この記事のアイキャッチ画像(ページの上部ある画像)は、生成AIが作成しています。

2. 開発エンジニア

フレンダで役立つツールの開発のため、こちらの提示した要件・仕様からプログラムのベースを作成してもらいます。実際に利用してみた正直な感想ですが、かなり細かい要件の提示と完成後のチェックが必要です。そのため、生成AIのプログラムは疑ってかかった方がよいです(依頼を完璧にこなしました!!→動かないプログラムができる、のような)。また、サイト全体を俯瞰した設計をすることは丸投げでは不可です。そのため、自身でちゃんと検討する必要があります。

例えば、A・B・Cの各ページで同じデータを参照するようなツールがあるとします。

そのまま生成AIに「Aページ作って」→「Bページ作って」→「Cページ作って」と依頼すると、3ページ全てでそれぞれ必要なデータを持とうとします。こうしてしまうと、データに追加・変更があった際、全ページのデータに対して処理が必要になります。そのため、作った当初各ページは動作しますが、以降発生するデータのメンテナンスは非常に面倒なものになってしまいます。

そのため、生成AIにプログラムに関して丸投げするのではなく、あくまで自身でサイトの運用を考慮した設計と生成AIへの依頼事項のまとめが必要になります。

本サイトで言えば、

• マイボックス
• たんけんバトル「3体弱点チェッカー」
• クライマックスバトル「入れ替えサポートツール」

のような各ツールで、登録されているポケモンのデータを参照しています。各ツール個々にデータを持つのではなく、データを別で一か所に持ち、そのデータを各ツールから参照することで、ツール間でのデータの整合性や、データの維持・管理のしやすさを向上させています。

このあたりはかなり長くなりそうなので、また別の機会で記事にしたいなと思いますw

3. 文章の校正・校閲

本ページのような記事の内容は人間が作成しますが、人間が作成する以上、どうしても以下のようなことが起こります。

• 誤字脱字
• 内容の不正確さ
• 前後の文書構成の不備

このような観点で、記事作成後、AIにチェックしてもらうと内容の正確さが向上します。

ここまで話題にしていた、当サイトのサイト構成図は以下となります。

%%{init: {'theme': 'default', 'themeVariables': { 'clusterBkg': '#f8fafc', 'clusterBorder': '#cbd5e1', 'lineColor': '#64748b', 'textColor': '#1e293b', 'fontFamily': 'sans-serif' }}}%%
graph TD
    classDef default fill:#f1f5f9,stroke:#94a3b8,stroke-width:1.5px,color:#1e293b;

    subgraph Creators [サイト運用・構築体制]
        Admin[人間
管理人]
        AI[生成AI
Gemini]
        Admin <-->|プログラミング補助
校正・デザイン案| AI
    end

    subgraph External [データ情報源]
        Official[フレンダ公式サイト]
        Other[その他ポケモン情報]
    end

    subgraph Server [Webサーバー: ConoHa WING]
        subgraph WP [CMS: WordPress / テーマ: SWELL]
            Backend[WordPress 管理画面
ポケモン個別登録画面]
            JSON[独自データ基盤
JSON化 / JSファイル生成]
            subgraph Frontend [公開ページ]
                Must[必須ページ
免責事項・プライバシーポリシー]
                Articles[フレンダ攻略記事]
                PokePages[ポケモン個別記事]
                subgraph Tools [お役立ちツール]
                    Tool1[マイボックス]
                    Tool2[たんけんバトル用ツール]
                    Tool3[クライマックスバトル用ツール]
                end
            end
        end
    end

    Official -.->|情報収集| Admin
    Other -.->|情報収集| Admin
    Admin -->|収集したデータを手動登録| Backend
    Backend -->|システムが自動変換| JSON
    JSON ==>|データを動的に参照| PokePages
    JSON ==>|データを動的に参照| Tools
    Admin -->|記事執筆・ページ作成| Frontend
    
    style Admin fill:#fce7f3,stroke:#f472b6,stroke-width:2px,color:#1e293b
    style AI fill:#dbeafe,stroke:#60a5fa,stroke-width:2px,color:#1e293b
    style JSON fill:#fef08a,stroke:#eab308,stroke-width:2px,color:#1e293b

この構成に沿って、サイトを構築し日々維持・管理・更新していくことになります。

ページを作成するだけでなく、WordPress上で各種登録画面作成、作成した記事のカテゴライズ、集客用の対応(具体的にはSEO対策や訪問データ収集対応)など、様々な取り組むべきことはあります。

当サイトの更新頻度は不定期で、主に公式サイトから新たに発信される情報をキャッチアップする形で行われます。また、攻略記事については、各執筆者が他の方に広めたい情報が浮かんできた際、記事にしています。