VibeFront ヘルプ

AI搭載HTMLエディタの使い方ガイド

VibeFrontは、AIを搭載したWindows向けデスクトップHTMLエディタです。コードエディタ（AvalonEdit）とリアルタイムプレビュー（WebView2）を組み合わせ、AIによるHTML生成・校正・翻訳・最適化機能を備えています。

クイックスタート

1. アプリを起動
   Microsoft Storeからインストール後、スタートメニューから「VibeFront」を起動します。アカウント登録は不要です。
2. AI設定（推奨）
   メニューの AI → AI設定 からお好みのAIプロバイダーとAPIキーを設定します。初めての方は Google Gemini（無料） がおすすめです。
3. HTMLを編集
   コードを書いてリアルタイムプレビューで確認。AIに「お問い合わせフォームを作って」と頼むこともできます。

AI機能の概要

VibeFrontのAI機能は以下の4社のAIプロバイダーに対応しています。お好みのプロバイダーを1つ設定するだけで、すべてのAI機能（HTML生成、テンプレート、校正、翻訳、最適化、画像→HTML変換）が使えます。

推奨AIモデル

以下は、VibeFrontでのHTML編集に適したおすすめのAIモデルです。

このほか、AI設定では GPT-6 Astra（最高性能・高コスト）、Claude Haiku 4.5（超高速・低コスト）、Gemini 3.5 Flash Lite（低コスト・安定版）も選択できます。

Google Gemini おすすめ

Google Geminiは、VibeFrontの既定モデル Gemini 3.8 Flash を無料枠で使えるため、初めてAIを使う方に最適です。

APIキーの取得手順

1. Google AI Studio にアクセスし、Googleアカウントでログインします。
2. 左メニューの「Get API key」をクリックし、「Create API key」ボタンを押します。
3. 表示されたAPIキー（AIza... で始まる文字列）をコピーします。
4. VibeFrontの AI → AI設定 で「Google Gemini」を選択し、コピーしたAPIキーを貼り付けて「保存」を押します。

OpenAI (ChatGPT)

OpenAIのGPTシリーズは、最も広く使われているAIモデルです。有料ですが、高品質なHTML生成が可能です。

APIキーの取得手順

1. OpenAI Platform にアクセスし、アカウントを作成またはログインします。
2. API keys ページで「Create new secret key」をクリックします。
3. 表示されたキー（sk-...）をコピーします。このキーは二度と表示されないので、安全な場所にも控えてください。
4. VibeFrontの AI設定 で「OpenAI」を選択し、キーを貼り付けて保存します。

Anthropic (Claude)

Anthropicのクロードは、特にコード生成に優れたAIです。

APIキーの取得手順

1. Anthropic Console にアクセスし、アカウントを作成します。
2. API Keys ページで新しいキーを作成し、コピーします。
3. VibeFrontのAI設定で「Anthropic (Claude)」を選択し、キーを貼り付けて保存します。

Ollama（ローカルLLM） 完全無料・オフライン

Ollama を使うと、AIモデルをお使いのPC上で直接動かせます。インターネット接続不要で、データが外部に送信されることは一切ありません。APIキーも不要です。

Ollamaの導入手順

1. Ollamaをインストール
   ollama.com/download からWindows版をダウンロードしてインストールします。インストーラーの指示に従うだけでOKです。
2. AIモデルをダウンロード
   コマンドプロンプト（またはPowerShell）を開いて、以下のコマンドを実行します：
   
   ollama pull qwen3:8b
   
   初回は数GBのダウンロードが発生します（Wi-Fi環境推奨）。ダウンロードが完了すれば、以降はオフラインで使えます。
3. Ollamaを起動
   Ollamaは通常、インストール後に自動で起動しています（タスクトレイにアイコンが表示されます）。起動していない場合は、スタートメニューから「Ollama」を起動してください。
4. VibeFrontで設定
   VibeFrontの AI → AI設定 で以下のように設定します：
   
   

   プロバイダー	OpenAI互換
   ベースURL	http://localhost:11434
   モデルID	qwen3:8b
   APIキー	空欄でOK

5. 接続テスト
   「接続テスト」ボタンを押して「接続成功!」と表示されれば設定完了です。

おすすめのOllamaモデル

LM Studio（ローカルLLM） GUI操作・初心者向け

LM Studio は、ローカルLLMをGUI（グラフィカルな画面）で簡単に管理・実行できるアプリです。コマンド操作に不慣れな方に特におすすめです。

LM Studioの導入手順

1. LM Studioをインストール
   lmstudio.ai からダウンロードしてインストールします。
2. モデルをダウンロード
   LM Studioを起動し、検索バーに「Qwen3 8B」と入力。表示されたモデル（GGUF形式）のダウンロードボタンを押します。「Q4_K_M」がバランスの良い選択です。
3. サーバーを起動
   左メニューの「Local Server」タブをクリック → ダウンロードしたモデルを選択 → 「Start Server」ボタンを押します。画面に http://127.0.0.1:1234 と表示されればOKです。
4. VibeFrontで設定
   VibeFrontの AI設定 で以下のように設定します：
   
   

   プロバイダー	OpenAI互換
   ベースURL	http://localhost:1234
   モデルID	（LM Studioに表示されているモデル名）
   APIキー	空欄でOK

5. 接続テストで確認
   「接続テスト」をクリックして成功すれば完了です。

表示モード

VibeFrontには3つの表示モードがあります。ツールバーのボタンまたは表示メニューから切り替えられます。

パネルはAvalonDockにより自由にドッキング・フローティング・並べ替えが可能です。レイアウトは自動的に保存されます。

Emmet展開

Emmet記法を入力して Tab キーを押すと、HTMLが自動展開されます。

プレビュー同期

プレビューでテキストを選択すると、コードエディタの該当箇所に自動でジャンプ・ハイライトされます。「このテキストはどのコードに対応しているの？」がすぐにわかります。

レスポンシブプレビュー機能で、モバイル（375px）・タブレット（768px）・デスクトップ（1200px）の表示を即座に確認できます。表示メニュー → レスポンシブプレビュー から切り替えます。

文字コード（エンコーディング）

VibeFrontは以下のエンコーディングに対応しています。ファイルを開くと自動的に文字コードを検出します。

• UTF-8 / UTF-8 BOM — 新しいHTMLファイルの標準
• Shift-JIS — 日本語レガシーHTML
• EUC-JP — 日本語レガシーHTML（Unix系）
• UTF-16 LE / BE — Windowsテキストファイル

ステータスバーに現在のエンコーディングが表示されます。クリックするとエンコーディングの変更メニューが表示されます。

ショートカットキー

FAQ

サポート