職業訓練ユニット13｜STUDIO 制作ツール演習 (15時間）

ユニット13では、STUDIOを使って“デザインから公開まで”を一気に体験しました。
STUDIOは、編集体験が直感的な一方で、公開やドメインの部分で初めてつまずきやすい印象があります。この記事では、私が迷ったポイントを正直に残しつつ、初心者が再現できる順番で整理します。 help.studio.design+1

この記事でわかること（3つ）

• STUDIOでサイト制作→公開までの基本の流れ

• つまずきやすいポイント（原因→対処）

• 公開・提出前チェックリスト

学習内容の全体像（ユニット13でやったこと）

• セクション構成（ヒーロー/紹介/実績/お問い合わせ等）

• レスポンシブ調整（画面幅ごとの見え方）

• 公開設定（サブドメイン/独自ドメイン）

• （可能なら）CMSの基本：コレクションでコンテンツ管理 help.studio.design+1

基本設定（最初にここだけ押さえる）

• まず「ページ構成」と「導線（お問い合わせ/CTA）」を決める

• 余白と整列のルールを先に固定（後で崩れにくい）

• 公開は最後にまとめてではなく、途中で一度“公開の流れ”を確認しておく help.studio.design+1

ユニット13の作業手順（私の手順メモ）

1. ページ構成を決める（必要最小限）

2. セクションを作る→文章を入れる（情報確定が先）

3. 画像・装飾は後から（崩れ防止）

4. レスポンシブを確認しながら調整

5. 公開設定（サブドメインor独自ドメイン）

6. 仕上げ（リンク・フォーム・表示崩れチェック） help.studio.design+1

つまずいた点と解決（原因→対処）

• 例1：公開したのに見られない／反映されない
  → 原因：公開設定・証明書・DNSなどの確認が必要な場合がある
  → 対処：公式の確認項目に沿って順にチェック help.studio.design

• 例2：独自ドメインで公開したいが手順が不安
  → 対処：サブドメインで一度公開→その後に独自ドメインへ（段階的に） help.studio.design

• 例3：更新が増えるページ（ブログ/実績）を毎回手で直したくない
  → 対処：CMS（コレクション）で“コンテンツを管理して流し込む”考え方を使う help.studio.design

提出前チェックリスト（1分で確認）

• PC/スマホで表示崩れがない

• ナビ・ボタン・リンクが全て動く

• CTA（お問い合わせ等）の導線が分かる

• 公開URLが第三者の端末で開ける（シークレット/スマホで確認）

• 独自ドメイン運用の場合：設定・反映状況を確認 help.studio.design+1

学習のコツ（初心者向け）

• 迷ったら「余白」「整列」「見出し階層」に戻る

• 公開周りは“手順を飛ばさない”が最重要（焦るほどミスが増える）

• “分かったつもり”にならず、つまずきログを残す（次に同じ所で短縮できる）

まとめ｜次に読むおすすめ

• 前：ユニット12（Wix）

• 次：ユニット14（HTML基本）

• 関連：ユニット11（Figma）

参考（外部リンクと授業動画タイトル）

公式ヘルプ（分からない時はここ）

• 独自ドメインでサイトを公開する：STUDIO

• 独自ドメインの接続・公開トラブル時の確認：STUDIO

• CMSコレクション（コンテンツ管理の考え方）：STUDIO

＜授業動画タイトル＞
授業動画が視聴できないため、下の「授業動画タイトル一覧」は“チェックリスト”として活用しています。
タイトルから作業内容が想像できない場合は、同じキーワードで公式ヘルプを検索して補います。