VIXNODE ガイド · CHATGPT PLUGINS

VIXNODE Plugin 完全ガイド

VIXNODE Plugin の接続方法、ウェブサイト管理ツールの使い方、そして ChatGPT でサイトを作成・改善・公開・運用するための、そのまま使えるプロンプト例を紹介します。

VIXNODE と ChatGPT を連携してウェブサイトを作成・公開するイメージ

VIXNODE Plugin は、VIXNODE のウェブサイト作成・管理機能を ChatGPT Plugins と連携します。接続後は、日常的な言葉で要望を伝えるだけで、プロジェクト、ページ、デザイン、画像、バージョン、SEO を扱えます。コンテンツの作成・変更・公開では、必要な認証、プレビュー、確認手順が維持されます。

VIXNODE Plugin を開く

VIXNODE Plugin の接続方法

  1. VIXNODE Plugin を開く.
  2. Select Connect.
  3. Sign in and authorize your VIXNODE account.
  4. Return to ChatGPT and describe the website task in natural language.

公式の接続フローでは、Dynamic Client Registration(DCR)を使用してアプリケーション登録と認証を処理します。

VIXNODE の21ツールとプロンプト例

以下のツールは、一般的なウェブサイト制作の流れに沿って並んでいます。項目を開くと、ほかの項目は自動的に閉じます。

現在接続中の VIXNODE アカウント、プラン、利用可能な上限を確認します。

プロンプト例

現在接続されている VIXNODE アカウントを教えてください。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 を確認します。