VIXNODE Plugin は、VIXNODE のウェブサイト作成・管理機能を ChatGPT Plugins と連携します。接続後は、日常的な言葉で要望を伝えるだけで、プロジェクト、ページ、デザイン、画像、バージョン、SEO を扱えます。コンテンツの作成・変更・公開では、必要な認証、プレビュー、確認手順が維持されます。
VIXNODE Plugin の接続方法
- VIXNODE Plugin を開く.
- Select Connect.
- Sign in and authorize your VIXNODE account.
- Return to ChatGPT and describe the website task in natural language.
公式の接続フローでは、Dynamic Client Registration(DCR)を使用してアプリケーション登録と認証を処理します。
VIXNODE の21ツールとプロンプト例
以下のツールは、一般的なウェブサイト制作の流れに沿って並んでいます。項目を開くと、ほかの項目は自動的に閉じます。
現在接続中の VIXNODE アカウント、プラン、利用可能な上限を確認します。
プロンプト例
現在接続されている VIXNODE アカウントを教えてください。VIXNODE の契約プランと残りの利用枠を確認してください。接続中のアカウントで利用できる VIXNODE ウェブサイトを一覧表示します。
プロンプト例
現在の VIXNODE ウェブサイトをすべて一覧表示してください。会社サイトを更新したいので、最初に対象プロジェクトを選ばせてください。名称を確認してから、新しいウェブサイトプロジェクトを作成します。
プロンプト例
「パン工房 公式サイト」という名前で新しいウェブサイトを作成してください。9月の新商品発表用に、別のウェブサイトプロジェクトを作成してください。選択したウェブサイトに含まれるページを一覧表示します。
プロンプト例
パン工房サイトのすべてのページを一覧表示してください。お問い合わせページを更新する前に、ページ一覧を表示してください。利用可能なすべてのウェブサイトプロジェクトを横断してページを検索します。
プロンプト例
「2026年夏キャンペーン」ページがあるウェブサイトを探してください。商品ページがどのプロジェクトにあるか忘れたので、探してください。参考テーマ、ビジュアルスタイル、配色の方向性を取得します。
プロンプト例
モダンなテクノロジーサイトに合う参考テーマを表示してください。上質な職人ベーカリーブランドに合うテーマをいくつか提案してください。プロンプト、参考画像、VIXNODE テーマ、またはカスタムスタイルからページを作成します。
プロンプト例
メインビジュアル、ブランドストーリー、おすすめ商品、明確な行動喚起を含むホームページを作成してください。承認済みのサイトスタイルに合わせて、私たちについてのページを作成してください。複数ページのウェブサイトを作る
まず必要なページをすべて洗い出し、共通の Main Layout を1つ承認します。通常のコンテンツページは1ページずつ作成してください。記事、商品、事例、ドキュメントなど同じ追加構造を持つページ群が必要な場合にのみ Child Layout を追加します。変更を適用する前に、共通ナビゲーション、内部リンク、デスクトップとモバイルの両方のプレビューを確認します。
変更前に、編集可能な最新のページ内容を取得します。
プロンプト例
変更する前に、ホームページの最新内容を読み込んでください。お問い合わせページの現在の構成と文章を表示してください。文章、画像、構成、またはビジュアルデザインを更新し、確認後に公開します。
プロンプト例
ホームページの見出しだけを「おいしいパンから、毎日が始まる。」に変更してください。サービスページのスタイルを維持したまま、比較セクションと FAQ を追加してください。現在ウェブサイト訪問者に表示されているバージョンを取得します。
プロンプト例
現在公開中のホームページを表示してください。編集可能なバージョンと公開中のバージョンを比較してください。過去のバージョンと変更日時を一覧表示します。
プロンプト例
ホームページの最新バージョンを一覧表示してください。昨日の変更前のバージョンを探してください。選択した過去バージョンの完全な内容を取得します。
プロンプト例
昨日の朝のホームページバージョンを開いてください。復元するか判断する前に、以前のバージョンを表示してください。選択したバージョンを直前のものと比較し、差分を要約します。
プロンプト例
ホームページの最新2バージョンを分かりやすい言葉で比較してください。ナビゲーションが消えた原因となる変更を探してください。アップロード済みのプロジェクト画像を表示し、選択できるようにします。
プロンプト例
ホームページのメインビジュアルを選べるように、画像ライブラリを開いてください。プロジェクトライブラリから商品写真を3枚選ばせてください。1枚の画像またはサムネイルを取得・プレビューします。
プロンプト例
現在のホームページのメインビジュアルをプレビューしてください。濃色背景用のブランドロゴを選んだか確認してください。画像をプロジェクトライブラリに追加します。大きなファイルは、可能な限り VIXNODE のアップロード画面を使用してください。
プロンプト例
メインビジュアルをアップロードしました。指定した画像パスをホームページの最初のセクションに適用してください。3枚の商品画像を、指定したアップロード済み画像パスに置き換えてください。ページタイトル、メタディスクリプション、JSON-LD データを確認します。
プロンプト例
ホームページの現在の SEO タイトルと説明文を確認してください。商品ページに構造化データが含まれているか確認してください。Article、FAQPage、Product などの JSON-LD 例を取得します。
プロンプト例
この記事用の Article 構造化データ例を提示してください。適用前に確認できる FAQPage の例を作成してください。明確な承認後に、SEO メタデータと JSON-LD を更新します。
プロンプト例
ホームページの SEO タイトルとメタディスクリプションを作成し、公開前に表示してください。完全な Article JSON-LD を作成し、適用前に承認を求めてください。公開 HTML を取得し、コンテンツの順序と構造を分析します。
プロンプト例
文章をコピーせずに、この参考 URL のコンテンツ構成を分析してください。この公開ページの HTML を確認し、主なレイアウトを要約してください。VIXNODE の機能ガイド、手順、FAQ を取得します。
プロンプト例
独自ドメイン接続の公式手順を探してください。SEO、バージョン履歴、リソースファイルに関する VIXNODE ガイドを表示してください。おすすめの画像アップロード方法
大きな画像は、VIXNODE のアップロード画面を使うか、VIXNODE プラットフォームから直接アップロードすることを強くおすすめします。
ChatGPT 経由で大きな画像データを送信すると、ChatGPT の利用枠を大幅に消費する場合があります。
アップロード後は画像パスを AI に渡し、特定のページまたはセクションへの適用を依頼してください。
VIXNODE ウェブサイト制作資料をダウンロード
これらの資料を ChatGPT プロジェクトに追加するか、会話の情報源として提供すると、生成の安定性、レイアウト精度、ビジュアルの一貫性を高められます。
VIXNODE ページ作成手順
ページ種別、レイアウト関係、識別子、プレビュー、確認手順に関するガイドです。
AI ウェブサイト・アートディレクション手順
一貫したデザイン結果を得るための、ビジュアル方向性、ブランドらしさ、アートディレクションのガイドです。
参考資料とユーザーの今回の要望が異なる場合は、最新かつ最も明確な指示を優先します。変更を適用する前に、対象サイト、ページ、レイアウト、内容、影響範囲を必ず確認してください。
ChatGPT プロジェクトのコンテキスト設定
この例を ChatGPT プロジェクトの指示に追加するか、会話内のプロジェクトコンテキストとして渡すことで、今後の VIXNODE 作業に一貫したコンテンツ、ビジュアル、画像、リンクのルールを適用できます。
# デフォルトプラグイン
@VIXNODE
# 開始プロジェクト
@VIXNODE 'パン工房'
# プロジェクトのテーマ
手作りパンの工房をテーマに、手作りパン、製パン教室、レシピ、材料の知識、工房イベントを紹介するウェブサイトを構築します。
# ウェブサイトの目標
1. 工房のブランド理念と手仕事へのこだわりを伝える。
2. 教室内容、イベント情報、参加方法を紹介する。
3. 実用的なパンレシピと製パン知識を共有する。
4. 温かく、専門的で、親しみやすいブランドイメージを築く。
5. 訪問者が教室を知り、体験を予約し、工房へ問い合わせられるよう導く。
# 主な対象ユーザー
* 手作りパンに興味がある初心者
* 技術を高めたい製パン愛好家
* 親子体験やグループ活動を探している人
* パンの材料、発酵、作り方を学びたい読者
# コンテンツ分類
| 分類名 | 内容の方向性 |
| --- | --- |
| 工房紹介 | ブランドストーリー、指導理念、講師、工房スペース |
| 製パン教室 | 講座内容、難易度、時間、対象者 |
| パンレシピ | 材料、分量、手順、実用的なコツ |
| 製パン知識 | 小麦粉、酵母、発酵、道具、保存方法 |
| イベント情報 | 体験会、親子教室、団体向け貸切講座 |
| 工房日誌 | 教室の記録、受講者の作品、日々の物語 |
# ブランドとビジュアルの方向性
ブランドの個性:
* 温かく自然
* 手作りの誠実さ
* 素朴で丁寧
* 専門的でありながら親しみやすい
* 暮らしに根ざしている
小麦粉、生地、焼き色、木製の作業台、リネン、伝統的な製パン道具からビジュアルの着想を得ます。
小麦粉の白、小麦のベージュ、パンの黄金色、木の深い茶色を基本に、セージグリーンまたはレンガ色を少量使用します。
理由のない青紫のテクノロジー系グラデーション、ネオン効果、グラスモーフィズム、過度な角丸カード、画一的な AI サイト風デザインは避けます。
# コンテンツ作成の原則
1. 自然で親しみやすく、理解しやすい文体を使う。
2. 専門的な製パン用語は、説明してから使用する。
3. レシピには材料、分量、時間、手順、注意事項を明記する。
4. 教室紹介には内容、難易度、所要時間、対象者を記載する。
5. 抽象的な宣伝文より、具体的で実用的な情報を優先する。
6. 講師、価格、住所、開催日、資格、受賞歴を捏造しない。
7. 必要な情報が不足している場合はユーザーに確認するか、明確な入力待ち項目を残す。
8. 既存内容との不要な重複を避ける。
# 画像とメインビジュアル
1. 完成したパン、製作工程、天然素材、製パン道具、工房空間を中心にする。
2. 自然で温かく明るい雰囲気を保ち、本物らしい手仕事の質感を残す。
3. デフォルトのメインビジュアルサイズは `1672 × 941 px`。
4. 画像内の材料、道具、パンの作り方は現実的なものにする。
5. ページを変更してメインビジュアルを追加する場合、`<img>` ノードに `data-meta="true"` を追加する。
6. VIXNODE の画像パス形式は `/API/GetImage/...`。
7. すべての画像に実際の内容に合った `alt` 説明を設定する。
# リンクとファイルのルール
1. サイト内リンクには相対パスを使用する。
2. 実在するページにのみリンクする。
3. ページ作成時は `filename` で完全なファイルパスを指定する。
4. 既存ページを変更するときは、現在のファイル名とページ関係を維持する。
5. 不明なプロジェクト ID、ページ ID、Layout ID、Placeholder ID を推測・作成しない。
サイト内リンクの例:
* `classes/index.html`
* `recipes/sourdough-bread.html`
* `../index.html`
* `../classes/beginner-bread.html`
# 参照ガイドライン
VIXNODE ページを作成・変更するときは、次のガイドに従います:
https://news.vixnode.com/vixnode-page-creation-instructions.md
ウェブサイトのビジュアルデザインでは、プロジェクト内の次の資料を参照します:
`AI-WEBSITE-ART-DIRECTION-INSTRUCTIONS.md`
参考ガイドラインとユーザーの今回の要望が異なる場合は、ユーザーの最新かつ最も明確な指示を優先します。重要な確認事項
- 実行前に、対象サイト、ページ、ビジュアルの参照元を確認します。
- 変更前に、ページの最新版を読み込みます。
- 変更がサイト全体、ページグループ、または1ページだけに影響するかを明確にします。
- 画像は先に VIXNODE へアップロードし、そのパスを提示します。
- 作成、変更、公開の前にプレビューを確認します。
- 公開前に SEO タイトル、説明文、JSON-LD を確認します。
