本部からお伝えしたURLをブラウザで開き、メールアドレスとパスワードを入力してログインします。
1
ブラウザを開き、管理画面URLにアクセスする
Google Chrome または Safari を使用してください。URLは本部から別途ご案内します。
2
メールアドレスを入力し「メールアドレスで続行」をクリック
登録したメールアドレスを入力します。
3
パスワードを入力してログインする
メールアドレスの入力後にパスワード入力画面が表示されます。
4
ホーム画面が表示されれば完了 ✓
「こんにちは、早速始めましょう。」と表示されればログイン成功です。
▲ Shopifyのログイン画面。メールアドレスを入力して「メールアドレスで続行」をクリックします。
▲ Googleアカウントで登録した場合はこの画面が表示されます。メールアドレスまたは電話番号を入力して「次へ」をクリック。
▲ ログイン後のホーム画面。左側にメニューが表示され、「コンテンツ」から各ページの内容を更新できます。
💡 パスワードを忘れた場合：ログイン画面下部の「お困りの場合」または画面上の案内から再設定できます。
それでも解決しない場合は本部へご連絡ください。
「メタオブジェクト」とは、Webサイトに表示される文章・画像を管理する専用フォームです。
ここに入力した内容が、実際のWebサイトに反映されます。
1
左メニューの「コンテンツ」をクリックする
メニューが展開されます。
2
「メタオブジェクト」をクリックする
コンテンツ管理の一覧ページが開きます。
3
画面下部の定義一覧から編集したい種類を選ぶ
「course_detail」→ コース詳細ページ 「Aboutページ」→ 教室紹介ページ
▲ メタオブジェクト一覧。上部にはエントリーの状態（アクティブ・下書き）が表示されます。
▲ 画面を下にスクロールすると、定義名の一覧が表示されます。「course_detail」と「Aboutページ」が確認できます。
📝 メタオブジェクトとは：ページごとに「文章」「画像」「住所」などの入力欄がまとまった専用フォームです。
入力してから保存するだけで、自動的にWebサイトへ反映されます。難しく考えず「ページの内容を書き込む場所」と覚えておけば大丈夫です。
コースごとに1件の「エントリー（入力データ）」があります。変更したいコースのエントリーを開いて、各フィールドを入力・上書きします。
1
メタオブジェクト一覧から「course_detail」をクリックする
コースのエントリー一覧が表示されます。
2
編集したいコースのエントリーをクリックする
コース名（例：「4歳から始めるCodeCampKIDS」）の行をクリックします。
3
各フィールドに内容を入力・修正する
テキスト欄に直接入力、画像欄は「変更」ボタンから差し替えできます。
4
画面右上の「保存」ボタンをクリックする ✓
保存しないと変更が反映されません。必ず保存してください。
▲ course_detail のエントリー一覧。現在3件のコースが登録されています。編集したいコースの行をクリックします。
編集画面の見方
エントリーを開くと、上から順にフィールド（入力欄）が並んでいます。フィールド名の横の入力欄に内容を記入します。
▲ 編集画面の上部。title・subtitle・hero_image（ヒーロー画像）・cta_textなどの基本情報欄があります。
▲ 編集画面の下部。gal_1〜6（ギャラリー画像）や、ステータス（Active/Draft）の切り替えがあります。
入力フィールド一覧
フィールドは「基本情報・イントロ・特徴・ギャラリー」の4グループに分かれています。上から順に入力してください。
① 基本情報
| フィールド名 | 内容 | 入力例・目安 |
|---|
| title | コース名 | ロボットプログラミングコース |
| subtitle | サブタイトル（表示名） | 4歳から始めるCodeCampKIDS |
| hero_image | ページ最上部の大きな画像 | 横1920px以上推奨 |
| cta_text | 申込ボタンの文言 | 体験を申し込む |
| cta_url | 申込ボタンのリンク先URL | https://〜/pages/reservation |
② イントロセクション
| フィールド名 | 内容 | 入力例・目安 |
|---|
| intro_image | イントロ部の画像 | 横1200px以上推奨 |
| target | 対象年齢・対象者 | 小1〜小3 |
| course_content | コース内容（学ぶこと） | ScratchJrとロボット制御 |
| time | 1回あたりの授業時間 | 60分×40回 |
| skill1 / skill2 | 習得できるスキル | 問題解決能力 / 論理的思考力 |
③ 特徴セクション（3ブロック分）
| フィールド名 | 内容 |
|---|
| h2_1 | 特徴セクション全体の見出し |
| text_1 | 特徴セクションの概要テキスト |
| feat_img_1〜3 | 各特徴ブロックの画像（3枚） |
| feat_title_1〜3 | 各特徴ブロックの見出し |
| feat_text_1〜3 | 各特徴ブロックの説明テキスト |
④ ギャラリー（最大6枚）
| フィールド名 | 内容 |
|---|
| h2_3 | ギャラリーセクションの見出し |
| gal_1〜6 | 教室・授業風景の写真（6枚まで）横800px以上推奨 |
編集後の公開画面イメージ
上記のフィールドに入力した内容が、以下のようなページとして表示されます。
▲ コース詳細ページの公開画面。hero_image・title・subtitle・イントロ・特徴・ギャラリーが順番に表示されます。
⚠️ 保存を忘れずに：入力後は必ず画面右上の「保存」ボタンをクリックしてください。
保存前にページを離れると変更内容が失われます。
「Aboutページ」は教室の紹介・コンセプト・アクセス情報などを掲載するページです。
メタオブジェクト一覧の「Aboutページ」からエントリーを開いて編集します。
1
メタオブジェクト一覧から「Aboutページ」をクリックする
エントリーは1件のみです。その行をクリックして編集画面を開きます。
2
各フィールドに教室の情報を入力する
テキスト欄・画像欄・住所・電話番号などを入力します。
3
保存する ✓
右上の「保存」ボタンをクリックして完了です。
▲ Aboutページの編集画面。hero_image・about_title・about_description・コンセプト情報・アクセス情報（住所・営業時間・電話番号・GoogleマップURL）などが並んでいます。
入力フィールド一覧
① テキスト情報
| フィールド名 | 内容 | 入力例・目安 |
|---|
| hero_image | ページ最上部の大きな画像 | 横1920px以上推奨 |
| about_title | Aboutセクションの見出し | プログラミングを学んで世界を変えよう！ |
| about_description | 教室の紹介文・理念（リッチテキスト） | 200〜400文字程度 |
| concept_image | コンセプトセクションの画像 | 横1200px以上推奨 |
| concept_title | コンセプト見出し | CONCEPT |
| concept_description | コンセプト本文 | 200〜400文字程度 |
| sustainable_image | サステナブルセクション画像 | 横1200px以上推奨 |
| sustainable_title | サステナブル見出し | 別途お知らせします |
| sustainable_description | サステナブル本文 | 別途お知らせします |
② アクセス情報
| フィールド名 | 内容 | 入力例 |
|---|
| access_title | アクセスセクションの見出し | アクセス |
| address | 教室の住所 | 東京都○○区○○1-2-3 |
| business_hours | 営業時間 | 9:00〜20:00（年中無休 ※正月5日間除く） |
| phone | 電話番号 | 03-XXXX-XXXX |
| google_map_url | Googleマップの埋め込みURL | https://www.google.com/maps/embed?pb=... |
| map_height | 地図の表示高さ（数値のみ） | 400（省略可） |
📍 GoogleマップURLの取得方法：
Googleマップで自店舗を検索 → 「共有」ボタンをクリック → 「地図を埋め込む」タブを選択 → 表示されたHTML内の src="..." の中のURLをコピーして貼り付けてください。
編集後の公開画面イメージ
▲ Aboutページの公開画面。ヒーロー画像・教室紹介・コンセプト・コンテンツ一覧・アクセス（地図・住所・電話番号）が表示されます。
各エントリーの画像フィールドで「変更」ボタンをクリックすると、画像の選択画面が開きます。
すでにアップロード済みの画像から選ぶか、新しくアップロードできます。
1
画像フィールドの「変更」ボタンをクリックする
画像選択ダイアログが開きます。
2
「＋ファイルを追加」から画像をアップロードする
JPG または PNG 形式の画像ファイルを選んでください。または画像をドラッグ＆ドロップでも追加できます。
3
使用したい画像を選択して「完了」をクリック
既存の画像を使う場合はサムネイルをクリックして選択し、「完了」を押します。
4
エントリー画面に戻り「保存」する ✓
画像を選んだだけでは反映されません。エントリー画面の「保存」ボタンをクリックして完了です。
▲ 画像選択ダイアログ。「＋ファイルを追加」で新しい画像をアップロードするか、既存の画像（サムネイル表示）から選んで「完了」をクリックします。
推奨画像サイズ
| 使用場所 | 推奨横幅 | 形式 | ファイルサイズ目安 |
|---|
| ヒーロー画像（ページ最上部・全幅） | 1920px以上 | JPG / PNG | 〜3MB |
| セクション画像（半幅） | 1200px以上 | JPG / PNG | 〜2MB |
| ギャラリー画像 | 800px以上 | JPG / PNG | 〜1MB |
💡 画像が重すぎるとサイトの表示が遅くなります。
画像を圧縮するには
Squoosh（無料ツール） が便利です。
ブラウザで開いて画像をドラッグするだけで圧縮できます。
各エントリーには「ステータス」という設定があります。Active なら公開状態、Draft なら非公開（下書き）です。
▲ ステータスのドロップダウン。「Active」を選ぶと公開、「Draft」を選ぶと非公開になります。
✅ Active（アクティブ）
Webサイトに表示されます。通常はこちらに設定してください。
📝 Draft（ドラフト）
Webサイトに表示されません。内容を準備中のときや、一時的に非公開にしたいときに使います。
⚠️ 注意：Draftのままにすると、そのコースのページがWebサイトから見えなくなります。
内容を更新したら必ず「Active」に戻してから保存してください。
Googleカレンダーに登録したイベントが、自動的にWebサイトの予約カレンダーに反映されます。
日常的な作業はGoogleカレンダーの更新のみです。GCPなどの技術的な操作は本部が担当しています。
📅 仕組みの概要：
Googleカレンダーにイベントを登録 → 数分後にWebサイトのカレンダーへ自動反映。
イベント名に「満席」を含めるとWebサイト上で赤く表示されます。
① Googleカレンダーを開く
1
Google（google.com）を開く
ブラウザで Google にアクセスします。右上のGoogleアカウントにログインしていることを確認してください。
2
右上の「アプリ一覧（格子アイコン）」をクリック
Googleのサービス一覧が表示されます。
3
「カレンダー」をクリックする
Googleカレンダーが開きます。
▲ Googleのトップページ。右上の格子アイコン（アプリ一覧）をクリックします。
▲ アプリ一覧が表示されます。「カレンダー」をクリックして開きます。
▲ Googleカレンダーの月表示。「＋作成」ボタンまたはカレンダー上の日付をクリックして新しいイベントを作成します。
② 新しいスケジュールを登録する
1
登録したい日付・時間帯をクリックする
カレンダーの該当日をクリックすると、イベント作成ダイアログが開きます。
2
タイトル欄に「命名ルール」に従ってイベント名を入力する
例：【小学生Aグループ】（Unityコース）
3
「時間を追加」で開始・終了時刻を設定する
「その他のオプション」をクリックすると詳細な時間設定ができます。
4
「保存」をクリックする ✓
保存後、数分でWebサイトのカレンダーに反映されます。
▲ イベント作成の初期画面。「タイトルと日時を追加」欄にイベント名を入力します。
▲ タイトルと時間を設定した状態。「その他のオプション」をクリックすると細かい時間の設定ができます。
▲ イベントを保存するとカレンダーに表示されます（6月30日の「午後3時 【小学生Aグル…」）。
③ Webサイトへの反映を確認する
Googleカレンダーに登録したイベントは、数分後にWebサイトのカレンダーへ自動的に反映されます。
イベント名に「満席」が含まれていない場合は 予約可能（緑） として表示されます。
▲ Webサイトのカレンダー表示。緑のドット（●）は「予約可能」を意味します。クリックすると予約フォームが開きます。
▲ 予約フォームのモーダル。エンドユーザー（保護者）がこのフォームから体験予約を申し込みます。
④ 満席になったときの更新方法
定員に達したら、Googleカレンダーのイベントタイトルの末尾に「満席」と追加するだけで、Webサイトに赤く表示されます。
1
カレンダー上の対象イベントをクリックする
イベントの詳細ポップアップが表示されます。
2
鉛筆アイコン（編集）をクリックする
イベント編集画面が開きます。
3
タイトルの末尾に「 満席」と追加する
例：【小学生Aグループ】（Unityコース）満席
4
「保存」をクリックする ✓
数分後、Webサイト上のドットが赤（満席）に変わります。
▲ イベントをクリックするとポップアップが表示されます。鉛筆アイコン（編集）をクリックして編集画面を開きます。
▲ タイトルの末尾に「 満席」を追加して「保存」します。
▲ 保存後、Webサイトのカレンダーに赤いドット（●満席）として反映されます。
⚠️ 命名ルールについて：
イベント名の書き方が決まっています。【グループ名】（コース名） の形式を守ってください。
満席にする場合は末尾に「 満席」を追加するだけでOKです。それ以外の書き方をすると正しく表示されない場合があります。
命名ルール早見表
| 状態 | イベント名の書き方 | Webサイトの表示 |
|---|
| 予約可能 |
【小学生Aグループ】（Unityコース） |
緑のドット ● |
| 残りわずか |
【小学生Aグループ】（Unityコース）残りわずか |
オレンジのドット ● |
| 満席 |
【小学生Aグループ】（Unityコース）満席 |
赤のドット ●（クリック不可） |
テーマエディタ（テーマを編集する）では、コース一覧ページのコース名・キャッチコピー・画像・説明文などをビジュアルで確認しながら編集できます。
⚠️ 注意：テーマエディタでの変更は即座に公開サイトに反映される可能性があります。
変更後は必ず「保存」ボタンを押してください。不明な点は本部へご相談ください。
① テーマエディタを開く
1
Shopify管理画面の左メニューから「オンラインストア」をクリック
テーマ管理画面が表示されます。
2
「テーマを編集する」ボタンをクリック
テーマエディタが別ウィンドウで開きます。
3
上部中央のページ選択から「コース一覧」を選ぶ
ページ選択プルダウン → 「ページ」→「course-list」をクリックします。
▲ テーマエディタの上部中央にあるページ選択ドロップダウン。「ページ」をクリックしてページ一覧を開きます。
▲ ページ一覧。「course-list」（3件のページに割り当て済み）をクリックすると、コース一覧ページに切り替わります。
② コース詳細カードを編集する
1
左パネルの「コース詳細カード」をクリックして選択する
編集したいコースのカードを選びます（コース名で識別できます）。
2
各フィールドを編集する
コース名・キャッチコピー・画像・詳細説明を変更できます。
3
右上の「保存」ボタンをクリックする ✓
保存するとWebサイトに即座に反映されます。
▲ コース詳細カードの編集パネル。「コース名」「キャッチコピー」「画像1」「詳細説明1」などを直接入力できます。右側のプレビューでリアルタイムに確認できます。
▲ コース一覧ページのプレビュー。左パネルで選択したカードが右側のプレビューでハイライトされます。
▲ カードを選択した状態。プレビュー上のカードが青枠でハイライトされ、どのカードを編集しているか一目でわかります。
編集できるフィールド
| フィールド名 | 内容 | 入力例 |
|---|
| コース名 | コース一覧カードに表示されるコース名 | ロボットプログラミングコース |
| キャッチコピー | コース名の下に表示されるサブテキスト | 遊びながら学ぶ、プログラミングの第一歩 |
| 画像1 | カードのメイン画像 | コースのイメージ画像（横800px以上推奨） |
| 詳細説明1 | カードの説明テキスト | 対象：小1〜小3 / 内容：ScratchJr / 時間：60分×年40回 |
| 画像2 | サブ画像（授業風景など） | 横800px以上推奨 |
Shopify管理画面の「コンテンツ」→「ブログ記事」から、お知らせやブログ記事を投稿できます。
投稿した記事はWebサイトのContentsページまたはお知らせページに自動的に表示されます。
📰 ブログの種類：
このサイトには「Contents（コンテンツ記事）」と「お知らせ」の2種類があります。
記事作成時に右側パネルの「ブログ」欄でどちらに掲載するか選択します。
① 記事の一覧を確認する
左メニュー「コンテンツ」→「ブログ記事」をクリックすると、既存の記事一覧が表示されます。
▲ ブログ記事の一覧。タイトル・公開ステータス・作成者・ブログ種別（Contents / お知らせ）が確認できます。右上の「ブログ記事を追加する」から新規作成できます。
② 新しい記事を作成する
1
「ブログ記事を追加する」をクリックして作成画面を開く
記事のタイトルと本文（コンテンツ）の入力欄が表示されます。
2
タイトルを入力する
40文字程度を目安に、わかりやすいタイトルをつけてください。
3
コンテンツ（本文）を入力する
リッチテキストエディタで太字・見出し・文字色・画像の挿入などができます。
4
右側のパネルで分類・タグ・公開設定を行う
カテゴリ（ブログ欄）・タグ・テーマテンプレートを設定します。
5
「保存」または「公開」をクリックする ✓
「公開」にするとすぐにWebサイトへ表示されます。
▲ 記事作成画面。左側にタイトル・コンテンツ・抜粋・SEO設定、右側に公開状況・画像・分類（ブログ・タグ）・テーマテンプレートが並んでいます。
▲ コンテンツ欄のリッチテキストエディタ。文字色の変更、太字・斜体・見出しの設定など、Wordのような操作で本文を装飾できます。
③ 各設定項目の使い方
抜粋・SEO設定
▲ 抜粋（記事一覧に表示される要約文）、検索エンジンリスティング（SEO）の設定欄。「メタディスクリプション」に記事の要約を入力しておくとGoogleでの表示が改善されます。「URLハンドル」は記事のURLの末尾部分です（基本的には変更不要）。
▲ ブログカテゴリの選択。「Contents」→ コンテンツ記事ページに掲載、「お知らせ」→ ニュースページに掲載されます。
▲ タグの入力欄。記事をカテゴリ分けするために使います。既存のタグ（例：scratch）から選ぶか、新しいタグを入力できます。タグはContentsページのフィルタリングボタンとして表示されます。
▲ テーマテンプレートの選択。「contents」テンプレートを選ぶとContentsページのスタイルで表示されます。通常は変更不要です。
▲ 公開日の設定カレンダー。「非公開」状態で記事を作成しておき、公開日を指定することで自動公開の予約ができます。
入力項目まとめ
| 項目 | 内容 | 備考 |
|---|
| タイトル | 記事のタイトル | 40文字程度が目安 |
| コンテンツ | 本文（リッチテキスト） | 画像・太字・見出し・文字色など可 |
| 抜粋 | 記事一覧に表示される要約 | 100文字程度推奨 |
| 画像 | アイキャッチ（サムネイル） | 横1200px以上推奨 |
| 公開状況 | 公開 / 非公開の切り替え | 「非公開」のまま保存して後から公開も可 |
| ブログ | 掲載先の選択 | Contents または お知らせ |
| タグ | 記事のカテゴリタグ | 例：scratch、コラム、教材について |
| テーマテンプレート | 表示スタイルの選択 | 基本的には「contents」のまま |
✅ 公開日時の予約投稿：
「公開状況」を「非公開」のまま記事を作成し、「公開日を設定する」でカレンダーから日時を選択すると、その日時に自動公開されます。
イベントやキャンペーンの告知記事を事前に準備しておくときに便利です。
④ テーマエディタでContentsページを管理する
Contentsページはテーマエディタで「ピックアップ記事（PR Article）」や「タグフィルターボタン」を設定できます。
投稿した記事を目立たせたいときや、タグを追加したときはここで調整します。
1
テーマエディタを開き、ページ選択から「ブログ」→「contents」を選ぶ
Shopify管理画面「オンラインストア」→「テーマを編集する」→ページ切り替えで「contents」を選択します。
2
左パネルの「Main Blog Contents」から各ブロックを編集する
「PR Article」「カスタムタグリンク」などのブロックが並んでいます。
▲ テーマエディタのページ切り替え。「ブログ」から「contents」（1件のブログに割り当て済み）を選ぶとContentsページ編集モードになります。
▲ Contentsページのテーマエディタ表示。左パネルに「Main Blog Contents」セクションがあり、PR Article・カスタムタグリンク・人気記事などのブロックが確認できます。
ピックアップ記事（PR Article）を変更する
Contentsページの上部に大きく表示される「ピックアップ」記事を変更する方法です。新しく記事を書いたら、ここから差し替えられます。
▲ 左パネルの「PR Article」ブロック。現在選択中の記事が「PR記事を選択」欄に表示されています。変更するには記事名をクリックします。
▲ 「PR記事を選択」をクリックすると、現在の記事の操作メニューが表示されます。「置換」で別の記事に差し替えられます。
▲ 操作メニュー。「置換」→ 別の記事に差し替え、「編集」→ 記事の編集画面を開く、「ブログ記事を削除」→ PR記事の割り当てを外す。
▲ 置換時の記事選択画面。検索欄で記事を絞り込むか、一覧からピックアップしたい記事を選んでクリックします。
▲ PR記事を変更するとプレビューがリアルタイムで更新されます。内容を確認してから「保存」してください。
▲ ピックアップ記事の下に、通常の記事グリッドが並んでいます。投稿した記事は自動的にここに追加されます。
タグフィルターボタン（カスタムタグリンク）を管理する
Contentsページ上部の「スクラッチ」「コラム」「教材について」などのフィルターボタンは「カスタムタグリンク」ブロックで管理します。
新しいタグを追加した場合は、ここにボタンを追加します。
▲ カスタムタグリンクブロックの設定。「表示名」にボタンのテキスト（例：スクラッチ）、「リンクURL」にタグのURL（例：/blogs/contents/tagged/scratch）を入力します。
▲ リンクURLのリンクタイプ選択。「ブログ」または「ブログ記事」を選ぶとブログのタグページへのリンクになります。
🏷️ タグリンクのURL形式：
タグ名が「scratch」の場合、リンクURLは /blogs/contents/tagged/scratch になります。
お知らせ（news）のタグは /blogs/news/tagged/タグ名 の形式です。
新しいタグを記事に追加したら、このカスタムタグリンクブロックも追加することで、フィルターボタンが表示されます。
⚠️ タグを追加したときの作業手順：
① ブログ記事の編集画面でタグを入力・保存
② テーマエディタの「contents」ページを開く
③ Main Blog Contentsの「ブロックを追加」→「カスタムタグリンク」を追加
④ 表示名とリンクURLを設定して「保存」
⑤ タグを使った絞り込み機能を活用する
記事に設定したタグは、Contentsページ上部のフィルターボタンとして機能します。
読者が「スクラッチ」などのボタンをクリックすると、そのタグが付いた記事だけが表示されます。
▲ タグの入力欄。クリックすると既存のタグ候補が表示されます。候補をクリックするか、新しいタグ名を直接入力してEnterを押します。
▲ タグを追加した状態。タグ名の右の「×」で削除できます。テーマテンプレートは「contents」を選択してください（ContentsページでもNewsページでも共通）。
▲ Webサイトの実際の表示。「スクラッチ」「コラム」「教材について」のフィルターボタンが表示されており、クリックすると該当タグの記事だけに絞り込まれます。
▲ ブロック名を右クリック（または「…」メニュー）すると操作メニューが開きます。「複製」で同じブロックをコピー、「非表示にする」で一時的に非表示、「削除」で完全に削除できます。
▲ 「ブロックを追加」→「カスタムタグリンク」を追加した直後の状態。「表示名」にボタンのテキスト、「リンクURL」にタグのURL（例：/blogs/contents/tagged/コラム）を入力します。
⑥ 人気記事を管理する
ContentsページにはPRArticle（ピックアップ）の下に「人気記事」エリアがあります。
ここに表示する記事はテーマエディタで手動で選択します。
▲ 左パネルの「人気記事」ブロックをクリックすると、表示する記事を選択・変更できます。右側のプレビューにリンクのリスト形式で反映されます。目玉アイコンで表示・非表示を切り替えられます。
⑦ お知らせ記事を投稿してトップページに反映する
「お知らせ」ブログに投稿した記事は、Webサイトのトップページ「お知らせ」セクションに自動的に表示されます。
テーマテンプレートは「contents」を選択するのがポイントです。
▲ ブログ記事一覧。「ブログ」列でContents / お知らせのどちらに属するかが確認できます。更新日時・公開日も一覧で管理できます。
▲ ブログ欄のドロップダウン。「お知らせ」を選ぶとトップページのお知らせエリアに表示されます。「Contents」を選ぶとコンテンツページに表示されます。
▲ お知らせ記事の分類設定。ブログ=「お知らせ」、テーマテンプレートは「contents」を選択してください。テンプレートを「contents」にすることで記事ページが正しく表示されます。
▲ トップページのお知らせセクション。「お知らせ」ブログに投稿した記事が「NEWS」バッジ付きで自動的にリスト表示されます。最新の記事から順に表示されます。
✅ テーマテンプレートについての補足：
ContentsページもNewsページも、テーマテンプレートは「contents」に設定してください。
「デフォルトのブログ記事」を選ぶと、記事詳細ページのデザインが異なって表示される場合があります。
Webサイトの「お問い合わせ」ページはフォームの内容が固定仕様になっています。
フォームへの送信データは、登録メールアドレスへの通知とShopify管理画面から確認できます。
⚠️ フォーム内容の変更について：
お問い合わせフォームの項目（入力欄の追加・削除・文言変更など）はカスタム対応となります。
変更が必要な場合は本部へご相談ください（別途お見積りになります）。
▲ お問い合わせページのフォーム。お名前・メールアドレス・電話番号・お問い合わせ内容（必須）の4項目が固定で設置されています。テーマエディタでは「Contact Custom」セクションとして管理されています。
お問い合わせ内容の確認方法
1
通知メールを確認する
フォーム送信があると、登録メールアドレスへ通知が届きます。メールの受信設定をスマートフォンにも設定しておくことをお勧めします。
2
管理画面から確認する場合：「コンテンツ」→「メタオブジェクト」→「予約お問い合わせフォーム」
送信されたフォームデータを一覧で確認できます。
3
お客様に返信する（3営業日以内を目安に）
メールまたは電話でご連絡ください。自動返信メールは現在のシステムには含まれていません。
フォームで受け取れる情報
| 項目 | 内容 | 必須 |
|---|
| お名前 | 送信者の氏名 | 必須 |
| メールアドレス | 返信先メール | 必須 |
| 電話番号 | 連絡先電話番号 | 任意 |
| お問い合わせ内容 | 質問・要望の本文 | 必須 |
📧 通知メールが届かない場合：迷惑メールフォルダを確認してください。
改善しない場合は本部へご連絡ください。
トップページ最上部のスライドショー（バナー）は、テーマエディタのホームページから編集できます。
背景画像・見出し・サブテキスト・ボタンのラベルとリンク先をそれぞれ変更できます。
⚠️ 注意：テーマエディタの変更は保存後にすぐ公開サイトへ反映されます。
変更前にメモを取っておき、不明な点は本部へご相談ください。
① テーマエディタを開いてホームページを選択する
1
Shopify管理画面から「オンラインストア」→「テーマを編集する」を開く
2
ページ切り替えが「ホームページ」になっていることを確認する
上部中央のドロップダウンで「ホームページ」を選んでください。
3
左パネルの「スライドショー」→「スライド」をクリックする
スライドの編集パネルが開きます。
▲ テーマエディタのページ一覧。ページごとにテンプレートが管理されています。トップページのバナー編集は「ホームページ」を選びます。contact-customは固定フォームのため基本的に変更不要です。
▲ ホームページのテーマエディタ。左パネルの「スライドショー」→「スライド – ひろがれ未来」をクリックすると右側のスライド編集パネルが開きます。
② スライドの画像・テキストを変更する
▲ スライドの編集パネル。上から「画像」「オーバーレイの不透明度」「テキスト（見出し・小見出し）」「ボタン」の設定が並んでいます。
▲ 画像の「変更」をクリックするとメニューが表示されます。「ライブラリから選択」で既存の画像、「無料画像を探索する」でShopifyの無料素材から選べます。
▲ ボタンの設定。「ラベル」にボタンのテキスト、「リンク」にボタンを押したときの遷移先URLを入力します。ラベルを空にするとボタンが非表示になります。
各設定項目の説明
| 設定項目 | 内容 | 入力例・目安 |
|---|
| 画像 | スライドの背景画像 | 横1920px以上推奨・「ライブラリから選択」でアップロード済み画像を使用 |
| オーバーレイの不透明度 | 画像の上に重ねる暗幕の濃さ | 0%=透明 / 数値を上げると画像が暗くなる |
| 見出し | 大きく表示されるメインテキスト | ひろがれ未来 |
| 小見出し | 見出し下のサブテキスト | 子どもの可能性を広げるプログラミングレッスン |
| ボタン ラベル | ボタンに表示するテキスト | 無料で体験に申込む（空欄でボタン非表示） |
| ボタン リンク | ボタンをクリックした際の遷移先 | 予約ページのURL |
💡 スライドを複数枚にする場合：
左パネルの「スライドを追加」をクリックすると、スライドを追加できます。
複数枚にすると自動でスライドショーとして切り替わります。
次のガイドで解説する内容
以下の操作方法は、追加ガイドで順次公開します。
トップページのバナー・スライドショー変更
テーマエディタでのトップページビジュアル編集方法
スタッフアカウントの管理
担当者の追加・権限変更・引き継ぎ手順
▲ オンラインストア管理画面（次のガイドで解説）
▲ テーマエディタ画面（次のガイドで解説）
本部からお伝えしたURLをブラウザで開き、メールアドレスとパスワードを入力してログインします。
1
ブラウザを開き、管理画面URLにアクセスする
Google Chrome または Safari を使用してください。URLは本部から別途ご案内します。
2
メールアドレスを入力し「メールアドレスで続行」をクリック
登録したメールアドレスを入力します。
3
パスワードを入力してログインする
メールアドレスの入力後にパスワード入力画面が表示されます。
4
ホーム画面が表示されれば完了 ✓
「こんにちは、早速始めましょう。」と表示されればログイン成功です。
▲ Shopifyのログイン画面。メールアドレスを入力して「メールアドレスで続行」をクリックします。
▲ Googleアカウントで登録した場合はこの画面が表示されます。メールアドレスまたは電話番号を入力して「次へ」をクリック。
▲ ログイン後のホーム画面。左側にメニューが表示され、「コンテンツ」から各ページの内容を更新できます。
💡 パスワードを忘れた場合：ログイン画面下部の「お困りの場合」または画面上の案内から再設定できます。
それでも解決しない場合は本部へご連絡ください。
「メタオブジェクト」とは、Webサイトに表示される文章・画像を管理する専用フォームです。
ここに入力した内容が、実際のWebサイトに反映されます。
1
左メニューの「コンテンツ」をクリックする
メニューが展開されます。
2
「メタオブジェクト」をクリックする
コンテンツ管理の一覧ページが開きます。
3
画面下部の定義一覧から編集したい種類を選ぶ
「course_detail」→ コース詳細ページ 「Aboutページ」→ 教室紹介ページ
▲ メタオブジェクト一覧。上部にはエントリーの状態（アクティブ・下書き）が表示されます。
▲ 画面を下にスクロールすると、定義名の一覧が表示されます。「course_detail」と「Aboutページ」が確認できます。
📝 メタオブジェクトとは：ページごとに「文章」「画像」「住所」などの入力欄がまとまった専用フォームです。
入力してから保存するだけで、自動的にWebサイトへ反映されます。難しく考えず「ページの内容を書き込む場所」と覚えておけば大丈夫です。
コースごとに1件の「エントリー（入力データ）」があります。変更したいコースのエントリーを開いて、各フィールドを入力・上書きします。
1
メタオブジェクト一覧から「course_detail」をクリックする
コースのエントリー一覧が表示されます。
2
編集したいコースのエントリーをクリックする
コース名（例：「4歳から始めるCodeCampKIDS」）の行をクリックします。
3
各フィールドに内容を入力・修正する
テキスト欄に直接入力、画像欄は「変更」ボタンから差し替えできます。
4
画面右上の「保存」ボタンをクリックする ✓
保存しないと変更が反映されません。必ず保存してください。
▲ course_detail のエントリー一覧。現在3件のコースが登録されています。編集したいコースの行をクリックします。
編集画面の見方
エントリーを開くと、上から順にフィールド（入力欄）が並んでいます。フィールド名の横の入力欄に内容を記入します。
▲ 編集画面の上部。title・subtitle・hero_image（ヒーロー画像）・cta_textなどの基本情報欄があります。
▲ 編集画面の下部。gal_1〜6（ギャラリー画像）や、ステータス（Active/Draft）の切り替えがあります。
入力フィールド一覧
フィールドは「基本情報・イントロ・特徴・ギャラリー」の4グループに分かれています。上から順に入力してください。
① 基本情報
| フィールド名 | 内容 | 入力例・目安 |
|---|
| title | コース名 | ロボットプログラミングコース |
| subtitle | サブタイトル（表示名） | 4歳から始めるCodeCampKIDS |
| hero_image | ページ最上部の大きな画像 | 横1920px以上推奨 |
| cta_text | 申込ボタンの文言 | 体験を申し込む |
| cta_url | 申込ボタンのリンク先URL | https://〜/pages/reservation |
② イントロセクション
| フィールド名 | 内容 | 入力例・目安 |
|---|
| intro_image | イントロ部の画像 | 横1200px以上推奨 |
| target | 対象年齢・対象者 | 小1〜小3 |
| course_content | コース内容（学ぶこと） | ScratchJrとロボット制御 |
| time | 1回あたりの授業時間 | 60分×40回 |
| skill1 / skill2 | 習得できるスキル | 問題解決能力 / 論理的思考力 |
③ 特徴セクション（3ブロック分）
| フィールド名 | 内容 |
|---|
| h2_1 | 特徴セクション全体の見出し |
| text_1 | 特徴セクションの概要テキスト |
| feat_img_1〜3 | 各特徴ブロックの画像（3枚） |
| feat_title_1〜3 | 各特徴ブロックの見出し |
| feat_text_1〜3 | 各特徴ブロックの説明テキスト |
④ ギャラリー（最大6枚）
| フィールド名 | 内容 |
|---|
| h2_3 | ギャラリーセクションの見出し |
| gal_1〜6 | 教室・授業風景の写真（6枚まで）横800px以上推奨 |
編集後の公開画面イメージ
上記のフィールドに入力した内容が、以下のようなページとして表示されます。
▲ コース詳細ページの公開画面。hero_image・title・subtitle・イントロ・特徴・ギャラリーが順番に表示されます。
⚠️ 保存を忘れずに：入力後は必ず画面右上の「保存」ボタンをクリックしてください。
保存前にページを離れると変更内容が失われます。
「Aboutページ」は教室の紹介・コンセプト・アクセス情報などを掲載するページです。
メタオブジェクト一覧の「Aboutページ」からエントリーを開いて編集します。
1
メタオブジェクト一覧から「Aboutページ」をクリックする
エントリーは1件のみです。その行をクリックして編集画面を開きます。
2
各フィールドに教室の情報を入力する
テキスト欄・画像欄・住所・電話番号などを入力します。
3
保存する ✓
右上の「保存」ボタンをクリックして完了です。
▲ Aboutページの編集画面。hero_image・about_title・about_description・コンセプト情報・アクセス情報（住所・営業時間・電話番号・GoogleマップURL）などが並んでいます。
入力フィールド一覧
① テキスト情報
| フィールド名 | 内容 | 入力例・目安 |
|---|
| hero_image | ページ最上部の大きな画像 | 横1920px以上推奨 |
| about_title | Aboutセクションの見出し | プログラミングを学んで世界を変えよう！ |
| about_description | 教室の紹介文・理念（リッチテキスト） | 200〜400文字程度 |
| concept_image | コンセプトセクションの画像 | 横1200px以上推奨 |
| concept_title | コンセプト見出し | CONCEPT |
| concept_description | コンセプト本文 | 200〜400文字程度 |
| sustainable_image | サステナブルセクション画像 | 横1200px以上推奨 |
| sustainable_title | サステナブル見出し | 別途お知らせします |
| sustainable_description | サステナブル本文 | 別途お知らせします |
② アクセス情報
| フィールド名 | 内容 | 入力例 |
|---|
| access_title | アクセスセクションの見出し | アクセス |
| address | 教室の住所 | 東京都○○区○○1-2-3 |
| business_hours | 営業時間 | 9:00〜20:00（年中無休 ※正月5日間除く） |
| phone | 電話番号 | 03-XXXX-XXXX |
| google_map_url | Googleマップの埋め込みURL | https://www.google.com/maps/embed?pb=... |
| map_height | 地図の表示高さ（数値のみ） | 400（省略可） |
📍 GoogleマップURLの取得方法：
Googleマップで自店舗を検索 → 「共有」ボタンをクリック → 「地図を埋め込む」タブを選択 → 表示されたHTML内の src="..." の中のURLをコピーして貼り付けてください。
編集後の公開画面イメージ
▲ Aboutページの公開画面。ヒーロー画像・教室紹介・コンセプト・コンテンツ一覧・アクセス（地図・住所・電話番号）が表示されます。
各エントリーの画像フィールドで「変更」ボタンをクリックすると、画像の選択画面が開きます。
すでにアップロード済みの画像から選ぶか、新しくアップロードできます。
1
画像フィールドの「変更」ボタンをクリックする
画像選択ダイアログが開きます。
2
「＋ファイルを追加」から画像をアップロードする
JPG または PNG 形式の画像ファイルを選んでください。または画像をドラッグ＆ドロップでも追加できます。
3
使用したい画像を選択して「完了」をクリック
既存の画像を使う場合はサムネイルをクリックして選択し、「完了」を押します。
4
エントリー画面に戻り「保存」する ✓
画像を選んだだけでは反映されません。エントリー画面の「保存」ボタンをクリックして完了です。
▲ 画像選択ダイアログ。「＋ファイルを追加」で新しい画像をアップロードするか、既存の画像（サムネイル表示）から選んで「完了」をクリックします。
推奨画像サイズ
| 使用場所 | 推奨横幅 | 形式 | ファイルサイズ目安 |
|---|
| ヒーロー画像（ページ最上部・全幅） | 1920px以上 | JPG / PNG | 〜3MB |
| セクション画像（半幅） | 1200px以上 | JPG / PNG | 〜2MB |
| ギャラリー画像 | 800px以上 | JPG / PNG | 〜1MB |
💡 画像が重すぎるとサイトの表示が遅くなります。
画像を圧縮するには
Squoosh（無料ツール） が便利です。
ブラウザで開いて画像をドラッグするだけで圧縮できます。
各エントリーには「ステータス」という設定があります。Active なら公開状態、Draft なら非公開（下書き）です。
▲ ステータスのドロップダウン。「Active」を選ぶと公開、「Draft」を選ぶと非公開になります。
✅ Active（アクティブ）
Webサイトに表示されます。通常はこちらに設定してください。
📝 Draft（ドラフト）
Webサイトに表示されません。内容を準備中のときや、一時的に非公開にしたいときに使います。
⚠️ 注意：Draftのままにすると、そのコースのページがWebサイトから見えなくなります。
内容を更新したら必ず「Active」に戻してから保存してください。
Googleカレンダーに登録したイベントが、自動的にWebサイトの予約カレンダーに反映されます。
日常的な作業はGoogleカレンダーの更新のみです。GCPなどの技術的な操作は本部が担当しています。
📅 仕組みの概要：
Googleカレンダーにイベントを登録 → 数分後にWebサイトのカレンダーへ自動反映。
イベント名に「満席」を含めるとWebサイト上で赤く表示されます。
① Googleカレンダーを開く
1
Google（google.com）を開く
ブラウザで Google にアクセスします。右上のGoogleアカウントにログインしていることを確認してください。
2
右上の「アプリ一覧（格子アイコン）」をクリック
Googleのサービス一覧が表示されます。
3
「カレンダー」をクリックする
Googleカレンダーが開きます。
▲ Googleのトップページ。右上の格子アイコン（アプリ一覧）をクリックします。
▲ アプリ一覧が表示されます。「カレンダー」をクリックして開きます。
▲ Googleカレンダーの月表示。「＋作成」ボタンまたはカレンダー上の日付をクリックして新しいイベントを作成します。
② 新しいスケジュールを登録する
1
登録したい日付・時間帯をクリックする
カレンダーの該当日をクリックすると、イベント作成ダイアログが開きます。
2
タイトル欄に「命名ルール」に従ってイベント名を入力する
例：【小学生Aグループ】（Unityコース）
3
「時間を追加」で開始・終了時刻を設定する
「その他のオプション」をクリックすると詳細な時間設定ができます。
4
「保存」をクリックする ✓
保存後、数分でWebサイトのカレンダーに反映されます。
▲ イベント作成の初期画面。「タイトルと日時を追加」欄にイベント名を入力します。
▲ タイトルと時間を設定した状態。「その他のオプション」をクリックすると細かい時間の設定ができます。
▲ イベントを保存するとカレンダーに表示されます（6月30日の「午後3時 【小学生Aグル…」）。
③ Webサイトへの反映を確認する
Googleカレンダーに登録したイベントは、数分後にWebサイトのカレンダーへ自動的に反映されます。
イベント名に「満席」が含まれていない場合は 予約可能（緑） として表示されます。
▲ Webサイトのカレンダー表示。緑のドット（●）は「予約可能」を意味します。クリックすると予約フォームが開きます。
▲ 予約フォームのモーダル。エンドユーザー（保護者）がこのフォームから体験予約を申し込みます。
④ 満席になったときの更新方法
定員に達したら、Googleカレンダーのイベントタイトルの末尾に「満席」と追加するだけで、Webサイトに赤く表示されます。
1
カレンダー上の対象イベントをクリックする
イベントの詳細ポップアップが表示されます。
2
鉛筆アイコン（編集）をクリックする
イベント編集画面が開きます。
3
タイトルの末尾に「 満席」と追加する
例：【小学生Aグループ】（Unityコース）満席
4
「保存」をクリックする ✓
数分後、Webサイト上のドットが赤（満席）に変わります。
▲ イベントをクリックするとポップアップが表示されます。鉛筆アイコン（編集）をクリックして編集画面を開きます。
▲ タイトルの末尾に「 満席」を追加して「保存」します。
▲ 保存後、Webサイトのカレンダーに赤いドット（●満席）として反映されます。
⚠️ 命名ルールについて：
イベント名の書き方が決まっています。【グループ名】（コース名） の形式を守ってください。
満席にする場合は末尾に「 満席」を追加するだけでOKです。それ以外の書き方をすると正しく表示されない場合があります。
命名ルール早見表
| 状態 | イベント名の書き方 | Webサイトの表示 |
|---|
| 予約可能 |
【小学生Aグループ】（Unityコース） |
緑のドット ● |
| 残りわずか |
【小学生Aグループ】（Unityコース）残りわずか |
オレンジのドット ● |
| 満席 |
【小学生Aグループ】（Unityコース）満席 |
赤のドット ●（クリック不可） |
テーマエディタ（テーマを編集する）では、コース一覧ページのコース名・キャッチコピー・画像・説明文などをビジュアルで確認しながら編集できます。
⚠️ 注意：テーマエディタでの変更は即座に公開サイトに反映される可能性があります。
変更後は必ず「保存」ボタンを押してください。不明な点は本部へご相談ください。
① テーマエディタを開く
1
Shopify管理画面の左メニューから「オンラインストア」をクリック
テーマ管理画面が表示されます。
2
「テーマを編集する」ボタンをクリック
テーマエディタが別ウィンドウで開きます。
3
上部中央のページ選択から「コース一覧」を選ぶ
ページ選択プルダウン → 「ページ」→「course-list」をクリックします。
▲ テーマエディタの上部中央にあるページ選択ドロップダウン。「ページ」をクリックしてページ一覧を開きます。
▲ ページ一覧。「course-list」（3件のページに割り当て済み）をクリックすると、コース一覧ページに切り替わります。
② コース詳細カードを編集する
1
左パネルの「コース詳細カード」をクリックして選択する
編集したいコースのカードを選びます（コース名で識別できます）。
2
各フィールドを編集する
コース名・キャッチコピー・画像・詳細説明を変更できます。
3
右上の「保存」ボタンをクリックする ✓
保存するとWebサイトに即座に反映されます。
▲ コース詳細カードの編集パネル。「コース名」「キャッチコピー」「画像1」「詳細説明1」などを直接入力できます。右側のプレビューでリアルタイムに確認できます。
▲ コース一覧ページのプレビュー。左パネルで選択したカードが右側のプレビューでハイライトされます。
▲ カードを選択した状態。プレビュー上のカードが青枠でハイライトされ、どのカードを編集しているか一目でわかります。
編集できるフィールド
| フィールド名 | 内容 | 入力例 |
|---|
| コース名 | コース一覧カードに表示されるコース名 | ロボットプログラミングコース |
| キャッチコピー | コース名の下に表示されるサブテキスト | 遊びながら学ぶ、プログラミングの第一歩 |
| 画像1 | カードのメイン画像 | コースのイメージ画像（横800px以上推奨） |
| 詳細説明1 | カードの説明テキスト | 対象：小1〜小3 / 内容：ScratchJr / 時間：60分×年40回 |
| 画像2 | サブ画像（授業風景など） | 横800px以上推奨 |
Shopify管理画面の「コンテンツ」→「ブログ記事」から、お知らせやブログ記事を投稿できます。
投稿した記事はWebサイトのContentsページまたはお知らせページに自動的に表示されます。
📰 ブログの種類：
このサイトには「Contents（コンテンツ記事）」と「お知らせ」の2種類があります。
記事作成時に右側パネルの「ブログ」欄でどちらに掲載するか選択します。
① 記事の一覧を確認する
左メニュー「コンテンツ」→「ブログ記事」をクリックすると、既存の記事一覧が表示されます。
▲ ブログ記事の一覧。タイトル・公開ステータス・作成者・ブログ種別（Contents / お知らせ）が確認できます。右上の「ブログ記事を追加する」から新規作成できます。
② 新しい記事を作成する
1
「ブログ記事を追加する」をクリックして作成画面を開く
記事のタイトルと本文（コンテンツ）の入力欄が表示されます。
2
タイトルを入力する
40文字程度を目安に、わかりやすいタイトルをつけてください。
3
コンテンツ（本文）を入力する
リッチテキストエディタで太字・見出し・文字色・画像の挿入などができます。
4
右側のパネルで分類・タグ・公開設定を行う
カテゴリ（ブログ欄）・タグ・テーマテンプレートを設定します。
5
「保存」または「公開」をクリックする ✓
「公開」にするとすぐにWebサイトへ表示されます。
▲ 記事作成画面。左側にタイトル・コンテンツ・抜粋・SEO設定、右側に公開状況・画像・分類（ブログ・タグ）・テーマテンプレートが並んでいます。
▲ コンテンツ欄のリッチテキストエディタ。文字色の変更、太字・斜体・見出しの設定など、Wordのような操作で本文を装飾できます。
③ 各設定項目の使い方
抜粋・SEO設定
▲ 抜粋（記事一覧に表示される要約文）、検索エンジンリスティング（SEO）の設定欄。「メタディスクリプション」に記事の要約を入力しておくとGoogleでの表示が改善されます。「URLハンドル」は記事のURLの末尾部分です（基本的には変更不要）。
▲ ブログカテゴリの選択。「Contents」→ コンテンツ記事ページに掲載、「お知らせ」→ ニュースページに掲載されます。
▲ タグの入力欄。記事をカテゴリ分けするために使います。既存のタグ（例：scratch）から選ぶか、新しいタグを入力できます。タグはContentsページのフィルタリングボタンとして表示されます。
▲ テーマテンプレートの選択。「contents」テンプレートを選ぶとContentsページのスタイルで表示されます。通常は変更不要です。
▲ 公開日の設定カレンダー。「非公開」状態で記事を作成しておき、公開日を指定することで自動公開の予約ができます。
入力項目まとめ
| 項目 | 内容 | 備考 |
|---|
| タイトル | 記事のタイトル | 40文字程度が目安 |
| コンテンツ | 本文（リッチテキスト） | 画像・太字・見出し・文字色など可 |
| 抜粋 | 記事一覧に表示される要約 | 100文字程度推奨 |
| 画像 | アイキャッチ（サムネイル） | 横1200px以上推奨 |
| 公開状況 | 公開 / 非公開の切り替え | 「非公開」のまま保存して後から公開も可 |
| ブログ | 掲載先の選択 | Contents または お知らせ |
| タグ | 記事のカテゴリタグ | 例：scratch、コラム、教材について |
| テーマテンプレート | 表示スタイルの選択 | 基本的には「contents」のまま |
✅ 公開日時の予約投稿：
「公開状況」を「非公開」のまま記事を作成し、「公開日を設定する」でカレンダーから日時を選択すると、その日時に自動公開されます。
イベントやキャンペーンの告知記事を事前に準備しておくときに便利です。
④ テーマエディタでContentsページを管理する
Contentsページはテーマエディタで「ピックアップ記事（PR Article）」や「タグフィルターボタン」を設定できます。
投稿した記事を目立たせたいときや、タグを追加したときはここで調整します。
1
テーマエディタを開き、ページ選択から「ブログ」→「contents」を選ぶ
Shopify管理画面「オンラインストア」→「テーマを編集する」→ページ切り替えで「contents」を選択します。
2
左パネルの「Main Blog Contents」から各ブロックを編集する
「PR Article」「カスタムタグリンク」などのブロックが並んでいます。
▲ テーマエディタのページ切り替え。「ブログ」から「contents」（1件のブログに割り当て済み）を選ぶとContentsページ編集モードになります。
▲ Contentsページのテーマエディタ表示。左パネルに「Main Blog Contents」セクションがあり、PR Article・カスタムタグリンク・人気記事などのブロックが確認できます。
ピックアップ記事（PR Article）を変更する
Contentsページの上部に大きく表示される「ピックアップ」記事を変更する方法です。新しく記事を書いたら、ここから差し替えられます。
▲ 左パネルの「PR Article」ブロック。現在選択中の記事が「PR記事を選択」欄に表示されています。変更するには記事名をクリックします。
▲ 「PR記事を選択」をクリックすると、現在の記事の操作メニューが表示されます。「置換」で別の記事に差し替えられます。
▲ 操作メニュー。「置換」→ 別の記事に差し替え、「編集」→ 記事の編集画面を開く、「ブログ記事を削除」→ PR記事の割り当てを外す。
▲ 置換時の記事選択画面。検索欄で記事を絞り込むか、一覧からピックアップしたい記事を選んでクリックします。
▲ PR記事を変更するとプレビューがリアルタイムで更新されます。内容を確認してから「保存」してください。
▲ ピックアップ記事の下に、通常の記事グリッドが並んでいます。投稿した記事は自動的にここに追加されます。
タグフィルターボタン（カスタムタグリンク）を管理する
Contentsページ上部の「スクラッチ」「コラム」「教材について」などのフィルターボタンは「カスタムタグリンク」ブロックで管理します。
新しいタグを追加した場合は、ここにボタンを追加します。
▲ カスタムタグリンクブロックの設定。「表示名」にボタンのテキスト（例：スクラッチ）、「リンクURL」にタグのURL（例：/blogs/contents/tagged/scratch）を入力します。
▲ リンクURLのリンクタイプ選択。「ブログ」または「ブログ記事」を選ぶとブログのタグページへのリンクになります。
🏷️ タグリンクのURL形式：
タグ名が「scratch」の場合、リンクURLは /blogs/contents/tagged/scratch になります。
お知らせ（news）のタグは /blogs/news/tagged/タグ名 の形式です。
新しいタグを記事に追加したら、このカスタムタグリンクブロックも追加することで、フィルターボタンが表示されます。
⚠️ タグを追加したときの作業手順：
① ブログ記事の編集画面でタグを入力・保存
② テーマエディタの「contents」ページを開く
③ Main Blog Contentsの「ブロックを追加」→「カスタムタグリンク」を追加
④ 表示名とリンクURLを設定して「保存」
⑤ タグを使った絞り込み機能を活用する
記事に設定したタグは、Contentsページ上部のフィルターボタンとして機能します。
読者が「スクラッチ」などのボタンをクリックすると、そのタグが付いた記事だけが表示されます。
▲ タグの入力欄。クリックすると既存のタグ候補が表示されます。候補をクリックするか、新しいタグ名を直接入力してEnterを押します。
▲ タグを追加した状態。タグ名の右の「×」で削除できます。テーマテンプレートは「contents」を選択してください（ContentsページでもNewsページでも共通）。
▲ Webサイトの実際の表示。「スクラッチ」「コラム」「教材について」のフィルターボタンが表示されており、クリックすると該当タグの記事だけに絞り込まれます。
▲ ブロック名を右クリック（または「…」メニュー）すると操作メニューが開きます。「複製」で同じブロックをコピー、「非表示にする」で一時的に非表示、「削除」で完全に削除できます。
▲ 「ブロックを追加」→「カスタムタグリンク」を追加した直後の状態。「表示名」にボタンのテキスト、「リンクURL」にタグのURL（例：/blogs/contents/tagged/コラム）を入力します。
⑥ 人気記事を管理する
ContentsページにはPRArticle（ピックアップ）の下に「人気記事」エリアがあります。
ここに表示する記事はテーマエディタで手動で選択します。
▲ 左パネルの「人気記事」ブロックをクリックすると、表示する記事を選択・変更できます。右側のプレビューにリンクのリスト形式で反映されます。目玉アイコンで表示・非表示を切り替えられます。
⑦ お知らせ記事を投稿してトップページに反映する
「お知らせ」ブログに投稿した記事は、Webサイトのトップページ「お知らせ」セクションに自動的に表示されます。
テーマテンプレートは「contents」を選択するのがポイントです。
▲ ブログ記事一覧。「ブログ」列でContents / お知らせのどちらに属するかが確認できます。更新日時・公開日も一覧で管理できます。
▲ ブログ欄のドロップダウン。「お知らせ」を選ぶとトップページのお知らせエリアに表示されます。「Contents」を選ぶとコンテンツページに表示されます。
▲ お知らせ記事の分類設定。ブログ=「お知らせ」、テーマテンプレートは「contents」を選択してください。テンプレートを「contents」にすることで記事ページが正しく表示されます。
▲ トップページのお知らせセクション。「お知らせ」ブログに投稿した記事が「NEWS」バッジ付きで自動的にリスト表示されます。最新の記事から順に表示されます。
✅ テーマテンプレートについての補足：
ContentsページもNewsページも、テーマテンプレートは「contents」に設定してください。
「デフォルトのブログ記事」を選ぶと、記事詳細ページのデザインが異なって表示される場合があります。
Webサイトの「お問い合わせ」ページはフォームの内容が固定仕様になっています。
フォームへの送信データは、登録メールアドレスへの通知とShopify管理画面から確認できます。
⚠️ フォーム内容の変更について：
お問い合わせフォームの項目（入力欄の追加・削除・文言変更など）はカスタム対応となります。
変更が必要な場合は本部へご相談ください（別途お見積りになります）。
▲ お問い合わせページのフォーム。お名前・メールアドレス・電話番号・お問い合わせ内容（必須）の4項目が固定で設置されています。テーマエディタでは「Contact Custom」セクションとして管理されています。
お問い合わせ内容の確認方法
1
通知メールを確認する
フォーム送信があると、登録メールアドレスへ通知が届きます。メールの受信設定をスマートフォンにも設定しておくことをお勧めします。
2
管理画面から確認する場合：「コンテンツ」→「メタオブジェクト」→「予約お問い合わせフォーム」
送信されたフォームデータを一覧で確認できます。
3
お客様に返信する（3営業日以内を目安に）
メールまたは電話でご連絡ください。自動返信メールは現在のシステムには含まれていません。
フォームで受け取れる情報
| 項目 | 内容 | 必須 |
|---|
| お名前 | 送信者の氏名 | 必須 |
| メールアドレス | 返信先メール | 必須 |
| 電話番号 | 連絡先電話番号 | 任意 |
| お問い合わせ内容 | 質問・要望の本文 | 必須 |
📧 通知メールが届かない場合：迷惑メールフォルダを確認してください。
改善しない場合は本部へご連絡ください。
トップページ最上部のスライドショー（バナー）は、テーマエディタのホームページから編集できます。
背景画像・見出し・サブテキスト・ボタンのラベルとリンク先をそれぞれ変更できます。
⚠️ 注意：テーマエディタの変更は保存後にすぐ公開サイトへ反映されます。
変更前にメモを取っておき、不明な点は本部へご相談ください。
① テーマエディタを開いてホームページを選択する
1
Shopify管理画面から「オンラインストア」→「テーマを編集する」を開く
2
ページ切り替えが「ホームページ」になっていることを確認する
上部中央のドロップダウンで「ホームページ」を選んでください。
3
左パネルの「スライドショー」→「スライド」をクリックする
スライドの編集パネルが開きます。
▲ テーマエディタのページ一覧。ページごとにテンプレートが管理されています。トップページのバナー編集は「ホームページ」を選びます。contact-customは固定フォームのため基本的に変更不要です。
▲ ホームページのテーマエディタ。左パネルの「スライドショー」→「スライド – ひろがれ未来」をクリックすると右側のスライド編集パネルが開きます。
② スライドの画像・テキストを変更する
▲ スライドの編集パネル。上から「画像」「オーバーレイの不透明度」「テキスト（見出し・小見出し）」「ボタン」の設定が並んでいます。
▲ 画像の「変更」をクリックするとメニューが表示されます。「ライブラリから選択」で既存の画像、「無料画像を探索する」でShopifyの無料素材から選べます。
▲ ボタンの設定。「ラベル」にボタンのテキスト、「リンク」にボタンを押したときの遷移先URLを入力します。ラベルを空にするとボタンが非表示になります。
各設定項目の説明
| 設定項目 | 内容 | 入力例・目安 |
|---|
| 画像 | スライドの背景画像 | 横1920px以上推奨・「ライブラリから選択」でアップロード済み画像を使用 |
| オーバーレイの不透明度 | 画像の上に重ねる暗幕の濃さ | 0%=透明 / 数値を上げると画像が暗くなる |
| 見出し | 大きく表示されるメインテキスト | ひろがれ未来 |
| 小見出し | 見出し下のサブテキスト | 子どもの可能性を広げるプログラミングレッスン |
| ボタン ラベル | ボタンに表示するテキスト | 無料で体験に申込む（空欄でボタン非表示） |
| ボタン リンク | ボタンをクリックした際の遷移先 | 予約ページのURL |
💡 スライドを複数枚にする場合：
左パネルの「スライドを追加」をクリックすると、スライドを追加できます。
複数枚にすると自動でスライドショーとして切り替わります。
③ スライド要素の配置（上下左右）を調整する
見出し・小見出し・ボタンをまとめた「テキストブロック」は、画像内の9箇所（上下左右＋中央）から配置位置を選べます。
レイアウトの「コンテンツの位置」から設定します。
1
スライド編集パネルを下にスクロールし「レイアウト」セクションを開く
「コンテナー」のオン/オフ、「コンテンツの位置」のドロップダウンが表示されます。
2
「コンテンツの位置」をクリックして配置場所を選ぶ
上段・中段・下段 × 左・中央・右 の組み合わせ、計9パターンから選択できます。
3
プレビューで配置を確認し「保存」する ✓
選択するとすぐ右側のプレビューに反映されます。
▲ 「レイアウト」セクション。「コンテンツの位置」が現在「中央」に設定されている状態です。クリックすると選択肢が開きます。
▲ 配置オプションの一覧。「左上」「上部中央」「右上」「中央部左側」「中央」「中央部右側」「左下」「下部中央」「右下」の9種類から選べます。
▲ 「左上」を選択した結果。テキストブロックが画像の左上に移動しました。配色（テキストの色味）パターンも下に表示されています。
▲ ヘッダー込みの全体プレビュー。実際の公開ページでの見え方に近い形で確認できます。
④ モバイル表示で確認する
配置を変更したら、スマートフォンでの見え方も必ず確認してください。PCでちょうど良く見えても、スマホでは文字が画像からはみ出ることがあります。
▲ 画面右上のスマートフォンアイコンが「モバイルビューを表示する」ボタンです。クリックでモバイル表示に切り替わります。
▲ モバイルビューでのプレビュー。同じボタンをクリックすると「デスクトップビューを表示する」に切り替わり、元に戻せます。
⚠️ モバイル確認のポイント：
「コンテンツの位置」をPC側で「左上」などコーナーに寄せると、モバイル表示では文字が画像からはみ出ることがあります。
必ずモバイルビューに切り替えて、文字が読みやすい位置になっているか確認してください。
担当者が増えたとき・交代するときは、Shopifyの「設定」からスタッフアカウントを追加・管理します。
① 設定画面を開く
1
管理画面の左下にある「設定」（歯車アイコン）をクリックする
左メニューの一番下にあります。
2
左メニューから「ユーザー」をクリックする
組織全体のユーザー一覧画面が開きます。
▲ 左メニュー最下部の「設定」（歯車アイコン）をクリックします。
▲ 設定画面（組織の一般設定）。左メニューから「ユーザー」をクリックします。
② 新しいユーザーを追加する
1
ユーザー一覧画面で「ユーザーを追加する」をクリックする
2
メールアドレスを入力し「追加」をクリックする
入力したメールアドレス宛に招待メールが送信されます。
3
役割（権限）を割り当てる
「役割」欄の「割り当て」から、そのユーザーがどこまで操作できるかを設定します。
▲ ユーザー一覧画面。各ユーザーのステータス（有効・保留）と役割が確認できます。右上の「ユーザーを追加する」から新規追加します。
▲ 「ユーザーを追加する」ボタン。クリックすると追加画面に進みます。
▲ ユーザー追加フォーム。「管理ユーザー」（通常の管理画面を使う担当者向け）と「POSユーザー」（店頭レジ専用）の選択、メールアドレス入力、役割の割り当てを行います。
⚠️ 「管理ユーザー」と「POSユーザー」の使い分けについて：
現時点でCCKでは明確な使い分けルールを定めていません。
基本的にはサイト編集・コンテンツ更新を行う担当者は「管理ユーザー」を選択してください。
POS（店頭レジ）機能を使う予定がある場合は別途本部へご相談ください。
③ プランごとの追加可能ユーザー数
管理画面に追加できるユーザー数は、Shopifyの契約プランによって上限が決まっています。
（出典：Shopify公式ヘルプ）
▲ Shopify公式ヘルプより。プランごとの管理画面の最大ユーザーアカウント数です。
| 料金プラン | 最大ユーザーアカウント数 |
|---|
| Pause and Build | 1人 |
| Starter | 0人 |
| Basic | 0人 |
| Grow | 5人 |
| Advanced | 15人 |
| Shopify Plus | 無制限 |
⚠️ 上限に達した場合：
現在のプランの上限人数に達すると新しいユーザーを追加できません。
担当者を増やしたい場合はプランのアップグレードが必要になることがあります。本部へご相談ください。
④ コラボレーターアカウントについて（参考）
「コラボレーターアカウント」という、外部のShopifyパートナー向けの特別なアクセス権限の仕組みもあります。
（出典：Shopify公式ヘルプ）
▲ コラボレーターアカウントは、Shopifyパートナーがストアにアクセスする際に使う特別な仕組みで、通常のユーザー数の上限にはカウントされません。
📝 補足：
コラボレーターアカウントの招待・設定方法は本ガイドでは扱いません。
開発会社やパートナーにストアアクセスを依頼する場合は、本部にご相談ください。
📝 このセクションは現在作成中です。
「①新規プロジェクトの作成」まで掲載しています。続き（Calendar API有効化・サービスアカウント作成・カレンダー共有設定）は近日追加予定です。
新しいFC店舗を開設する際は、Googleカレンダー連携のためにGCP（Google Cloud Platform）側でプロジェクトを作成する必要があります。
この作業は通常、本部のエンジニアが対応しますが、流れを把握しておくと安心です。
① 新規プロジェクトの作成
1
GCPコンソール（console.cloud.google.com）にログインする
カレンダー連携するGoogleアカウントでログインします。
2
画面上部のプロジェクト選択ツールをクリックする
現在のプロジェクト名（例：My First Project）の部分をクリックします。
3
「新しいプロジェクト」をクリックし、プロジェクト名を入力する
FC店舗名がわかる名前にします（例：cck-fc-shibuya-calendar）。
4
「作成」をクリックする ✓
数秒〜数十秒でプロジェクトが作成されます。
▲ GCPコンソールのトップ画面。現在選択中のプロジェクト名が画面上部に表示されています。
▲ プロジェクト名の右の矢印部分をクリックすると「プロジェクト選択ツールを開く」というツールチップが表示されます。
▲ 「リソースを選択」画面。既存プロジェクトの一覧が表示されます。新規作成は右上の「新しいプロジェクト」から行います。
▲ 新規プロジェクト作成画面。プロジェクト名（例：cck-fc-shibuya-calendar）、組織、親リソースを設定して「作成」をクリックします。
▲ プロジェクトが作成されると、右上の通知アイコンに完了通知が表示されます。「プロジェクトを選択」をクリックすると、作成したプロジェクトに切り替わります。
📌 次回追加予定の内容：
② Google Calendar APIの有効化 ③ サービスアカウントの作成・JSONキーのダウンロード ④ 予約カレンダーへのアクセス権限付与
次のガイドで解説する内容
以下の操作方法は、追加ガイドで順次公開します。
GCPセットアップの続き
Calendar API有効化・サービスアカウント作成・カレンダー共有設定
Cloudflare Workerの設定
FCごとのWorker作成・環境変数（Secret）設定方法