--- title: "Webアプリとダッシュボード:現在作れるもの | Briks" url: https://briks.dev/ja/docs/web-apps-and-dashboards description: "App と Dashboard の種類で作れるもの、記録の保存先、まだ使えない機能を紹介します。予約、在庫、カフェの注文を例にした実例付きです。" last_updated: 2026-10-08 --- # Webアプリとダッシュボード:現在作れるもの ウェブサイトのほかに、**New project** では **App** と **Dashboard** を選べます。このページでは、それぞれが現時点で何を作るのか、データがどこに置かれるのか、まだ使えないことは何かを説明し、そのあと3つのプロジェクトを順に紹介します。予約リクエストアプリ、在庫管理アプリ、カフェの注文ダッシュボードです。 読了時間 9 分 2026年10月8日にスタジオで確認済み ## 3つの種類 | 種類 | New projectでの表示内容 | 現在作れるもの | | --- | --- | --- | | **Website** | 人が訪れるページ: ショップ、クリニック、レストラン、ポートフォリオなど。 | 写真と動きのあるデザインされたページです。[新しいプロジェクトを始める](https://briks.dev/ja/docs/new-project) から始まるBuildingセクション全体で説明しています。 | | **App** | サインインして使うもの：クライアント用ポータルや予約ツールなど。 | 実際に動く機能を備えたウェブサイトです。保存されるフォーム、管理できるレコード、そのレコードから作られるページや一覧、検索があります。 | | **Dashboard** | チームが見守る数値、たとえばステージ別の売上や、発注が必要な在庫です。 | 日々の業務に使う画面です。ナビゲーション、主要な数値、グラフ、表、レコードの詳細、フォーム、設定があります。 | サインインと支払い アカウントをご依頼いただくと、アプリにはそのユーザー向けのサインアップとサインインが付き、メールとパスワードのほか、Googleなど7つのプロバイダーをご自身のキーで有効にできます。ご自身の決済サービスを通じて、単発決済とサブスクリプションも受け付けられます。どちらもプロジェクトの **Settings** で設定します。[サインインと支払い](https://briks.dev/ja/docs/sign-in-and-payments) をご覧ください。ご依頼いただければ、ご自身の決済アカウントで配送機能もアプリに組み込み、そのキーは [シークレット](https://briks.dev/ja/docs/secrets) に保存されます。 ## アプリやダッシュボードを作り始める 1. 種類を選ぶ 場所: New project サイドバーの **New project** をクリックし、**App** または **Dashboard** を選んで名前を付け、**Next** をクリックします。 2. 保持する内容を伝える 場所: Describe it 誰が使うのか、何をするのかを書きます。何を保存するか、各レコードに何が入るか、誰が更新するかも書きます。ダッシュボードの場合、**Start from an example** に、出発点として **Sales pipeline** と **Stock levels** があります。 3. 立ち寄り先を選ぶ 場所: How it is built アプリでも、ホームページと同じ切り替えが使えます。ダッシュボードの場合、この手順には「A dashboard builds straight through, with no words to approve and no look or hero to choose.」と表示されます。 4. 作成する 場所: Review and create **Build it** をクリックします。最初のバージョンができるまで数分かかります。[制作の様子](https://briks.dev/ja/docs/watching-a-build) を見ることもできます。 5. レコードを確認する 場所: Database 公開したら、**Database** タブを開くと、各コレクションとそのレコードを確認できます。 ## 現在アプリでできること アプリもホームページと同じように計画され、作られます。[作る前の質問](https://briks.dev/ja/docs/questions-before-building)、[承認ステップ](https://briks.dev/ja/docs/approval-steps)、[イメージボード](https://briks.dev/ja/docs/pick-a-look) も同じです。説明の中で何かを保存したいと伝えた場合は、さらに次のものも作られます。 - **専用のデータベース。** 予約、商品、イベント、お問い合わせ、投稿など、ビルドが初めて何かを保存するときに、EU内にあなたのために作られます。 - **保存されるフォーム。** 標準のフォームは、各送信内容を **Settings**、**Forms** に保存し、サイトが本番環境になるとメールでもお届けします。フォームは、各送信内容をレコードとして保存することもでき、後から探したり、編集したり、詳細を変更したりできます。ご希望の場合は、説明に書いてください。 - **レコードから作るページ。** 一覧ページと各レコードのページが作られるので、イベントや商品ごとに検索エンジンが見つけられる本物のページになります。レコードを変更すると、公開済みのサイトも数分以内に追いつきます。 - ご希望のときに、保存されている内容を **検索** できます。 - **アカウントと決済** は、ご依頼いただいたときに作成します。作成するのは、サイト独自のユーザー向けの新規登録とサインイン、ご自身の決済サービスを使った都度払いと定期購入、そしてご自身の決済アカウントで構築する配送や在庫管理です。詳しくは [サインインと決済](https://briks.dev/ja/docs/sign-in-and-payments) をご覧ください。 - **ご自身のキーで使う外部サービス**。メーリングリスト、CRM、スプレッドシートなどです。サイトの公開後に変更として依頼してください。Briksが最初にキーを尋ね、キーをそのまま [Secrets](https://briks.dev/ja/docs/secrets) に保存する入力欄が表示されます。サイト自身のサーバーコードが、そのキーでサービスを呼び出します。訪問者のブラウザ上のページが、ほかのアドレスを呼び出すことはありません。[ビルド前の質問](https://briks.dev/ja/docs/questions-before-building#keys) もご覧ください。 このような動作するコードを含むサイトを公開する前に、Briks はコードを読み、セキュリティ上の見落としがないか確認します。対象は、ファイルに直接書かれたキー、制限のない保存、サインインなしで読めるメンバーの記録、テキストをつなぎ合わせて作られたデータベースクエリです。 ## ダッシュボードとは ダッシュボードは、スクロールして見るページではなく、人が毎日作業する画面として作られます。次のような内容です。 - ナビゲーションを、細いアイコンのレールとして横に、または上部に置き、さらにトップバーを備えたフレームです。 - 各画面の上部にあるヘッダーで、タイトル、説明の1行、主な操作を表示します。 - 3〜5つの主要な数値、単位とラベル付きのグラフ、そして検索・絞り込み・並べ替え・ページ分けができる表を用意します。 - ご説明に必要な場合は、レコードの詳細、フォーム、設定画面も作成します。 - スマートフォンでは、サイドのナビゲーションがメニューになり、数値は1行に2つ、さらに1つずつ並びます。 ヒーロー、マーケティング向けの見出し、スクロールアニメーションはなく、画像も作られません。ダッシュボードでは、作成前の質問や承認の停止もなく、説明からそのまま作成します。 ### 数字の出どころ ダッシュボードは、画面に表示する記録の種類ごとに1つのテーブルを作り、プロジェクトのデータベースに記録を保存します。最初のバージョンでは、互いに矛盾しない、もっともらしいサンプルの記録が入ります。ご説明にある商品、価格、人物はそのまま記録になり、それ以外の人物には架空の名前が付きます。表、グラフ、主要な数値はこれらの記録を読み込み、合計はすべて各行から計算されます。記録を追加または変更するフォームは、その内容を保存します。ログインページも動作します。プレビューの間は、アドレスを知っている人なら誰でも開けますが、本番環境に公開すると、ログイン済みの **Staff** と **Admin** のアカウントだけがデータを見られます。スタジオで使っているメールアドレスで登録すると、そのダッシュボードの Admin になります。 レコードの形を決めるには、説明の中で、何を保存するか、各レコードに何が入るか、誰が更新するかを書いてください。レコードは **Database** タブで編集でき、画面もそれに合わせて変わります。 ## Database タブにあるあなたのレコード プロジェクトにデータベースができると、**Database** タブには5つの表示があります。**Data**、**Accounts**、**Orders**、**Subscriptions**、**Settings** です。OwnerとAdminには、その前の段階でもこのタブが表示され、**Create database** が出ます。 どこで 1. Projects 2. Your project 3. Database 4. Data - **Data** には各コレクションと、その中のレコード数が一覧で表示されます。Owner、Admin、Editor はレコードを開いて編集し、削除できます。「変更は数分以内に公開サイトへ反映されます。」 - **Accounts** には、サイトでアカウントを作った人が一覧表示され、それぞれの役割を **Member**、**Staff**、**Admin** に設定できます。**Orders** には、お客様ご自身の決済サービスを通じてサイトで販売した内容が、**Subscriptions** には、更新されるプランに支払っているメンバーが表示されます。最初の1件が届くまでは、AccountsとOrdersに **No accounts yet** または **No orders yet** と表示されます。 - **Settings** には、ダウンロード（1コレクションあたり最大50,000レコード、スプレッドシートまたはJSON形式）、復元ポイント、毎晩のコピーがあります。ダウンロードと毎晩のコピーは有料プランでご利用いただけます。 [Database](https://briks.dev/ja/docs/database) ではレコードについて詳しく、[Backups](https://briks.dev/ja/docs/backups) ではコピーと復元について説明しています。 ## 定期タスクとウェブフック プロジェクトの **Settings** にある **Developer** グループの2つのセクションで、アプリを決めた時刻に動かしたり、起きたことを他のソフトウェアに知らせたりできます。 - **Scheduled tasks** は、**Every day at 09:00** や **Mondays at 09:00** のようにお選びいただくスケジュールで、アドレスを呼び出します。呼び出すのは、`/api/` で始まるアプリ自身のアドレスでも、ほかのアドレスでもかまいません。まずアプリにそのアドレスが必要なので、変更として依頼してください。[定期タスク](https://briks.dev/ja/docs/crons) をご覧ください。 - **Webhooks** は、**Published**、**Form received**、**Record changed** のいずれかが起きたときに、別のアドレスへメッセージを送ります。[Webhooks](https://briks.dev/ja/docs/webhooks) を参照してください。 | プラン | 1プロジェクトあたりの定期タスク数 | プロジェクトごとのWebhook数 | | --- | --- | --- | | Free | 1 | 1 | | Starter | 5 | 5 | | Pro | 10 | 10 | | Studio | 25 | 25 | | Agency | 50 | 50 | ## まだご利用いただけない機能 - PayPal、Mollie、Razorpay、Creem、Dodo Payments では、更新されるプランは利用できません。これらは今のところ都度払いのみ対応です。定期購入は Stripe、Paddle、Polar、Lemon Squeezy で行います。 - **Forms** からフォームの回答をエクスポートできます。データベースのレコードは、有料プランでダウンロードできます。 - ご自身のドメインからのメールです。[サイトメール](https://briks.dev/ja/docs/site-email) は、emails.briks.live にあるプロジェクト専用のアドレスから送信します。 - Briks自体の公開API、MCPサーバー、コマンドラインです。 ほかのソフトウェアとは、今でも3つの方法でつなげられます。Webhook でイベントを外へ送る方法、スケジュールされたタスクで決まった時間にアドレスを呼び出す方法、そして上で説明したように、ご自身のキーを使うサービスを変更でつなげる方法です。 ## 3つの実例 アプリ 犬のトリミングサロンの予約リクエスト > Paws & Sudsは、ブリストルにあるドッググルーミングサロンです。予約リクエストアプリを作ります。飼い主さんがサービス（フルグルーミング£55、シャンプーと仕上げ£38、爪切り£12）、希望の日、午前か午後を選び、犬の名前、犬種、サイズ、電話番号を入力します。確認のためこちらから折り返しお電話します。リクエストはすべて、新規、確定、お断りのいずれかのステータスを持つレコードとして保存してください。サービス、料金、営業時間を載せたホームページも作ります。 サービスと料金を掲載したホームページと、依頼フォームです。各依頼は、予約依頼のコレクションにレコードとして保存され、**Database** タブに件数とともに表示されます。電話を受ける担当者が新しい依頼を開き、オーナーに電話をして、ステータスを変更します。カレンダーで空き枠を確認することはしません。お客様ご自身の決済サービスによる頭金や、オーナーがサインインして予約を確認できるアカウントが必要な場合は、説明の中で依頼する必要があります。 ダッシュボード ガーデンセンター向けの在庫管理ツール > Fern & Stoneは、HarrogateとRiponに店舗を持つガーデンセンターです。社内向けの在庫ダッシュボードを作ります。各商品について、カテゴリ、各店舗の在庫、発注点、仕入先、最終入荷日を表示します。発注点を下回るものには印を付けます。商品は、マネージャーが毎週金曜に更新するレコードとして持ち、すべての数値をそこから読み込みます。 Overview、Products、Suppliersへのナビゲーションがあります。概要には、再発注水準を下回る商品の数などの主要な数値、再発注すべき商品の表、カテゴリー別のグラフが並びます。商品は **Database** タブのレコードで、金曜日に担当者がそこで数量を編集すると、数分以内にダッシュボードに反映されます。本番環境に公開すると、サインイン済みのStaffとAdminのアカウントだけが数値を見られます。担当者がダッシュボードで登録し、オーナーが **Accounts** でそのアカウントにStaffロールを付与します。 ダッシュボード カフェの注文ダッシュボード > Little Kilnは、Hebden Bridgeにあるカフェです。注文ダッシュボードでは、今日と今週の注文数と売上、直近30日の日別売上、売れ筋トップ5、今日の注文の表を表示します。表には、時間、品目、合計、店内か持ち帰りかが入ります。 画面は説明どおりに作られ、プロジェクトのデータベースから注文を読み込みます。最初のバージョンには、それらしいサンプル注文が入ります。レジやカードリーダーを読み取ることはできません。実際の売上を記録するには、**Database** タブでサンプル注文を置き換えるか、日ごとの売上コレクションを依頼して、毎日の金額をそこに入力してください。 ### クライアントポータルには、どの種類を選べばよいですか? **App**。説明の中でクライアント用アカウントを頼み、各クライアントが見られるものを伝えます。クライアントはメールとパスワードで登録し、ロールは **Database**、**Accounts** で設定します。[ログインと決済](https://briks.dev/ja/docs/sign-in-and-payments) をご覧ください。 ### ホームページにもデータを保存できますか? はい。イベントや商品など、残しておきたいものを変更の中で伝えてください。ビルドが初めて何かを保存するときに、データベースが作られます。 ### ダッシュボードは自動で更新されますか? 自分のデータベースにある記録だけです。ほかのソフトウェアは、変更によって自分のキーでサービスをつないだ場合を除き、読み取りません。記録を変更すると、公開済みのダッシュボードには数分以内に反映されます。 ## 次に読む - [データと自動化 **データベース** サイトが保存しているデータの見つけ方、レコードの手動での編集と追加、コレクションのJSONまたはCSVでのダウンロード、そして誰が何をできるか、適用される制限について説明します。](https://briks.dev/ja/docs/database) - [サイトの機能 **フォーム** Briks のサイトにフォームを追加し、プレビューでテストし、スタジオで送信内容をすべて確認し、本番環境では1件ずつメールで受け取り、webhook で他へ渡せます。](https://briks.dev/ja/docs/forms) - [データと自動化 **定期タスク** サイトで定期タスクを決まった時刻に実行。朝の要約や週次の整理に。書き方、実行結果の確認、失敗時の対処、プランごとの上限を解説します。](https://briks.dev/ja/docs/crons) - [データと自動化 **Webhook** サイトの公開時、フォームの送信時、レコードの変更時に、署名付きのメッセージを別のツールへ送ります。ペイロード、署名、再試行、配信について説明します。](https://briks.dev/ja/docs/webhooks) まだ解決しませんか? プロジェクト名と、表示されると思っていた内容を添えて [hello@briks.dev](mailto:hello@briks.dev) までご連絡ください。スクリーンショットがあると助かります。