想像以上に進化している国産ノーコード制作ツール「Studio」の使い方がよく分かる解説書 -Studio Webサイト制作入門

Post on:2025年5月9日

sponsors

※本ページは、アフィリエイト広告を利用しています。

Web制作関連はCSSやAIやツールなどの進化が早いですが、国産ノーコードツール「Studio」も想像以上に進化していました！

一昔前のノーコードツールだと、コードが汚くなるので使えないという風潮がありましたが、Studioはかなり洗練されたコードでWebサイトを実装できます。Studioの導入を検討している人にぴったりの解説書を紹介します。

著者はStudio Expertsで唯一のPlatinumランクの株式会社gaz、STUDIOでの卓越した制作実績があり、そのノウハウを余すことなく解説された一冊です。特にテンプレートベースではなく、本格的なWebサイトを作りたい人にお勧めです。

知識ゼロからノーコードではじめる
Studio Webサイト制作入門
ISBN 978-4-295-02142-1
[Amazonでみる]
[楽天でみる]

著者: gaz
出版社: インプレス
発売日: 2025/3/21

Kindle版も発売されています！

Studio Webサイト制作入門 Kindle版

版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。

Studioとはコーディング作業は一切不要で、Webサイトやスマホアプリのデザインを積み木感覚でデザインできる国産ツールです。基本機能は無料で利用でき、必要に応じてアップデートできる有料プランも豊富に揃っています。さらに、モリサワのTypeSquareやFONTPLUSなども使用できるので、デザインの環境はかなり整備されています。

本書は6章構成で、Studioの基本操作をはじめ、Webサイトの作り方やCMSの構築方法、サイトのデザインアイデア集まで、詳しくていねいに解説されています。

Studioでは、さまさざまなタイプのWebサイトを構築できます。ポートフォリオ、コーポレートサイト、ランディングページ、イベントサイト、サービスサイト、ニュース・メディアサイトなど、すべてノーコードで構築できます。

第2章ではポートフォリオを例に、Studioの基本的な使い方を学びます。まずはトップページを作りながら各要素の配置やレイヤーの扱い方、タグの概念についてです。

Webサイトを構築するときにStudioで最初にすることは、新規プロジェクトの作成です。Studioでは1プロジェクトにつき、1つのWebサイトを制作することができます。テンプレートも豊富に用意されていますが、本書では白紙の状態から作成します。

トップページの作成に取り組む前に、Webサイトに使用するカラーとフォントを設定しておきます。これらは後から変更・追加することも可能ですが、ブランドカラーやアイデンティティに基づいてカラーとフォントを決めます。

カラーとフォントが決まったら、さっそくトップページのヘッダを作成します。StudioはノーコードでWebページを作成できますが、コードの知識が不要ということではありません。ヘッダの実装にheaderタグを使用し、ナビゲーションにはnavタグ、ナビゲーションの各アイテムはulを使用するなどの知識が必要です。

第3章はさまざまなコンテンツ・レイアウトがある下層のページを作成します。画像をスライド表示させるカルーセル、画像やテキストを格子状に配置するグリッド、お問い合わせページのフォームなどをノーコードで作成します。すべてのページをゼロから作るのは手間と時間がかかるので、ヘッダやフッタなどの共通部分はコンポーネント化して流用することができます。