CURRICULUM

Studio学習教材

ノーコードWeb制作ツール「Studio」を、基礎知識 → 基本操作 → CMS → 用語集の順に体系的にまとめたドキュメント教材です。
動画ではなくテキストと図解なので、作業中に必要なところだけを開いて読み返せます。

教材は、読んでも「詰まるところ」までは面倒を見てくれません

Studioの情報はすでに世の中にあふれていて、AIに聞けば手順も返ってきます。それでも学習が止まるのは、 自分のファイルで起きている崩れ方が、どの説明にも当てはまらないときです。 ここに置いた教材は無料で全部読めます。そのうえで、詰まった1箇所をその場で聞ける相手と、 同じところでつまずいた人が近くにいる状態を、ノーコードサロンで用意しています。

質問できる場所を見るplay_arrow 会員限定ツール一覧を見る
初心者はここから ノーコードとは何か｜市場の現在地と、いま学ぶ意味 ノーコードがなぜ広がったのか、Web制作の仕事がどう変わりつつあるのかを図解で整理します。ツールの操作を覚える前に、自分がどの市場に入ろうとしているのかを把握するための1本目です。 読みはじめる

全6章・51レッスン

CHAPTER 1

入門編全10レッスン

Studioを触る前に、ノーコードの現在地とツールの選び方、学び方の全体像をつかむ章です。

  1. 1-01 入門 約7分 ノーコードとは何か｜市場の現在地と、いま学ぶ意味 ノーコードがなぜ広がったのか、Web制作の仕事がどう変わりつつあるのかを図解で整理します。ツールの操作を覚える前に、自分がどの市場に入ろうとしているのかを把握するための1本目です。
  2. 1-02 入門 約6分 Studioとは何か｜ツールの中での立ち位置 Studioがどんなツールなのかを、他の制作手段との位置関係で整理します。デザインと公開環境がひと続きになっている構造が、なぜ制作を速くするのかを図解で解説します。
  3. 1-03 入門 約8分 ノーコードツール比較｜Studio・WordPress・Wix・Framer Studioと主要なWeb制作手段を、自由度・運用負担・費用・向いている案件の観点で比較します。「どれが優れているか」ではなく「どの案件にどれを当てるか」を判断できるようにする回です。
  4. 1-04 入門 約7分 Studioでできること・できないこと Studioの射程を、案件でよく出てくる要望ごとに一覧で整理します。受ける前に線引きできるようになると、無理な実装で消耗せずに済みます。
  5. 1-05 入門 約6分 料金プランの考え方｜無料で足りる範囲と、有料が必要になる線 Studioの有料プランがどこから必要になるのかを、判断軸ごとに整理します。制作費とランニングコストの切り分け、クライアントへの説明のしかたまで扱います。
  6. 1-06 入門 約7分 サイトが公開されるまでの全体像｜5つの工程 設計・デザイン・CMS設定・公開・運用という5工程を図解で整理します。いま自分がどこで詰まっているのかを特定できるようになる、制作の地図にあたる回です。
  7. 1-07 入門 約6分 Studioの学習ロードマップ｜何から手をつけるか Studioを最短で使えるようにするための学習順序を4段階で示します。全機能を覚えてから作り始めるのではなく、完成させる経験を先に積む順番を解説します。
  8. 1-08 入門 約6分 独学でつまずく3つのポイントと、その抜け方 Studio学習が止まる場所は、ほぼ3つに決まっています。症状・原因・抜け方を対応表にまとめ、詰まったときに自分で切り分けられるようにします。
  9. 1-09 入門 約10分 AI時代にWeb制作を学ぶ意味｜単価を守るのは「運用と定着」 AIで誰でも作れる時代に、制作単価はなぜ下がるのか。ノーコードの強みだったスピードがAIで薄れた今、価値は運用と定着への伴走へ移ります。AIとノーコードの比較、単価を守る4つの力を解説します。
  10. 1-10 入門 約6分 続けられる人の学び方｜挫折しないための構え 独学が止まる理由は意志の弱さではなく、環境と進め方にあります。完成を優先する考え方、質問の作法、学習を続けられる状態の作り方を扱う入門編の最終回です。

CHAPTER 2

基本操作編全10レッスン

エディタの画面構成から、ボックス・余白・サイズ・公開まで。1ページを形にするための操作を扱います。

  1. 2-01 基本 約5分 エディタ画面の構成｜どこに何があるか Studioのエディタを4つの領域に分けて把握します。「あの設定はどこか」で迷わなくなるための地図と、操作の基本の型を解説します。
  2. 2-02 基本 約6分 ボックスと入れ子構造｜Studioの土台となる考え方 Studioの画面はボックスの入れ子でできています。「子は親の中でしか動けない」という原則を図解し、要素が思った方向に動かないときの直し方につなげます。
  3. 2-03 基本 約5分 並べ方｜縦積みと横並び Studioのレイアウトは、親ボックスが子を縦に積むか横に並べるかの2択で成立します。切り替えの考え方と、横並びを選ぶときの注意点を図解します。
  4. 2-04 基本 約5分 揃えと配置｜中央寄せができない理由 「中央に寄せたいのに寄らない」の原因を、揃えの仕組みから解説します。縦方向と横方向の揃え、要素間の詰め方の違いを図解と対応表で整理します。
  5. 2-05 基本 約6分 余白｜内側・外側・要素間の使い分け 内側の余白と外側の余白の違いを図解し、どちらを使うべきかを判断できるようにします。要素間の間隔を親のギャップでまとめて指定する理由も解説します。
  6. 2-06 基本 約6分 サイズの決め方｜固定・可変・自動 幅と高さの3つの指定方法を比較表で整理します。スマホで崩れる原因のほとんどはここにあり、選び方を覚えるだけで崩れの大半は防げます。
  7. 2-07 基本 約5分 テキストの設定｜読みやすさを決める4つの数値 フォントサイズ・行間・字間・文字数の4つで、文章の読みやすさはほぼ決まります。見出しと本文の使い分けと、意味で見出しを選ぶ理由を解説します。
  8. 2-08 基本 約6分 画像の扱い｜比率・トリミング・容量 画像が伸びる・切れる・重いといった問題の原因を整理します。比率の保ち方、トリミングの考え方、書き出し前に決めるべき容量の目安を扱います。
  9. 2-09 基本 約6分 装飾｜色・角丸・影・ホバー 装飾は足し算ではなく引き算です。使う色と角丸の数を絞る考え方、影の使いどころ、スマホには存在しないホバーの扱いを整理します。
  10. 2-10 基本 約5分 プレビューと公開｜保存と公開は別の操作 「直したのにサイトが変わらない」の原因は、ほぼ公開ボタンの押し忘れです。保存・プレビュー・公開の関係と、公開前に確認すべき項目を整理します。

CHAPTER 3

レスポンシブ編全10レッスン

スマホで崩れる原因を、症状ごとに切り分けて直せるようにする章です。最初の大きな壁がここにあります。

  1. 3-01 実践 約5分 レスポンシブとは｜1つのデータで全画面に対応する レスポンシブ対応の考え方を、スマホ用サイトを別に作る方式との違いから解説します。1つのデータを画面幅ごとに調整するという前提を最初に押さえます。
  2. 3-02 実践 約5分 ブレイクポイント｜表示が切り替わる境目 画面幅ごとに表示が切り替わる「境目」の考え方を解説します。設定が引き継がれる方向と、境目の手前が崩れやすい理由を図解します。
  3. 3-03 実践 約5分 編集する順番｜PCから作り、スマホで直す レスポンシブ対応で二度手間を防ぐための作業順序を解説します。どの幅で何を直すか、直してはいけないタイミングまでを整理します。
  4. 3-04 実践 約6分 横スクロールが出る原因と直し方 スマホで横に動いてしまう症状の原因を5つに分類し、上から順に潰していく手順を解説します。レスポンシブ対応で最初に直すべき不具合です。
  5. 3-05 実践 約5分 横並びを縦積みに変える｜カードが潰れる問題 PCで横に並べた要素を、スマホで縦に積み直す手順を解説します。並び順の入れ替え、折り返しとの使い分けまで扱います。
  6. 3-06 実践 約5分 スマホの文字サイズ｜見出しが大きすぎる問題 PCの文字サイズをそのままスマホに持ち込むと、見出しが画面を占領します。幅ごとのサイズ目安と、折り返しの整え方を解説します。
  7. 3-07 実践 約4分 スマホの余白｜間延びと窮屈のあいだ PC用の広い余白がスマホに残ると、スクロールが無駄に長くなります。幅ごとの余白の目安と、左右余白の考え方を整理します。
  8. 3-08 実践 約5分 スマホでの画像｜比率と表示速度 横長の画像がスマホで小さくなる、メインビジュアルが縦長すぎるといった問題への対処を解説します。回線速度への配慮も扱います。
  9. 3-09 実践 約5分 スマホのナビゲーション｜メニューの畳み方 PCで横並びのメニューを、スマホでどう畳むかを解説します。ハンバーガーメニューの作りと、押しやすさの基準まで扱います。
  10. 3-10 実践 約5分 確認手順とチェックリスト｜崩れを見逃さない順番 レスポンシブ対応の最終確認を、見る順番とチェック項目に落とし込みます。納品前にそのまま使えるリストです。

CHAPTER 4

CMS編全10レッスン

後から中身を増やせる仕組みを、1レッスン1概念で積み上げます。運用できるサイトへの分岐点です。

  1. 4-01 実践 約5分 CMSとは何か｜後から中身を増やせる仕組み CMSが何をする仕組みなのかを、CMSを使わない場合との比較で解説します。「作って終わり」から「運用できるサイト」への分岐点にあたる回です。
  2. 4-02 実践 約4分 CMSを使う場面・使わない場面 すべてのページにCMSが必要なわけではありません。「増えるかどうか」「誰が更新するか」の2軸で判断する方法を、ページ種別ごとの一覧で示します。
  3. 4-03 実践 約5分 モデル｜コンテンツの設計図 CMSの土台となる「モデル」を棚のたとえで理解します。1コンテンツ1モデルの原則と、分けるべきか迷ったときの判断基準を扱います。
  4. 4-04 実践 約6分 プロパティと型｜項目の選び方 モデルが持つ項目「プロパティ」と、その型の選び方を比較表で整理します。型を間違えると並び替えや絞り込みができなくなる理由も解説します。
  5. 4-05 実践 約4分 アイテム｜実際の1件分のデータ モデルという型に沿って入れる中身が「アイテム」です。下書きと公開の状態管理、入力時に気をつけることを整理します。
  6. 4-06 実践 約5分 CMSリスト｜アイテムをページに並べる 溜めたアイテムをページ上に一覧表示する「CMSリスト（動的リスト）」を解説します。並び順・表示件数・絞り込みの設定と、任意に選んでまとめる「CMSコレクション」との違いも扱います。
  7. 4-07 実践 約5分 一覧ページの作り方｜1件分を作れば全部並ぶ 一覧ページは1件分のデザインを作るだけで成立します。カードの中身の選び方、件数が変わっても崩れない作り方を解説します。
  8. 4-08 実践 約5分 詳細ページ｜雛形1枚で全記事分をまかなう 詳細ページは雛形を1枚作るだけで、記事の数だけ自動生成されます。仕組みと、雛形を直接編集してはいけない理由を解説します。
  9. 4-09 実践 約5分 カテゴリーと参照｜分類を後から変えられる形にする カテゴリーを文字で持つか参照で持つかで、後からできることが変わります。参照（リレーション）の考え方と、選択肢との使い分けを解説します。
  10. 4-10 実践 約6分 運用｜納品後にクライアントが自分で更新できる状態 制作者が触る範囲とクライアントが触る範囲を分け、更新が回るサイトにする方法を解説します。よくあるトラブルの逆引き表つきです。

CHAPTER 5

案件獲得・営業編全10レッスン

作れるようになった先の話。ポートフォリオ・見積もり・営業手法・納品までを扱います。

  1. 5-01 実践 約6分 仕事にするまでの全体像｜作れることと、稼げることは別 制作スキルを仕事に変えるまでの流れを俯瞰します。実績づくり・営業・受注・納品という4段階と、それぞれで詰まる場所を整理します。
  2. 5-02 実践 約7分 ポートフォリオの作り方｜実績ゼロから見せられる形へ 実績がない段階でポートフォリオを作る方法と、載せるべき8つの要素を整理します。架空案件の作り方と、見せ方の注意点も扱います。
  3. 5-03 実践 約7分 見積もりと相場｜金額の根拠を持つ 制作費をどう組み立てるかを、積算の考え方と含める項目から解説します。安く受けてしまう構造と、その抜け方を扱います。
  4. 5-04 実践 約6分 営業手法の全体像｜自分に合う入口を選ぶ 案件を得る手段を5つに分類し、単価・難易度・立ち上がりの速さで比較します。「営業＝飛び込み」という思い込みを外すための地図です。
  5. 5-05 実践 約6分 制作会社の下請け営業｜最初の実績を作りやすい経路 制作会社からの受注を目指す進め方を解説します。営業先の探し方、送る内容、選ばれる条件、下請けならではの注意点まで扱います。
  6. 5-06 実践 約6分 エンド営業｜単価は上がるが、求められる範囲も広がる 事業者へ直接提案する営業の進め方を解説します。下請けとの違い、地域密着で戦う考え方、断られ方の受け止め方まで扱います。
  7. 5-07 実践 約6分 クラウドソーシングとスキル販売｜早く始められる入口 クラウドワークスやココナラなどのプラットフォームを使う場合の戦い方を解説します。価格競争に巻き込まれない差別化と、卒業のタイミングを扱います。
  8. 5-08 実践 約5分 SNSからの集客｜時間はかかるが、資産になる SNS発信で問い合わせを得るまでの考え方を解説します。何を発信するか、成果が出るまでの時間、営業との組み合わせ方を扱います。
  9. 5-09 実践 約7分 ヒアリングと要件定義｜手戻りは、ここで決まる 初回ヒアリングで何を聞くか、要件をどう言語化するかを解説します。「言っていること」と「本当に必要なこと」の差を埋める工程です。
  10. 5-10 実践 約6分 納品と保守運用｜終わりではなく、関係の始まり 公開前チェックから納品、その後の保守契約までを扱います。納品後に無償対応が積み上がる構造と、その防ぎ方を解説します。

CHAPTER 6

リファレンス全1レッスン

通読するのではなく、詰まったときに引くための資料です。

  1. 6-01 リファレンス 辞書として随時 用語集｜Studio制作で出てくる言葉を引く Studio制作でつまずきやすい用語を、エディタ・レイアウト・CMS・公開・SEO・実務の6分野に分けて一覧表でまとめました。読む教材ではなく、詰まったときに引く辞書として使ってください。

教材は順次追加していきます。取り上げてほしいテーマがあれば、ノーコードサロン内でリクエストできます。

まずは1ヶ月間参加してみるplay_arrow