- 「AIを使えば、Webサイトなんて一瞬で作れるのではないか」
- 最初に:今回は完全なゼロからのサイト制作ではない
- 最初に知っておきたい、AIとWordPressを進める基本ループ
- AIを使うことで、どれほどコストを削減できたのか
- 今回使用した主な仕組み
- 作業を始める前に決めたこと
- STEP 1:カテゴリーを整理する
- STEP 2:ABOUT・WORKS・ARCHIVEを作る
- STEP 3:ヘッダーメニューとサイト内導線を整理する
- STEP 4:Xとnoteへの導線を作る
- STEP 5:問い合わせフォームを作る
- STEP 6:ショップに必要な法的ページを整える
- STEP 7:WordPressがGoogle検索を拒否していないか確認する
- STEP 8:Cocoonの基本SEOを整える
- STEP 9:Site KitでSearch ConsoleとPageSpeed Insightsを接続する
- STEP 10:XMLサイトマップをSearch Consoleへ送信する
- STEP 11:Google Analytics 4を接続する
- STEP 12:プライバシーポリシーへGA4とCookieの説明を追加する
- STEP 13:RSSとPingを設定する
- STEP 14:WooCommerceでショップを作る
- STEP 15:国内と海外の配送地域を設定する
- STEP 16:Stripeを接続する
- STEP 17:TranslatePressで日本語・英語を切り替える
- STEP 18:公開後に実際のサイトを点検する
- AIとWordPressを作るときに有効だった進め方
- AIに任せられたこと、任せられなかったこと
- 同じことをする人のための最終チェックリスト
- まとめ:一人で動かせる仕事の範囲が変わった
「AIを使えば、Webサイトなんて一瞬で作れるのではないか」
僕も、どこかでそう思っていました。
実際に、自分のWordPressサイトこの「*Orion Radio*」をAIと一緒に作り直してみたところ、かかった時間はほぼ丸一日です。
実は以前から、WordPressをきちんと作り直したいとは考えていました。そのために『WordPress Perfect GuideBook』という参考書も購入しています。本を読みながら順番に設定すれば、自分でもサイトを構築できると思っていました。
しかし実際には、WordPressの管理画面を開き、該当するページを本の中から探し、説明を読み、再び画面へ戻って操作する、という往復が必要でした。
一つ分からないことが出るたびにページをめくり、索引から項目を探し、現在の画面と本の説明を照らし合わせる。内容が難しすぎたわけではありません。
ただ、調べながら操作を続けることが次第に面倒になり、サイト構築は途中で止まっていました。
しかし、書評などを投稿するだけだったブログが、AIと一緒に次の機能を持つサイトに変わりました。
- 活動内容を伝えるABOUT・WORKS・ARCHIVE
- 映画、服、アート、書籍、音楽、旅を横断するカテゴリー構造
- X・note・問い合わせへの導線
- Google検索への登録
- アクセス解析
- 記事ごとのSEO基盤
- Stripeによるオンライン決済
- 国内・海外への発送設定
- 特定商取引法、利用規約、返品規定
- 日本語・英語の自動翻訳
この記事では、「AIですごいことができた」という感想だけで終わらせず、実際に使用した仕組み、作業した順序、途中で詰まった点、これから同じことをする人への注意点まで公開します。
最初に:今回は完全なゼロからのサイト制作ではない
今回再構築した*Orion Radio*には、すでに次のものがありました。
- 独自ドメイン
- レンタルサーバー
- WordPress
- Cocoonテーマ
- 過去に投稿した約50件の記事
- 基本的なトップページ
したがって、サーバー契約やWordPressの新規インストールから始めたわけではありません。
今回行ったのは、既存の個人ブログを、
「文化メディア+ポートフォリオ+国内外販売対応ショップ」
へ作り変える作業です。
同じように、昔作ったWordPressを放置している人、記事はあるけれどサイト全体が整理されていない人には、再現しやすい内容だと思います。
この記事では、次のことが分かります。
- AIへ何を伝えれば、WordPressの設定を正確に進められるのか
- スクリーンショットを使って、一画面ずつ作業する方法
- SEO、アクセス解析、EC、決済、海外配送、自動翻訳までの全体像
- AIに任せやすい仕事と、人間が判断すべき仕事
- 外注した場合と比べて、時間と費用がどのように変わるのか
- 公開前後に確認すべきチェック項目
すべてを一度に設定する必要はありません。
私自身も、現在の画面をAIに見せながら、一つずつ設定と確認を繰り返しました。
最初に知っておきたい、AIとWordPressを進める基本ループ
今回の基本的な作業ループは、次のとおりです。
- 現在の画面をスクリーンショットで見せる
- これから達成したい状態を一つだけ伝える
- AIから次の一手だけ教えてもらう
- 自分で操作する
- 保存後の画面を見せる
- 公開サイトで結果を確認する
- 問題があれば、画面を見せて修正する
一度に十個の指示を受けるより、一画面ずつ進めた方が安全だと思います。
WordPressは、利用しているテーマ、プラグイン、契約プラン、バージョンによって表示される項目が異なります。
AIの説明どおりの項目が見つからない場合は、無理に似たボタンを押さず、
「その項目は、現在の画面にはありません」
と伝えて、最新のスクリーンショットを見せます。
特に、決済、APIキー、公開設定、法的ページなどは、途中の画面を飛ばさず確認した方がよいです。
AIへ質問するときも、
「WooCommerceを設定したい」
だけでは、正確な回答を得られないことがあります。
私は、次のように現在地、目的、条件をまとめて伝えました。
これはCocoonを使っている既存のWordPressです。今はこの画面。国内と海外へセラミックを発送できるようにしたいので、指示してください。
このように質問すると、一般的な説明ではなく、現在の画面に即した次の操作を教えてもらいやすくなります。
重要なのは、AIを、現在地を確認しながら次の一手を示すナビゲーターとして使うことです。
この基本ループは、WordPress以外のソフトウェアやWebサービスを設定するときにも応用できます。
AIを使うことで、どれほどコストを削減できたのか
従来であれば、Webデザイナー、WordPress制作者、EC担当者、SEO担当者、翻訳担当者など、複数の専門家へ相談する可能性がある内容です。
同程度の範囲を外注した場合、仕様やデザイン、商品数、翻訳範囲などによって大きく変わりますが、3〜6週間程度の制作期間と、80万〜150万円ほどの費用が発生しても不思議ではありません。
ただし、これは実際に複数社から見積もりを取った金額ではなく、同じ作業範囲を専門家へ分割して依頼した場合を想定した概算です。
また、「AIを使ったから完全に無料になった」という意味でもありません。
実際には、次のような費用が残ります。
- ドメインとレンタルサーバー
- 有料テーマや有料プラグインを使用する場合の料金
- 翻訳サービスの利用料
- Stripeなどの決済手数料
- 商品撮影、梱包材、発送などの販売経費
- 自分自身が設定と確認に使う時間
そのため、正確には「150万円を現金で節約した」というよりも、これまで外部へ依頼する必要があった作業の多くを、自分で実行できるようになったと表現する方が適切です。
今回、私が特に削減できたと感じたのは、作業そのものだけではなく、
- 分からないことを調べる時間
- 担当者を探す時間
- 見積もりを比較する時間
- 質問をまとめて送る時間
- 回答や修正を待つ時間
- 自分の意図を何度も説明する時間
こうした、依頼と待機に伴う時間を大幅に短縮できました。
疑問が出た瞬間に質問し、その場で操作し、結果を見せて修正できます。
AIによる最大のコスト削減は、制作費だけではなく、専門分野の間を行き来するときに発生していた「調査・伝達・待機のコスト」を減らしたことだと思います。
外注費の代わりに、自分の時間と判断を投入しましたが、それでも、サイトの構造や設定内容を自分で理解できたことは、公開後の更新や修正を考えると大きな利点でした。
ここからは、書評を投稿するだけだったWordPressが、どのような手順で文化メディア兼ショップへ変わっていったのかを、実際の作業順に紹介します。
今回使用した主な仕組み
| 目的 | 使用したもの |
|---|---|
| WordPressテーマ | Cocoon |
| ショップ機能 | WooCommerce |
| オンライン決済 | Stripe |
| 日本語・英語の切り替え | TranslatePress |
| 自動翻訳 | Google Translate API |
| Googleサービスとの接続 | Site Kit by Google |
| 検索状況の確認 | Google Search Console |
| アクセス解析 | Google Analytics 4 |
| サイトマップ | WordPress標準のXMLサイトマップ |
| 更新通知 | RSS、Ping-O-Matic |
| SNS導線 | Cocoonのプロフィール・SNS機能 |
WordPress、Cocoon、WooCommerce、Site Kitなど、無料で利用できる仕組みを中心に構成しています。ただし、決済手数料、翻訳API、サーバー、ドメインなどは、利用量や契約によって費用が発生する場合があります。
作業を始める前に決めたこと
最初にプラグインを入れず、まず、*Orion Radio*を何のためのサイトにするのかを整理しました。
決めた役割は、次の二つです。
- 映画、服、アート、書籍、音楽、旅を横断する文化メディア
- 自分で制作した服やセラミックなどを世界へ販売するショップ
ここが曖昧なまま機能を追加すると、メニューもカテゴリーも増え続け、何のサイトなのか分からなくなります。
先に目的を決めてから、
- 何をメニューへ出すか
- どんな固定ページが必要か
- 記事をどう分類するか
- 何を販売するか
- どのSNSへつなげるか
を判断しました。
STEP 1:カテゴリーを整理する
以前のサイトには、書評、展覧会、都内散策など、投稿のたびに増やしたカテゴリーが混在していました。
そこで、*Orion Radio*で今後扱う内容を、次の大分類へ整理しました。
- FILM & HISTORY
- FASHION & VINTAGE
- ART & CERAMICS
- BOOKS & RESEARCH
- TRAVEL & FOOD
- MUSIC
カテゴリーを整理する目的は、見た目をきれいにすることだけではありません。
読者が興味のある記事を探しやすくなり、関連記事をつなぎやすくなります。また、今後どの記事を増やすべきか、自分自身も判断しやすくなります。
カテゴリーを作るときは、過去の記事だけを見て決めるのではなく、これから発信したい内容まで考えることが重要です。
一方で、一つの記事しか入らないカテゴリーを大量に作ると、内容の薄い一覧ページが増えます。大分類を少数に絞り、その下に必要なサブカテゴリーを置く構造にしました。
STEP 2:ABOUT・WORKS・ARCHIVEを作る
次に、投稿記事とは別に固定ページを作りました。
WordPressでは、通常の記事は「投稿」、時期に左右されにくい案内ページは「固定ページ」として作ります。固定ページは原則としてRSSへ流れず、プロフィールや利用案内などに適しています。WordPress公式:固定ページについて
今回作った主な固定ページは次のとおりです。
ABOUT
- About Takashi Amamiya
- 学んできたこと
- 映画・服飾史・文化史の研究
- ヴィンテージ衣料や資料の収集
- 服、セラミック、ドローイングの制作
- *Orion Radio*の活動方針
WORKS
制作活動を次の領域に分けて紹介しました。
- MEDIA & RESEARCH|*Orion Radio*
- CERAMICS|EPHEMERA
- GARMENTS|MIZUCHI
- DRAWINGS|Takashi Amemiya
- EXHIBITIONS & PROJECTS
ここでは、*Orion Radio*、MIZUCHI、EPHEMERAを混同せず、それぞれの役割を分けています。
ARCHIVE
映画、服、アート、書籍、音楽、旅など、これまで蓄積した記録を横断して探すための総合索引として作りました。
現時点ではまだ簡易的なページですが、今後の記事や作品が増えるほど重要になります。
STEP 3:ヘッダーメニューとサイト内導線を整理する
固定ページとカテゴリーを作ったあと、ヘッダーメニューを次の構成にしました。
- ABOUT
- WORKS
- SHOP
- ARCHIVE
- FILM & HISTORY
- FASHION & VINTAGE
- ART & CERAMICS
- CULTURE
CULTUREの下には、BOOKS & RESEARCH、TRAVEL & FOOD、MUSICを入れています。
項目をすべて横一列に並べると、画面幅によってメニューが崩れる可能性があります。そのため、一部をCULTUREの子メニューへまとめました。
この段階で、パソコン表示だけでなくスマートフォン表示も確認する必要があります。
STEP 4:Xとnoteへの導線を作る
記事を読んだ人が、そのまま離脱するだけではもったいないため、記事下部にSNSフォロー導線を設置しました。
Cocoonでは、
「ユーザー」→「プロフィール」
の各SNS欄にURLを入力すると、記事下部などにフォローボタンを表示できます。
今回登録したのは、
- X
- note
is.
InstagramとYouTubeは、本格始動後に追加する予定です。
また、読者自身が記事を共有するシェアボタンと、運営者のSNSをフォローするボタンは別物です。
- シェアボタン:読者が記事をXなどで紹介する
- フォローボタン:読者が雨宮崇のSNSへ移動する
上部のシェアボタンは記事を読む前の流れを分断するため非表示にし、記事下部だけに残しました。
利用していないAmazonの欲しいものリストなどのアイコンが出た場合は、「ユーザー」→「プロフィール」の該当URLを削除します。
STEP 5:問い合わせフォームを作る
CONTACTページには、次の項目を設けました。
- 氏名
- email address
- 会社名・団体名
- 問い合わせ種別
- 件名
- 問い合わせ内容
- プライバシーポリシーへの同意
問い合わせ種別は、
- 取材・執筆
- 映像制作
- 作品・展示
- 共同プロジェクト
- その他
に分けました。
「何でもお問い合わせください」だけでは、相手も何を書けばいいか迷います。
相談できる内容を先に示すことで、問い合わせの心理的な負担を下げられます。
フォームを作ったあとは、自分の別メールアドレスから実際に送信し、次を確認する必要があります。
- 送信完了画面が出るか
- 管理者へ通知が届くか
- 迷惑メールに入らないか
- 自動返信が正しく表示されるか
- スマートフォンでも入力できるか
STEP 6:ショップに必要な法的ページを整える
商品を販売するため、次のページも作りました。
- Privacy Policy
- Disclosure based on the Specified Commercial Transactions Act
- terms of service
- 返金・返品ポリシー
ここで注意したいのは、AIが作った文章をそのまま公開しないことです。
特定商取引法のページには、実際の販売者情報、連絡方法、価格、送料、支払方法、引渡時期、返品条件など、自分の販売実態に合った情報を書く必要があります。
返品規定も、一般的なテンプレートではなく、
- 作品の破損
- 誤配送
- 購入者都合
- 一点物
- ハンドメイド作品の個体差
- 海外配送中の事故
- 関税や輸入税
など、実際に扱う商品に合わせて決めなければなりません。
AIは文章のたたき台を作れますが、販売条件の事実確認と最終判断は販売者の仕事です。
STEP 7:WordPressがGoogle検索を拒否していないか確認する
WordPress管理画面の、
「設定」→「表示設定」
を開き、
「検索エンジンがサイトをインデックスしないようにする」
にチェックが入っていないことを確認しました。
ここにチェックが入っていると、検索エンジンにサイトを掲載しないよう求める設定になります。
サイト制作中にチェックを入れ、そのまま公開後も外し忘れるケースがあるため、最初に確認した方がよい項目です。
STEP 8:Cocoonの基本SEOを整える
Cocoon設定では、次の内容を確認・変更しました。
- canonicalタグを有効化
- カテゴリーページは検索対象
- 内容の薄い自動生成アーカイブはnoindex
- 画像だけの添付ファイルページはnoindex
- JSON-LD構造化データを有効化
- 投稿日・更新日を表示
- トップページのメタディスクリプションを入力
- メタキーワードタグは出力しない
トップページのメタディスクリプションには、サイトの内容を簡潔に記載しました。
メタキーワードは、Googleの検索順位評価には使用されないため入力していません。
サイト全体のSEO設定だけで、記事が自動的に上位表示されるわけではありません。
今後の記事では、毎回次の項目を確認します。
- 検索内容が分かる記事タイトル
- H2・H3による見出し構造
- 記事固有のメタディスクリプション
- アイキャッチ画像
- 画像の代替テキスト
- 関連記事への内部リンク
- 適切なカテゴリー
- 読者の疑問に対する具体的な回答
STEP 9:Site KitでSearch ConsoleとPageSpeed Insightsを接続する
Google公式のWordPressプラグイン「Site Kit by Google」を利用しました。
Site Kitを導入すると、WordPressの管理画面からSearch Console、Analytics、PageSpeed InsightsなどのGoogleサービスを接続できます。Site Kit公式
今回、最初に接続されたのは、
- Search Console
- PageSpeed Insights
でした。
Search Consoleは、Google検索での表示回数、検索語句、掲載順位、インデックス状況などを確認するためのサービスです。
ただし、Search Consoleへ接続しただけで検索順位が上がるわけではありません。
Googleにサイトの存在を伝え、検索上の問題や成果を確認するための管理ツールです。
STEP 10:XMLサイトマップをSearch Consoleへ送信する
ORION RADIOでは、WordPress標準のXMLサイトマップを使用しています。
サイトマップのURLは次のとおりです。
https://orionradio1988.com/wp-sitemap.xml
Search Consoleの「サイトマップ」を開くと、以前登録したサイトマップが「取得できませんでした」と表示されました。
そこで、まずブラウザから上記URLを直接開きました。
すると、
- 投稿
- 固定ページ
- Category
のサイトマップが正常に表示されました。
このことから、WordPress側ではサイトマップが生成されており、Search Console側の一時的な取得エラーである可能性が高いと判断しました。
Search Consoleへ戻り、「新しいサイトマップの追加」に、
wp-sitemap.xml
と入力して再送信しました。
その結果、送信に成功し、54件のURLが検出されました。
Google公式も、Search Consoleのサイトマップレポートへ送信すると、Googlebotの取得状況や処理エラーを確認できると説明しています。Google検索セントラル:サイトマップの作成と送信
なお、サイトマップを何度も送信しても、インデックスが急に早くなるわけではありません。
送信後はGoogleの処理を待ち、Search Consoleの「ページ」で、登録済み・未登録の件数と理由を確認します。
STEP 11:Google Analytics 4を接続する
Site Kitの初期設定が終わっても、Google Analytics 4は自動で接続されていませんでした。
Site Kitの、
「設定」→「ほかのサービスに接続」
を開き、「アナリティクス」を追加しました。
今回の管理構造は次のようにしました。
- アカウント:Takashi Amemiya
- プロパティ:Orion Radio
- ウェブデータストリーム:orionradio1988.com
- 国:Japan
- タイムゾーン:日本時間
- 拡張計測機能:オン
「雨宮崇という管理主体の中に、Orion Radioという計測対象がある」という構造です。
今後MIZUCHIなど別サイトを計測する場合も、同じGoogle Analyticsアカウント内に別プロパティとして整理できます。
Site Kitは、初期設定時にAnalyticsを選ばなかった場合でも、あとから「Connect More Services」から追加できます。Site Kit公式:Analyticsの接続
接続後は、プライベートブラウズで自分のサイトを開き、Google Analyticsのリアルタイムレポートにアクセスが表示されるか確認します。
データが管理画面へ反映されるまで時間がかかる場合もあります。
STEP 12:プライバシーポリシーへGA4とCookieの説明を追加する
Google Analyticsを導入したため、既存のプライバシーポリシーへ次の内容を追記しました。
- Cookieを利用する場合があること
- Google Analytics 4を使用していること
- 閲覧ページ、日時、端末、ブラウザ、概算地域などが収集される場合があること
- 個人を直接特定する情報を意図的に送信しないこと
- Googleのプライバシーポリシー
- Google Analyticsオプトアウト方法
- 改定日
Google Analyticsを入れただけで終わらず、データの利用目的を読者へ説明する必要があります。
今後AdSenseや広告配信を追加する場合は、広告に関する説明やCookie同意の仕組みも改めて確認します。
今回は、アクセスのない段階で広告だけ増やす必要はないと判断し、AdSenseの接続は見送りました。
STEP 13:RSSとPingを設定する
WordPressは標準でRSSフィードを生成します。
*Orion Radio*のフィードURLは次のとおりです。
https://orionradio1988.com/feed/
「設定」→「表示設定」では、
- RSS/Atomフィードに表示する最新の項目数:10
- フィードの各投稿に含める内容:抜粋
にしました。
長文記事をフィード内へ全文掲載せず、本サイトへ読みに来てもらうためです。
また、
「設定」→「投稿設定」→「更新情報サービス」
には、次の一件だけを登録しました。
http://rpc.pingomatic.com/
古いブログ記事には大量のPing送信先リストが掲載されていることがありますが、終了済みのサービスが含まれている可能性もあります。
今回はWordPress標準のPing-O-Maticだけにしました。
STEP 14:WooCommerceでショップを作る
次に、WooCommerceを使ってショップ機能を追加しました。
WooCommerceでは、商品登録、在庫、注文、送料、決済などをWordPress内で管理できます。
設定後、ショップページ自体は作成されましたが、ヘッダーメニューにSHOPが自動表示されませんでした。
そこで、
「外観」→「メニュー」
からSHOPページをヘッダーメニューへ手動で追加しました。
また、商品を一件も登録していない状態では、SHOPを開いても商品一覧は表示されません。
公開したままにする場合は、
「現在、作品の撮影と掲載準備を進めています」
などの案内を表示した方が、故障や表示ミスと誤解されにくくなります。
STEP 15:国内と海外の配送地域を設定する
WooCommerceの、
「WooCommerce」→「設定」→「配送」→「配送地域」
から、国内と海外を分けて設定しました。
WooCommerceでは、配送先の国・地域ごとに「配送地域」を作り、その中へ定額送料などの配送方法を追加します。WooCommerce公式:配送地域の設定
基本的な考え方は次のとおりです。
- 日本国内
- 個別に設定する主要海外地域
- その他の地域
WooCommerceには「その他の地域」という標準の受け皿があり、個別の配送地域に一致しない住所へ適用されます。
海外送料を設定するときは、金額だけでなく次の点も確認する必要があります。
- 梱包後の重量
- 箱の三辺
- 配送業者
- 追跡の有無
- 補償上限
- 配送禁止品
- 関税・輸入税の負担者
- 破損時の対応
- 国ごとの配送可否
特にセラミックは、作品本体より梱包材と箱によって重量・容積が大きく変わります。
実際の商品を登録する前に、代表的な箱で梱包サイズと重量を計測する必要があります。
STEP 16:Stripeを接続する
オンライン決済にはStripeを使用しました。
Stripeアカウントを作り、WooCommerceと接続し、ショップでカード決済を受け付けられるようにしました。
ここで詰まったのが、APIキーなどの接続設定です。
AIから案内された項目が最初の画面に見当たらず、
「だから、ないって」
と呟きながらスクリーンショットを送り直しました。
最終的には、探していた項目が「詳細設定」の中にあることが分かりました。
WordPressやプラグインは、バージョンや設定状況によって画面が異なります。AIが一般的な画面を前提に案内しても、自分の画面には存在しない場合があります。
その場合は、
- 現在の画面全体を撮る
- 開いているメニュー名を伝える
- 表示されている項目をAIに読み取らせる
- 「この画面にはない」と明確に伝える
- 詳細設定や別タブを確認する
という進め方が有効でした。
また、Stripeにはテスト環境と本番環境があり、それぞれ別のAPIキーを使用します。本番モードでは実際の決済が処理されるため、設定の意味を理解してから切り替える必要があります。Stripe公式:APIキーとテスト・本番環境
APIキーや秘密鍵が映ったスクリーンショットは、SNSやブログへそのまま掲載してはいけません。
AIへ見せる場合も、利用環境やデータの取り扱いを確認し、不要になったキーは再発行するなどの対策が必要です。
STEP 17:TranslatePressで日本語・英語を切り替える
海外の読者や購入者にもサイトを読めるように、TranslatePressを導入しました。
設定したのは、
- デフォルト言語:日本語
- 追加言語:英語
- Google Translate APIによる自動翻訳
- 言語切り替えボタン
is.
TranslatePressは、Google Translate、DeepL、TranslatePress AIなどを利用した自動翻訳に対応しています。TranslatePress公式:自動翻訳
設定後は、日本語ページに対して英語版のURLが生成されました。
https://orionradio1988.com/en/
ただし、自動翻訳を有効にしただけで完成ではありません。
実際に確認すると、
- 個人メディアが「show」と訳される
- 書籍や映画の正式英題と異なる
- 日本独自の固有名詞が不自然になる
- SHOPのブラウザタイトルに日本語が残る
といった問題がありました。
すべての記事を最初から人力で翻訳する必要はありませんが、次のページは優先して修正した方がよいと考えています。
- トップページ
- ABOUT
- WORKS
- SHOP
- CONTACT
- 特定商取引法・返品規定
- 主要商品
- 検索流入を狙う代表記事
自動翻訳は「英語版を完成させる機能」ではなく、「英語版の初稿を自動で作る機能」と考えた方が安全です。
STEP 18:公開後に実際のサイトを点検する
設定画面で「保存しました」と表示されても、公開サイトが正常とは限りません。
最後に、ログアウト状態またはプライベートブラウズで、次の項目を確認します。
- トップページが表示される
- ABOUT・WORKS・ARCHIVEが開く
- SHOPが開く
- X・noteのリンク先が正しい
- CONTACTフォームが使える
- 法的ページがフッターにある
- 日本語と英語を切り替えられる
- スマートフォンでメニューが崩れない
- 404ページが発生していない
- Search Consoleがサイトマップを取得できる
- GA4がアクセスを計測する
- 商品がカートへ入る
- 国内住所で正しい送料が出る
- 海外住所で正しい送料が出る
- Stripeの決済が完了する
- 注文メールが購入者と管理者へ届く
現時点のORION RADIOは、サイト、ショップ、翻訳、決済の基盤までは完成しています。
ただし、まだ商品写真と商品登録がないため、実際の購入フローは最後まで確認できていません。
最初の商品を登録したら、
- テスト商品を作る
- 日本国内の住所で注文する
- 海外住所でも送料を確認する
- 決済完了画面を確認する
- 購入者メールを確認する
- 管理者の受注画面を確認する
- キャンセル・返金処理も確認する
ところまで行う必要があります。
AIとWordPressを作るときに有効だった進め方
今回の基本的な作業ループは次のとおりです。
- 現在の画面をスクリーンショットで見せる
- これから達成したい状態を一つだけ伝える
- AIから次の一手だけ教えてもらう
- 自分で操作する
- 保存後の画面を見せる
- 公開サイトで結果を確認する
- 問題があれば、画面を見せて修正する
一度に十個の指示を受けるより、一画面ずつ進めた方が安全でした。
特に決済、APIキー、公開設定、法的ページなどは、途中の画面を飛ばさず確認した方がよいです。
AIへ質問するときは、
「WooCommerceを設定したい」
but also
「Cocoonを使っている既存のWordPressです。現在はこの画面です。国内と海外へセラミックを発送できるようにしたい。次に押す場所を一つだけ教えてください」
のように、現在地、目的、条件を伝えると精度が上がります。
AIに任せられたこと、任せられなかったこと
AIに任せやすかったこと
- サイト構造の整理
- 固定ページの初稿
- メニュー構成
- SEO設定の説明
- プラグイン候補の比較
- エラー原因の仮説
- 設定画面の読み取り
- 法的ページのたたき台
- 英語文の初稿
- 公開後のチェック項目
人間が決める必要があったこと
- サイトの目的
- ブランドや活動の関係
- 何を残し、何を削るか
- 何を販売するか
- 商品価格
- 送料
- 返品条件
- 個人情報・販売者情報
- APIキーや決済情報の管理
- 翻訳が自分の意図と合っているか
- 最後に本番公開してよいか
AIは作業を完全になくしたのではなく、調査、質問、伝達、待機の時間を大幅に短縮しました。
疑問が出た瞬間に質問し、その場で操作し、結果を見せて修正できます。
以前なら別々の担当者へ依頼していた仕事を、一人で小さな制作チームを指揮するように進められたことが、今回一番大きな変化でした。
同じことをする人のための最終チェックリスト
サイト設計
- サイトの目的を一文で説明できる
- 読者と販売対象を決めた
- カテゴリーを増やしすぎていない
- ABOUT・WORKS・ARCHIVEの役割を分けた
- パソコンとスマートフォンでメニューを確認した
検索・解析
- 検索エンジン拒否設定が外れている
- トップページのメタディスクリプションを設定した
- メタキーワードを不要に出力していない
- Search Consoleを接続した
- XMLサイトマップを送信した
- GA4を接続した
- プライバシーポリシーを更新した
- RSSとPingを確認した
販売
- SHOPページをメニューへ追加した
- 特定商取引法ページを作った
- 利用規約を作った
- 返品・返金条件を決めた
- Stripeを接続した
- テスト環境と本番環境を区別した
- 国内送料を設定した
- 海外送料を設定した
- 梱包後の重量とサイズを測った
- 実際にテスト注文した
- 注文メールと返金処理を確認した
翻訳・海外対応
- 日本語・英語を切り替えられる
- トップ・ABOUT・SHOPを人間が確認した
- 商品名と作品説明の英訳を確認した
- 返品条件の英語版を確認した
- 関税・輸入税の扱いを明記した
- 配送できない国を確認した
セキュリティ
- APIキーを公開していない
- スクリーンショットに個人情報が映っていない
- WordPress管理者名を推測されにくくした
- WordPress・テーマ・プラグインを更新している
- バックアップを取っている
- 不要なプラグインを削除した
まとめ:一人で動かせる仕事の範囲が変わった
「AIなら一瞬でWebサイトを作れる」と思って始めました。
でも実際には、ほぼ丸一日かかりました。
何度も設定画面を探し、作業が詰まるとAIに「その項目はない」と伝え、保存しては公開画面を確認しました。
非常に密度の高い一日でした。それでも、一日の終わりには、書評を投稿するだけだったWordPressが、
- 研究を蓄積するメディア
- 制作活動を紹介するポートフォリオ
- 読者とつながる窓口
- 作品を国内外へ販売するショップ
へ変わっていました。
自分が作業者であると同時に、小さな制作チームのディレクターになったような感覚でした。
今回の経験から得た結論は、AIが人間の仕事をすべて代行するようになった、ということではなく、一人の人間が、以前よりはるかに大きな仕事を動かせるようになった、ということです。
そして、AIがサイトという器を速く作れるようになったからこそ、
「その器に何を入れるのか」
が、これまで以上に重要になります。
*Orion Radio*の場合、それは、映画、服、アート、書籍、音楽、旅の記録であり、そこから生まれる服やセラミックなどの作品です。


comment