--- title: "最初のサイトを最初から最後まで | Briks" url: https://briks.dev/ja/docs/your-first-site description: "小さなパン屋のNew projectから、briks.liveのプレビュー、チャットでの最初の変更、Publish to productionまで。全画面を順に紹介。" last_updated: 2026-10-08 --- # 最初のサイトを最初から最後まで このガイドでは、ある事業が空のワークスペースから公開サイトになるまでを順に追います。ご自身で作る前に、すべての画面を一度ご覧いただけます。例は、ヨークの小さなパン屋Larder Laneで、Freeプランの50クレジットで作ります。 読了時間 9 分 2026年10月8日にスタジオで確認済み ## 始める前に 次の3つを用意してください。ビジネス名、その紹介文を1段落、おおまかなページの一覧です。Larder Lane を営むサムさんは、パンを見せ、土曜日の予約注文を受け付け、お店の場所と営業時間を伝えるサイトを望んでいます。 SamはFreeプランなので、50クレジットとプロジェクト1つ分の枠があります。新しいサイトは作成中に50クレジットを確保するため、満額の残高で始められ、先に他のことで使うことはありません。Freeワークスペースの最初のサイトなので、残高より多く必要になっても最後まで作られます。 ## ステップ1:ビジネスについて説明する どこで 1. Projects 2. New project Home のプロンプト欄から始めて **Continue** を押すこともできます。どちらの場合も、7つのステップの簡単なセットアップに進みます。**What are you making?**、**Describe it**、**Show what you like**、**Your brand**、**Pictures**、**How it is built**、**Review and create** です。横のリストで現在の位置が分かり、**Back** と **Next** でステップを行き来できます。入力した内容は、ビルドが始まるまでこのブラウザに保存されるので、途中で離れても戻れます。 1. 種類を選んで名前を付ける 場所: What are you making? Samは **Website** を選び、**Business or project name** に`Larder Lane`と入力します。この名前は、サイトの最初のアドレスにもなります。 2. 説明文を書く 場所: Describe it 入力欄には最大25,000文字まで入力でき、最低でも10文字必要です。文字入力でも音声入力でも構いません。下のパネルには、よい説明に含めたい内容が並んでいます。誰のためのものか、どこで使うのか、何を提供するか、何ができるか、どんな雰囲気にするか、必要なページや機能です。 3. 任意のステップをスキップする 場所: Show what you like, Your brand どちらにも **Optional** と付いていて、何も入力しないとボタンは **Skip** になります。Samには追いかけたいサイトも決まった色もないので、どちらもスキップしてBriksに任せます。 4. 付属の画像を残す 場所: Pictures **Included** と表示された最初の選択肢では、スタジオのライブラリから合う画像を使い、足りないものは描き起こします。画像の料金はかかりません。ほかの選択肢では、すべての画像を新しく描き起こし、1枚ごとの料金が制作に加わります。 5. 作りを確認する 場所: How it is built **Ask about what is unclear before building** はオンのままにしておきます。Samは、承認のスイッチと **Check the published site** をオフにしています。 6. 確認して制作する 場所: Review and create 選んだ内容はすべて一覧になり、変更するための戻り方も付いています。その下の注記には、新しいプロジェクトがビルド中に50クレジットを確保すること、現在の残高、そして最初のバージョンは数分かかることが書かれています。このようなプロジェクトで通常かかるクレジットが残高を超える場合は、その下の行に見積もりが表示されます。Samが **Build it** を押します。 Sam の概要 ラーダー・レーン、ヨーク > イギリス・ヨークにある小さな街のパン屋で、営業は水曜日から土曜日です。サワードウ、ライ麦パン、ペストリーを毎朝店内で焼いています。お客様は、土曜日の受け取り用にパンを簡単なフォームから予約できます。入力項目は、お名前、電話番号、ご希望のパン、受け取り時間です。ページは、ホーム、私たちのパン、予約、営業時間と道順を載せたご来店案内、そして私たち二人についての短い紹介です。温かく、飾らない口調で。色はクリーム色と深い緑、素朴で本物らしいパンの大きな写真を使います。 フォームであって、ショップではない理由 Sam は、シンプルに始めたいので、オンライン決済ではなくフォームでの予約注文を依頼します。お客様は店頭で支払います。後からオンラインで支払いを受け付けるときは、**Settings**、**Payments** でご自身の決済プロセッサーを接続し、変更として依頼します。 承認ステップをオフにして50クレジットで進める **Approve the words before building**、**Choose the look from three directions**、**Choose the hero from four wireframes** は、それぞれ、あなたが決めるまでビルドを一時停止します。どれかのあとで続けると、もう一度最大50クレジットが確保されます。残高がそれより少ない場合は、5まで下がった分が確保されます。各パートは、その作業に応じて課金されます。50クレジットの場合、停止が何度もあるビルドでは残高が少なくなることがあります。[ビルド中の承認](https://briks.dev/ja/docs/approval-steps) をご覧ください。 ## ステップ2:質問に答える プロジェクトは **Studio** タブで開き、左に会話、右にプレビューが表示されます。何かを計画する前に、Briksがいくつか質問を用意します。プレビューの上のラベルには「Waiting for your answers」と表示されます。詳しくは [構築前の質問](https://briks.dev/ja/docs/questions-before-building) をご覧ください。 1. ページにチェックを入れる 場所: Studio Briksがブリーフからページを提案します。**Home** には **Always** の印が付きます。残りはチェックを入れたり外したりでき、独自のページは「Add a page, for example Careers」と表示された欄から追加できます。サイトは最大10ページで始められ、チェックを入れたページはそれぞれ完全に作られます。 2. ほかの質問に答える 場所: Studio それぞれに **Recommended** と記された選択肢があり、あらかじめ選ばれています。合わないものは変更するか、**Something else** を選んでご自身の答えを書いてください。 3. 回答を送信 場所: Studio **Continue** を押してください。**Decide for me** を選ぶと、おすすめの回答がすべて採用されます。会話の下の入力欄に、ご自身の言葉で回答を入力することもできます。 Samが選んだもの > Samは、Home、Our bread、Pre-orders、Visit us、Our storyを残し、仕入れ先の3軒のカフェ向けに`Wholesale`を追加しました。予約注文をどう受け付けるかという質問が1つあり、彼はおすすめの答えのままにしました。 6ページを選んで「Continue」を押すと、すぐに制作が始まりました。 ## ステップ3: ビルドを見守る 会話には、**Planning the site and its pictures**、**Designing and building**、**Verifying build**、**Publishing** のように、各段階がその都度表示されます。最初のバージョンには数分かかります。実行中にページを離れても作成は続き、戻ったときに結果が待っています。各段階は [作成を見守る](https://briks.dev/ja/docs/watching-a-build) で説明しています。 サイトが公開されると、プレビューに内容が表示され、上のラベルが **Live preview** に変わります。プレビューの上のボタンで、デスクトップ、タブレット、スマートフォンの幅での表示、再読み込み、全画面表示ができます。専用アドレスで新しいタブに開けば、訪問者と同じようにすべてのページをクリックして確かめられます。 作成の途中で気が変わりましたか? **Stop** は、実行中のビルドを公開前に止めます。サイトはそれまでの状態のままです。料金は、停止までに行った作業分のみです。 ビルドがクレジット待ちのとき 2つ目以降のサイトや有料プランでは、残りの作業に通常お持ちのクレジットより多く必要になるビルドは、計画が終わった時点で止まります。会話に、見積もりとお持ちの量とともに **Waiting for credits** と表示され、計画は保たれます。**Get credits** を押し、クレジットが用意できたら **Resume building** を押してください。自動で再開することはありません。[クレジットとプラン](https://briks.dev/ja/docs/credits-and-plans) をご覧ください。 ## ステップ4: プレビューを開く 最初の公開は、プロジェクト名から作られたアドレスでのプレビューで、ここでは `larder-lane.briks.live` です。その名前がすでに使われている場合は、末尾に数文字が加わります。OwnerまたはAdminは、あとから変更できます。[サイトのアドレス](https://briks.dev/ja/docs/site-address) をご覧ください。 プレビューは、アドレスを知っていれば誰でも開ける、実際に動くサイトです。本番環境との違いは2点あります。検索エンジンには掲載しないよう求めていること、そしてフォームから送られたメッセージはスタジオに保存されますが、メールでは届かないことです。 - プレビュー画面だけでなく、ご自分のスマートフォンで全ページを確認しましょう。 - メニューを開いて、チェックを入れた各ページがあることを確認してください。 - フォームから予約注文のテスト送信を行い、プロジェクトの **Forms** で確認します。 どこで 1. Projects 2. Larder Lane 3. Settings 4. Forms ## ステップ5：変更を1つ加える Samは、ご来店案内ページの下の方に営業時間があること、そしてホームページの写真がクロワッサンなのに、彼はサワードウで知られていることに気づきます。会話の下にあるボックス、「Change the hero, add a page, adjust the colours…」と表示されている欄に、メッセージを1つ書きます。 1. 変更内容を書く 場所: Studio 何をどこで変えたいかを、普通の言葉で伝えてください。1通のメッセージに、関連する変更をいくつでも、6,000文字まで入れられ、画像や動画を6点まで添付できます。 2. チェックの結果を判断する 場所: Studio ボックスの下にある **Check the site after this change** は、公開されたサイトを4つの画面サイズで確認し、表示が崩れている部分を修復します。数分とクレジットが少しかかるため、今回のような小さな変更ではオフのままにしてください。 3. 送信する 場所: Studio 送信ボタンの **Send** を押します。変更の実行中は5クレジットが確保されます。すでに作成が実行中の場合、ボタンは **Queue** に変わります。メッセージは待機し、その作成が終わると実行されます。 Samの変更 > Visit usのページで、営業時間を一番上に大きな文字で入れてください。水曜日から土曜日、午前8時から午後2時です。ホームページでは、大きな写真を、木の板に載せたサワードウのパンのアップに差し替えてください。 Briksが変更を構築して同じアドレスに公開し、プレビューが再読み込みされました。以前のバージョンは、Samが元に戻したい場合に備えて、プロジェクトのバージョンに残っています。 ヒント 変更ではなく質問を入力すると、たとえば「フォームがあるページはどれ?」のような場合、作成は行われず、クレジットも保留されないまま、会話の中で答えが返ります。[質問する](https://briks.dev/ja/docs/asking-questions) と [変更を加える](https://briks.dev/ja/docs/making-changes) をご覧ください。 ## ステップ6: 本番環境に公開する 本番環境にするとサイトがすべて公開され、検索エンジンに掲載されるようになり、フォームから届いたメッセージもメールでお知らせします。 1. Publishを押します 場所: Top bar サイトを一度公開すると、上部バーに **Preview** と **Publish** ボタンが表示されます。そのボタンを押します。 2. ダイアログを読みます 場所: Publish to production 何が変わるかを説明します。Briksは先にリンクを含むサイトを確認し、修正が必要なときは何も変更せず、スタジオがその内容をお知らせします。 3. 確認 場所: Publish to production **Publish to production** を押します。完了すると、上部バーのボタンが **In production** に変わります。 本番環境への公開と、**Back to preview** での巻き戻しには、クレジットはかかりません。サイトが本番環境に出たあとは、送信した変更もそこに公開されます。詳しくは [本番環境への公開](https://briks.dev/ja/docs/publish-to-production) をご覧ください。 ## ステップ7：独自ドメイン Freeプランでは、サイトは `briks.live` のアドレスのままで、本番環境でもそのまま動きます。`larderlane.co.uk` のような独自ドメインの接続は、Starterプランから使えます。 どこで 1. Projects 2. Larder Lane 3. Settings 4. Domain **Your domain** にドメインを入力して **Connect domain** を押します。次に、ドメインを購入した会社で3つのレコードを追加します。レコードとは、ドメインの向き先をインターネットに伝える短い設定です。ここでは、Aレコード、`www` から `edge.briks.live` へ向けるCNAME、ドメインがあなたのものだと証明する `_briks` という名前のTXTレコードです。Briksは2分ごとに再確認し、セキュリティ証明書も自動で発行します。手順は [ドメインを接続する](https://briks.dev/ja/docs/custom-domains) をご覧ください。 ## うまくいかないとき ### ビルドが失敗しました。課金されましたか? いいえ。失敗したリクエストには料金がかからず、確保されていた分は残高に戻ります。プロジェクトには **Needs attention** と表示されます。会話の最後のメッセージを読んでから、次のメッセージを送って続けてください。 ### 変更に必要なクレジットが足りません。 スタジオは、変更の内容と残高をお知らせし、作業は始まりません。ページを追加する変更は、通常かかるクレジットが残高を超える場合、見積もりとともに断られることもあります。サイトは公開されたままです。Owner は、開いたウィンドウまたは **Billing** から、クレジットの多いプランに変更できます。[クレジットとプラン](https://briks.dev/ja/docs/credits-and-plans) をご覧ください。 ### Freeで2つ目のサイトは作れますか? いいえ。Freeプランには1つのプロジェクトが含まれます。Pro以上はより多く含まれます。[クレジットとプラン](https://briks.dev/ja/docs/credits-and-plans) のプラン表をご覧ください。 ### 公開前に、ほかの人にも見てもらいたい。 プレビューのアドレスを送ってください。アカウントは不要です。[プレビューの共有](https://briks.dev/ja/docs/sharing-a-preview) をご覧ください。 ## 次に読む - [ビルド中 **新しいプロジェクトを始める** 新規プロジェクトページの全選択肢を順に解説：種類、依頼内容、気に入ったサイト、ブランド、画像、ビルド設定、開始時の費用。](https://briks.dev/ja/docs/new-project) - [ビルド中 **良い依頼文の書き方** 最初のビルドを成功させるために指示文へ書く内容:ビジネス、対象となる人、ページ、主なアクション、事実、トーン。ビフォーとアフターの例が6つあります。](https://briks.dev/ja/docs/writing-a-brief) - [プロジェクトで作業する **変更を加える** Briksに書いてサイトを変更する方法です。伝え方、画像の追加、変更の内容と費用、内側のページ、順番待ちのリクエスト、うまくいかなかったときの直し方を説明します。](https://briks.dev/ja/docs/making-changes) - [公開とドメイン **本番環境へ公開する** Briks のサイトをプレビューから本番環境へ。公開チェックが読む内容、公開を妨げるもの、各指摘の直し方、プレビューへ戻す方法を説明します。](https://briks.dev/ja/docs/publish-to-production) まだ解決しませんか? プロジェクト名と、表示されると思っていた内容を添えて [hello@briks.dev](mailto:hello@briks.dev) までご連絡ください。スクリーンショットがあると助かります。