> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Graphic エディタを使い始める

> Kameleoon Graphic エディタを開いてナビゲートし、コードを書くことなく、Web サイト上で直接 A/B 実験のバリエーションを作成します。

*Graphic エディタの使用方法については、[動画チュートリアル](https://academy.kameleoon.com/get-started-with-web-experimentation/164219) をご覧ください。*

Graphic エディタは、A/B 実験のバリエーションを構築するための Kameleoon のビジュアルなノーコードツールです。ブラウザで Web サイトの上に直接読み込まれるため、任意の要素をクリックしてコードを書かずに変更できます。テキストの更新、画像の入れ替え、ボタンのスタイル変更、レイアウトの調整を行い、そのまま実験をプレビューして即座に起動できます。

テスト用バリエーションの構築には通常、コードの記述とデプロイが必要であり、プロダクトマネージャー、マーケター、デザイナーがエンジニアリングリソースに依存するとボトルネックが生じます。Graphic エディタはこのボトルネックを解消し、チーム全体が独立して実験を実行できるようにします。

**始める前に:**

* Graphic エディタはシークレットモードでは動作しません。
* クロスサイトクッキーがブロックされている場合、Graphic エディタは動作しません。
* Firefox はデフォルトでクッキーをブロックします。Firefox を使用している場合は、クッキーを手動で有効にする必要があります。

**[Kameleoon Graphic エディタ拡張機能](#kameleoon-graphic-エディタ拡張機能) で Graphic エディタの使用を強化します。**

Graphic エディタの問題のトラブルシューティングとベストプラクティスを確認するには、[トラブルシューティングの記事](./troubleshooting-the-graphic-editor) を参照してください。

## Graphic エディタを開く

Kameleoon の編集モードは、Web ページのバリエーションを作成し A/B 実験を起動するためのツールを提供します。

### Web サイトから

Kameleoon を起動するには:

1. Kameleoon スクリプトをインストールした Web ページに移動します。
2. Windows では **shift + F2**、Mac では **fn + shift + F2** を押します。
   <Note>
     何も起こらない場合は、URL の末尾に `#kameleoon=true` を追加してください。
   </Note>
3. Kameleoon がロードされると、ポップインが開きます。ユーザー名とパスワードを入力してエディタにアクセスします。
4. 実験を選択するか(すでに作成している場合)、新しいものを作成するように促すポップインが開きます。**Create** をクリックして実験を作成します。
5. 実験の情報を入力し、**Experiment type** で **Classic A/B** を選択します。
6. **Start** をクリックします。

Web ページ上で Graphic エディタが開きます。

### Kameleoon アプリから

Kameleoon アプリからエディタを起動することもできます。

1. [Kameleoon アプリ](https://login.kameleoon.com/app) にログインします。
2. **New experiment** > **With the graphic editor** をクリックします。
3. 実験の情報を入力し、**Experiment type** で **Graphic A/B** を選択します。
4. **Create** をクリックします。

Web ページ上で Graphic エディタが開きます。

## 構造

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/experimentation/web-experimentation/graphic-based-experiments/getting-started-with-the-graphic-editor/0.png)
</Frame>

### 実験パネル(左側)

**機能**: 現在の実験を管理します。これにはページ上のバリエーションや要素が含まれます。

**特徴**:

* バリエーションと要素を追加します。
* CSS セレクターを編集します。
* 異なるページに存在する要素を表示・管理します。

### メイン編集エリア(中央)

**機能**: 編集のために Web ページの要素と直接やり取りできます。

**特徴**:

* テキスト、画像、その他のコンテンツを選択して変更します。
* 編集ショートカットにアクセスします。

### 右パネル(右側)

**タブ:** Design、State、History

**特徴**:

* コンテンツ、テキスト、背景、ボーダー、シャドウ、パディング、マージンなどをカスタマイズします。
* 要素の状態(たとえば、default、hovered、active、focus、disabled)を管理します。
* 各要素の変更履歴を管理します。

### 上部ツールバー

**機能**: 変更の表示と最終調整のためのツールを提供します。

**特徴**:

* デバイスモードの切り替え。
* 変更のシミュレーション。
* 実験の最終調整。

## Graphic エディタの表示をカスタマイズする

* **ズーム**: 画面や好みに合わせてズームレベルを調整します。
* **左パネルの縮小**: 左パネルを最小化して作業スペースを増やします。
* **左パネルを非表示にする**: 集中して作業できるよう、左パネルを完全に非表示にします。
* **フルスクリーンモード**: 没入感のある編集体験のためにエディタをフルスクリーンに拡大します。

## シミュレーションと最終調整

* **シミュレーション**: **SIMULATE** をクリックして、変更が Web サイト上でどのように表示され動作するかをプレビューします。
* **最終調整**: **FINALIZE** をクリックして、最終調整ステップにアクセスします。

## デバイスの切り替え

上部のツールバーを使用して、異なるデバイスビュー(デスクトップ、タブレット、モバイル)を切り替え、デザインがレスポンシブで、すべてのデバイスで正しく表示されることを確認します。

## Kameleoon Graphic エディタ拡張機能

Kameleoon Graphic エディタ拡張機能を使用して、Graphic エディタの使用を強化します。

### Graphic エディタ拡張機能を使用するタイミング

* 一部の Web サイトは iframe の使用を制限しています。iframe の制限に対処するため、Graphic エディタ拡張機能を使用してこれらの制限を上書きし、Graphic エディタを起動します。
* 特定の Web サイトは、モバイルユーザーエージェントを検出するとモバイルバージョンを表示します。Graphic エディタがモバイルバージョンを正しく表示することを保証するため、ブラウザはモバイルデバイスとして識別する必要があります。拡張機能はモバイル識別プロセスを容易にします。

### Graphic エディタ拡張機能のインストール方法

[Chrome ストアにアクセス](https://chromewebstore.google.com/detail/kameleoon-graphical-edito/jglbnpagaignkdmebicmmblgmledhpip) して、Kameleoon Graphic エディタ拡張機能をダウンロードします。