目次

第1章　Studioの基礎知識

• Studioとは？
• Studio制作のロードマップ
• Studioの料金プラン
• アカウント登録とサポート活用

第2章　プロジェクトの管理と基本設定

• プロジェクトを作成する
• デザインエディタの基本
• プロジェクトの基本設定とメンバー追加
• プロジェクトを整理する／リセットする

第3章　レイアウトをデザインする

• ボックスレイアウトの基本
• ボックスを追加する
• ボックスの親子関係とグループ化
• ボックスの並び方向と配置を設定する
• ボックスのサイズと外観を設定する
• ボックスの余白を設定する
• レイヤーパネルを活用する
• レスポンシブを設定する
• 配置のルール（相対・固定・絶対・追従）を理解する

第4章　コンテンツ要素を配置する

• テキストを追加し、スタイルを設定する
• サブフォントを組み合わせる
• フォントの使用状況を確認・整理する
• デザインに一貫性を持たせるスタイル機能
• 画像を追加する
• アップロードした画像を整理する
• アイコンを追加する
• GoogleマップやYouTubeを埋め込む
• リッチテキストボックスを活用する
• 【実践】メインビジュアルを作成する
• 【実践】ヘッダーを作成し、固定表示する
• 【実践】SNSアイコンが入ったフッターを作成する

第5章　デザイン機能を実装する

• ページを追加する
• テキストや画像にリンクを設定する
• リスト化で「○○一覧」を作成する
• コンポーネント化で「共通パーツ」を作成する
• モーダルウィンドウを作成する
• アニメーションを設定する
• 自動再生カルーセルを作成する
• フォームを追加・編集する
• フォームへのお問合せを管理する
• 【実践】カラムレイアウトを作成する
• 【実践】自動再生するギャラリーを作成する
• 【実践】地図と表を入れた会社概要を作成する
• 【実践】ハンバーガーメニューを完成させる
• 【実践】お問合せフォームを作成する

第6章　CMS機能をマスターする

• Studio CMSとは？
• モデルを新規作成する
• アイテム（記事）を作成・公開する
• アイテム（記事）を編集・装飾する
• 記事をデザインエディタと紐付ける
• プロパティを活用する
• コレクションを活用してアイテムをまとめる
• WordPressの記事をインポートする
• 記事の検索ページを作成する
• 【実践】カテゴリー機能付きのCMSを作る①　CMSでの設定
• 【実践】カテゴリー機能付きのCMSを作る②　デザインエディタでの設定

第7章　サイトを公開する

• 公開前のチェック①　サイト・ページの設定
• 公開前のチェック②　サイト構造の最適化と最終確認
• サイトを公開／非公開にする
• 独自ドメインでサイトを公開する
• Google Analyticsと連携する
• Google Search Consoleと連携する
• 特定のページを非公開にする
• アクセシビリティを設定する
• 構造化データによるSEO対策

第8章　応用的なコンテンツの実装

• フォームの自動返信メールを設定する
• フォームにGoogleリキャプチャを設定する
• 外部サイトの新着記事を表示する（RSS連携）
• ボタンに決済機能を埋め込む

第9章　制作作業の効率化

• ショートカットキーを使いこなす
• バージョン管理を行う
• Figma to Studioを活用する
• AI機能で制作を効率化する