出版社内容情報
★基本の理解から実務レベルの制作まで、最短距離で身につける
ノーコードWeb制作ツール「Studio」は、自由度が高いツールだからこそ、
その真価を引き出すには「正しい仕組みの理解」が欠かせません。
本書は、Studioの基本的な使い方はもちろん、
レスポンシブ対応の前提となるボックスレイアウトの考え方から、
ブログ運用に必要なCMSの構築、公開後の運用まで、Studioを実務レベルで使いこなすための一冊です。
＜本書の3つの特徴＞
・「仕組み」からしっかり学べる
Studio制作の基本となる「ボックスレイアウト」の概念からていねいに解説。単なる操作の暗記ではなく、構造を理解したうえでデザインできるようになります。
・「基本」と「実践」をセットで習得
機能解説のあとに、メインビジュアルやフォーム作成などの【実践】演習を配置。手を動かすことで、学んだ知識をすぐに具体的な制作へとつなげられます。
・「公開まで」の実務を網羅
サイトを公開して終わりではありません。CMSの活用、SEO対策、Google Analytics連携まで、実務レベルに欠かせない一連の工程をすべて学べます。
＜こんな方におすすめ＞
・Web制作会社1年目のデザイナー
・フリーランス・副業でのWeb制作を目指す方
・自社サイトの運用を任された広報・制作担当者
・「仕組み」からStudioを理解したい方
【目次】
■第1章 Studioの基礎知識
Studioとは？
Studio制作のロードマップ
Studioの料金プラン
アカウント登録とサポート活用
■第2章 プロジェクトの管理と基本設定
プロジェクトを作成する
デザインエディタの基本
プロジェクトの基本設定とメンバー追加
プロジェクトを整理する／リセットする
■第3章 レイアウトをデザインする
ボックスレイアウトの基本
ボックスを追加する
ボックスの親子関係とグループ化
ボックスの並び方向と配置を設定する
ボックスのサイズと外観を設定する
ボックスの余白を設定する
レイヤーパネルを活用する
レスポンシブを設定する
配置のルール（相対・固定・絶対・追従）を理解する
■第4章 コンテンツ要素を配置する
テキストを追加し、スタイルを設定する
サブフォントを組み合わせる
フォントの使用状況を確認・整理する
デザインに一貫性を持たせるスタイル機能
画像を追加する
アップロードした画像を整理する
アイコンを追加する
GoogleマップやYouTubeを埋め込む
リッチテキストボックスを活用する
【実践】メインビジュアルを作成する
【実践】ヘッダーを作成し、固定表示する
【実践】SNSアイコンが入ったフッターを作成する
■第5章 デザイン機能を実装する
ページを追加する
テキストや画像にリンクを設定する
リスト化で「○○一覧」を作成する
コンポーネント化で「共通パーツ」を作成する
モーダルウィンドウを作成する
アニメーションを設定する
自動再生カルーセルを作成する
フォームを追加・編集する
フォームへのお問合せを管理する
【実践】カラムレイアウトを作成する
【実践】自動再生するギャラリーを作成する
【実践】地図と表を入れた会社概要を作成する
【実践】ハンバーガーメニューを完成させる
【実践】お問合せフォームを作成する
■第6章 CMS機能をマスターする
Studio CMSとは？
モデルを新規作成する
アイテム（記事）を作成・公開する
アイテム（記事）を編集・装飾する
記事をデザインエディタと紐付ける
プロパティを活用する
コレクションを活用してアイテムをまとめる
WordPressの記事をインポートする
記事の検索ページを作成する
【実践】カテゴリー機能付きのCMSを作る① CMSでの設定
