← コース一覧へ
コース 5/63 Level 2-1 無料公開
ダッシュボードへ

スマホで、
最初のWebページ

1
スマホで Google AI Studio を開く無料枠あり
Googleアカウントでログインします。初回は利用確認が出る場合があります。表示された内容を確認して進めよう。
0:00 / 0:33

今日のゴール:スマホでGoogle AI Studioに頼み、Webページを1枚完成させる

英語は読めなくてOK。
目印は4つだけ

Start building → Select this design → Running → Preview
この4つを、画面の形と一緒に探せば進めます。文章を全部翻訳する必要はありません。

画面は更新されます。Start building が見つからないときは、メニューの Build を探せばOK。

2
「Start building」を押して、Build(ビルド)に入る
最初の画面で、赤枠と同じ Start building を探します。見つからなければメニューの Build へ進みます。
Google AI Studioを開いた最初の画面。モデルの一覧の下にある「Start building」ボタンを赤枠で示している
開いた直後の画面。赤枠の Start building を押す(タップで拡大)

英語の意味を全部理解しなくても、赤枠の Start building を押せれば成功。次の画面で日本語のお願いを入れます。

英語の試験じゃないよ。Start buildingを見つけて、同じ画面まで進めば合格🐾
Start buildingSelect this designRunningPreview
ミライネコ

日本語で、
作りたいページを頼む

「Build your ideas with Gemini」と表示された画面。下部の入力欄を赤枠で示している
赤枠がプロンプトを貼り付ける入力欄です(タップで拡大)

架空のお店か、自分のサービスを選んで作ります。実住所や非公開情報はまだ入れません。

3
下のプロンプトを入力して送る
🐾 コピペ用プロンプト
「海辺のカフェ」という架空のお店のWebページを作ります。
自分のサービスで試す場合も、公開してよい情報だけを使います。

お店の魅力が伝わる1ページのWebサイト(看板ページ)を作ってください。
お店の名前・キャッチコピー・おすすめメニュー3つ・場所・問い合わせボタンを入れて、
おしゃれで見やすいデザインにしてください。
住所・値段・営業時間が不明な場合は、勝手に決めず「サンプル」または「準備中」と表示してください。
右下の送信ボタンを押します。送信後は、次の画面でページのデザインを選びます。
日本語でそのまま頼めばOK。送信したら、次は見た目を選ぶよ🐾
📝 日本語⬆️ 送信
ミライネコ

好きなデザインを選ぶ

Design previews are readyと表示された画面。Select this designボタンと、デザインを切り替える左右の矢印を赤枠で示している
プロンプト送信後に表示される画面。画像を押すと拡大できます

左右の矢印でデザインを見比べます。
気に入ったデザインが表示されたら、上の Select this design を押します。迷ったら、最初に表示されたデザインで大丈夫です。

4
左右の矢印で見比べて「Select this design」を押す
ボタンを押すと、選んだデザインでWebページの作成が始まります。

完成を待って、
Previewを見る

Running が表示されていれば作成中です。完成したら、画面下の Preview で自分のページを確認します。

5
Runningの間は、そのまま待つ
数分以上かかることがあります。モデル名や秒数がスクショと違っても大丈夫です。
「Gemini 3.6 Flash・Running for 231s」の表示を赤枠で示し、その下にファイルが次々に作られていく一覧が並んでいる画面
赤枠の Running が作業中の目印。モデル名や時間は変わります
6
下の「Preview」(プレビュー)を押して、自分のページを見る
画面の下に ChatPreview の切り替えがあります。Preview は、AI Studioの中で動きを確認する場所。この時点ではインターネットへ公開されていません。
画面の一番下にある「Chat」と「Preview」の切り替えタブ。Previewを赤枠で示している
画面の一番下。赤枠の Preview を押す
Previewに表示された海辺のカフェのWebページ。写真の背景に店名とキャッチコピー、ご予約ボタンが並んでいる
実際のPreview。スマホの縦画面で、ページの見た目と動きを確認できる(まだ一般公開はされていません)

画面にページが出たら大成功。スマホだけで、コードを1文字も書かずに作れた——これが今日の体験だよ。

Runningの間は待つだけ。完成したらPreviewで見よう🐾
RunningPreview
ミライネコ

コードを1文字も
書いてないのに、出た

「Webページを作る」と聞くと、難しいコードを書くイメージがあるよね。でも、いまあなたがやったのは言葉でお願いしただけ。起きたことを整理すると:

  • 白紙の入力欄に「こんなお店のページを作って」とお願いした
  • AIがその場で見た目つきのWebページを作って、画面で動かして見せてくれた
  • 気に入らなければ「もっと〇〇に」と言えば、何度でも直せる

コードは1文字も書かなくていい。大事なのは「どんなお店か・何を伝えたいか」を言葉にすること。それだけでページは出たよね。

未完了
「頼む」だけで、白紙がページに変わる👇
📄 さっきまで…(白紙)
何もない、まっさらなチャット欄。
↓ 「お店のページ作って」と頼む
🌐 海辺のカフェ
朝の光と、香り高い一杯を。
― おすすめ3品・地図・お問い合わせ ―
お問い合わせ
クリア クリア ✓

最初のページ、できたね!🎉

今日やったこと
  • Google AI Studioへ日本語で作りたいページを頼んだ
  • 好きなデザインを選び、Previewで完成したページを確認した
  • コードを書かなくても、言葉で頼めばWebページを作れると分かった
ここから先
Level 2-2 自分のCodex作業環境
バイブコーディングだけでなく、公開中・今後追加される講座も学べます。
🗺 全63レッスンの旅 | 今は Level