有限会社 綱業商会では、AI活用・DX支援の一環として、自社ホームページの制作・編集・記事投稿の流れそのものを、ローカルWordPress環境とCodexを組み合わせて整備しました。
今回行ったのは、単にホームページを作る作業ではありません。ローカル環境にWordPressを立ち上げ、Codexと会話しながらテーマや記事を編集し、WordPress REST APIを使って画像アップロード、下書き作成、公開済み記事の更新、Yoast SEOメタの設定まで進める仕組みづくりです。
小さな会社でも、外部の大きなシステムを最初から導入しなくても、手元の環境とAIエージェントを組み合わせることで、ここまで業務を整理できる。今回の取り組みは、その実践例になりました。
なぜ、ローカルWordPressとCodexを組み合わせたのか
ホームページやブログは、会社の情報発信の中心です。一方で、現実の運用ではいくつもの小さな負担があります。
- 文章を考える
- 画像を用意する
- WordPressにログインして投稿する
- 見た目を確認する
- SEOタイトルやメタディスクリプションを整える
- 内部リンクや外部リンクを設計する
- スマートフォンで崩れていないか確認する
- 後から同じ手順を再現できるように残す
これらは一つひとつは小さな作業ですが、積み重なると運用の負担になります。特に中小企業では、専任のWeb担当者がいるとは限りません。日々の業務の合間に、正確で見やすい記事を継続して出すことは簡単ではありません。
そこで今回は、ローカルにWordPress環境を用意し、Codexを「一緒に作業する相手」として使いました。文章の作成だけでなく、コード編集、画像生成、スクリーンショット取得、REST APIでの投稿、CSS調整、SEOメタ設定まで、会話しながら進められる形にしています。
まずローカルにWordPress環境を用意した
最初に行ったのは、ローカル環境にWordPressを立ち上げることです。Docker Composeを使い、WordPress本体とMySQLを分けて構成しました。
ローカル環境を用意すると、いきなり本番サイトを触らずに、テーマの構成やCSS、PHPテンプレートを確認できます。失敗してもすぐ直せるため、試行錯誤の速度が上がります。
今回のローカル環境では、WordPressのテーマやプラグインを `wp-content` 配下で管理できるようにしました。これにより、テーマファイルの修正やCSS調整をCodexから直接確認しながら進められます。
ポイントは、本番環境を直接いじる前に、ローカルで「こうすれば動く」「この構造なら保守しやすい」という形を確認することです。これは製造業の現場で治具や試作を作る感覚にも近いところがあります。いきなり本番に出すのではなく、まず安全な場所で形にして、動かして、直す。Web制作でも同じ考え方が役に立ちます。
ローカルで作ったテーマを本番環境へ反映した
今回のホームページ制作では、ローカル環境でWordPressテーマを作り込み、そのテーマファイルを本番環境へ反映する方法を取りました。
本番のWordPress管理画面だけでデザインを調整しようとすると、作業の途中経過が見えにくく、失敗したときの切り戻しも難しくなります。そこで、まずローカル環境でテーマのPHP、CSS、JavaScript、画像構成を整え、表示確認を行い、必要なファイルを本番環境へ送る流れにしました。
具体的には、テーマ内のテンプレートファイルや `assets/css/main.css`、`assets/js/main.js` などをローカルで編集し、トップページ、各事業ページ、投稿ページの表示を確認しました。確認後、本番環境の同じテーマディレクトリへ反映することで、ローカルで作った見た目と動きを本番サイトに反映しています。
この方法のよいところは、作業を「試す場所」と「公開する場所」に分けられることです。ローカル環境では大胆に試せます。本番環境では、確認済みのファイルだけを反映できます。小さな会社のホームページ運用でも、この切り分けがあるだけで安全性と再現性が上がります。
CodexにWordPress投稿専用のスキルを作った
次に、Codexで綱業商会のブログを編集・投稿するための専用スキルを作りました。
このスキルには、会社プロフィール、記事のトーン、カテゴリ、WordPress REST APIの使い方、画像アップロード、SEOメタ、投稿後の見た目確認までをまとめています。
特に重要だったのは、Codexが毎回ゼロから考えなくても、綱業商会らしい記事を書けるようにしたことです。たとえば、記事のトーンとしては、派手な広告表現よりも、現場目線で誠実に、実際の困りごとや改善に寄せて書く方針を残しました。
綱業商会は、ワイヤーロープ・ロープ・シート帆布加工といった現場技術を持つ会社です。その一方で、AI導入・DX支援にも取り組んでいます。記事を書くときには、この二つを分けて考えるのではなく、「現場を知っているからこそできるAI活用」としてつなげる必要があります。
そのため、スキル内には会社情報だけでなく、避けたい表現も残しました。「最先端AI企業」のように大きく見せる表現よりも、「現場で使い続けられる仕組みを育てる」という言葉の方が、綱業商会の実態に合っています。
ページの動きも自然言語でCodexに実装させた
今回の制作では、静的なHTMLやCSSだけでなく、ページの動きに関わるJavaScriptの実装もCodexに任せました。
たとえば、メニューの開閉、スクロールに合わせた表示、ヘッダーの状態変化、フッターまわりの演出、トップページやサービスページでの視覚的な動きなどです。これらは、単に「JavaScriptを書いて」と依頼したわけではありません。
実際には、「スマートフォンではメニューを押したときに自然に開くようにしたい」「スクロールしても見づらくならないようにしたい」「派手すぎず、製造業のサイトとして落ち着いた動きにしたい」といった自然言語の指示を出し、Codexにコードへ落とし込ませました。
その後、ブラウザで確認し、動きが強すぎる部分や、モバイルで使いにくい部分を修正しました。ここでも大切なのは、AIに丸投げするのではなく、こちらが意図を伝え、出てきたものを実際の画面で確認し、必要に応じて修正することです。
プログラムの細かい構文をすべて覚えていなくても、「こういう動きにしたい」「この状態では使いにくい」という現場の言葉を起点にして、動くコードへ変換できる。これはAIエージェントを使った制作の大きな価値だと感じました。
WordPress REST APIで記事投稿を自動化した
記事投稿では、WordPress REST APIを使いました。これにより、WordPressの管理画面で毎回手作業をするのではなく、ローカルで作ったHTML本文をAPI経由で下書きや公開記事に反映できます。
今回整備した投稿スクリプトでは、次のような操作を行えるようにしました。
- WordPress認証の確認
- カテゴリ一覧の取得
- タグの検索・作成
- メディア画像のアップロード
- 記事の新規作成
- 既存記事の更新
- アイキャッチ画像の設定
- Yoast SEOのフォーカスキーフレーズとメタディスクリプション設定
認証情報は、スクリプトや記事ファイルに直接書かず、`.env` から読み込むようにしました。WordPressのアプリケーションパスワードは表示上スペース区切りでコピーされることがあるため、スクリプト側でスペースやハイフンを除去して認証に使う処理も入れています。
こうした細かいところは、実際に動かしてみないと気づきにくい部分です。AIエージェントを使っていても、現実のシステムには認証、権限、フォーマット、キャッシュ、CSSの読み込み順など、いくつもの実務上のひっかかりがあります。そこを一つずつ潰していくことが、単なるデモではないDXにつながります。
画像アップロードとアイキャッチ設定も自動化した
記事には画像が必要です。特にホームページの更新事例やAI/DXの事例では、実際の画面を見せることで、読者が具体的に理解しやすくなります。
今回は、公開サイトのスクリーンショットや実装ワークフローの画像を用意し、WordPressメディアへアップロードしました。アップロード時には、画像のaltテキストとキャプションも設定しています。
画像の扱いで大切なのは、ただ貼るだけではなく、何を伝える画像なのかを明確にすることです。altテキストは検索エンジンのためだけでなく、画面読み上げなどアクセシビリティにも関係します。キャプションを入れることで、画像が記事の中でどの役割を持っているかも伝わりやすくなります。
また、アイキャッチ画像もAPIから設定できるようにしました。これにより、記事本文、カテゴリ、タグ、SEO、アイキャッチまで、投稿に必要な主要情報をまとめて扱えるようになります。
記事の見た目もCodexと確認しながら整えた
記事を投稿するだけなら、本文HTMLを送れば終わりです。しかし、実際の運用ではそれだけでは足りません。公開ページで見たときに読みやすいか、スマートフォンで崩れていないか、リンクが目立つか、見出しの余白が適切かを確認する必要があります。
今回の作業では、記事投稿後にブラウザで表示を確認し、必要に応じてCSSを調整しました。
たとえば、最初はリンクが通常の文字リンクだけでした。しかし、記事内の外部リンクや内部リンクは、読者にとって次の行動につながる大切な導線です。そこで、リンクをカード型にして、公式ページ、AI活用・DX支援ページ、お問い合わせページへ移動しやすくしました。
WordPressでは、本文内のHTMLが自動整形されることがあります。リンクカードの中に意図しない `
` が入ることもありました。そのため、CSS側で余計な改行を無害化し、カードとして見えるように調整しました。
こうした微調整は、文章生成だけでは見落としやすいところです。実際のブラウザで見て、違和感があれば直す。AIを使う場合でも、最後は現場で確認する姿勢が大切だと改めて感じました。
Yoast SEOのメタ情報もAPIで扱えるようにした
記事を公開するうえでは、SEOの基本情報も大切です。WordPressにはYoast SEOを入れているため、フォーカスキーフレーズやメタディスクリプションも管理したいところです。
ただし、最初からYoastのメタ情報をREST APIで更新できる状態ではありませんでした。そこで、WordPress側で `_yoast_wpseo_focuskw` と `_yoast_wpseo_metadesc` をREST更新可能なメタキーとして登録しました。
その後、投稿スクリプト側に `–yoast-focus-keyphrase` と `–yoast-meta-description` の引数を追加しました。これにより、記事本文を更新するときに、SEOメタ情報も同時に送れるようになりました。
このように、プラグインの管理画面で手作業する項目も、必要な設定を行えばAPI経由で扱える場合があります。もちろん、すべてを無理に自動化する必要はありません。しかし、何度も繰り返す作業は自動化の候補になります。
今回のワークフローでできるようになったこと
今回の取り組みにより、綱業商会のホームページ運用では、次のような流れが作れるようになりました。
- Codexと会話しながら記事の目的や読者を整理する
- ローカル環境でテーマやページの動きを試作する
- 自然言語でJavaScriptやCSSの修正を依頼する
- 確認済みのテーマファイルを本番環境へ反映する
- 会社プロフィールや事業内容を踏まえて本文を作る
- 必要に応じてスクリーンショットや画像を用意する
- WordPressメディアへ画像をアップロードする
- HTML本文を生成する
- REST APIで下書きまたは既存記事を更新する
- カテゴリ、タグ、アイキャッチ、SEOメタを設定する
- ブラウザで公開ページを確認する
- 必要に応じてCSSを調整する
- 同じ手順を次の記事にも再利用する
この流れができると、ブログ投稿は単発の作業ではなくなります。記事を書くたびに知見が増え、スキルやスクリプトに反映され、次回の作業が少し楽になります。
DXは大きなシステム導入だけではない
DXというと、大きなシステムを導入することや、専門会社に大規模な開発を依頼することを想像しがちです。しかし、実際の現場では、もっと小さな改善の積み重ねが重要です。
今回の例でいえば、ホームページの投稿作業を見直しただけとも言えます。しかし、その中には多くの改善があります。
- 作業手順を言語化した
- 認証情報の扱いを整理した
- 記事作成と投稿を分けて考えた
- 画像アップロードを標準化した
- SEOメタをAPIで更新できるようにした
- CSS調整の判断基準を残した
- 次回以降も同じ流れを再現できるようにした
これは、製造業の現場で作業手順書や治具を整えることに近い考え方です。作業者の経験や判断を、次に使える形に残す。属人的だった作業を、少しずつ共有できる形にする。AIやCodexは、そのための相棒として使えます。
AIエージェントを使うときに大切なこと
今回の作業を通じて感じたのは、AIエージェントは「全部自動でやってくれる魔法」ではなく、「人が判断しながら作業を進めるための強力な補助者」だということです。
たとえば、Codexはコードを書いたり、記事本文を整えたり、APIを実行したりできます。しかし、会社としてどのような表現がふさわしいか、どこまで詳細を書くべきか、画像をどう見せるべきか、公開前に何を確認すべきかは、人が判断する必要があります。
特に会社の情報発信では、正確さと信頼感が大切です。AIに任せきりにするのではなく、公開ページ、公式情報、実際の画面を確認しながら進めることで、実務で使える形になります。
綱業商会のAI/DX支援として伝えたいこと
綱業商会では、AIやDXを特別なものとして遠くに置くのではなく、現場の業務改善として扱っています。
今回のホームページ編集・記事投稿ワークフローも、その一つです。自分たちの業務を題材にして、AIエージェントをどう使うか、どこで人の判断を入れるか、どこを自動化すると効果があるかを確認しました。
この経験は、他の中小製造業にも応用できます。たとえば、作業手順書の作成、在庫管理の整理、問い合わせ対応の下書き、報告書の作成、写真付きの実績記事作成、技術継承資料の整理など、AIエージェントが役に立つ場面は多くあります。
大切なのは、いきなり大きな仕組みにしようとしないことです。まず一つの業務を選び、現状の手順を見える形にし、AIで補助できる部分を探す。小さく始めて、使いながら直す。その積み重ねが、現場で使い続けられるDXにつながります。
まとめ
今回、ローカルWordPress環境とCodexを組み合わせることで、ホームページ編集とブログ投稿の流れを大きく整理できました。
環境構築、テーマ編集、記事作成、画像アップロード、REST API投稿、SEOメタ設定、CSS調整、ブラウザ確認までを一つの流れとして扱えたことで、今後の記事作成や情報発信の土台ができました。
綱業商会では、これからも自社で実際に試したAI活用・DXの取り組みを発信していきます。現場で本当に使える形にするには、道具を入れるだけでなく、使い方を決め、直し、残していくことが欠かせません。
AI活用やDX支援については、下記ページでも紹介しています。自社でのAI活用、業務改善、技術継承、ホームページや社内システムの整備について相談したい方は、お気軽にご相談ください。