Decap CMS
操作マニュアル

1-2. 編集画面の開き方と見方

管理画面の左メニューには、編集の入口が2つあります。目的に合わせて選んでください。

「サイト設定」：サイト全体の設定

店舗情報・トップページの文章や写真・セクションの表示・SNS連携などを編集します。1左メニューの「サイト設定」→2一覧の「サイト全体設定（siteInfo.yml）」をクリックすると、すべての項目が1つの編集画面にまとまって表示されます（第2章・第4章・第5章）。

「商品作成」：商品・メニューを1件ずつ管理

1左メニューの「商品作成」をクリックすると、登録済みの商品が一覧表示されます。一覧の商品をクリックすると編集画面が開き、2右上の「＋商品作成」ボタンで新しい商品を追加できます（第3章）。

編集画面の構成

一覧から項目を開くと、次のような編集画面が表示されます。画面は左右2つに分かれています。

プレビューに表示された時点では、まだ実際のサイトには公開されていません。

「☰」ボタンで目的の項目へ移動する

「サイト全体設定」の編集画面は縦にとても長いため、目的の項目はこのボタンから探すのが便利です。

1入力欄エリアの下部にある青い丸い「☰」ボタンを押すと、項目の一覧が開きます。

2項目名（例：「ヒーローセクション」）を選ぶと、その入力欄まで自動でスクロールします。

もう一度「☰」ボタンを押すと一覧が閉じます。

1-3. 「公開（Publish）」と保存ステータス

各項目の編集画面には、画面左上に保存状態を示す表示と「公開」ボタンがあります。入力内容は自動的にサイトへ反映されるわけではなく、この「公開」ボタンを押した時点で初めてサイト側へ送信されます。

「未保存」（赤字）

入力・編集中はこの表示になり、右側のボタンが「公開」に変わります。この状態のまま画面を閉じると、変更内容は失われます。

「保存済」（緑字）／ボタンが「公開済」

「公開」ボタンを押し、送信が正常に完了するとこの表示に変わります。

1. 1
   内容を入力・編集します。
2. 2
   画面左上の1「公開」ボタンをクリックし、すぐ下に表示される2「公開する」を選びます（「公開」ボタンを押しただけでは、まだ公開されません）。

   

3. 3
   画面右上に緑色の「保存しました。」という通知（トースト）が表示されれば完了です。通知は数秒で自動的に消えます。

   

1-4. 【重要】変更反映のタイムラグ（ビルド時間）

1-5. 画像アップロードの方法と注意点

サイトで使う画像は、管理画面の「メディア」にアップロード（登録）してから、各画像欄で選んで設定します。まずはアップロードの方法、次に画像欄のボタンの見方、最後に画像を用意するときの注意点の順に説明します。

画像をアップロードする

1. 1
   画面上部の1「メディア」タブをクリックします。登録済みの画像の一覧（メディア画面）が開きます。
2. 2
   右上の2「アップロードする」ボタンをクリックし、パソコン（またはスマートフォン）の中から登録したい画像ファイルを選びます。
3. 3
   一覧に画像が追加されれば、アップロードは完了です。登録した画像は、各画像欄から選んで使えます。

画像欄のボタンの見方

サイト内に画像を設定する入力欄（画像欄）の画面の説明です。どの部分をクリックすると何が起こるのかを確認しておきましょう。

1他の画像を選択：画像を差し替えます。上で説明したメディア画面が開くので、使いたい画像を選びます。

2画像を削除：画像欄が空になり、サイトからその画像が外れます。差し替えたいときは押さずに①を使ってください。

画像が未設定の欄には「画像を選択」ボタンが表示されます。また、管理画面では画像のサムネイルが空白（市松模様）で表示されることがありますが、設定済みの画像はそのまま保持されています。

アップロード時の注意点

2-1. ヒーローセクション（トップの大きな見出し）

トップページを開いて最初に表示される部分です。下の画像の番号は、手順2の表の番号と対応しています。

1. 1
   「サイト全体設定」内、最上部の「ヒーローセクション」を開きます（「☰」の項目一覧からも移動できます）。
2. 2
   以下の項目を編集します。

   入力欄（番号は上の画像と対応）	内容
   1見出し上部ラベル（英字推奨）	見出しの上に小さく表示される英字ラベル
   2見出し	メインコピー。Enterキーで改行できます
   3見出しの最終行（下線ハイライト付き）	見出しの次の行に下線付きで強調表示
   4本文	見出し下の説明文
   5メインボタン文言 / メインボタン遷移先	主要CTAボタン。遷移先が「https://」で始まる場合は新規タブで開きます
   6サブボタン文言 / サブボタン遷移先	電話発信にする場合はtel:011123456のように入力
   7メイン画像 / メイン画像 代替テキスト	トップの大きな写真
   8サブ画像（右上の円形） / サブ画像 代替テキスト	円形に切り抜かれる写真。正方形に近い構図を推奨
   9営業情報（ボタン下の3項目）	ラベル／値の組を追加・並び替え可能
   10画像に重ねるカード	ラベル・タイトル・タグ・注記。すべて空欄ならカード自体が非表示に
   11回転バッジの文字（英字推奨）	画像右下で回転する円形バッジの文字。空欄で非表示

3. 3
   画面右側のライブプレビューで見え方を確認し、画面左上の「公開」ボタンをクリックします。

2-2. 会社・サイト基本情報

「サイト全体設定」内の「会社・サイト基本情報」で、店舗名・ロゴ・サイトの説明文などを設定します。

2-3. 連絡先・LINE公式アカウントの更新

「連絡先」欄はサイト内の複数箇所（アクセス欄・フッター・画面下部固定バー）に自動反映されます。

1. 1
   「連絡先」で以下を入力します。

   電話番号（表示用）	画面に表示される番号（例：011-123-456）
   電話番号（tel:リンク用）	タップ発信用。tel:011123456のようにハイフンなしで入力
   メールアドレス	お問い合わせ用

2. 2
   表示用番号を変更したら、必ず電話番号（tel:リンク用）も同時に変更してください。片方だけ更新すると、表示と実際の発信先がずれてしまいます。
3. 3
   LINE公式アカウントのURLは「SNS設定」欄で管理します。一覧から「SNS：LINE」の行を探し（無ければ一覧上部の「Add」ボタン（＋）で行を追加し、プルダウンで「LINE」を選択）、URL欄にLINE公式アカウントのURL（例：https://lin.ee/XXXX）を入力、このSNSを表示するをONにします。この設定は、画面下部固定バーの「LINEで相談」ボタンの遷移先にも自動的に使われます。

2-4. 店舗案内・アクセス情報

「店舗案内・アクセス」内の「店舗情報」で、住所・営業時間などを編集します。

1. 1
   GoogleマップでGoogle検索アプリまたはブラウザから店舗を検索して開きます。
2. 2
   「共有」→「リンクをコピー」で取得したURLをGoogleマップのURL欄に貼り付けます。

各行の下にある「項目ラベル」で、それぞれの行の見出し文言（例：「営業時間」という表記そのもの）も変更できます。ラベルまたは値のどちらかが空欄の場合、その行はサイト上で自動的に非表示になります。

3-1. 商品の新規作成

1. 1
   左メニューの1「商品作成」をクリックします。
2. 2
   右上の2「＋商品作成」ボタンをクリックします。新しい商品の入力画面が開きます。

   

3. 3
   以下の項目を入力します。

   入力欄	内容
   タイトル	商品名
   概要	簡単な紹介文
   価格（税抜・数値）	数字のみを入力
   画像	商品写真
   画像のALT（代替）テキスト	未入力ならタイトルを代用
   表示順（小さいほど先頭）	下記3-4の「表示順序」に未登録の商品はこの数値順で表示されます
   このカードをトップページに表示する	OFFにするとデータを残したままトップページから非表示にできます

4. 4
   画面左上の「公開」ボタンをクリックします。

3-2. 商品の編集

1. 1
   左メニューの1「商品作成」をクリックし、一覧から2編集したい商品（商品名の行）をクリックします。

   

2. 2
   編集画面が開くので、内容を修正し、「公開」→「公開する」をクリックします。

3-3. 商品の非表示・削除

3-4. トップページでの並び順・表示商品の管理

「サイト設定」→「サイト全体設定」内の「商品一覧」＞「表示順序」で、トップページに載せる商品と並び順を管理します。

1. 1
   「表示順序」リスト上部の「Add」ボタン（＋）で行を追加し、商品のプルダウンから掲載したい商品名を選択します。
2. 2
   各行の上部中央にある「＝」（ハンドル）をつかんでドラッグ&ドロップし、掲載順を並び替えます（第4章の画像も参照）。
3. 3
   行ごとのこのカードをトップページに表示するをOFFにすると、この一覧に登録したままトップページからだけ非表示にできます。

「商品一覧」だけは専用のスイッチがあります

「表示中セクション（並び順）」内の「商品一覧」は並び順の指定専用で、実際の表示ON/OFFは同じ「サイト全体設定」内の「商品一覧の表示設定」＞ 商品一覧（型化ページ）を表示する のトグルで管理します。ONにすると商品一覧セクションがトップページに表示されます。

5-1. Instagram連携

「サイト全体設定」内の「Instagram」で設定します。

5-2. X（旧Twitter）投稿埋め込み

「サイト全体設定」内の「X（旧Twitter）」で設定します。基本構成はInstagramと同様です（表示モード／Elfsight ウィジェット ID／アカウント情報）。

1. 1
   表示モードを「手動入力」にします。
2. 2
   「投稿一覧（手動入力）」上部の「Add」ボタン（＋）で行を追加します。
3. 3
   対象の投稿（ポスト）を開き、共有ボタン→「リンクをコピー」で取得したURLを投稿URL欄に貼り付けます（例：https://x.com/ユーザー名/status/1234567890123456789）。投稿本文が空欄の場合、この投稿URLから自動で本文を取得・補完します（手入力済みの内容は自動取得で上書きされません）。
4. 4
   必要に応じて投稿画像（任意）・投稿日を入力し、「公開」します。

5-3. Googleビジネスプロフィール（GBP）クチコミ連携

「サイト全体設定」内の「Googleビジネスプロフィール（クチコミ）」で設定します。基本構成はInstagram・Xと同様です（表示モード／Elfsight ウィジェット ID）。ただし、手動入力モードではアカウント情報の代わりに、AI要約文・総合評価・口コミカードを登録します。