ページの追加・編集
Webサイトは複数のページで構成されているよね。
ATOMZでは簡単にページを追加・管理できるんだ！
ページ切り替えエリア
ページってどこで管理するの？
エディター画面の上部中央に、ページ切り替えエリアがあるよ！
現在編集中のページ名が表示されているんだ。
「Home / home」って書いてある部分だね！
その通り！ここをクリックすると、ページ一覧が表示されて、
別のページに切り替えたり、新しいページを追加したりできるよ。
新しいページを追加する
新しいページってどうやって追加するの？
簡単だよ！3ステップで追加できるんだ。
ステップ1: ページメニューを開く
まず、画面上部中央のページ切り替えエリアをクリックしよう。
クリックすると、現在のページ一覧と「新規ページ作成」ボタンが表示されるよ。
ステップ2: 新規ページ作成をクリック
「新規ページ作成」をクリックすればいいんだね！
そう！クリックすると、ページ作成のモーダルが開くよ。
ステップ3: ページ情報を入力
モーダルが開いたら、以下の情報を入力しよう！
ページ作成時の入力項目
| 項目 | 説明 | 例 |
|---|---|---|
| ページ or モーダル | 通常のページかモーダル(ポップアップ)かを選択 | 通常は「ページ」を選択 |
| ページ名 | 管理用のページ名 | 「会社概要」「お問い合わせ」など |
| スラッグ | URLの末尾部分 | about、contact など |
スラッグって何？
スラッグは、URLの一部になる文字列だよ！
例えば、スラッグを「about」にすると、https://example.com/about というURLになるんだ。
なるほど！日本語じゃなくて英語で書くんだね。
その通り！URLは英数字とハイフン(-)で書くのがおすすめだよ。
例：company-profile、service-list
ステップ4: ページを追加
情報を入力したら、「ページを追加」ボタンをクリック！
これで新しいページが作成されて、自動的にそのページの編集画面に切り替わるよ。
ページとモーダルの違い
さっき「ページ or モーダル」って選択肢があったけど、何が違うの？
いい質問！それぞれの特徴を説明するね。
ページ
通常のWebページだよ。URLを持っていて、独立したページとして表示されるんだ。
よくあるページ：
- トップページ
- 会社概要
- サービス紹介
- お問い合わせ
- ブログ記事
モーダル
モーダルは、ポップアップとして表示される特別なページだよ！
ボタンをクリックしたときに、画面上に重なって表示されるんだ。
よくあるモーダル：
- スマホメニューの表示
- 画像の拡大表示
モーダルは、別ページに飛ばずに情報を見せたいときに使うんだね！
よくあるページ構成
どんなページを作ればいいか、イメージが湧かないんだけど...
一般的なサイトのページ構成を紹介するね！
コーポレートサイト
| ページ名 | スラッグ | 説明 |
|---|---|---|
| トップページ | / | サイトのホーム |
| 会社概要 | about | 会社情報 |
| サービス | services | 提供サービス |
| 実績 | works | 制作実績 |
| お問い合わせ | contact | 問い合わせフォーム |
LP(ランディングページ)
LPは1ページ完結が基本だから、ページは少なめだよ。
| ページ名 | スラッグ | 説明 |
|---|---|---|
| メインLP | / | 商品・サービス紹介 |
| サンキューページ | thanks | 申し込み完了後のページ |
| プライバシーポリシー | privacy | 個人情報保護方針 |
次のステップ
ページの作り方がわかった！早速作ってみるよ！