Skip to main content
⏰ 所要時間: 10分 このガイドを終える頃には、共有できるURLで公開された小さなアプリが完成しています。
選択したテンプレートをWebsiteとしてビルドし、公開されたReplitのURLで開いた状態
洗練されたテンプレートから始め、それを機能するWebsiteに変え、公開します。利用できる正確なテンプレートは変わることがあるため、作りたいものに合ったものを選んでください。

​
始める前に

Replitアカウントが必要です。Designフレームから新しいアプリを構築するにはCoreまたはProプランが必要です。プランの詳細はデザインを構築すると請求をご覧ください。 目標は、1つの完全なループを終えることです:
  • Replit Designでテンプレートを選び、
  • Agentでビルドし、
  • アプリをテストし、
  • 公開して、共有する。
Agentは Replit のAIビルダーです。作りたいものを説明すると、Agentがアプリの作成、説明、修正を手伝います。

​
テンプレートを選び、構築し、公開する

1

デザインテンプレートを閲覧する

replit.com/design を開きます。注目のテンプレートを閲覧するか、Landing Pages、Mobile、Prototypes などの形式でフィルタします。
注目のテンプレートと形式フィルタが表示されたReplit Designギャラリー
2

テンプレートをプレビューして使用する

テンプレートを選択して確認し、Use template を選択します。Replitが新しいプロジェクトを作成し、テンプレートをDesign Canvasに配置します。テンプレートのカバーページから始めた場合は、リミックスの流れについてテンプレートから始めるをご覧ください。
Use templateボタンが表示されたReplit Designテンプレートのプレビュー
リミックスされたテンプレートは、新しいプロジェクト内のDesign Canvasに開かれます。
新しいReplitプロジェクトのDesign Canvasにリミックスされた選択済みテンプレート
3

デザインをWebsiteに変える

テンプレートはまずデザインのモックアップとして始まります。公開する前に、Build に切り替えて、選択したデザインを機能するWebsiteに変えるようAgentに依頼します。例えば:
選択したこのテンプレートを機能するWebsiteとしてビルドしてください。ビジュアルデザインを保ち、ナビゲーションとお問い合わせのアクションを機能させてください。
Agentは同じプロジェクト内にWebsiteアーティファクトを作成し、選択したデザインをその元にします。
Publish ボタンはDesignでも表示されます。プロジェクトにデザインのモックアップしか含まれていない場合、Publishingはまだデプロイするものがないことを報告し、Agentにアプリの構築を依頼するよう案内します。Websiteアーティファクトが存在すれば、DesignまたはBuildのどちらからでも公開できます。
選択済みのポートフォリオデザインが添付されたBuildワークスペース、Agentチャット内のビルドリクエスト、デザインのみのプロジェクトにはまだデプロイするものがないことを説明するPublishing
4

Previewでアプリが動作することを確認する

Agentが完了したら、Preview を開いて、訪問者のようにアプリを使ってみてください。Previewは公開前にビルド中にアプリをテストする場所です。以下を確認してください:
  • メインナビゲーションをたどれる。
  • テンプレートのボタンやフォームを使用できる。
  • 操作後に明確な成功状態や検証状態が表示される。
  • ページをリフレッシュしてもサイトを再び使用できる。
  • Previewを電話サイズの幅にリサイズできる。
何か壊れている場合は、症状をAgentに説明してください。コードを自分で診断する必要はありません。
プロジェクトエディタのPreviewで動作しているテンプレートベースのWebsite
公開前にビジュアルのバリエーションを探索したいですか？提案を探索する を参照して、代替のルックスを並べて生成し、好みのものを適用してください。
5

アプリを公開する

Previewが正常に動作したら、Publish を選択します。生成されたサブドメインを確認し、アプリにアクセスできる人を選択し、セキュリティ設定を確認します。次にダイアログで Publish を選択します。公開すると、共有できるURLを持つアプリのパブリックバージョンが作成されます。
生成されたサブドメイン、アクセス設定、Publishボタンが表示されたPublishダイアログ
6

公開したアプリを開く

新しいブラウザタブでパブリックURLを開き、同じ確認を繰り返してください。共有する前に、アプリがプロジェクトエディタの外でも動作することを確認しましょう。公開されたアプリがPreviewと異なる動作をする場合は、公開ログとアプリに必要な本番設定を確認してください。よくある公開の問題については、公開のトラブルシューティング をご覧ください。
公開済みのReplitのURLで開いた、完成したテンプレートベースのWebsite

​
🎉 おめでとうございます — 初めてのアプリを公開しました

デザインテンプレートから、ライブで共有できるURLまで作り上げました。その過程で:
  • Replit Designからテンプレートを選び、リミックスしました。
  • 選択したデザインを機能するWebsiteに変えるようAgentに依頼しました。
  • Previewで結果をテストしました。
  • アプリを公開して、パブリックURLで開きました。
これがReplitの完全なワークフローです — 出発点を選び、構築し、テストし、改善し、公開する。

​
次のステップ

Canvasでデザインする

ビジュアルバリエーションを探索し、再構築せずに新しいデザインを適用しましょう。

Designを探索する →
並行して構築する

複数のAgentタスクを同時に実行して、アプリのさまざまな部分を並行して 進めましょう。

詳しく見る →
バイブコーディング101

アイデアから動作するアプリへとAgentを導く方法を学びましょう。

ガイドを開く →
データベースを追加する

リフレッシュ後もアプリのデータを保存しましょう。

続ける →