LESSON 01 / 12 — EDIT & DESIGN

最初の1ページ。文字を変えるところから。

テンプレートには4ページ分の文章と写真が入っています。まずTOPの見出しを自分の言葉に変えると、サイトの目的がはっきりします。

PAGECRAFT GUIDE · 2026.09.13 · 4つの手順
実際の編集デモ。左はブロック、中央はページ、右は選んだ箇所の設定です。
実際の編集デモ。左はブロック、中央はページ、右は選んだ箇所の設定です。
始める前に

用意するもの・作業する場所

屋号、誰に何を届けるかの説明、ボタンの移動先を用意します。パソコンでこの記事と編集画面を別々のタブに開くと、見比べながら進められます。

STEP 01

テンプレートを開く

テンプレート一覧で4ページの内容を見て、好みの土台を選びます。「自分で書く」を選ぶと、見本の文章が入った編集画面が開きます。

「テンプレートを開く」の操作を示した図
  1. 記事下の「編集画面で試す」を押します。テンプレートの選択から始める場合は、一覧から好きなデザインを選びます。
  2. 作り方を選ぶ画面が出たら「自分で書く」を押します。すでに下書きが開いている場合は、そのまま上部のTOPのページタブを選びます。
具体例
練習には「余白のある暮らし」のテンプレートを使用。業種が違っても、文字の変え方は同じです。
ここまでできればOK
左に部品一覧、中央にサイト、右に設定欄が表示されれば準備完了です。
STEP 02

見出しを選んで書き換える

中央のヒーローを選び、右側の「メインコピー」を編集します。「何を、誰に届けるか」が分かる短い言葉にしましょう。説明文には特徴や利用する理由を具体的に書きます。

「見出しを選んで書き換える」の操作を示した図
  1. 中央の一番上にある大きな見出しの周辺を押します。この最初の大きな紹介エリアを「ヒーロー」と呼びます。
  2. 右側の「メインコピー」に入っている文章を選び、自分の見出しに置き換えます。続けて「説明文」も書き換えます。
具体例
メインコピー:暮らしに、木のぬくもりを。/説明文:無垢の木でつくる家具と、住まいの小物を紹介しています。
ここまでできればOK
中央の見出しと説明が入力した文に変わります。変わらない場合は、選択した部品がヒーローか確認します。
STEP 03

ボタンの行き先を決める

「ボタン文言」に「サービスを見る」など目的を書き、「ボタンリンク先」に移動先を設定します。見た目だけで終わらず、プレビューで行き先も確認します。

「ボタンの行き先を決める」の操作を示した図
  1. ヒーローを選んだまま、右側の「ボタン文言」に、押すと何が見られるかを書きます。
  2. 「ボタンリンク先」に実際の移動先を入力します。サイト内ページのURLは、そのページの「ページ設定」で確認します。
  3. 上部のプレビューを開いてボタンを押します。編集画面内では部品の選択になるため、リンクの確認はプレビューで行います。
具体例
文言:商品を見る。移動先:商品ページのページURLが products の場合は /products。これは例なので、自分のページURLに置き換えます。
ここまでできればOK
目的のページが開けば完了です。# だけのリンクや存在しないページへのリンクは残さないようにします。
STEP 04

他の3ページも確かめる

上のページタブで紹介・サービス・利用案内へ切り替えます。屋号、料金、営業情報、実績など見本のままの箇所を置き換えます。

「他の3ページも確かめる」の操作を示した図
  1. 上部のページタブを順に押し、残りの3ページを開きます。テンプレートによってページ名は異なります。
  2. 各ページの部品を押して、店名、紹介文、料金、営業日、住所、連絡先を置き換えます。掲載しない部品は選択して削除します。
  3. 上部で保存し、プレビューでも4ページを読みます。
具体例
紹介ページには始めた理由、商品ページには品名と価格、案内ページには営業時間と連絡方法を記載します。
ここまでできればOK
4ページすべてが自分の内容になり、サンプルの実績や住所が残っていなければ完了です。
FINISH CHECK

最後に、ここを確認。

✓ TOPの見出し、説明、ボタンが自分の事業の内容になっている。

うまくいかないときは

右側に目的の項目が出ないときは、中央の対象部品をもう一度押します。画面幅が狭く設定が見えにくい場合はパソコンで開き、この記事の画面画像と左右の位置を照らし合わせてください。

このデモでの扱い・補足

テンプレートの店名・料金・実績は見本です。事実として確認できる内容に置き換えてください。