2026年07月22日
開発画面の基本説明
Replitは、ブラウザ1つを開くだけで、あなたのアイデアを最速でアプリに変えることができる画期的なAI駆動プラットフォームです。面倒な環境構築は一切不要。プログラミング初心者から熟練のエンジニアまで、誰でも直感的にアプリ開発をスタートできます。
AIエージェントと協力しながら、安全かつ効率的にアプリを組み上げていくための具体的な操作方法を解説します。基本的なチャットでの指示の出し方から、並列開発まで、Replitを使いこなすための第一歩を踏み出しましょう！
この記事では、Replitの画面全体の構成を把握していきます。各パネルやボタンの位置を事前に確認しておくことで、操作に迷わずスムーズに進めることができます。
1. 画面の見方と基本操作
Replitの画面は、大きく以下のエリアに分かれています。
1. チャット：AIへの指示を入力するエリアです。作りたい機能や修正内容を日本語で入力します。
2. プレビュー：作成中のアプリの見た目をリアルタイムで確認できるエリアです。
3. ファイルツリー：アプリを構成するファイルの一覧が表示されます。通常は操作は不要です。
2. プレビューパネルの操作
プレビューパネルは、以下の操作で表示を切り替えることができます。
1. Back/Forward（前の画面へ戻る、次の画面へ進む） 現在表示されている画面の前後の画面を表示します。
2. Reflesh（更新する） プレビュー内の更新ボタン（矢印のアイコン）をクリックすると、最新の状態が反映されます。
3. Screen Size（表示デバイスを切り替える） パソコン・タブレット・スマートフォンの3種類の表示に切り替えることができます。実際にユーザーがどのような画面でアプリを見るかを確認する際に便利です。
4. New Tab（別タブで開く） プレビュー右上の外部リンクアイコンをクリックすると、アプリを別のブラウザタブで表示できます。
3. 新規プロジェクトの作成手順
画面の構成を確認したら、さっそくプロジェクトを作成してみましょう。
手順1：作成したいアプリの情報を入力する
左メニューの「 Create something new」ボタンをクリックすると以下の画面が表示されます。
作りたいアプリのイメージが固まっている場合は、チャット欄にそのまま入力してください。まだ何を作るか決まっていない場合は、「こんなことができるアプリを作りたいのですが、どうすればよいですか？」のように、AIに相談するところから始めることができます。
※相談しながら作る場合は、「～できますか？」のように質問形式でチャット欄へ入力・送信してください。
手順2：ビルドタイプを選択する
作成するアプリの種類を以下から選択することができます。
● WebSite：ブラウザで動作するウェブサイトを作成します。
● Mobile：スマートフォン向けのアプリを作成します。
● Document：プレゼンテーション用の資料やスライドを作成します。
手順3：実行結果を確認する
アプリの作成が完了すると、プレビュー画面へ自動で遷移します。これでアプリの新規作成は終了です。
