LPをStudioでコーディングする方法とメリット、Studio実装が学べるおすすめ講座

こんにちは！Webデザイナーの@AoiDesignです。

今回は、Photoshopやfigmaなどのデザインツールで作ったLPを、Studio上で実装する方法を解説します。

通常のWeb制作では、エディタと呼ばれるツールを使い、HTMLやCSSなどを書いて実装作業を行っていくと思います。

ですが、コードが苦手な方、初心者デザイナーさんの場合は、その工程が難しかったりしますよね。

そんな時に便利なのが、ノーコードツールStudioです。

この記事では、

こういった内容を、初心者向けに分かりやすく解説していきます！

ノーコードツールStudioとは？

Studio（スタジオ）は、Webサイトをノーコードで作成できるWeb制作プラットフォームです。

ノーコードは簡単にいうと、HTMLなどのコードを自分で書かなくても、プログラミングの知識がなくても、サイトを作れる仕組みのこと。

Studio実装は、無料プランでも可能です

Studioには無料・有料プランがあります。

プラン名	年払い（月額換算）
Free	0円/月
Mini	590円/月
Personal	1,190円/月
Business	3,980円/月
Business Plus	9,980円/月
Enterprise	要問い合わせ

2026年8月現在の情報です。料金は変動する可能性がありますので、最新の情報は公式サイトをご確認ください。

LP制作の場合は、無料プラン（Freeプラン）でも十分対応可能かと思います。

ただ一点、気になるのは、無料プランの場合は、独自ドメインでの接続・公開ができません。

なので、制作したLPのページURLは、

◯◯◯◯.studio.site

※◯◯◯◯は好きな文字列にできます

という「Studio」の名前が入ったドメインになります。

もし、オリジナルのドメイン（例：会社名.comなど）を使いたいなら、有料プランを提案する必要がありますよ。

プラン別に利用できる機能の詳細

Studioで実装（コーディング）する3つのメリット

ここでは改めて、Studioで実装を行うメリットを簡単にご紹介します！

①HTML・CSSを書かずに作成できる

1つ目は、HTML・CSSを書かずにサイトが作れることですね！

Studioでは、テキストや画像、図形などのパーツを、ドラック＆ドロップの直感的な操作で配置しながらページを作っていきます。

もしStudioなどのノーコードツールを使わない場合は、エディタと呼ばれるツールを使い、HTMLやCSSを書かなければいけません。

▼VS Codeというエディタでコーディングをしている画面。

コードが苦手な方や初心者デザイナーにとっては、やはり難易度の高い工程ですよね。

それ以外にも、例えば、

こういった方にも、Studioの利用はおすすめです。

ただし一点！

HTML・CSSを書かずに作成できるとはいっても、基礎知識はあった方がStudio実装を理解しやすいです。

②サーバーやドメインを契約する必要がない

2つ目は、Studioならサーバーやドメインが不要であることです。

LPなどのWebサイトを制作する場合は、通常はサーバーとドメインを契約しなければいけません。

この2つは簡単にいうと、

Studioなら、Studioのサーバーとドメインを使ってサイトが作れるので、節約になりますね。

デザイナーとしてLP制作を受注する際にも、

という点が売りになると思います。

③CMS機能を簡単に実装できる

3つ目のメリットは、StudioならCMS機能を簡単に導入できる点です。

CMS（コンテンツ管理システム）
プログラミング知識がなくても簡単にWebサイトのコンテンツを作成・管理できるシステムのこと

StudioのCMS機能を使えば、例えば

こういった、納品後も定期的に更新・編集する必要があるコンテンツを、比較的簡単に導入・管理できます。

StudioのCMS機能は、ページ作成同様に、特にHTMLなどの知識は必要ありません。

ただ、機能の理解や操作に慣れるまでには多少時間がかかります。

利用する場合は、公式のチュートリアル動画を見たり、解説記事を読んだりして慣れていきましょう！

Studio CMSとは

Studioで実装（コーディング）する5ステップ

ここからは本題である「StudioでLPを実装するステップ」を解説していきます！

ステップ①Studioの新規登録

まず一つ目は、Studioの新規登録です。

「無料ではじめる」ボタンをクリックして、無料登録を行なってください。

Studioの登録はこちらから

ステップ②プロジェクト作成

登録が完了すると、チュートリアルなどが出てくる場合がありますが、それはスキップして構いません。

左上のStudioロゴをクリックして、プロジェクトの一覧画面からスタートします。

▼右上の「＋新しいプロジェクト」をクリックします。

▼次に、一番左にある「空白からはじめる」を選択します。

「プロジェクト名」を入力し、「作成」をクリックします。

プロジェクト名は、今回作るLPのタイトルなど、お好きな名前で大丈夫です。

ステップ③基本操作の理解

次に、Studioの基本操作と画面の見方を確認します。

Studioでは、左側の「追加」ボタンから、ページに入れたいパーツを選び、画面にドラック＆ドロップで挿入しながらページを作成していきます。

挿入したパーツは、今度は画面右側で装飾を加えていきます。

▼例えば、こちらでは「文字」を挿入したとします。

この文字は、画面右側の「テキスト」タブの中で、

こういったものを設定できます。

▼「ボックス」タブでは、周りの要素との余白の調整などが設定できます。

余白の調整で「マージン」「パディング」というものが出てきますが、初心者だと理解しづらいかもしれません。

簡単にいうと、

分からないものはググって調べたり、Studio公式ガイドをご確認ください。

ステップ④LPの制作

次に、LPの制作に入っていきます。

自分で作成したデザインを用意して、それを元に実装していきましょう。

デザインは、Photoshopやillustrator、Figmaなど、どのデザインツールで作っても構いません。

ただし、圧倒的なおすすめはFigmaです。なぜかというと、FigmaとStudioは非常に相性が良いから。

「Figma to Studio」というプラグインを利用すれば、簡単にFigmaで作ったデザインデータをStudioへインポートできます。

Figma to Studioの機能と使い方

LPの制作スタート

ここでは、よくあるLPの各セクションを作る方法を、簡単に解説していきます！

ヘッダー

一から作っていく方法もありますが、テンプレートを使う方が便利です。

画面左「追加」ボタンからテンプレートを選びます。

「追加」→「セクション」タブを選択したら、検索窓に「ヘッダー」と入力しましょう。

すると、いろんなデザインのヘッダーテンプレートが出てきます。

この中から、自分が作るデザインに近いデザインのヘッダーを選びます。

そして、そのデザインを編集する形で進めれば、効率よくデザインを作っていけますよ。

挿入したヘッダーは、「ステップ③基本操作の理解」で解説した通り、画面右側で装飾を行なっていきます。

FV（ファーストビュー）

LPのFVは、画像で作ることが多いかと思うので、そちらをやっていきます。

画像データは、画面左「アップロード」から追加ができます。

アップロードした画像をクリックすると、画面に挿入されます。

挿入しただけの状態だと小さすぎる場合があるので、shiftを押したまま角を引っ張ると拡大できます。

画像は「img」に設定

画像を挿入すると、右上に「Box」または「img」を選択できるボタンが出てくるので、imgを選びます。

すると、画面右側で「代替テキスト（alt属性）」を入力できる箇所が出てくるので、入力しておきましょう。

入力する内容は基本、画像内に入っている文字情報を打ち込めばOKです。

代替テキスト（alt属性）とは？
画像の内容を検索エンジンや読み上げ機能に伝える重要な情報で、SEO対策としても欠かせません。画像ボックス：代替テキストを設定する（alt）

CTA（ボタン付近）

CTAについても、ヘッダー同様にテンプレートを使うと便利です！

同じ要領で「追加」→「セクション」タブを選択したら、検索窓に「CTA」と入力しましょう。

挿入したCTAの余白を変更したい場合は、画面右側の「ボックス」にて行います。

例えば、こちらの画像↓の薄緑部分の余白を変えたいなら、「パディング」の数値を変更すればOKです。

いかがでしょうか？

スマホ版の作成方法

PC、タブレット、スマホなど端末によってデザインを変更することを「レスポンシブ」と言いますが、Studioでは簡単にレスポンシブデザインを作成できます。

画面下に出てくる端末の切り替えボタンを使います。

PC、タブレット、スマホ版を切り替えながら、それぞれのデザインを微調整していきましょう。

FV画像の切り替え方

LPでは、FVの画像を「PC・タブレット」と「スマホ」の2パターンで切り替えることが多いと思います。

その場合は、まずスマホ版の画像をアップロードし、PC版の画像の下に挿入します。

このままだと、2つの画像が縦並びになってしまうので、表示・非表示の設定を行います。

やり方は、画面左「レイヤー」をクリックして、FVの画像のレイヤーを見つけてください。

レイヤーの右端に「表示設定」という項目が出てくるので、クリックします。

そしたら、その画像を表示させたいサイズにだけチェックを入れればOKです。

ステップ⑤公開と納品

LPが完成したら、1クリックで簡単に公開できます。

画面右上の「公開」ボタンをクリックし、お好きなドメイン名を入力後、「公開」を押せばOKです。

ただ、その前に！実際のページの見え方を「プレビュー」機能で確認しておいた方がいいと思います。

画面右上の公開ボタンの左側に「▶︎」のマークがあります。これがプレビューボタンです。

こちらをクリックすると、URLが発行されるので、それをクリックするとプレビュー画面に飛びます。

サイト設定も忘れずに！

LPを公開するにあたっては、サイト設定も非常に大切です。

Studioは動画で学ぼう！おすすめスクール・講座

最後に、お得にStudio実装が学べるスクールと講座をご紹介します。

特に、将来的にStudioを使ってLP制作を受注したいデザイナーさんは、一度しっかりStudioを学んでおくことがおすすめです。

お得に受講する方法も併せて解説するので、ぜひチェックしてみてくださいね。

①Udemy「【入門講座】ノーコードSTUDIOの基本操作〜LP制作スキルを習得しよう！」

1つ目は、Udemyにある講座です。

Studioの基本操作〜LP制作実装方法までを学べる実践的な講座になります。

Udemy（ユーデミー）
世界的に有名なオンライン学習プラットフォーム。年に数回あるキャンペーン期間中は、最大95％割引で講座を購入できます。

＼手を動かして学べる実践的動画講座！／

②デイトラ「Webデザインスタンダードコース」

2つ目は、未経験からWebスキルを学べるオンライン学習スクール「デイトラ」です。

その「Webデザインスタンダードコース」になります。

Webデザイナーになりたい方向けのコースなので、Studio実装以外にも、こんな内容が学べます。

＼figmaの基礎とStudio実装が学べる／

▼受講レビューを書いています

▼デイトラをお得に受講する方法