知識ゼロからノーコードではじめる Studio Webサイト制作入門

関連サイト

本書の関連ページが用意されています。

• 知識ゼロからノーコードではじめる Studio Webサイト制作入門 | インプレス

内容紹介

これからWebサイト作るなら “Studio”で【ノーコード時代に必須ツール“Studio”の入門書が発売】

本書はWebサイトを作りながらWebサイト制作ツール「Studio」の基本操作が学べる入門書です。

Webサイト制作がはじめての方でも本書で紹介されたWebサイトを制作することでStudioの基本操作、StudioでWebサイトを作るための知識が学べ、自分の作りたいWebサイトが作れるようになります。

▼こんな人におすすめです

・Studioの基本操作を学びたい人
・Webサイト制作が未経験だけど、Webサイトを作りたい人
・Webサイトの制作、運用の工数削減のためノーコードツールを導入したい方
・テンプレートベースでなく、本格的なWebサイトを作りたい人
・コーダーやエンジニアを挟まず、Webサイトの制作～サイト公開をしたい人

書誌情報

• 著者: gaz
• 発行日: 2025-03-21 (紙書籍版発行日: 2025-03-21)
• 最終更新日: 2025-03-21
• バージョン: 1.0.0
• ページ数: 240ページ(PDF版換算)
• 対応フォーマット: PDF, EPUB
• 出版社: インプレス

対象読者

Webデザイナー、デザイナー、広報、インハウスデザイナー、宣伝担当、コーダー

著者について

gaz

世界初、唯一*のStudio Experts Platinumの株式会社gaz(ギャズ)は「想いをデザインで可視化する」をパーパスにWebサイト制作・UIデザイン・ブランディング事業を展開する福岡のデザインファーム。2019年の創業から現在までメガベンチャー、大手企業、スタートアップ、地方自治体など計400を超えるお客様の課題解決をデザインで支援。gazがUI/UXデザインを担当した「福岡市LINE公式アカウント」が2020年度グッドデザイン賞を受賞。2021年より代表 吉岡が福岡市DXデザイナーに受嘱。 *2025年2月時点
https://gaz.design/

目次

はじめに

目次

本書の使い方

ノーコードWeb制作ツール「Studio」について

CHAPTER01 Studioを使う前に知っておきたい最低限の基本と下準備

• PART01 Webサイトの種類
• PART02 Webサイトの構造
• PART03 レイアウト
• PART04 レスポンシブWebデザイン
• PART05 写真・イラスト・アイコン
• PART06 フォント
• PART07 配色
• PART08 イメージ固め
• PART09 ワイヤーフレーム
• COLUMN Webデザインの企画書 ムードボード・ワイヤーフレーム

CHAPTER02 ページを作りながら基本操作を覚えよう

• PART01 Webサイトを作ってみよう
• PART02 ボックスレイアウトの基本
• PART03 レイヤーの基本
• PART04 HTMLタグの基本
• PART05 新規プロジェクトの作成
• PART06 カラーとフォントの設定
• PART07 ヘッダーの作成
• PART08 ホバーアニメーションを設定する
• PART09 メインビジュアルの作成
• PART10 あしらいの配置（絶対位置）
• PART11 レイアウトのリスト化
• PART12 ソーシャルアイコン
• PART13 CTAセクション
• PART14 フッター／トップに戻る
• COLUMN 実装マイルールを作ろう

CHAPTER03 コンテンツが充実した下層ページを作る

• PART01 下層ページ
• PART02 コンポーネントの作成
• PART03 下層ページの作成／コンポーネントの挿入
• PART04 プロフィールの作成
• PART05 カルーセル
• PART06 グリッドレイアウト
• PART07 テキストの一覧
• PART08 問い合わせページ
• PART09 THANKSページ/送信設定
• PART10 プライバシーポリシーページ
• COLUMN デザインスキルアップに繋がるデザイン分析

CHAPTER04 CMSを構築して記事を作成する

• PART01 CMSの基本
• PART02 CMSモデルの作成
• PART03 プロパティの追加・編集
• PART04 記事の編集画面
• PART05 CMSとエディタを紐づける
• PART06 タグのフィルタリング
• PART07 CMSアイテム詳細ページの作成
• COLUMN 共同でサイト制作ができる！コラボレーション機能

CHAPTER05 完成したサイトを公開しよう

• PART01 公開するまでの流れ
• PART02 リンクの設定
• PART03 レスポンシブの調整
• PART04 ハンバーガーメニュー／モーダル
• PART05 動作検証して公開
• COLUMN Studioで実現するウェブアクセシビリティ

CHAPTER06 クオリティがぐっと上がる！デザインアイデア集

• PART01 文字組み・フォント
• PART02 レイアウト
• PART03 カラーリング
• PART04 素材加工
• PART05 カルーセル
• PART06 埋め込み
• PART07 ホバーアニメーション
• PART08 出現時アニメーション
• PART09 モーダル
• PART10 404ページ
• PART11 トグル
• PART12 ボックス内スクロール
• COLUMN Studio Storeで買えるオリジナルのテンプレート