フリーページの作り方 操作マニュアル

対象機能: フリーページ（自由レイアウトの本文編集） ／ よく使うパターンを使った作り方と、文字・色・表の整えかた

1. フリーページとは

フリーページは、決まった型のない「自由に作れるページ」です。イベントの告知、施設の紹介、参加のしかたの説明、よくある質問など、ほかのメニュー（お知らせ・ラリー・くじなど）に当てはまらない内容は、すべてフリーページで作ります。

フリーページでできること

ページの見た目は、サイト全体のデザイン（テーマ）に合わせて自動的に整います。文字の大きさや色を細かく指定しなくても、そのまま入力するだけで読みやすいページになります。

2. フリーページ一覧

トップ > サイトを整える > フリーページ登録

作成したページの一覧です。ここから新しいページを追加したり、既存のページを編集・削除したりします。

フリーページ一覧画面のスクリーンショット
フリーページ一覧。1件のページが登録されている状態です。

この画面でできること

各項目の説明

項目説明
画像ページに設定したページ画像（アイキャッチ）です。設定していない場合は空欄になります。
名称管理用のページ名です。一覧で見分けるための名前で、来訪者に見せる見出しは本文の中に書きます。
下書き公開している内容とは別に、下書きが保存されている場合に印が付きます。
ステータス「有効」は公開中、「無効」は非公開です。

3. ページの基本情報を入れる

トップ > サイトを整える > フリーページ登録 > 追加

画面の左側が本文（ブロックを積む場所）、右側がページの基本情報です。先に右側のページ名とサイト識別子を埋めてから、本文に取りかかると迷いません。

フリーページ作成画面のスクリーンショット
フリーページの作成画面。左側が本文、右側が基本情報です。本文がまだ空のため、中央に［＋］だけが表示されています。

各項目の説明

項目説明
ページ名（必須）管理用の名前です。一覧に表示されます。
サイト識別子（必須）ページのURLの一部になる文字です。半角英数字で50文字以内。あとから変えるとそれまでに配ったURLやQRコードが変わってしまうため、最初に決めてください。
ページ画像ページのアイキャッチ画像です（推奨600×600）。
ページの説明ページの内容を短くまとめた文です（120文字以内推奨、250文字以内）。検索結果やSNSで表示されることがあります。
OG画像SNSでURLを共有したときに表示される画像です（推奨1200×630）。
公開状態「公開」にすると来訪者から見えるようになります。準備中は「非公開」にしておきます。

右上の［プロパティ表示切り替え］を押すと、右側の基本情報を隠して本文編集の領域を広く使えます。

4. ブロックという考え方

トップ > サイトを整える > フリーページ登録 > 追加

フリーページの本文は「ブロック」を上から積み重ねて作ります。1つのブロックが横1本の帯にあたり、その中を1〜4列に分けられます。［＋］を押すとブロックを足せます。

ブロックの追加ダイアログ（白紙から）のスクリーンショット
［＋］を押すと開く「ブロックの追加」。「白紙から」を選ぶと、配置する列数（1〜4列）を選んで空のブロックを足せます。

覚えておくとよいこと

横に並べたい要素は「列」で分けます。列を使わずに横並びを作ろうとすると、スマートフォンで崩れて読みにくくなります。

5. よく使うパターンから作る

トップ > サイトを整える > フリーページ登録 > 追加 > ブロックの追加

白紙から作らなくても、「よく使うパターンから」を選べば、体裁の整った中身入りのブロックがそのまま入ります。文言や色は入れたあとに自由に書き換えられます。ページ作りは、まずパターンを積んでから文章を差し替える手順がいちばん早いです。

よく使うパターンの選択肢が並んだダイアログのスクリーンショット
「よく使うパターンから」を選ぶと、7種類のパターンが説明付きで並びます。色を使うパターンを選ぶと、下に色を選ぶ欄が出ます（初期値はそのサイトのテーマ色です）。

よくある操作手順: パターンを1つ入れる

  1. 本文の［＋］を押す（入れたい位置の［＋］を押します）
  2. 「よく使うパターンから」を選ぶ
  3. 入れたいパターンを1つ選ぶ
  4. 色の欄が出たら、使いたい色を選ぶ（サイトのテーマ色でよければそのままで結構です）
  5. ［確定］を押す
  6. 入ったブロックの文字を、自分の内容に書き換える

文字の色は、選んだ色の明るさに合わせて自動で決まります（濃い色なら白文字、明るい色なら黒に近い文字）。ボタンで明るい色を選んだときは、輪郭が分かるように枠線も自動で付きます。読みにくい組み合わせにならないので、色は1つ選ぶだけで大丈夫です。

3列カードのパターンを挿入した直後の編集画面のスクリーンショット
「3列カード」を入れた直後。3つの列に、見出しバーと本文がセットで入っています。「その1」などの文字をそのまま書き換えて使います。

パターンで入るのは、あくまで最初の中身です。入れたあとは通常の本文と同じように、文字を消す・行を足す・色を変えるといった編集ができます。要らない行はそのまま削除してかまいません。

6. パターンの使いどころ

どのパターンを選べばよいか迷ったときの目安です。ページの上から「全幅の帯 → 見出し＋リード文 → 3列カードや本文パネル → ボタン風リンク」の順に積むと、案内ページとして自然な流れになります。

各パターンの説明

パターン使いどころ
見出し＋リード文セクションの先頭に置く、中央寄せの見出しと説明文。話題が変わるところに入れます。
見出しバー＋本文パネル濃い色の見出しバーと、薄い地色の本文が一体になった1枚のパネル。手順の説明や、項目ごとの案内に向きます。
3列カード上のパネルを3つ横に並べたもの。「3ステップ」「3つの特徴」のように、同じ形のものを並べるときに使います。スマートフォンでは自動的に縦に積まれます。
お願い・注意ボックス「ご注意」のラベル付きで、注意事項を本文から浮かせて見せます。
記入のヒントクリーム色の地で、記入例や補足を本文と区別して見せます。テンプレートとして人に渡すページで「ここを書き換えてください」と伝えるのにも使えます。
全幅の帯（ヒーロー）画面の横幅いっぱいに広がる濃い色の帯。ページの一番上に置いて、タイトルを大きく見せます。
ボタン風リンク中央に置く、ボタンのように見えるリンク。申込ページや別のページへ誘導するときに使います。リンク先は、文字を選んでリンクボタン（鎖のアイコン）から設定します。

色を使うパターン（見出しバー＋本文パネル・3列カード・お願い・注意ボックス・記入のヒント・全幅の帯・ボタン風リンク）は、挿入するときに色を選べます。初期値はそのサイトのテーマ色なので、通常はそのまま［確定］で構いません。

あとから色を変えたいとき

挿入したあとに色を変えたい場合は、置いた場所によって方法が違います。

変えたいもの方法
全幅の帯の色ブロック右上の歯車から「背景色」を変えます（→ 7. ブロックの設定）。
見出しバー・ラベルの色色の付いた箱の中をクリックして「セルのプロパティ」から背景色を変えます（→ 9. 表のセルの色を変える）。
文字の色文字を選んで、ツールバーの「文字色」で変えます。
ボタンの地の色ツールバーの「背景色」では文字の後ろにしか色が付かず、ボタンの地色は変わりません。いちばん簡単なのは、そのブロックを削除して、もう一度パターンから色を選び直す方法です。

どうしてもボタンだけを直接直したい場合は、ツールバー右端の「その他」（縦3つの点）から「ソース」を開き、background-color の色コードを書き換えます。このときは対になっている color（文字色）も、読める色に手で直してください。

7. ブロックの設定（余白・背景色・表示幅）

トップ > サイトを整える > フリーページ登録 > 追加 > ブロック右上の歯車

ブロック右上の歯車を押すと「ブロックの設定」が開きます。そのブロック全体の色・幅・余白をここで決めます。

ブロックの設定ダイアログのスクリーンショット
ブロックの設定。背景色・文字色・表示幅・余白をこの1か所で調整します。

各項目の説明

項目説明
背景色ブロック全体の背景色です。横幅いっぱいの色帯を作るときはここで指定します。
文字色ブロック全体の文字色です。濃い背景色にしたときは、あわせて明るい文字色にします。
表示幅本文を置く幅です。「標準」は左右に余白がある通常の幅、「全幅（余白なし）」は画面いっぱいに広がります。全幅の帯を作るときは「全幅」を選びます。
列の余白2列以上のときの、列と列のあいだの間隔です。
内側の余白（上下左右）ブロックの枠と中身のあいだの余白です。0が余白なし、5がいちばん広い余白です。
外側の余白（上下左右）となりのブロックとのあいだの余白です。

設定はすぐに画面に反映されます。ダイアログを閉じても、まだ保存はされていません。最後に［保存］を押してください。

8. 文字を装飾する

本文の上に並んでいるボタンで、文字の見た目を変えられます。パターンで入れた中身も、この方法で自由に整えられます。

よく使う装飾

やりたいこと使うボタン
見出しにする左端の「見出しを選択」から「見出し2」「見出し3」を選びます。
文字を大きくする文字サイズのボタン（AIのようなアイコン）で選びます。
文字に色を付けるAのアイコン（文字色）で選びます。
文字にラベルのような色を敷く塗りつぶしのAのアイコン（文字の背景色）で選びます。「ご注意」のようなラベルはこれで作ります。前後に空白を入れると余裕が出ます。
中央に寄せる行揃えのボタンで「中央揃え」を選びます。
太字・箇条書きB（太字）、箇条書きのボタンを使います。
リンクを張る文字を選んでから、鎖のアイコン（リンク）でURLを入れます。
画像を入れる画像のアイコンから、パソコンの画像を選んで挿入します。

白い文字は、濃い色の背景の上でだけ使ってください。白い背景に白い文字を置くと、編集画面でも文字が見えなくなり、あとから直せなくなります。

9. 表のセルの色を変える

トップ > サイトを整える > フリーページ登録 > 編集 > 本文のパネル内をクリック

「見出しバー＋本文パネル」「3列カード」「お願い・注意ボックス」「記入のヒント」の色付きの箱は、表（テーブル）で作られています。色を変えたいときは、その箱の中をクリックして「セルのプロパティ」を開きます。

セルのプロパティダイアログのスクリーンショット
色付きの箱の中をクリックすると小さなボタンの列が出ます。その中の「セルのプロパティ」を押すと、背景色やパディング（内側の余白）を変えられます。

よくある操作手順: 見出しバーの色をサイトの色に合わせる

  1. 色を変えたい箱（見出しバーなど）の中をクリックする
  2. 近くに出てくるボタンの列から「セルのプロパティ」を押す
  3. 「背景」の色欄に色を入れる（＃から始まる6桁の色コード、または色見本から選ぶ）
  4. ［保存］を押してダイアログを閉じる
  5. 最後に画面右上の［保存］でページを保存する

濃い色の見出しバーの色を変えたときは、その上に乗っている白い文字が読めるかどうかを必ず確認してください。薄い色に変えた場合は、文字色も濃い色に変える必要があります。

「罫線」（枠線）は、編集画面では線が見えても公開ページには出ません。区切りを付けたいときは、枠線ではなく背景色を薄く敷いてください。

10. 下書き保存・プレビュー・公開

トップ > サイトを整える > フリーページ登録 > 編集

画面右上に［下書き保存］［プレビュー］［保存］が並んでいます。作りかけの内容を公開せずに残したいときは［下書き保存］、公開してよい状態になったら［保存］を押します。

保存済みフリーページの編集画面のスクリーンショット
保存済みページの編集画面。パターンで作った4つのブロックが並んでいます。右上に［下書き保存］［プレビュー］［保存］が表示されます。

3つのボタンの違い

ボタン動き
下書き保存公開中の内容を変えずに、編集中の内容だけを保存します。公開ページの見え方は変わりません。一覧の「下書き」に印が付きます。
プレビュー編集中（下書きを含む）の内容が、来訪者にどう見えるかを別のタブで開いて確認します。
保存編集中の内容を公開内容として保存します。公開状態が「公開」なら、この時点から来訪者に見えます。

ブロックの設定を変えたり文字を書き換えただけでは保存されていません。ページを離れる前に［保存］または［下書き保存］を押してください。

11. 公開ページでの見え方

トップ > サイトを整える > フリーページ登録 > 編集 > プレビュー

編集画面には編集用のボタンや枠が出ていますが、来訪者にはそれらは見えません。プレビューで実際の見え方を確認します。

フリーページの公開ページのスクリーンショット
パターンだけで組んだページの公開時の見え方。上から、全幅の帯・3列カード・記入のヒント・ボタン風リンク（濃色）です。

確認したいところ

12. つまずいたときは

よくあるつまずきと、その対処です。

症状と対処

症状対処
変更した内容が公開ページに出ない［下書き保存］だけを押していないか確認してください。公開ページに反映するには［保存］が必要です。
文字が見えない・消えたように見える白い背景に白い文字を置いていないか確認してください。文字を選択して文字色を濃い色に変えると戻ります。
枠線が公開ページに出ない表のセルの罫線は公開ページに出ません。背景色を薄く敷いて区切りを付けてください。
スマートフォンで横並びが崩れる表を横に長くしていないか確認してください。横並びはブロックの「列数」で作ると、スマートフォンでは自動的に縦積みになります。
パターンを入れたが要らない行があるその行を選んで削除してかまいません。表の行は、箱の中をクリックして出るボタンの「行」から削除できます。
URLを変えたらQRコードが読めなくなったサイト識別子を変えると、それまでに配ったURLとQRコードは使えなくなります。配布後は変更しないでください。
ページを間違って消した削除したページは元に戻せません。作り直しになりますので、削除の前に内容を確認してください。