ウェブサイトを編集する.

エディターの概要

上部にはヘッダーがあります。「← あなたのウェブサイト」で一覧に戻り、「ページを選択」でトップページと下層ページを切り替え、「デスクトップ」「タブレット」「スマートフォン」でプレビューを切り替えます。↶ と ↷ で元に戻す・やり直しができます。その横には、保存済みかどうか、AI バーの残量、「持ち出す」、ページの状態、そして右端に「公開する」が表示されます。

左側には作業エリアが 3 つのグループに分かれて並んでいます。「サイトをデザイン」には「ウェブサイト」「セクション」「ページとメニュー」「メニューとフッター」「色とフォント」「Kenji で編集」、「ツールを連携」には ShopBuilder、FormBuilder、DomainStudio、「管理する」には「設定」「会員」「Google での扱い」「会社」があります。中央には実際のページ、右側にはクリックしたものに対応するツールが表示されます。

「設定」には、ウェブサイトの基本事項がまとめられています。「ウェブサイト名」と「ウェブサイトの言語」（言語はボタン、お問い合わせ、エラーメッセージなどの固定の文言に適用され、あなたの文章は翻訳されません）に加え、「持ち出す」と「ウェブサイトを削除」があります。すでに専用の場所がある項目については、そこへの導線だけが表示されます：「Google での扱い」「会員」「DomainStudio のアドレス」。ウェブサイトにブランドが設定されている場合は、「BrandStudio で割り当てる」とともにそのブランドが表示されます。

小さめの画面(多くのノートパソコンも含みます)では、エディターは一度に 1 列ずつ表示します。下部で「セクション」「プレビュー」「ツール」を切り替え、作業エリアは「作業エリアを選択」の中にあります。スマートフォンでは、AI 表示、「持ち出す」、ページの状態、「公開を停止」が「もっと見る」の中にあります。

保存は自動で行われます。ヘッダーに「未保存」と表示された場合は、赤い行に理由が示され、その横に「もう一度保存」があります。

ページ上で直接入力する

見出し、段落、ボタンのラベル、リストの項目は、表示されているその場で変更できます。テキストをクリックして入力するだけです。プレビューは実際のページそのもので、横に置かれた複製ではありません。

Enter で確定し、Escape で元のテキストに戻ります。テキストは常に 1 行です — 改行はスペースに変換されます。エディター内ではリンクをクリックしてもどこにも移動せず、選択されるだけです。

入力後まもなく、下書きに保存されます。公開するまで、ウェブ上では何も変わりません。

1. 1プレビューで、変更したいテキストをクリックします。
2. 2新しいテキストを入力します。
3. 3Enter を押すか、テキストの外をクリックして確定します — Escape を押すと入力内容が破棄されます。

入力では AI ご利用枠を消費しません。

メニューとフッターをデザインする

メニューとフッターの見た目は「メニューとフッター」エリアで設定します。メインメニューには「クリア」「中央配置」「2段」「フローティング」「サイドバー」「フォーカス」の 6 つのテンプレートがあります。「フォーカス」では、ひとつのメニューボタンでナビゲーション全体が開きます。切り替えても変わるのは見た目だけで、項目、その並び順、状態はそのまま残ります。

「メニューを調整」では、バーの「高さ」「リンクの間隔」「配置」「背景」、スクロール時に追従するかどうか(「スクロールに追従するメニュー」)、そして狭い画面での表示方法(「開閉式メニュー」または「横スクロール式リンクバー」)を設定します。メニューが色付きの面の上にある場合は、ビルダーが読みやすい文字色を選びます。

「ヘッダーのロゴ」では、「自分のロゴを選ぶ」で MediaStudio 内のファイルからロゴを選びます。「ロゴを削除」で再び外せます。独自のロゴがない場合、ヘッダーにはブランドのロゴが表示され、それもない場合はウェブサイト名が表示されます。ロゴはデザインを保存してから選びます。デザインと同様、次回の公開時にオンラインに反映されます。

フッターには 4 つのテンプレートがあります:「コンパクト」「リンクの列」「連絡先を中心に」「アクションで締めくくる」。フッターに載せる内容は、次のセクションで説明します。

1. 1エディターの左側で「メニューとフッター」をクリックします。
2. 2上部で「メインメニュー」を選び、テンプレートをクリックします。「訪問者向けプレビュー」にそのテンプレートでのメニューが表示され、「デスクトップ」と「スマートフォン」を切り替えられます。
3. 3必要に応じて「メニューを調整」を開き、バーを調整します。
4. 4「デザインを保存」をクリックし、続けて「エディターに戻る」をクリックします。

デザインは下書きに保存され、次回の公開時にオンラインに反映されます。AI ご利用枠は消費せず、Kenji がデザインに手を加えることもありません。「見出しを短くして」と頼んでも、メニューの見た目が変わることは決してありません。

フッターに載せる内容

フッターの内容は「メニューとフッター」エリアの「フッター」で設定します。連絡先の行は会社情報から取得され、そちらで管理します。「既存のページをリンク」では、ページごとに「フッターに表示しない」、「リンク一覧」に入れる、「法的情報へのリンク」に入れる、のいずれかを指定します — 上部のメニューに表示されているかどうかとは関係ありません。ここに表示されるのは公開ページだけで、会員限定のページは決して表示されません。

「独自のリンク」はリンク名とリンク先で構成されます。リンク先は、ウェブサイトのページ、セクション、または https://, mailto: や tel: で始まるアドレスです。安全でないリンク先は入力欄で受け付けられません。「ソーシャルネットワーク」では「プロフィールのソース」を選びます — 会社情報か、フッター用の独自のプロフィール(最大 10 件)です。よく知られたネットワークは、アイコンと、読み上げソフト向けの名前付きで表示されます。

「カスタム列」では、見出し付きの列を最大 4 つ配置でき、各列に最大 10 項目(ページ、リンク、お問い合わせ、ソーシャルネットワーク)を入れられます。「アクションで締めくくる」は末尾にボタンを置きます。独自のテキストがない場合は、ヘッダーのボタンが使われます。「フッターの注記」はページ末尾に自由に書ける 1 行です。ブランドの法的情報(Impressum)へのリンクは、フッターに自動で追加されます。

1. 1「メニューとフッター」を開き、上部で「フッター」を選びます。
2. 2「独自のリンク」などの項目を開き、リンク名とリンク先を入力して「リンクを追加」をクリックします。
3. 3「フッターのプレビュー」を確認し、「デザインを保存」をクリックします。

入力途中のリンクや一部だけ入力したプロフィールは、先に追加するか空にする必要があります。そうしないとデザインを保存できません。

ショップをページに配置する

ShopBuilder ai にショップがある場合、2 つの方法でウェブサイトに組み込めます。ページ上の独立したセクションとして、またはメニューの項目としてです。バーの「ShopBuilder」をクリックすると、ページの横にショップの一覧が表示され、それぞれ有効な商品とカテゴリーも表示されます。「挿入」は選択中のセクションの後ろに新しいセクションとして追加し、「メニューへ」はメニュー項目として登録します。セクションでは右側で「表示」を選びます。「品揃え」はページ上に商品を表示し、「ボタンのみ」はボタンでショップへ案内します。「+ セクションを追加」→「ショップ」からセクションを追加し、右側でショップを選ぶこともできます。

セクションに何を表示するかは、右側の「何を表示しますか?」で設定します:「品揃え全体」「1 つのカテゴリー」「個別の商品」— 最大 24 件で、チェックを入れた順に並び、↑ と ↓ で並べ替えられます。さらに「並び順」、「最大」(0 はすべて表示を意味します)、「商品の上に検索欄」、「カテゴリーで絞り込めるようにする」があります。検索欄は選択した商品が 4 つ以上の場合、カテゴリーは 2 つ以上の場合に利用できます。同じショップを 1 ページに複数回配置でき、セクションごとに選択内容を設定できます。セクションで別のショップを選ぶと、選択内容は最初からやり直しになります。ShopBuilder でカテゴリー名を変更すると、セクションにその旨が表示されるので、選び直してください。

商品一覧はこのウェブサイトの色と書体を引き継ぐため、浮いて見えることはありません。保存済みのショップデザインには影響しません。購入は必ずショップで行われます。商品やカートをクリックすると、必ずショップのアドレスに移動し、そこにレジと決済があります。ウェブサイト内に 2 つ目のレジはありません。

選べるのはあなた自身のショップだけです。選択欄の下にショップの状態が表示されます：「ショップにアクセス可能」、「このショップには公開中の商品がまだありません。」（この場合はボタンだけが表示されます）、または「このショップはまだ一般公開されていません。」のいずれかです。下書き状態のショップは訪問者には表示されず、代わりに短い文が表示されます。

1. 1ページ上で、ショップを配置したい位置の直前にあるセクションを選び、左側の「ツールを連携」で「ShopBuilder」をクリックします。
2. 2ページの横に表示されたショップで、「挿入」または「メニューへ」をクリックします。
3. 3右側の「表示」と「何を表示しますか?」で、セクションに表示する内容を設定します。
4. 4ウェブサイトを公開します。公開して初めて連携が表示されます。

一覧の下の「その他のオプション」をクリックすると、広い作業画面が開きます。そこでは追加する前にショップ、表示、選択内容を選び、「このページに追加」または「メニューに追加」をクリックします。商品、価格、注文は ShopBuilder ai で管理します — 詳しくは ShopBuilder ai の章をご覧ください。

セクションの追加、並べ替え、複製、削除

各ページはセクションの連なりでできています。「セクション」から左側に一覧を開きます。一番上に「ヘッダー」、その下にページ上の順でセクションが並びます。クリックすると、プレビューのその位置に移動します。

新しいセクションは「+ セクションを追加」から追加します。「どの種類のセクションにしますか？」のカタログには、各種類が小さなイラスト付きで表示されます。新しいセクションは選択中のセクションの後ろに入ります。並べ替えはドラッグか、矢印 ↑ と ↓ で行います — マウスがなくても操作できます。

選択したセクションの右側には「セクションを複製」— コピーには画像は含まれません — と、確認付きの「セクションを削除」があります。1 ページに配置できるセクションは最大 14 個で、各下層ページにはそれぞれ独自の一覧があります。

1. 1左側で「セクション」をクリックします。
2. 2セクションを選び、「+ セクションを追加」をクリックしてから種類をクリックします。
3. 3セクションをドラッグして配置するか、↑ と ↓ を使います。
4. 4削除するには：セクションをクリックし、右側の「セクションを削除」、続いて「はい、削除します」をクリックします。

これらはいずれも AI ご利用枠を消費しません。また、「元に戻す」で削除したセクションを元に戻せます。

10 種類のセクション

「テキスト」は文章で伝える内容全般に使い、必要に応じて画像も添えられます。「サービス」は項目を横に並べて表示します。「お問い合わせ」には住所、電話番号、メールアドレス、営業時間と、実際に送信できるフォームが入ります。「呼びかけ」はボタン付きの色付きの帯です。「質問と回答」は開閉できます。「お客様の声」は引用を、「料金」はレジのない情報カードとして料金プランを表示します。「画像」はキャプション付きの大きな画像、「フォーム」は FormBuilder ai のフォームを埋め込み、「ショップ」はショップを埋め込みます。

サービス、質問と回答、お客様の声、料金は「箇条書き」で構成されます。これらは右側で管理します。各項目に 2 つの入力欄があり、「+ 項目を追加」で最大 12 個まで追加でき、↑ と ↓ で並べ替え、✕ で削除できます。新しいセクションには中立的なプレースホルダーが入っています — 架空のお客様の声や架空の料金は入りません。

質問と回答は、Google が認識できるよう機械可読な形式でもページに組み込まれます。これ以上種類を増やしていないのは意図的です。どの種類も、どの雰囲気でも見栄えがよく、スマートフォンでも機能する必要があるからです。

1. 1プレビューで、項目を含むセクション（例：「料金」）をクリックします。
2. 2右側の「箇条書き」で入力欄を変更します。入力欄から離れるとすぐに反映されます。
3. 3項目をさらに追加するには「+ 項目を追加」をクリックします。

新しいセクションのプレースホルダーはドイツ語と英語で用意されています。それ以外の言語のウェブサイトでは、直接上書きしてください。

ヘッダー

各ページのヘッダーには 3 つの構成があります:「テキストを中央に」— 画像がある場合はその下に配置されます —、暗くした画像に明るい文字を重ねる「画像を背景に」、そして「テキストは左、画像は右」です。「画像を背景に」には画像が必要です。画像がない場合、ページは「テキストを中央に」で表示され、右側にはあらかじめ「これには画像が必要です — 下から選んでください。」と表示されます。

見出し、その下の文、ボタンのラベルは、ページ上で直接入力します。ラベルがない場合、公開ページにボタンは表示されません。ボタンのリンク先は「ボタンのリンク先」で選びます（ボタンからページへリンクするを参照）。お問い合わせセクションがある場合、またはボタンにリンク先が設定されている場合は、同じボタンがヘッダーバーの右上にも表示されます。

1. 1セクション一覧で「ヘッダー」をクリックするか、プレビューでページの上部をクリックします。
2. 2右側の「構成」で、3 つの形式から 1 つを選びます。
3. 3必要に応じて、「画像を選ぶ」で画像を設定します。

画像なしは妥協策ではありません。明確な一文を添えた落ち着いたヘッダーは、ストック写真よりも良い導入になることがよくあります。

背景、画像の位置、配置

各セクションについて、右側で「背景」を「ページと同じ」「明るい面」「やわらかなアクセント」から選びます。「テキスト」では「テキストの横に画像」で、画像を左右どちらに置くか、それとも置かないかを決めます。「配置」では、テキストを「左」または「中央」に揃えます。

こうしたわずかな切り替えが、ページのリズムを決めます。交互に変わる帯は、どんな線よりもテーマをうまく区切ります。「呼びかけ」の帯は常にアクセントカラーの上に置かれ、その背景は変更できません。

1. 1プレビューでセクションをクリックします。
2. 2右側で「背景」、テキストセクションの場合は「テキストの横に画像」、そして「配置」を選びます。

デバイスプレビュー

ヘッダーの「デスクトップ」「タブレット」「スマートフォン」で、ページを全幅、幅 768 ピクセル、幅 390 ピクセルで確認できます。これは再現ではなく、幅を狭めた枠に表示した実際のページです。訪問者の画面とまったく同じように折り返され、スマートフォンで開閉するメニューも含まれます。

訪問者の多くはスマートフォンからアクセスします。公開前にスマートフォン表示を確認するのは、最も手軽なテストです。

1. 1上部の「スマートフォン」をクリックします。
2. 2ページをスクロールし、メニュー、画像、ボタンを確認します。
3. 3「デスクトップ」で全幅の表示に戻ります。

元に戻すとやり直し

ヘッダーの ↶ と ↷ で、操作を元に戻したりやり直したりできます。エディターを開いている間、最大 50 回までです。対象はページそのものです：入力したテキスト、追加・移動・複製・削除したセクション、セクションの項目、フォント、そして Kenji による変更です。

独自の保存方法を持つものは、「元に戻す」では取り消せません。「会社」「Google での扱い」「ページとメニュー」「メニューとフッター」「会員」の情報がこれにあたります。エディターを閉じると履歴は消えます。公開済みのページは、再び公開するまで影響を受けません。

1. 1↶（元に戻す）をクリックすると、直前の操作を取り消せます。
2. 2↷（やり直す）をクリックすると、取り消した操作を再び適用できます。

元に戻す操作では AI ご利用枠を消費しません。Kenji による変更を取り消しても、そのために消費した AI ご利用枠は戻りません。

Kenji で変更する

入力欄を探す代わりに、何を変えたいかを Kenji に伝えます。たとえば「見出しを短くして、朝食についてのセクションを追加して」。やり取りは右下の Kenji ウィンドウで行います。KENJTEC のどこでも同じウィンドウです。ウィンドウの上部には、作業中の内容（ツール、ウェブサイトの名前、開いているページ、選択したセクション）が表示されます。Kenji はプレビューに表示中のページを書き換え、変更は下書きに反映されます。Kenji は、テキストの書き換え、セクションの追加・並べ替え・削除、特定の箇所に使う新しい画像の検索ができます。

Kenji は言葉で答えます。まず何をするかを一文で伝え、次にエディターがページを変更し、その下に「完了しました。変更は下書きに入っています。『公開する』を押すまで公開されません。」と表示されます。「このページで改善できることは？」のように質問だけをした場合は、何も変更せずに答えます。入力した直後の場合は、エディターがまずそれを保存します。保存できなかった場合、Kenji は何も変更せず、ウィンドウに「先に保存してください。最新の状態はまだ保存されていません。」と表示されます。

変更されないものは次のとおりです：会社情報、ページとメニュー、メニューとフッターのデザイン、Google での設定、独自に設定した色、ブランドの設定、デベロッパーモードのコード。そのため、自分で選んだ色やブランドから引き継いだ色は、Kenji への一言では変わりません。色の変更には「色とフォント」を使います。

結果が気に入らない場合は、エディターの「元に戻す」で以前の状態に戻せます。

1. 1エディターの左側で「Kenji で編集」をクリックします。右下の K マークの丸いボタンでもかまいません。
2. 2「変えたいことを伝えるか、何でも聞いてください…」の欄に希望を入力し、Enter キーを押します。
3. 3ウィンドウに「完了しました」と表示され、プレビューに新しい状態が表示されるまで待ちます。

会話による変更には毎回 AI ご利用枠を消費します。失敗した場合、AI ご利用枠は消費されません。AI バーが空になっても自動的に回復しますし、AI パックを追加購入することもできます。詳しくは アカウントと請求をご覧ください。

特定の箇所のテキスト提案

1 つのテキストがしっくりこない場合は、その箇所に絞った提案を受け取れます。「会社」→「テキスト」には、トップページのテキストが並んでいます：「ヘッダーの見出し」「下に添える一文」「ボタンの表示名」「サイトのサブタイトル」、各セクションの見出しと本文、そして「フッターの一行」です。

そこでテキストを手で書き換え、「適用する」で反映できます。または、4 つのボタン「短く」「長く」「別のトーン」「3 つの提案」のいずれかを使います。Kenji が 3 つの案を縦に並べて示し、クリックした案だけが反映されます。それまでは、元のテキストはそのままです。

1. 1左側の「会社」をクリックし、「テキスト」を開きます。
2. 2変更したい箇所を展開します。
3. 3「短く」「長く」「別のトーン」「3 つの提案」のいずれかをクリックします。
4. 4気に入った案をクリックします。すぐに下書きに反映されます。

提案には AI ご利用枠を消費します。案を適用したり、テキストを手で変更したりする場合は消費しません。