【体験談付き】StudioでLPを制作するメリットとは？制作の流れやテンプレートの使い方を徹底解説！
「2週間以内にLPを制作したい」 「自社で管理・更新できるLPが欲しい」
そんなお悩みを持つ方も多いのではないでしょうか。
本記事では、ノーコードツールStudioを使用して短期間でサイト制作を行う方法についてご紹介いたします。
StudioExpertsに加盟しているノクステックならではの知見も織り交ぜながら解説しておりますので、ぜひ最後までお読みください。
※StudioExperts（スタジオエキスパート）とは、Studio公式の審査を通過したエキスパート集団のこと
社内だけで運用可能なLPの制作で、お困りではありませんか？
スタートアップや広告代理店の方へ
・Web知識が少ないスタッフでも管理・更新できるLPが欲しい
・2週間以内&限られた予算内でLPを制作したい
・ノーコードでのLP制作を丸投げできるパートナーを探している
LP制作・運用のコストを抑えたい方は、ぜひ以下のフォームからお問い合わせください。
ホームページ経由でお問い合わせをいただいた方には、StudioでLPを運用して、売上を数倍に上げるために押さえるべきチェック項目をまとめた限定資料をお渡しさせていただきます。
目次
Studioとは？
Studioは、Webサイト制作を行うことができる国産のノーコードツールです。
Studioの特徴としては、デザイン性の高さや管理更新がしやすいこと等があります。
また、ノーコードツールでありながらもメルカリやベネッセ等、上場企業からスタートアップまで数多くの企業で導入されています。
従来のプログラミングを用いるサイト制作手法と比べて、高速で仮説検証を行うことができるため、特にスタートアップ企業で活用されています。
そのほか、広告運用を行う際のWebサイト制作ツールとしても利用されています。
LP制作にStudioを使うメリット
LP制作にStudioを活用する5つのメリットは以下の通りです。
- デザインの自由度が高い
- 制作時間を1/2程度に短縮できる
- プログラミング知識がなくても制作・運用できる
- WordPressに比べて管理コストを1/2程度に抑えることができる
- GA4やGTMなどサイト分析ツールが使用できる
それぞれ詳しく解説します。
メリット1.デザイン性が高い
Studioを活用することで、デザイン性の高いLPを制作することができます。
また、プログラミング不要で従来のサイト制作と遜色のないWebサイト制作が可能です。
ヘッダーで使用されるハンバーガーメニューやよくある質問で使用されるアコーディオン等を簡単に実装することができます。
ノクステックのお客様である高尾様からは「想像以上の出来栄えに驚いた」というコメントをいただいております。
事例紹介：推しネコプラットフォームのLP制作
メリット2.制作時間を1/2程度に短縮できる
Studioを活用することで、制作時間を1/2程度に短縮することができます。
Studioではブロックエディターを使用してノーコードでのサイト制作が可能なため、従来の手法よりも大幅な制作時間の短縮を実現することができます。
メリット3.プログラミング知識がなくても制作・運用できる
Studioを活用することで、非エンジニアでもサイトの制作・運用を行うことができます。
そのため、サイトの修正を自社で行うことができます。
具体的には、画像や文章の変更、ニュース記事や導入事例の追加等を内製化することも可能です。
また、運用時にはヒートマップなどを見て、離脱箇所の改善を自社で即座に行うことができることも大きな強みです。
メリット4.WordPressに比べて管理コストを1/2程度に抑えることができる
Studioは、WordPressに比べてWebサイトの管理コストを1/2程度に抑えることが可能です。
Studioを活用することで、サーバーの用意やメンテナンスが不要になります。
また、Studioには日本語サポートも充実しているため、困ったときに相談することも可能です。
メリット5.GA4やGTMなど分析ツールの連携が簡単にできる
Studioでは、ダッシュボードにあるAppsというメニューからGA4等の分析ツールと連携することができるため、Web知識がないスタッフでも簡単にデータ分析を行うことができます。
Studioで連携可能な分析ツールは以下の通りです。
- Google Analytics
- Google Tag Manager
- Google Search Console
- Meta Pixel
- Hubspot Tracking
また、Studioでは有料プランにすることでCanonicalタグの設定も可能となります。
LP制作にStudioを使うデメリット
LP制作にStudioを使うデメリットは以下の通りです。
それぞれ詳しく解説します。
デメリット1.機能によっては実現できないものがある
Studioでは、会員機能を利用することができません。
そのため、会員サイト等の開発には不向きです。
あくまでも、Webサイト制作に特化ツールであるという認識を持つと良いでしょう。
デメリット2.SEOの設定に時間がかかる
Studioでは、SEO対策に関する機能として、タグの設定やサイトマップの自動作成等があります。
サイト制作の段階で、1つ１つ設定を行う必要があるため、SEOの設定に少し時間がかかるといえるでしょう。
しかし、Studioでも十分にSEO対策を行うことで検索上位を獲得することが可能です。
ノクステックのお客様の場合、検索ボリュームが300程度のキーワードで4位を獲得するなど、決してSEOに弱いわけではありません。
デメリット3.連携できるツールに制限がある
Studioでは、連携できるツールに制限があります。
連携方法としては、Iframe形式でページに埋め込む方法とApps内にあるツールを使用する方法の2種類があり、どちらにも当てはまらないツールは原則、連携することができません。
| 連携できるツール | 連携できないツール |
|---|---|
| Google Analytics | Trello |
| Google Tag Manager | Slack |
| Google Search Console | 弥生会計 |
| Google reCAPTCHA v3 | |
| Meta Pixel | |
| HubSpot Tracking | |
| Intercom | |
| Channel | |
| Notion | |
| microCMS | |
| Airtable |
ノクステックでは、社内でのLP制作に不安を抱えるスタートアップや広告代理店のお客様を対象に、無料相談を実施しております。
ホームページ経由でお問い合わせをいただいた方には、StudioでLPを運用して、売上を数倍に上げるために押さえるべきチェック項目をまとめた限定資料をお渡ししております。
「懸念点について詳しく話聞きたい」「StudioでのLP制作に興味がある」という方はお気軽にご相談ください。
Studioを使ったLP制作の8ステップ
StudioでLP制作を行う流れは以下の通りです。
- LP制作の目的を決める
- LPに必要な要件を整理する
- LPのワイヤーフレームを作る
- LPのライティングを行う
- LPのデザインカンプを制作する
- LPを実装する
- LPの動作確認&修正を行う
- LPを公開・運用する
それぞれ詳しく解説します。
ステップ1.LP制作の目的を決める
まずは、LP制作の目的を明確にします。
LP制作の目的は以下のようなものがあるため、制作に取り掛かる前に目的を明確にします。
- 商品の購入
- お問い合わせの獲得
- 資料請求の獲得
- 事前申込者の獲得
お客様の商品/サービスがBtoB、BtoCのどちらなのかによっても目的は変わってくるため、社内リソースを踏まえつつ、決定する必要があります。
| BtoB | BtoC |
|---|---|
| 商品の購入 | 商品の購入 |
| お問い合わせの獲得 | イベントの告知 |
| 資料請求の獲得 | 事前申込者の獲得 |
| 事前申込者の獲得 | |
| メルマガ登録者の獲得 |
ステップ2.LPに必要な要件を整理する
LP制作の目的が明確になったら、LPに必要な要件を整理します。
商品/サービスごとにLPを3つの鉄板構成に分けることができます。
構成1.問題解決型LP
問題解決型LPの特徴は、水道修理や虫歯治療などの今すぐ課題を解決したい商品/サービスであることです。
ユーザーの緊急度が高いため、それに合わせたLPの構成にする必要があります。
また、この手のサービスを求めるユーザーは、論理的にページを訪れ、感情で購入に至るというのもポイントです。
| 項目 |
|---|
| ➀期待 |
| ➁信頼 |
| ➂ベネフィット |
| ➃解決方法(商品説明) |
| ➄比較 |
| ⑥信用 |
| ⑦不安解消 |
| ⑧ストーリー |
| ⑨行動を促す |
構成2.欲求充足型LP
欲求充足型LPの特徴は、生活には不必要であるものの、高級品などの自分を満たしてくれる商品/サービスであることです。
また、高価な商品/サービスである場合が多いため、定期的にユーザーがページを訪れることを前提にしたLPの構成にする必要があります。
欲しいという感情を論理(言い訳)で必死に封じ込めているイメージを持つと良いでしょう。
この手のサービスを求めるユーザーは、欲しいという感情によってページを訪れ、論理的に購入に至るというのもポイントです。
| 項目 |
|---|
| ➀共感(発見) |
| ➁信用 |
| ➂想像 |
| ➃比較 |
| ➄不安解消 |
| ⑥買う理由(言い訳) |
| ⑦行動を促す |
構成3.潜在的需要型LP
潜在的需要型LPの特徴は、何らかのきっかけによってユーザーが購入を検討する商品/サービスであることです。
商品カテゴリーへの認知はあるものの、特に必要性を感じていないため、必要だと気づいてもらえるようなLPの構成にする必要があります。
そのため、まずはユーザーが抱えている商品群への思い込みを覆すことが必要になります。
ユーザーは、基本的に商品を信用していないため、これまでの常識を破壊するFVと権威性における情報の信ぴょう性がポイントになります。
また、この手のサービスを求めるユーザーは、論理的にページを訪れ、論理的に購入に至るというのもポイントです。
| 項目 |
|---|
| ➀認知的不協和 |
| ➁必要性 |
| ➂信用1 |
| ➃解決方法(商品説明) |
| ➄信用2 |
| ⑥比較 |
| ⑦不安解消 |
| ⑧買う理由(言い訳) |
| ⑨行動を促す |
ステップ3.LPのワイヤーフレームを作る
要件が整理できたら、ワイヤーフレームを作成します。
このステップでは、ページ全体の構成を決めていきます。
LPの型を参考にして、構成を決めていくと良いでしょう。
ステップ4.LPのライティングを行う
ワイヤーフレームが完成したら、ライティングを行います。
ワイヤーフレームで作成した構成をもとに、実際の文章を作成していきます。
ライティングの精度によってLPのCVRは大きく変わってくるので、商品/サービスのペルソナをもとにベネフィットが伝わるようなライティングが重要になってきます。
ステップ5.LPのデザインカンプを制作する
ライティングが終了したら、デザインを作成していきます。
この段階では、ワイヤーフレームとライティングの内容をもとに実際のLPで使用するデザインカンプを作成します。
ノクステックでは、Figmaというデザインツールを使用しております。
Figmaには、コメント機能があるため、デザインに関して気になる点があれば、その都度デザイナーに対して伝えることが可能です。
また、Studioでは実装できない機能もあるため、デザイン段階でチェックすることが重要です。
ステップ6.LPを実装する
デザインカンプが完成したら、StudioでLPを実装してきます。
1枚もののLPを実装する場合、最短でも2.3日程度は想定しておくと良いでしょう。
また、この段階でドメインの設定やApps連携、有料プランへの加入等を行います。
ステップ7.LPの動作確認&修正を行う
LPを実装した後は、動作確認とお客様による最終確認を行います。
この段階では、LPを公開する前にデザインの微調整やリンクの抜け漏れがないか等の確認作業を行います。
ステップ8.LPを公開・運用する
最終確認が終了したら、LPを公開します。
LP公開後は、GA4やGTMなどの分析ツールを用いて、ページの分析を行います。
Studioを利用することで、FVの変更などを自社で簡単に行うことができるため、LPを使った仮説検証サイクルを大幅に向上させることができます。
StudioのLPをテンプレートを活用して制作する
StudioのLP用テンプレートを選ぶ
Studioでは、Studio Storeというテンプレートが掲載されたマーケットプレイスがあります。
テンプレートを使用する際は、Studio Storeにある300種類以上のテンプレートの中から自社にマッチしたテンプレートを選ぶ必要があります。
有料テンプレートの場合は、このタイミングで決済を行う必要があります。
Studioテンプレートの使い方
1.プロジェクトを作成
まずは、プロジェクトを作成します。
Studio Storeにあるテンプレートの詳細ページにある「無料ではじめる」ボタンを選択し、プロジェクトを作成します。
2.カスタマイズ
テンプレートをもとにテキストの編集や画像を追加する等の作業を行います。
ここではテンプレートを崩さずに編集作業を行うことが大切です。
仮にテンプレートのレイアウトを崩してしまった際は、戻るボタンから取り消しを行いましょう。
3.LP公開
テンプレートのカスタマイズが完了したら、LPを公開しましょう。
公開はエディターの右上にある公開ボタンから行うことができます。
独自ドメインを使用する場合は、ドメインの設定が完了してからサイトを公開するようにしてください。
参考：Studioテンプレートの使い方やメリット・デメリット
StudioでLPをテンプレートで作る際の注意点
LPをテンプレートから制作する際の注意点として、下手にパーツを触るとページのレイアウトが崩れてしまうことが挙げられます。
実際にノクステックにも、有料テンプレートを活用してLPを制作しようとしたものの、誤ってボックスを消してしまったというお問い合わせが何件かありました。
テンプレートを自社で活用するには、ある程度のプログラミング知識とブロックエディターへの理解が必要です。
そのため、社内にプログラミング人材がいない場合は、プロに外注するのがおすすめです。
Studioで制作したサイト制作事例3選
制作事例1.SmartHRの人事・労務コミュニティ「PARK」
SmartHRでは、人事・労務コミュニティである「PARK」のLPをStudioで制作しています。
Studioを導入した背景としては、工数の削減で、限られた予算の中でWebサイトを運用できること&短期間でサイト制作が可能という条件を満たしたツールがStudioでした。
Studioを導入したことで、コミュニティ運営にかかる工数を大幅に削減できただけでなく、参加者も約3倍に増加しました。
また、Web知識が少ないスタッフでも、コンテンツを編集できることが魅力です。
参考：人事・労務コミュニティ「PARK」公式サイト、Studio公式によるSmartHRの事例紹介
制作事例2.FUJITSUが提供する「エキマトぺ」
FUJITSUでは、運営する駅のアナウンスや電車の音などの環境音を表現するための装置であるエキマトぺに関する情報をまとめたLPをStudioで制作しました。
Studioを導入した背景としては、既存のWebサイトではセキュリティ対応に大きな工数がかかっていたことが挙げられます。
Studioを導入したことで、毎月10時間程度かかっていたセキュリティ対応が不要になったことや、コンテンツの更新をWebの知識が少ないインターンスタッフでも行うことができるようになりました。
参考：エキマトぺ公式サイト、Studio公式によるFUJITSUの事例紹介
制作事例3.推しネコプラットフォーム「にゃおしす」
Webサービスの例として、推しネコプラットフォームにゃおしすではLPをStudioで制作しました。
Studioを導入した背景としては、コンテンツの管理や更新を内製化するためです。
Studioを導入したことで、画像の変更やよくある質問の項目を追加する等、コンテンツの編集ができるようになりました。
参考：プロダクトの世界観を詰め込んだにゃおしす公式サイト、にゃおしすの事例紹介
よくある質問
Q.LPの制作にかかる期間を教えてください。
プログラミング制作と比べると半分程度の制作期間になります。
そのため従来の方法では、デザイン～実装完了に2ヶ月かかるプロジェクトの場合、Studioでは1ヶ月程度で制作することが可能です。
また、実装のみの場合、数日～2週間程度でLP制作を行うことが可能です。
Q.StudioでLPを運用する際に必要な費用を教えてください
無料プランを使用する場合、月額費用が発生することなく、LPを運用することが可能です。
有料プランの場合は、数千円程度の各プラン代が毎月発生します。
ノクステックでは、追加での保守運用費用は頂戴しておりませんのでご安心ください。
参考：Studioの料金プラン
Q.Studioのセキュリティ対策について教えてください
Studioでは、経済産業省や情報処理推進機構が公開しているチェックリストに準拠したセキュリティ対策を行っております。
詳しい情報は以下の参考URLからご覧ください。
経済産業省：「クラウドサービスレベルのチェックリスト」
情報処理推進機構：「安全なウェブサイトの作り方セキュリティ実装チェックリスト」
StudioでLPを作るには？まとめ
本記事では、StudioでLPを制作するメリットや流れについて解説しました。
StudioでLPを制作することで、社内でサイトの管理・更新を行うことができるだけでなく、効果的なマーケティング活動に専念することができます。
ノクステックでは、以下のような方のお役に立てると思いますので、社内でのLP制作に不安がある方はお気軽にお問い合わせください。
- 売上に繋がるLPが欲しい
- デザイン性の高いLPが欲しい
- 自社で運用できるLPが欲しい
執筆者
松永勇樹
ノーコード専門メディア「ノクステック」運営。STUDIO Experts加盟。
Web講座の事業責任者を経て、ノクステックを設立。