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