最初に、ページの土台になるボックスを1つ配置します。左パネルの追加パネル（Ctrl+1）から、基本タブにあるBoxをスクリーンにドラッグ&ドロップするだけの操作です。

ドラッグ&ドロップでボックスを置く操作自体は、ものの数秒で終わります。背景色を付けているのは、置いた場所と大きさが目で見て分かるようにするためです。色を付けずに進めると、この後の章で余白やサイズを調整するときにボックスの境界が見えず、意図しない場所を触ってしまうことがあります。

次に、先ほど置いたボックスの中にテキストボックスを入れます。ここで重要なのは、ページの外側にただ置くのではなく、ボックスの中に入れることです。

ドロップする瞬間、ボックスの内側に案内線（入れ子ガイド）が表示されます。この線が出ているタイミングで指を離すと、テキストがボックスの中の子要素として配置されます。もし線が出る前に離してしまうと、ボックスの外側やページの別の場所に置かれてしまうため、線の表示を確認してから指を離す意識を持ちましょう。

3つ目の要素として画像を配置します。この段階では画像ファイルを事前に用意する必要はありません。ストックパネルにある無料の内蔵写真をその場で取得して使います。

実務の案件では、クライアントから写真素材が支給されないことも珍しくありません。そうした場面でもストックパネルの無料写真を使えば、画像が無いままページ作りが止まることを避けられます。この使い方は本コースを通じて何度も出てくるので、ここで手順を覚えておきましょう。

ボックス・テキスト・画像の3点が揃ったら、公開する前に一度、実際の見え方をプレビューで確認します。エディタの編集画面はあくまで作業用の表示のため、公開後と全く同じ見た目とは限りません。

ライブプレビューは、公開する前に本番と同じ表示を確認できる仕組みです。エディタ上の見た目だけで判断して公開すると、思わぬ崩れに公開後まで気づけないことがあります。公開ボタンを押す前に必ずこの一手間を挟む習慣を、この最初のレッスンから身につけておきましょう。

いよいよ公開の操作です。公開パネルでサブドメインを決めて、公開ボタンを押します。この操作が完了すると、あなたのページが実際にインターネット上に存在する状態になります。

サブドメインは、他の誰かがすでに使っている文字列だと選べません。入力欄には使用可能かどうかの表示が出るので、それを確認してから公開ボタンを押します。公開が完了すると、そのままの文字列が〜.studio.siteというURLの一部になります。

公開が終わったら、今度はエディタに戻り、画面幅を変えたときの見え方を確認します。スクリーン両端にあるスライダーをドラッグすると、画面幅を自由に狭めながら表示を確認できます。

スライダーを狭めていくと、PCのときとは違う形にレイアウトが変わって見える場合があります。この崩れは今の時点で直す必要はありません。崩れを直す考え方と手順は、次のChapter 2・Chapter 3でまとめて学びます。ここでは画面幅によって見え方が変わるという事実だけを体験しておきましょう。

エディタ上のスライダーで幅を確認したら、最後に実機のスマホでも同じページを開いてみます。QRコードを使えば、URLを手入力せずにすぐアクセスできます。

エディタのスライダーで見る画面幅と、実機のスマホで実際に開いたときの見え方は、フォントの表示やタップ操作のしやすさなど細かい部分で違いが出ることがあります。可能であれば、この段階で一度は実機での確認も体験しておくと、後の章でスマホ表示を調整するときの感覚がつかみやすくなります。

公開したページは、後から非公開に戻すこともできます。公開パネルのトグルを操作するだけの簡単な設定ですが、意味を理解しておくことが大切です。

公開中のトグルをOFFにすると、それまで見えていた公開URLにアクセスしてもページが表示されなくなります。作業途中の状態を一時的に隠したいときや、納品前に確認だけを済ませておきたいときに使う設定です。このレッスンの終わりには、必ずトグルをONに戻して公開した状態のままにしておきましょう。

最後に、公開した後でページの内容を直す流れを確認します。STUDIOでは、一度公開したあとの更新も難しい操作ではありません。

更新の手順は、エディタで直したい箇所を変更し、「変更を公開」ボタンをもう一度押すだけです。コードを書く方法のようにファイルを再アップロードする作業は必要ありません。この一連の流れが、今後の章でページを作り込んでいくときの基本サイクルになります。