【Studio】【初心者向け】ページを追加・設定する方法｜ページの種類や使い道を分かりやすく解説

カッパ子

Studioのページがややこしくて分からない！

ユウ

違いや使い方を知ればすぐに分かるよ！

Webサイトは、ページを少なくした方が分かりやすいサイトになりますが、どうしても必要なページはあります。

Studioでサイトを作る際にページを増やそうと思ったものの、初めは「どうやって追加すればいいか分からない」「ページとかモーダルとか出てきて混乱する」と感じると思います。

本記事では、Studioのページの種類・追加方法・設定方法について解説します。

ページの種類

Studioで扱えるページには、いくつかの種類があります。

トップページと同様で、会社概要やお問い合わせなど、内容が変わらないページを追加したいときに使用します。

基本的にはこのページを追加しておけば問題ありません。

パーツからCMSのブロックを追加すれば一覧ページなども作成可能です。

フワッと現れるウィンドウのようなページを作りたいときに使用します。

タブレットやスマートフォンサイズでのハンバーガーメニューで使うことが多いです。

他にも画像をクリックしたら動画のウィンドウを出すとか、CTAボタンを表示して問い合わせフォームを表示させる渡河、色々と使い道があります。

ブログ記事やお知らせなど、繰り返し投稿するコンテンツに使うページです。

単体のページというより、記事を表示するためのテンプレートを作るイメージです。

ページとモーダルの違いは通常と変わりありません。

動的モーダルは記事ではなく、画像とそれに対する説明など、繰り返しの情報を表示するのに向いています。

404エラーページはアクセスしたページが見つからないときに表示するページ。

パスワードページはサイトのアクセスにパスワードを設定する場合、パスワードを入力するページです。

どちらも自動で用意されているものもありますが、デザインは自分でカスタマイズできます。

他にもサイトのURLを変更した際に自動的に新規ページへ転送する「リダイレクト」などがありますが、こちらは使用できるプランに制限があるので、使う場面は少ないと思います。

ページを追加する手順はとてもシンプルで、デザインエディタの左パネルのアイコンからページパネルを開き、

ページ名はあとから変更できるので、まずは仮の名前でも問題ありません。

CMSページを作る場合は、どのCMSモデルを使用するかの設定も必要になります。

見落としがちなポイントとして、追加したページはトップページなどからページへのリンクを貼らないとユーザーが辿り着けません。

リンクはパーツを選択した際の右パネルの「設定」タブのリンクより設定可能です。

ページを作っただけで満足せずに、必ずナビゲーションやボタンからリンクを設置しておきましょう。

ページを追加したら、細かい設定を行いましょう。

追加の時と同様に、左パネルのアイコンボタンからページパネルを開いたら、設定したいページをクリック。
右パネルのページタブから下記の設定を行うことができます。

パス：ページのURLに使われる文字列です。日本語だと文字化けの原因になるため、英数字で設定するのがおすすめです（例：/about、/contact）。

公開情報：ページのSEOに関する設定です。ページタイトル、説明文などを設定できます。検索結果に表示される部分なので、各ページにしっかり設定しておきましょう。

カスタムコード：有料プラン限定ですが、サイトにJavaScriptなどを追加したいときに使用します。Studioの標準機能ではできないことも、カスタムコードを使えば大抵のことは実現可能になります。

Studioのページは分かりやすく種類分けされているので、使い道が分かればすぐに使いこなせると思います。

まずはページを一度触ってみて、違いを確認してみてください。

この記事が、Studio制作の第一歩のお役に立てれば嬉しいです。