VibeFront ヘルプ VibeFront Help

AI搭載HTMLエディタの使い方ガイド User guide for the AI-powered HTML editor

VibeFrontは、AIを搭載したWindows向けデスクトップHTMLエディタです。コードエディタ（AvalonEdit）とビジュアルエディタ（WebView2+Tiptap）を組み合わせ、AIによるHTML生成・校正・翻訳・最適化機能を備えています。 VibeFront is an AI-powered desktop HTML editor for Windows. It combines a code editor (AvalonEdit) with a visual editor (WebView2 + Tiptap), plus AI-powered HTML generation, proofreading, translation, and optimization.

クイックスタート Quick Start

1. アプリを起動Launch the app
   Microsoft Storeからインストール後、スタートメニューから「VibeFront」を起動します。アカウント登録は不要です。 After installing from the Microsoft Store, launch "VibeFront" from the Start menu. No account signup required.
2. AI設定（推奨）Configure AI (recommended)
   メニューの AI → AI設定 からお好みのAIプロバイダーとAPIキーを設定します。初めての方は Google Gemini（無料） がおすすめです。 Go to AI → AI Settings and configure your preferred AI provider and API key. If you're new, we recommend Google Gemini (free).
3. HTMLを編集Edit HTML
   コードを書いてリアルタイムプレビューで確認。AIに「お問い合わせフォームを作って」と頼むこともできます。 Write code and check the live preview. You can also ask AI to "create a contact form" for you.

AI機能の概要 AI Overview

VibeFrontのAI機能は以下の4社のAIプロバイダーに対応しています。お好みのプロバイダーを1つ設定するだけで、すべてのAI機能（HTML生成、テンプレート、校正、翻訳、最適化、画像→HTML変換）が使えます。 VibeFront's AI features support 4 AI providers. Just configure one provider of your choice, and all AI features (HTML generation, templates, proofreading, translation, optimization, image-to-HTML) become available.

推奨AIモデル Recommended AI Models

以下は、VibeFrontでのHTML編集に適したおすすめのAIモデルです。 Here are the recommended AI models for HTML editing with VibeFront.

Google Gemini おすすめRecommended

Google Geminiは無料枠が大きく、初めてAIを使う方に最適です。 Google Gemini has a generous free tier and is perfect for those new to AI.

APIキーの取得手順How to get an API key

1. Google AI Studio にアクセスし、Googleアカウントでログインします。 Go to Google AI Studio and sign in with your Google account.
2. 左メニューの「Get API key」をクリックし、「Create API key」ボタンを押します。 Click "Get API key" in the left menu, then click the "Create API key" button.
3. 表示されたAPIキー（AIza... で始まる文字列）をコピーします。 Copy the displayed API key (a string starting with AIza...).
4. VibeFrontの AI → AI設定 で「Google Gemini」を選択し、コピーしたAPIキーを貼り付けて「保存」を押します。 In VibeFront, go to AI → AI Settings, select "Google Gemini", paste the API key, and click "Save".

OpenAI (ChatGPT)

OpenAIのGPTシリーズは、最も広く使われているAIモデルです。有料ですが、高品質なHTML生成が可能です。 OpenAI's GPT series is the most widely used AI model. It's paid, but produces high-quality HTML.

APIキーの取得手順How to get an API key

1. OpenAI Platform にアクセスし、アカウントを作成またはログインします。 Go to OpenAI Platform and create an account or sign in.
2. API keys ページで「Create new secret key」をクリックします。 Go to the API keys page and click "Create new secret key".
3. 表示されたキー（sk-...）をコピーします。このキーは二度と表示されないので、安全な場所にも控えてください。 Copy the displayed key (sk-...). This key won't be shown again, so save it somewhere safe.
4. VibeFrontの AI設定 で「OpenAI」を選択し、キーを貼り付けて保存します。 In VibeFront's AI Settings, select "OpenAI", paste the key, and save.

Anthropic (Claude)

Anthropicのクロードは、特にコード生成に優れたAIです。 Anthropic's Claude excels particularly at code generation.

APIキーの取得手順How to get an API key

1. Anthropic Console にアクセスし、アカウントを作成します。 Go to Anthropic Console and create an account.
2. API Keys ページで新しいキーを作成し、コピーします。 Create a new key on the API Keys page and copy it.
3. VibeFrontのAI設定で「Anthropic (Claude)」を選択し、キーを貼り付けて保存します。 In VibeFront's AI Settings, select "Anthropic (Claude)", paste the key, and save.

Ollama（ローカルLLM） Ollama (Local LLM) 完全無料・オフラインFree & Offline

Ollama を使うと、AIモデルをお使いのPC上で直接動かせます。インターネット接続不要で、データが外部に送信されることは一切ありません。APIキーも不要です。 Ollama lets you run AI models directly on your PC. No internet connection needed, and your data never leaves your machine. No API key required.

Ollamaの導入手順How to set up Ollama

1. OllamaをインストールInstall Ollama
   ollama.com/download からWindows版をダウンロードしてインストールします。インストーラーの指示に従うだけでOKです。 Download the Windows version from ollama.com/download and install it. Just follow the installer prompts.
2. AIモデルをダウンロードDownload an AI model
   コマンドプロンプト（またはPowerShell）を開いて、以下のコマンドを実行します： Open Command Prompt (or PowerShell) and run the following command:
   
   ollama pull qwen3:8b
   
   初回は数GBのダウンロードが発生します（Wi-Fi環境推奨）。ダウンロードが完了すれば、以降はオフラインで使えます。 The first time will download several GB (Wi-Fi recommended). After download, you can use it completely offline.
3. Ollamaを起動Start Ollama
   Ollamaは通常、インストール後に自動で起動しています（タスクトレイにアイコンが表示されます）。起動していない場合は、スタートメニューから「Ollama」を起動してください。 Ollama usually starts automatically after installation (you'll see its icon in the system tray). If not running, launch "Ollama" from the Start menu.
4. VibeFrontで設定Configure in VibeFront
   VibeFrontの AI → AI設定 で以下のように設定します： In VibeFront's AI → AI Settings, configure as follows:
   
   

   プロバイダーProvider	OpenAI互換OpenAI Compatible
   ベースURLBase URL	http://localhost:11434
   モデルIDModel ID	qwen3:8b
   APIキーAPI Key	空欄でOKLeave empty

5. 接続テストTest connection
   「接続テスト」ボタンを押して「接続成功!」と表示されれば設定完了です。 Click the "Test Connection" button. If you see "Connection successful!", you're all set.

おすすめのOllamaモデルRecommended Ollama models

LM Studio（ローカルLLM） LM Studio (Local LLM) GUI操作・初心者向けGUI, beginner-friendly

LM Studio は、ローカルLLMをGUI（グラフィカルな画面）で簡単に管理・実行できるアプリです。コマンド操作に不慣れな方に特におすすめです。 LM Studio is an app that lets you easily manage and run local LLMs with a graphical interface. Especially recommended if you're not comfortable with command-line tools.

LM Studioの導入手順How to set up LM Studio

1. LM StudioをインストールInstall LM Studio
   lmstudio.ai からダウンロードしてインストールします。 Download from lmstudio.ai and install.
2. モデルをダウンロードDownload a model
   LM Studioを起動し、検索バーに「Qwen3 8B」と入力。表示されたモデル（GGUF形式）のダウンロードボタンを押します。「Q4_K_M」がバランスの良い選択です。 Launch LM Studio and type "Qwen3 8B" in the search bar. Click the download button on a GGUF model. "Q4_K_M" is a good balanced choice.
3. サーバーを起動Start the server
   左メニューの「Local Server」タブをクリック → ダウンロードしたモデルを選択 → 「Start Server」ボタンを押します。画面に http://127.0.0.1:1234 と表示されればOKです。 Click the "Local Server" tab → Select your downloaded model → Click "Start Server". You should see http://127.0.0.1:1234 displayed.
4. VibeFrontで設定Configure in VibeFront
   VibeFrontの AI設定 で以下のように設定します： In VibeFront's AI Settings, configure as follows:
   
   

   プロバイダーProvider	OpenAI互換OpenAI Compatible
   ベースURLBase URL	http://localhost:1234
   モデルIDModel ID	（LM Studioに表示されているモデル名）(Model name shown in LM Studio)
   APIキーAPI Key	空欄でOKLeave empty

5. 接続テストで確認Verify with connection test
   「接続テスト」をクリックして成功すれば完了です。 Click "Test Connection" to verify. If successful, you're done!

表示モード View Modes

VibeFrontには3つの表示モードがあります。ツールバーのボタンまたは表示メニューから切り替えられます。 VibeFront has 3 view modes. Switch between them using toolbar buttons or the View menu.

パネルはAvalonDockにより自由にドッキング・フローティング・並べ替えが可能です。レイアウトは自動的に保存されます。 Panels can be freely docked, floated, and rearranged using AvalonDock. Layout is saved automatically.

Emmet展開 Emmet Expansion

Emmet記法を入力して Tab キーを押すと、HTMLが自動展開されます。 Type Emmet abbreviations and press Tab to auto-expand into HTML.

プレビュー同期 Preview Sync

プレビューでテキストを選択すると、コードエディタの該当箇所に自動でジャンプ・ハイライトされます。「このテキストはどのコードに対応しているの？」がすぐにわかります。 Select text in the preview to automatically jump to and highlight the corresponding code in the editor. Instantly answer "which code produces this text?"

レスポンシブプレビュー機能で、モバイル（375px）・タブレット（768px）・デスクトップ（1200px）の表示を即座に確認できます。表示メニュー → レスポンシブプレビュー から切り替えます。 Use responsive preview to instantly check mobile (375px), tablet (768px), and desktop (1200px) views. Switch via View menu → Responsive Preview.

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

VibeFrontは以下のエンコーディングに対応しています。ファイルを開くと自動的に文字コードを検出します。 VibeFront supports the following encodings. Encoding is automatically detected when opening files.

• UTF-8 / UTF-8 BOM — 新しいHTMLファイルの標準Standard for new HTML files
• Shift-JIS — 日本語レガシーHTMLJapanese legacy HTML
• EUC-JP — 日本語レガシーHTML（Unix系）Japanese legacy HTML (Unix-based)
• UTF-16 LE / BE — WindowsテキストファイルWindows text files

ステータスバーに現在のエンコーディングが表示されます。クリックするとエンコーディングの変更メニューが表示されます。 The current encoding is shown in the status bar. Click it to open the encoding change menu.

ショートカットキー Keyboard Shortcuts

FAQ

サポート Support