管理画面の基本

ダッシュボード（ページの一覧）

ログインすると最初に開く画面です。ここでサイトの全ページを一覧で見たり、編集・公開・追加ができます。

ページを公開する・非公開にする

各ページの右側のボタンで切り替えます。

• 緑色の「公開」ボタン … いま公開中です。押すと非公開になります。
• オレンジ色の「非公開」ボタン … いま非公開です。押すと公開に戻ります。

パーツを1つだけ公開する・非公開にする

ページ全体ではなく、ページの中のパーツを1つだけ隠すこともできます。ページ編集画面で、各パーツの見出しの右にある緑色の「公開」／オレンジ色の「非公開」ボタンを押すと切り替わります（ダッシュボードのページ用ボタンと同じ操作です）。

• 削除ではないので、入力した文章や画像はそのまま残ります。もう一度「公開」に戻せば、そのまま元どおり表示されます。
• 「アルバイト募集のバナーを今月だけ引っ込めたい」「キャンペーンが終わったので隠したい」「臨時休業のお知らせを、必要な時だけ出したい」といった使い方ができます。
• ページと同じで、ログイン中のあなたには表示されたままです。

新しいページを追加する

1. 「＋新しいページを追加」を押します。
2. 「ページ名」に名前を入れます（例：会社概要）。
3. 「スラッグ」に半角英数字を入れます（例：company）。これがそのままページのアドレスになります。
4. 「追加」を押すと、そのページの編集画面が開きます。

ページを削除する

「削除」ボタンを押すと確認が出ます。OKすると削除されます。 ※トップページは削除できません（常に公開されます）。

ページ編集（ページの中身をつくる）

ダッシュボードでページ名をクリックすると、このページの編集画面が開きます。ここでページのタイトルや中身（パーツ）を作ります。

ページの基本情報

上のほうにある「ページ情報」を開くと、次の3つを設定できます。

• ページ名 … ページの名前です。
• 説明（meta description）… 検索結果に出る説明文です。
• 公開状態 … 「公開」か「非公開」を選べます。非公開にすると、お客様には見えなくなります。

入れ終わったら「ページ情報を保存」を押します。 ※メニューに出すかどうかは、別の「メニュー（ナビ）」画面で設定します。

パーツ（部品）で中身をつくる

ページの中身は「パーツ」というブロックを積み重ねて作ります。見出し＋本文＋画像の「基本セット」、画像つきの「カラムリスト」、料金などの「表」、「FAQ」、「ボタン」などがあります。
パーツ一覧を見る。

• パーツの名前をクリックすると、その編集欄が開きます。
• 「↑」「↓」で並び順を変えられます。
• 「削除」で消せます（確認が出ます）。

どのパーツにも、上のほうに共通の設定があります。

• セクションの見出し… 常に表示される入力欄です。ここに入れた文字がそのセクションの見出しになります。空欄にすると見出しは出ません。

• その下の「セクションの背景色・見出しスタイル・説明文・ID」ボタンは折りたたみです。クリックで開くと、次の設定が出ます：
  • 背景色（なし／薄い色／標準色／メイン／アクセント）
  • 見出しタイプ（大見出し=h2／小見出し=h3。最初は「大見出し」）と、見出しの寄せ（左／中央）
  • 装飾テキスト（見出しのそばに出る小さな英字など）
  • 本文（「太字」「リンク」ボタンつき。文字を選んでからボタンを押します）と、本文の寄せ
  • アンカーID（ページ内リンクの飛び先・任意）

※空欄のところはサイトに出ません。使う項目だけ入れればOKです。

パーツの入力欄の使い方（よく出るもの）

パーツの種類によって入力欄は変わりますが、多くのパーツでよく出てくる欄の使い方は共通です。

• アンカーID（ページ内リンクの飛び先・任意）… 各パーツの「セクションの背景色・見出しスタイル・説明文・ID」を開いた中にある欄です。英数字・ハイフンで名前（例: contact）を付けると、そのパーツが「飛び先」になり、メニューの「ページ内リンク」やボタンから「#この名前」でジャンプできます。1ページに何セクションも並べるLP（ランディングページ）で便利です。使わなければ空欄でOK。
• 画像… 点線の枠に写真をドラッグするか「ファイルを選択」で入れます。動画（MP4 / WebM）を入れられる欄もあります。
  写真が入っている欄には「この画像を削除する」のチェックが出ます。チェックして保存すると、その写真だけを消せます（パーツ自体は残ります。差し替えたいときは新しい写真を選べばOK）。
• 繰り返し項目（カラムリストやFAQのように、同じ形をいくつも並べるもの）… 欄の下の「＋ ○○を追加」（例「＋ 項目を追加」）で増やせます。各行は見出しをクリックで開閉、「↑」「↓」で並べ替え、「削除」で消せます。
• リンク（ボタンの飛び先など）… プルダウンから自分のサイトのページを選べば、そのページにリンクします。外部サイトやページ内の位置に飛ばしたいときは、プルダウンで「サイト内ページ以外（URLを直接手入力）」を選び、下の欄に URL（https://… ）や「#section」を入れます。
• アイコン… 「アイコンを選ぶ」を押して一覧から選びます（検索もできます）。消すときは「クリア」。
• 選択肢（スタイルなど）… プルダウンから選びます。

大事なポイント：保存はパーツごと

パーツを直したら、そのパーツの下にある「このパーツを保存」を押してください。パーツごとに保存ボタンがあります。押し忘れると変更が反映されません。

パーツを追加する

1. 下の「＋パーツを追加」で「カテゴリ」→「パーツ」を選び、「追加」を押します（コンパクトな操作はそのまま）。
2. 名前だけだと分かりにくいときは、隣の「サムネから選ぶ」ボタンを押します。パーツの見本画像（サムネ）の一覧が、画面に重なって（モーダルで）開きます。
3. 一覧の上の検索欄にキーワード（例：カラム、料金、FAQ）を入れると、名前や説明でしぼり込めます。カテゴリのボタンでもしぼり込めます（「すべて」で解除）。
4. 使いたいパーツのサムネをクリックすると、その場でページに加わります（クリック＝追加）。閉じたいときは×・背景・Escキーでも閉じられます。
5. 開いて中身を入れ、「このパーツを保存」を押します。

どのカテゴリにどのパーツが入っているか（Free版）：

• 「基本セット」… 基本セット（見出し＋本文＋画像）／ボタン（単体）
• 「リスト」… カラムリスト（画像・見出し・本文）／お知らせ一覧（最新記事）
• 「表・料金」… 表（項目と内容）
• 「FAQ・開閉」… FAQ（クリックで開閉）
• 「埋め込み」… 埋め込み（YouTube・地図・iframe）
• 「お問い合わせ」… お問い合わせフォーム

※製品版にすると、パーツの種類がぐっと増えます。どのカテゴリにどのパーツがあるかは、パーツ一覧ページでご確認ください。

画像のワンポイント

• 使える画像：JPG / PNG / GIF / WebP / ICO。動画：MP4 / WebM。
• iPhoneのHEIC写真はそのままでは使えません。JPGにして入れてください。
• 大きな写真は自動で小さく軽くしてくれます。

デザイン（枠・色）

サイトの「枠（フレーム）」や色を変える画面です。

フレーム（サイトの枠）を変える

「フレーム」は、サイト全体の見た目（枠）です。フレームを切り替えても、ページの中身や写真はそのまま残ります。安心して見た目だけ変えられます。

• 「トップページビュー↗」を押すと、公開サイトを変えずに見た目を確認できます（あなたにだけ見えます）。
• 気に入ったら「このフレームに切り替える」を押すと、サイトに反映されます。

※無料版にも、着せ替えを試せるようフレームを複数収録しています（静止画・スライドショー・動画のタイプ違い）。製品版にすると、さらにたくさんのフレームから選べます。

「他のフレームに切り替える」ボタンを押すと使えるフレーム一覧が出ます。（フレーム数が少ない場合は全表示されます）

サイトの色を変える（テーマカラー）

5つの色を変えられます。メインカラー、アクセントカラー、薄い色、背景色、文字色。ここの「文字色」はサイト全体の基本の文字色です。トップの大きな画像に重なる文字の色は、別の画面（「トップの大きな画像」）で設定します。

• 変更した色だけが保存されます。触っていない色は、そのフレーム本来の色がそのまま使われます。
• そのためフレームを切り替えると、自分で変えた色はそのまま引き継がれ、変えていない色は新しいフレームの色に変わります。
• 色は右のカラーコード欄に直接入力・貼り付けできます（例 #e91e63）。左の四角を押すとパレットからも選べます。
• 色の上に乗る文字の色は、各色の右の「文字色」で「自動 / 白 / 濃色」から選べます。ふだんは「自動」のままでOKです。自動で選ばれた色が見づらいと感じたときだけ、白か濃色を選んでください。
• 変えたら「テーマカラーを保存」を押します。
• 元に戻したいときは「フレーム本来の状態に戻す）」を押します。

上級者向け：もっと細かく指定したいとき
「このフレームのCSSを直接編集する（上級者向け）」を開いてください。いま使っているフレームの色設定（theme.css）がそのまま表示され、書き換えられます。枠線の色・フォント・余白など、パレットに無い項目もここで変えられます。

• 編集した内容はそのフレームを使っているときだけ反映されます。他のフレームには影響しません。別のフレームに切り替えて戻ってくれば、編集した内容はそのまま残っています。
• 上のパレットで設定した色の方が優先されます。
• 「このCSSの編集を取り消す」で、いつでも元のファイルの内容に戻せます。
• ロゴの大きさもここで細かく決められます。表示されているCSSの中に --logo-width（ロゴ画像の幅）と --logo-font-size（ロゴ画像を入れていないときに出るサイト名の文字の大きさ）があります。--logo-width: 230px; のように書き換えると、1px単位で決められます。フレームによっては、トップだけ大きく出るロゴ用に --logo-hero-width もあります。

メニューが開閉式に変わる幅

画面の幅がせまくなると、メニューが「≡（ハンバーガー）」の開閉式に変わります。その切り替わる幅をここで選べます。ふだんは「フレーム標準」のままでOKです。

• 9999px（常にハンバーガー）を選ぶと、広い画面でも最初からずっと開閉式メニューになります。対応していないフレームもあります。
• この設定はフレームごとに最適な値があるため、フレームを切り替えると、新しいフレームの標準の幅が自動で読み込まれます（手動で変えていても、別のフレームに切り替えると一旦リセットされます）。

トップの大きな画像

トップページの一番上に出る大きな画像（メインビジュアル）と、その上の文字・ボタンを設定します。

※フレームによってこの画面の形が変わります。無料版にも「写真1枚（静止画）」「スライドショー」「動画」の各タイプのフレームが入っているので、切り替えて試せます。フレームのタイプによって入力欄が変わります（下のそれぞれの項目を参照）。

写真を入れる

• 「画像（パソコン用）」… パソコンで出る写真です。枠にドラッグするか「ファイルを選択」で入れます。
• 「スマホ用画像（任意）」… スマホ用に別の写真を使いたいときに入れます。入れなければパソコン用と同じ写真が出ます。（スマホ用ブロックがないフレームもあります）

文字とボタン

• キャッチコピー（大きな文字）とサブテキスト（小さな文字）を入れられます。空欄なら出ません。
• 文字の位置（左・中央・右）や、文字色（白・濃い）も選べます。写真と重なって読みにくいときに使ってください。
• この文字色は写真に重なっている文字に効きます。一部のフレームだけ、スマホなど画面が小さいときに文字が写真の外（下や上）に出るレイアウトになっていて、その場合は外に出ているあいだはフレーム本来の文字色に戻ります（白い背景に白い文字で読めなくなるのを防ぐためです）。パソコンでは白文字、スマホでは元の色、という見え方になりますが、不具合ではありません。そうならないフレームでは、選んだ色がどの画面幅でもそのまま出ます。
• 文字サイズ（大・中・小）… 対応しているフレームでだけ出ます。文字が写真からはみ出してしまうときは「小」にすると収まりやすいです（この欄が出ないフレームは、文字サイズが固定の設計です）。
• ボタンは2つまで。文字・リンク先・スタイル（塗りつぶし／枠線）を決められます。

入れ終わったら、一番下の「保存」を押してください。

スライドショータイプのとき

写真を順番に切り替えて見せるフレームのときは、「スライド」の枠が複数並びます。

• スライドは上から順に表示されます。各スライドに「画像（パソコン用）」「スマホ用画像（任意）」を入れます。
• 各スライドの右上の ↑ / ↓ で順番を変え、「削除」でそのスライドを消せます。一番下の 「＋ スライドを追加」で枠を増やせます。
• 文字の入れ方はフレームで2通りです。①各スライドにそれぞれ文字を入れられるタイプ、②全スライド共通で1つだけ文字を出すタイプ（この場合は1枚目だけ文字・ボタンを入力でき、2枚目以降は写真だけ）。画面の上の案内文に「各スライドにテキストを入れられます」または「全スライドに共通の1メッセージ」と出るので、それで見分けられます。
• ボタンがないタイプのフレームや、ボタンも文字もないタイプのフレームもあります。

動画タイプのとき

トップを動画にするフレームのときは、写真の代わりに動画をアップします。

• 「動画ファイル（パソコン用・mp4）」に動画を入れます（形式は mp4）。
• 「スマホ用動画（任意・mp4）」に縦長や軽い動画を入れると、スマホではそちらが使われます。入れなければパソコン用の動画が使われます。
• 入れ替えたいときは新しい動画をアップ、消したいときは「動画を削除する」「スマホ用動画を削除する」にチェックを入れて保存します。
• 動画を入れる前は、フレームの見本動画がうっすら表示されています（自分の動画をアップすると差し替わります）。
• 動画の上にも、写真のときと同じようにキャッチコピー・サブテキスト・ボタンを乗せられます。
• ボタンがないタイプのフレームや、ボタンも文字もないタイプのフレームもあります。

メニュー（ナビ）

サイトの上のメニュー（ナビ）に並ぶリンクを編集する画面です。

項目を足す・並べ替える・消す

• リストの一番下にある「＋メニュー項目を追加」で新しい項目を足せます。
• 各項目の「↑」「↓」で並び順を変えられます。
• 「削除」で消せます（ページは消えません。メニューから外れるだけです）。

項目の中身

• メニュー名 … 表示される文字です。
• リンクの種類 … サイト内のページ／外部URL／ページ内リンク／見出し（リンクなし）から選べます。
  ページ内リンクは、各パーツの「アンカーID」で付けた飛び先がプルダウンに出るので、そこから選びます（先にパーツ側でアンカーIDを設定しておいてください）。
  見出し（リンクなし）は、サイドメニュー型（2カラム）のフレームのときだけ選べます（横並びメニューのフレームでは出ません）。
• 親メニュー … 別の項目を「親」に選ぶと、その下にぶら下がるドロップダウン（子メニュー）になります。
• パソコン／スマホそれぞれに表示するかを選べます。
• 「ボタン風に表示」にすると、「お問い合わせ」などを目立つボタンにできます。

フッター（ページの下部）

ページの一番下（フッター）のデザインと、リンク集を設定します。

デザインを選ぶ

用意されたフッターのデザインから選べます（無料版は3種類）。情報量の多いサイト向け、シンプル向け、メニューが多いサイト向け、などがあります。

フッターメニュー（リンク集）

リンクを「グループ」ごとに分けて入れます。複数列のデザインでは、グループがそのまま列になります。

• 各リンクは「表示文字」（出る文字）と「リンク先」を入れます。リンク先は「▼ ページから選んで自動入力」から選べます。メニュー管理と同じで、ページ名とスラッグが一覧で出るので、選ぶだけでリンク先が入ります（「表示文字」が空なら、ページ名も自動で入ります）。スラッグを自分で調べる必要はありません。
• 外部サイトへのリンクや、ページ内の飛び先（#で始まるアンカー）は、下の入力欄にURL・アンカーを直接入力します。
• いらない行は「この行を削除」で消せます。

使う分だけ入れてください。入れ終わったら「保存」を押します。

サイト基本設定

サイト全体で共通の情報を設定する画面です。

基本

• サイト名、コピーライト表記、電話番号、住所を入れられます。
• ロゴ画像（ヘッダー用）… 入れない場合はサイト名の文字が出ます。
• ロゴの大きさ… ロゴ画像は一枚ずつ縦横の比率が違うので、フレーム本来の大きさだと大きすぎたり小さすぎたりすることがあります。そんなときに標準／かなり小さめ／小さめ／大きめ／かなり大きめから選んでください。「標準」はそのフレームが決めた大きさです。ロゴ画像を入れていない場合は、代わりに出るサイト名の文字の大きさが変わります。スマホなど小さい画面では、はみ出さないよう自動で収まりますので、「大きめ」を選んでも安心です。
• メイン画像の上に重ねるロゴ（任意）… トップの写真の上にロゴが重なるフレームで、通常のロゴだと写真に重なって見えづらいときに使います（写真に合う色のロゴを設定）。スクロール後や他ページでは通常のヘッダーロゴが使われます。入れなければ通常のヘッダーロゴを使います。
• フッター用ロゴ … フッターが濃い色でロゴが見えにくいときに使います。

アイコン・SNSシェア

• ファビコン … ブラウザのタブに出る小さなアイコンです（正方形のPNG、512×512pxくらいがおすすめ）。
• SNSシェア用の画像（OGP画像）… LINEやX、Facebookで共有したときに出るサムネ画像です（横長 1200×630pxくらい）。

SNS

X、Instagram、Facebook、LINE、YouTube、TikTok、Threads、LinkedIn、Pinterest のURLを入れられます。入れたものだけ、フッターなどにアイコンが出ます。

入れ終わったら「保存」を押します。

アカウント

管理画面にログインするための「メールアドレス」と「パスワード」を変える画面です。

メールアドレス（ログインID）の変更

このメールアドレスがログインIDです。変えると、次回から新しいアドレスでログインします。

• 打ち間違えるとログインできなくなるので、よく確認してください。
• 本人確認のため、今のパスワードの入力が必要です。

パスワードの変更

今のパスワードと、新しいパスワード（8文字以上）を入れて変更します。

注意：メールアドレスを変えたあとは、必ず新しいアドレスでログインしてください。

アクセス解析・外部タグ

Googleアナリティクスなど、外部サービスからもらった「貼り付け用のコード」を貼る画面です。

• 「<head> に追加するコード」… GA4やSearch Consoleの確認タグなどを貼ります。
• 「</body> の直前に追加するコード」… チャットの埋め込みなどを貼ります。

貼ったコードはサイトの全ページに反映されます。入れ終わったら「保存」を押します。

注意：信頼できるコードだけ貼ってください（そのままサイトで動きます）。使わないときは空のままでOKです。

未使用ファイルの掃除

使われなくなった画像・動画を片付ける画面です。気づいたときに掃除すればOKです。

• ページやパーツを削除したときに、どこにも使われなくなった画像などがここに出ます。
• 今使っている画像や、CMSの見本画像は出てこないので、ここにあるものは消して大丈夫です。
• 消したいものにチェックを入れて、削除ボタンを押します。

未使用のファイルが無いときは「未使用のファイルはありません」と出ます（↓）。