ウィジェット（Widgets）は、単なるUIコンポーネントにとどまらず、ホームページ全体の保守性と機能拡張性を高める中核ツールです。ウィジェットをどこに、どのように活用するかによって、作業効率が大きく変わります。

ウィジェットのメリットまとめ

ウィジェットを積極的に活用することで、以下のメリットが得られます。

• 再利用性 — 一度作成したウィジェットを複数のページに挿入することで、繰り返し作業を削減できます。

• 一括修正 — 共通エリア（メニュー、フッターなど）をウィジェットで管理すると、修正時にすべてのページへ即時反映されます。

• JS機能の実装 — ページに直接JavaScriptを追加できない環境でも、ReactウィジェットがJSの役割を担います。

• 機能拡張 — Tool Scriptsと連携することで、単純なUIを超えてサーバー連携やデータ処理まで対応できる動的コンポーネントへと発展させることができます。

1. 共通エリアはウィジェットにまとめて一元管理する

ナビゲーションメニューやフッターのように、すべてのページに繰り返し表示されるエリアはウィジェットとして作成しておくと、管理が格段に楽になります。ページごとにHTMLをコピーして貼り付けると、メニュー項目を1つ変更するだけですべてのページを個別に修正しなければなりません。一方、ウィジェットとして管理すれば、ウィジェットを1つ修正するだけで、そのウィジェットが挿入されているすべてのページに変更が即時反映されます。

活用例）ナビゲーションメニューウィジェットを修正 → 10ページすべてに自動反映

2. ページにはJSがない — ウィジェットでスクリプト機能を実装する

isshoniAI Sitebuilderでは、各ページに個別のJavaScriptを直接追加することはできません。サイト全体に適用されるSite JSのみが存在します。そのため、特定のページでのみ動作するスクリプト機能が必要な場合は、Reactウィジェットを作成して該当ページに挿入する方法を使用します。ウィジェット内ではJavaScript（React）を自由に記述できるため、ボタンクリックイベント、API呼び出し、アニメーションなど、さまざまなインタラクションを実装することができます。

活用例）お問い合わせフォーム、チャットボット、データフィルタリング、カウンターなど → Reactウィジェットで実装

3. Tool Scriptsと連携してウィジェットの活用範囲を最大化する

ウィジェットをTool Scriptsと連携させることで、活用の幅が大きく広がります。Tool Scriptsはサイトにサーバーサイドロジック（API連携、データ処理など）を追加できる機能であり、Reactウィジェットからこれを呼び出すことで、CMSページのような動的なコンテンツを構成することができます。たとえば、外部データを取得してウィジェットに表示したり、ユーザーの入力をサーバーで処理するフローを構築したりすることが可能です。

活用例）ウィジェットからTool Scriptを呼び出す → 外部APIのデータを取得して画面に表示

Sample Widgets — 14種類の標準提供ウィジェット紹介

isshoniAI Sitebuilderは、すぐに使用したり複製してカスタマイズしたりできる14種類のサンプルウィジェットを提供しています。ウィジェットパネルのSample Widgetsタブから確認でき、各ウィジェットは目的に応じて大きく5つのグループに分類されています。

💬 チャットウィジェット（Chat）

1. AI Chat Widget #Chat #OpenAI
   OpenAIベースのAIチャットボットウィジェットです。サイトでChat Serviceが有効になっている場合、訪問者がAIと対話できます。チャットボットUIを素早く構成したい場合は、このウィジェットを複製して使い始めると便利です。

2. NextPOD Chat #Chat #NextPOD #Webhook
   NextPODメッセンジャーと連携するチャットウィジェットです。Tool ScriptsのWebhook機能を活用して外部サービスへメッセージを送信し、非同期で返答を受け取って画面に表示します。単純なOpenAIチャットボットとは異なり、外部システムと連携したチャットが必要な場合に使用します。

🖼️ ヒーロー＆ヘッダーウィジェット（Layout）

3. Hero Banner #Hero — HTMLウィジェット
   ページ上部に配置する大型バナーウィジェットです。タイトル、サブタイトル、CTAボタンのテキストとリンクをConstantsからコードを修正せずに変更できます。ランディングページやメインページの上部にすぐ活用できます。

4. Menu Header #Header #Navigation — HTMLウィジェット
   ロゴ、ナビゲーションリンク、CTAボタンを含む静的ヘッダーウィジェットです。メニュー項目がHTMLに直接記述されているため、構造がシンプルで動作が速いです。メニュー構成が頻繁に変わらないサイトに適しています。

5. Dynamic Header Menu #Site — Reactウィジェット
   サイトに登録されたページ一覧を自動的に取得してメニューを構成するヘッダーウィジェットです。ページを追加・削除するとメニューが自動的に更新されます。Menu Headerとの違いは、メニュー項目を手動で管理する必要がない点です。

📄 ドキュメント一覧ウィジェット（List Documents）

Documentsに保存されたアーティクル一覧を取得して画面に表示するウィジェット3種です。コンテンツを開く方法のみが異なります。

6. Article List + Link #List Documents
   アーティクル一覧をリスト表示し、項目をクリックすると該当アーティクルのページへ遷移します。ブログ一覧、お知らせ一覧など、別途詳細ページがある構成に適しています。

7. Article List + Expand #List Documents
   アーティクル一覧で項目をクリックすると、同じページ内で下に展開されて本文が表示されます。ページ遷移なしに内容を確認したい場合に使用します。FAQや簡単なお知らせに適しています。

8. Article List + Window #List Documents
   アーティクル一覧で項目をクリックすると、モーダル（ポップアップ）ウィンドウで本文が開きます。ページを離れずに内容をすばやく確認できるため、ポートフォリオや製品紹介一覧への活用に適しています。

📰 ドキュメント本文ウィジェット（View Document）

単一アーティクルの本文を表示するウィジェット2種です。アーティクル詳細ページで使用し、デザインスタイルのみが異なります。

9. Article Body A #View Document — HTMLウィジェット
   上部にヒーロー画像が大きく表示され、その下にタイトル・著者・日付・本文が続くレイアウトです。ビジュアルを重視したマガジン型アーティクルページに適しています。

10. Article Body B #View Document — HTMLウィジェット
    タイトルと著者情報が上部に配置され、本文内の画像がインラインで配置されるシンプルなテキスト中心のレイアウトです。ガイドドキュメントやブログ投稿のように、文章が主体のページに適しています。

👤 ログイン＆ユーザーウィジェット（Login / User）

11. Avatar / User Dropdown #Login
    ログイン中のユーザーのプロフィール画像（アバター）を表示し、クリックするとログイン状態・メールアドレス・ログアウトボタンを含むドロップダウンが開きます。ヘッダーと組み合わせて配置することで、ログイン状態を一目で確認できます。

🔧 開発＆テストウィジェット（Test）

12. User Data Tester #Test #User Data
    User Data API（書き込み・読み取り・一覧・削除）を直接テストできるウィジェットです。ログイン中のユーザーの個人データを保存・取得する機能を実装する前に、このウィジェットで動作を事前に確認することができます。

13. API Test Widget #Mixed #Test
    サイトのさまざまなAPI（メール送信、チャット、ユーザー情報など）を1つの画面でテストできる開発用ウィジェットです。新しい機能を実装する前に、APIが正常に動作するかを確認する目的で使用します。

📧 お問い合わせフォームウィジェット（Site）

14. Email Contact Form #Site
    氏名・メールアドレス・会社名・電話番号・件名・メッセージの入力フィールドを含むお問い合わせフォームウィジェットです。送信時にサイト管理者のメールアドレスへ内容が送信されます。すべてのテキスト（ラベル、プレースホルダー、ボタン、案内メッセージ）はConstantsからコードを修正せずに変更できます。

知っておくと役立つヒント

🔁 共通エリアは最初からウィジェットとして作成する

ナビゲーションメニューやフッターのように、すべてのページに繰り返し表示される要素は、最初からウィジェットとして作成してください。後から修正する際も、ウィジェットを1つ変更するだけで全ページに即時反映されます。すでにページごとにHTMLをコピーして貼り付けている場合は、AIに「ナビゲーションメニューをウィジェットに分離して」と依頼すると整理してもらえます。

⚙️ ページ固有のJSが必要な場合はReactウィジェットで対応する

各ページにはJavaScriptを直接追加することができません。特定のページでのみ動作する機能（ボタンイベント、API呼び出し、アニメーションなど）が必要な場合は、Reactウィジェットを作成して該当ページに挿入してください。Reactウィジェットは独立して動作するため、他のページに影響を与えません。

🔗 Tool Scriptsと連携することで活用の幅が広がる

ウィジェットからTool Scriptsを呼び出すことで、外部API連携、データ処理、メッセージ送信などのサーバーサイドロジックをウィジェット内で実行できます。NextPOD Chatがその代表例であり、Webhook Tool Scriptと連携して外部メッセンジャーとリアルタイムで通信します。AIに「このウィジェットからTool Scriptを呼び出して」と依頼すると、連携コードを作成してもらえます。

📦 サンプルウィジェットは複製して使い始める

14種類のサンプルウィジェットは、最初から自分で作成する必要はありません。ウィジェットパネルのSample Widgetsタブから目的のウィジェットを複製（Clone）した後、ConstantsやコードをカスタマイズするだけでOKです。特にEmail Contact FormとHero Bannerは、Constantsを修正するだけでほとんどのカスタマイズが完了します。

📋 ドキュメント一覧ウィジェット3種の選択基準

• 詳細ページへ遷移させたい場合 → Article List + Link

• ページ遷移なしに内容を展開表示したい場合 → Article List + Expand

• ポップアップですばやく内容を確認させたい場合 → Article List + Window

🧪 新機能の実装前にテストウィジェットを活用する

User Data APIやメール送信など、新しい機能をウィジェットに実装する前に、User Data TesterとAPI Test WidgetでAPIの動作を事前に確認してください。実装前にエラーを把握できるため、開発効率が向上します。