ダッシュボードとは何か｜エディタとの違い

STUDIOでプロジェクトを開くと表示される画面には、大きく分けて2種類あります。1つはボックスを並べてデザインを組むデザインエディタで、もう1つはプロジェクト全体の状態を確認・設定するダッシュボードです。デザインエディタの画面構成は次のレッスンで扱うため、このレッスンではダッシュボードだけに絞って確認します。

ダッシュボードには、上部にホーム / CMS / フォーム / アナリティクス / 設定という5つのタブが並んでいます。このうちホームタブを開くと、さらに左側にダッシュボード・プロジェクト設定・メンバー・プラン&お支払い・Apps・Showcaseという6つの項目が並ぶメニューが表示されます。以降のセクションでは、主にこのホームタブの中にある項目を1つずつ確認していきます。デザインそのものを触るタブは1つもなく、デザインを組む作業は必ずエディタ側で行います。

ダッシュボードとエディタの役割を先に切り分けておくと、この後の章で迷いにくくなります。何かの数値や設定を確認したいときはダッシュボード、実際にボックスや文字を触りたいときはエディタ、という切り分けを意識しておきましょう。

Home｜自分のプロジェクトの使用状況を確認する

Homeタブを開くと、このプロジェクトが無料プランの上限に対して今どれだけ使っているかが数値で表示されます。前の章で確認したFreeプランの上限（公開ページ50・CMS3モデル100アイテム・フォーム回答100件・ストレージ5GB）と照らし合わせながら見てみましょう。

ホームタブ（ダッシュボード）— 利用状況パネル

Homeタブに並ぶ数値は、いずれも上限に対して今どれだけ使っているかを示すカウンターです。公開ページ数はページを作って公開するたびに増えていく数値で、アクティブモデル数と公開アイテム数は3-4でお知らせ機能を作るまでは0のままです。フォーム回答の表示数は、このコースではフォームを作らないため0のままです。

この数値を定期的に見る習慣には理由があります。Freeプランの上限は公開ページ50・CMS3モデル100アイテム・フォーム回答100件・ストレージ5GBと決まっていて、上限に達すると新しいページやアイテムを追加できなくなるためです。実務でクライアントのサイトを管理する場合も、この使用状況の確認は納品前チェックの一部になります。

プロジェクト設定｜プロジェクト名とWebhook連携

Homeタブの中には、使用状況の数値のほかに「プロジェクト設定」という項目もあります。ここではプロジェクトそのものに関わる基本情報を管理します。

ホーム → プロジェクト設定

プロジェクト設定に並ぶのは、大きく分けて「基本情報」と「外部連携」の2つです。基本情報では、プロジェクト名とサムネイル画像を設定できます。プロジェクト名は、ダッシュボードの一覧で自分のプロジェクトを見分けるための名前です。外部連携にあるWebhookは、フォーム送信などのイベントを外部サービスに通知するための上級者向けの機能で、本コースでは使用しません。この段階では、プロジェクトの基本情報がこの画面にまとまっていることだけ把握しておけば十分です。

Apps｜有料プラン向けの外部連携

Homeタブの並びには「Apps」という項目もあります。前の章で確認したとおり、Google Analytics・Search Console・reCAPTCHA v3のような外部ツールとの連携機能です。

ホーム → Apps（一覧はFreeプランでも表示される）

Freeプランのままこのタブを開くと、連携できるAppsの一覧自体は表示されます。ここで一覧を眺めるだけならFreeプランでも可能です。

Appsのカードをクリック →「有料プランにアップグレード」案内

ただし、一覧の中から実際にどれか1つを選んで連携を有効化しようとすると、「有料プランにアップグレード」というモーダルが表示され、Miniプラン以上が必要な旨が案内されます。これは不具合ではなく、公式の仕様どおりの表示です。つまりAppsの一覧を眺めることはFreeプランでもできますが、実際に使い始めるにはMiniプラン以上への契約が必要ということです。

本コースでは、Google Search Console連携やGoogleアナリティクス連携のような操作は必要になりません。地図やformrunのような外部サービスを埋め込みたいときは、代わりにEmbedボックスというSTUDIO標準の機能を使います。この方法はこのコースの発展編で扱うので、ここでは名前だけ覚えておきましょう。

CMS・フォーム・アナリティクス｜後の章で使うタブ

ここまでHomeタブの中身を見てきましたが、ダッシュボード上部には独立したタブとしてCMS・フォーム・アナリティクスも並んでいます。この3つは、今の時点ではまだ中身が空の状態です。

CMSタブ — まだモデルを1件も作っていない初期状態

フォームタブ — まだ回答が無い初期状態

アナリティクスタブ — まだ公開していない初期状態

CMSはお知らせやブログの記事を管理する場所で、3-4でモデルとアイテムを作るまでは空のままです。フォームはお問い合わせフォームの回答一覧で、このコースではフォームを作らないため、何も表示されません。アナリティクスは公開後のPV数・訪問者数を確認する場所で、こちらもサイトを公開してから初めて数値が動き始めます。

今は空でも心配はいりません。この3つのタブは、それぞれ対応する章まで進めば自然と中身が埋まっていくタブです。今の段階では、このタブを開けば何が見えるようになるかという対応関係だけ覚えておきましょう。

プラン&お支払いと「…」メニュー・メンバー招待

最後に、プラン確認とプロジェクトの管理系メニューを見ておきます。まずはホームタブの中にある「プラン&お支払い」です。

ホーム → プラン&お支払い → プラン

プラン&お支払いでは、今契約しているプランがひと目で確認できます。前の章で有料プランを検討するタイミングの早見表を確認しましたが、実際にプランを変更する操作もここから行います。

次に、プロジェクト一覧に戻ったときに使う「…」メニューを確認します。プロジェクト名の横にあるこのメニューから、複製・アーカイブといった操作にアクセスできます。

プロジェクト一覧 →「…」メニュー（複製・アーカイブ）

最後に、メンバー招待とShowcaseにも触れておきます。メンバー招待は、他の人を同じプロジェクトに招いて一緒に編集できるようにする機能で、実務でクライアントやチームと共同作業するときに使います。Showcaseは、公開したサイトをSTUDIOの作例ギャラリーに掲載申請できる機能です（掲載には対象サイトの公開が前提条件です）。どちらも本コースの中で操作する場面はありませんが、実務でよく使う機能なので位置だけ覚えておきましょう。

ホーム → メンバー招待

ホーム → Showcase