国内初!bubble公式開発試験に合格!

STUDIOを使ったLPの作り方を解説!テンプレートを活用した制作方法も紹介

STUDIOは、LPやWebサイトを短期間で制作可能なノーコードツールです。STUDIOでLPを制作するには、どのような手順で作業を進めればいいのでしょうか。この記事では、STUDIOでLPを制作する手順やメリットなどに関してご紹介します。

既にSTUDIOを導入している方、LPの制作を検討している方は、最後までご覧ください。

目次

LP制作にSTUDIOを活用するメリット

LP制作にSTUDIOを活用するメリット

STUDIOでLPを制作するメリットは以下の4つです。

  • コーディング不要でLP制作ができる
  • LPの制作期間を大幅に短縮できる
  • 制作後の改善も高速で行える
  • デザインの自由度が高い

メリットの内容を一つひとつみていきましょう。

コーディング不要でLP制作ができる

STUDIOはLPの制作に対応したノーコードツールです。テンプレートの選択と画像・文章の挿入だけで、LPが完成します。通常のプログラミング開発と異なり、言語を学ぶ必要がありません

STUDIOはユーザーインターフェースに優れており、直感的な操作が可能です。操作方法に戸惑う心配も少ないでしょう。

また、デザインテンプレートの選択肢が多く、業種や用途に合った選択が可能です。エンジニアやデザイナーが不在だとしても、自社のビジネスモデルに合ったLPを制作できます。

LPの制作期間を大幅に短縮できる

企画~リリースまで、LP制作に関する一連の作業をSTUDIO上で完結できます。プログラミング開発と異なり、ソースコードの作成は必要ありません。

マウス操作やキーボード入力で作業を進められるため、通常よりもLPの制作期間を大幅に短縮できます。工数は通常と比べて半分程度に収まり、場合によっては最短1か月でLPを作成可能です

また、LPの制作に必要以上の人員を割く必要もありません。開発工数の最小化によって、人件費の削減やコア業務へのリソース集中を図れます。

制作後の改善も高速で行える

掲載内容の修正やデータ更新が必要になったとしても、素早い対応が可能です。STUDIOには編集機能が搭載されており、画像・文章・アイコンをスムーズに差し替えられます

編集内容はリアルタイムで更新されるため、常に最新の内容が反映されている状態です。共同編集機能も搭載しており、担当者同士が意見を出し合いながら作業を進められます。

また、STUDIOはクラウド型のノーコードツールで、インターネット環境が整っていればアクセスが可能です。勤務地や勤務形態を問わず、複数人での編集作業を効率的に進められます。

デザインの自由度が高い

STUDIOはフォームの設置場所やアニメーションの有無などを自由に設定できます。900種類以上の無料フォントも用意されており、ブランドイメージに合った選択が可能です。

有料版のテンプレートはデザイン性に優れたものが多く、ユーザーにおしゃれな印象を与えられます。作業はドラッグ&ドロップで進められるため、操作性に悩まされる心配はいりません。

また、拡張性に優れている点もSTUDIOの特徴です。Google MapやYoutube動画などの埋め込みに対応しています。外部ツールとの連携によって、デザイン性と実用性を兼ね備えたLPの制作が可能です。

LP制作にSTUDIOを活用するデメリット

LP制作にSTUDIOを活用するデメリット

STUDIOを活用すると、デザイン性に優れたLPを通常よりも短期間で制作できます。ただし、メリットばかりではありません。STUDIOを活用する前に、以下3つのデメリットが生じる点を認識しておきましょう。

  • 使えない機能が多い
  • 連携できるサービスに制限がある
  • SEO面が少し弱い

STUDIOは決済や予約機能などを搭載できません。LPに加えてECサイトの制作も検討している方は、他のツールを探しましょう。

使えない機能が多い

STUDIOは主に以下の機能を利用できません。

  • メールの自動返信
  • ログイン
  • 会員登録
  • 決済
  • ショッピングカート
  • 予約

他にも人気記事のランキング表示や複数タグの絞り込み検索などは未対応です。上記の機能を搭載したLPやWebサイトを制作したい場合、他のノーコードツールを検討しましょう。

また、ソースコードの直接編集には対応していません。編集できる範囲は、HTMLやJavaScriptの一部埋め込みに限定されます。アップデートを繰り返してユーザビリティは年々高まる一方、使えない機能も依然として多いです。

連携できるサービスに制限がある

STUDIOはGoogle Search ConsoleやFigmaなどとの連携が可能です。ただし、Web制作に特化した同タイプのノーコードツールと比べると、連携可能なツールが限定されています。

たとえば、BinDupと比較してみましょう。BinDupは、ショッピングカートや予約機能を搭載した外部ツールとの連携が可能です。

一方、STUDIOはアクセス分析ツールとの連携が多い反面、その他のツールとはほとんど連携できません。外部ツールとの連携によって、ユーザビリティも高めたい方にSTUDIOは向いていないでしょう。

SEO面が少し弱い

STUDIOにはタグ設定やサイトマップの自動生成など、SEO関連の機能も複数搭載しています。しかし、WordPressと異なり、プラグインで後から必要な機能を追加できません。WordPressでは、SEO関連のプラグインを多数利用できます。

たとえば、「All in One SEO」を導入したとしましょう。検索エンジンに表示されるタイトルやディスクリプションなどの設定が可能です。他にもGoogle Search Consoleとの連携やサイトマップの作成に対応しています。

また、STUDIOでLPを制作しても、自動的に検索エンジンで上位に表示されるわけではありません。新規ブログ記事の制作や検索ニーズを反映したページ作りなど、SEO対策に取り組む必要があります。

そして、SEO対策は成果が出るまで最低4ヶ月必要です。成果がすぐに出なくても焦らず、長期的な視点に立った取り組みが求められます。

STUDIOを使ったLPの作り方を解説

STUDIOを使ったLPの作り方を解説

STUDIOでは以下の手順に沿ってLPを制作します。

  1. LPの目的と要件を決める
  2. LPのワイヤーフレームを作成する
  3. LPのテキストやデザインを制作する
  4. 制作したLPをSTUDIOで実装する
  5. LPを公開、運用する

各工程での作業を詳しくみていきましょう。

作り方①LPの目的と要件を決める

新規顧客の獲得やサイトの認知度向上など、LPの制作目的を明確化することが重要です。導入目的やターゲット層に応じて、LPに掲載すべき情報は異なります。BtoBとBtoC、双方を想定したLPの制作目的を以下の表にまとめました。

BtoBBtoC
・資料請求の獲得
・問い合わせの獲得
・メルマガ登録者の獲得
・セミナーやイベントの申し込みを獲得
・サービスや商品の新規購入者を獲得
・ユーザーの興味喚起
・サービスや商品の新規購入者を獲得
・売上拡大

LPの制作目的が固まり次第、LPの要件定義に移ります。要件定義とはWebサイトやシステムを開発する際、全体の仕様を決める工程です。LPを制作する場合は、要件定義で主に以下の内容を決めておきます。

  • ユーザーと課題の共有
  • 解決方法の提示
  • ターゲット
  • 商品やサービスの概要
  • 導入事例の紹介
  • 予算
  • スケジュール
  • 集客方法

また、LPの制作を外注に依頼する場合、時間をかけて要件定義に取り組まなければなりません。自社の要望が外注先へ正確に伝わっていないと、認識にズレが生じます。追加費用の発生や納期遅れを避けるため、担当者と何度も打ち合わせを重ねましょう。

作り方②LPのワイヤーフレームを作成する

ワイヤーフレームとは、LP全体の構成を記載した設計図です。要件定義の内容をもとに、情報の掲載スペースや配置場所、CV獲得までの導線などを決めていきます。ワイヤーフレームの制作は、プロジェクトマネージャーやディレクターが担当する場合が多いです。

STUDIOにはLP用のテンプレートが搭載されており、短時間でワイヤーフレームを制作できます。マウス操作やキーボード入力で作業を進められるため、専門知識は必要ありません。

ただし、ワイヤーフレームの完成度は、LPのユーザビリティに大きく影響を及ぼす要素です。コンバージョン獲得率にも関連してくるため、ノウハウやリソースが不安な場合は外注しましょう。

作り方③LPのテキストやデザインを制作する

ライティングとデザイン双方で、ユーザー目線の徹底が重要です。ユーザーに興味を持ってもらえない限り、コンバージョン獲得率は高まりません。

LPのライティングは以下3つの要素で構成されています。個々の特徴や意識すべき点を表にまとめました。

要素ファーストコピーボディコピークロージングコピー
概要や役割導入部分
・離脱率に直結
・読み手の興味を惹き付ける
・掲載情報の明確化
具体的な説明
・商品やサービスの魅力を紹介
・搭載している機能や料金の紹介
・他社と比較した優位性
商品への訴求
・ユーザーの行動喚起を促進
・コンバージョン獲得率に直結
・LPの総括
ポイント・新鮮さを入れる
・情報の有益性
・わかりやすい文章構成が必要
・1つの見出しに対して、文章の量は200~300文字程度
・メリットや自社の優位性をアピール
・問い合わせボタンや申請フォームを目立つ場所に配置
具体的な内容・「2024年最新版」などの情報
・メリットとデメリット
・複数の見出しで特徴を説明
・表や箇条書きを積極的に活用
・「今月末までに商品を購入した方は20%OFF」
・「初期費用が無料」 など

事前にペルソナを明確化しておくと、ユーザーニーズを反映した文章が書けるでしょう。一方、デザインでは商材に合わせて配色やフォント、レイアウトを決めます。STUDIOには豊富なテンプレートが搭載されている一方、自社の商材に合うかはわかりません。

他社と差別化を図るため、制作会社やデザイナーへの依頼も検討しましょう。

ペルソナとは

自社商品・サービスを購入して欲しい架空のユーザー像です。年収や居住地、家族構成など、プライベートな部分まで決めていきます。ペルソナの例を以下の表にまとめました。

項目記載例
年齢35歳
性別
勤務先機械部品の商社
職種法人営業
年収450万
居住地千葉県
未婚/既婚独身
趣味・キャンプ
・食べ歩き
・友人との会食
使用頻度の高いSNS・LINE
・X
・Facebook

ペルソナの設定によって、ユーザー目線での提案を徹底できる点がメリットです。ユーザーがどのような情報を求めているか、常に顧客目線で考えるようになります。チーム全体でペルソナを意識することで、ユーザーニーズを反映したLPを制作できるでしょう。

作り方④制作したLPをSTUDIOで実装する

STUDIOはノーコードで制作したLPのデザインを実装できます。ソースコードを作成する必要がないため、開発期間の大幅な短縮が可能です。開発の自由度も高く、アニメーションの実装やモーションの微調整などもスムーズに進められます

また、レスポンシブデザインに自動対応しており、デバイス別にページを用意する必要はありません。LPを1つのURLで管理できるため、SEO評価の分散や運用負担の増大を避けられます。

作り方⑤LPを公開、運用する

STUDIOでLPを制作しただけで、自動的に集客率を改善できるわけではありません。商品認知度やリピート率を高めるには、定期的な情報発信が求められます。

Web広告の掲載やメルマガ配信など、複数の宣伝方法を併用しましょう。SNSとの連携ボタンを設置すると、不特定多数の方に手間をかけずに情報を拡散できます。

また、STUDIOを活用すると、修正や変更が発生しても素早く対応可能です。テキストや画像の差し替えは、マウス操作とキーボード入力で完結します。必ずしもエンジニアに作業を依頼する必要はありません。

STUDIOの導入によって、業務負担を軽減しつつ効果的な情報発信を実現できます。

STUDIOを活用したLP制作はSwoooにお任せください!

STUDIOを活用したLP制作はSwoooにお任せください!

SwoooはSTUDIOやbubbleなど、ノーコードツールでの開発実績が豊富な企業です。LPやビジネスマッチング、イベント管理システムなど、さまざまなサービスを開発してきました。独自プラグインやAPI開発など、自由度が高い開発にも対応可能です。

また、ノーコードツールの活用によって、通常の開発と比べ開発費を1/3程度に抑えられます。浮いた資金は広告費やマーケティングへの流用が可能です。LP制作後の運用やSEO対策もサポートしており、早期にリピーターを獲得できるでしょう

STUDIOを活用したLP制作の依頼先を探している方は「Swooo」へご相談ください。

STUDIOのLP用テンプレートを有効活用しよう

自社でLPを制作する場合、STUDIOに搭載されたテンプレートを活用するのがおすすめです。デザイン性に優れたテンプレートが豊富に用意されており、業種や用途に応じて選択できます。有料版のテンプレートを利用すると、商品のブランドイメージやオリジナル性を強調できるでしょう。

また、テンプレートを使うとLPを簡単に制作できます。アカウントを発行したあと、必要な作業はテンプレートの選択と画像・文章を挿入するだけです。

STUDIOのテンプレートはデザイン性が高い

デザイン性と実用性に優れたテンプレートが多数用意されています。たとえば、THE BUSINESSは、BtoBを展開する企業向けのLP用テンプレートです。

資料請求や問い合わせフォームなど、LP運営に必要な機能が一通り搭載されています。情報が整理されたシンプルなデザインのため、操作性に戸惑う心配は少ないでしょう。カスタマイズ性にも優れており、オリジナルデザインの実装も可能です

無料で利用できるテンプレートも多く、費用の発生を過度に心配する必要はありません。また、有料版では食品や子ども教室の紹介など、さまざまな用途のテンプレートが用意されています。料金も数千円~2万円程度と、比較的リーズナブルな価格設定です。

STUDIOは企業サイトの導入事例も多数

STUDIOはコーポレートサイトや商品紹介サイトなど、企業向けサイトに多数使用されています。公式サイトでは制作事例を公開しており、閲覧しておくと完成後のイメージを正確に描けるでしょう

また、LPの制作事例を確認したい方は、STUDIO Expertsのサイトを確認するのも有効です。サイト上ではBtoBとBtoC、双方のLP制作の事例が多数紹介されています。

STUDIO Expertsは、STUDIOの審査に合格した企業やフリーランスが在籍する組織です。ユーザーからの評価は高く、Web制作の実績は1250社に達しました。

そして、サイト上で必要な情報を入力すると、自社の条件を満たす外注先を短時間で見つけられます。予算や実績、得意分野などを入力し、条件に合致した企業や人材が提示される仕組みです。ミスマッチにともなう無駄な費用の発生を避けられます。

STUDIOのテンプレートの使い方

テンプレートの利用方法は非常に簡単です。

  1. STUDIOのアカウントを発行
  2. テンプレートを選択
  3. 画像とテキストを挿入

メールアドレスとパスワードを入力し、STUDIOのアカウントを発行します。GoogleやFacebookのアカウントを使用する方法でも問題ありません。アカウントの登録後はチュートリアルがはじまるため、作業手順を正確に理解できます。

また、テンプレートを選択したあとは、LPで掲載したい画像やテキストを挿入するだけです。有料プランを選択すると、おしゃれな雰囲気や商品の世界観を印象付けられます。

【注意】LP制作においてSTUDIOでできないこと

【注意】LP制作においてSTUDIOでできないこと

LP制作や運用の際、STUDIOでは対応できない内容を以下にまとめました。

  • スマートフォンやタブレットでの編集
  • ブログカードの実装
  • 吹き出しの活用
  • ダウンロードボタンの設置
  • アコーディオンの実装
  • ページネーションの実装
  • 文字のグラデーション

LPやWebサイトの編集作業がおこなえるのは、デスクトップ画面のみです。外出や出張の際は、常にノートPCを持ち歩かなければなりません

また、ブログカードの実装やダウンロードボタンの設置にも対応していません。回遊率やコンバージョン獲得率を高めるには、文章の中身でユーザーの興味を惹き付ける必要があります。

アコーディオンとページネーション

アコーディオンは表示項目をクリックすると、詳細な情報が表示される仕組みです。段階的に情報を表示できるため、スマートフォンからでも閲覧しやすい環境を整えられます。

一方、ページネーションとはページ番号のことです。LPは1ページに情報をまとめるため、ページネーションがなくてもさほど困らないでしょう。ブログ記事やWebサイトを制作する際、必要になる可能性が生じます。

STUDIOで制作したサイト事例を紹介!

STUDIOで制作したサイト事例を紹介!

STUDIOで制作したLPやWebサイトの事例を3つ紹介します。

  • 株式会社セイタロウデザインエンタテインメント
  • マブチモーター株式会社
  • 尾道ラーメンしょうや

制作の参考にご活用ください。

株式会社セイタロウデザインエンタテインメント

株式会社セイタロウデザインエンタテインメント
引用:株式会社セイタロウデザインエンタテインメント

イベント開催やオウンドメディア開発などに取り組む企業です。同社はSTUDIOでLPを制作しました。ページ全体は白を基調としつつ、重要な情報には赤を織り交ぜてユーザーの視線を誘導します。余白が多く残されており、スッキリとした印象を与えられるでしょう。

また、ページ上部では図形が正方形や長方形に変化し、ユーザーにインパクトを与えています。

マブチモーター株式会社

マブチモーター株式会社
引用:マブチモーター株式会社

マブチモーター株式会社は小型のDCモーターを製造する企業です。自動車や医療機器、精密機器など、さまざまな用途に使用されています。同社はSTUDIOを使い、70周年を記念するWebページを制作しました。

ページ上部の中央には「70th」が大きく記載されており、ユーザーの視線を惹き付けています。周囲には複数のモーターが配置され、自社の事業内容や主力製品を自然にアピールしているかたちです。ページ中央では市場シェアや従業員数、売上など、同社の強みをデータで強調しています。

また、グラフやイラストが効果的に織り交ぜられており、ユーザーに窮屈な印象を与えません。ページ全体は白と青でデザインされており、誠実さや落ち着いたイメージを連想させます。

尾道ラーメンしょうや

尾道ラーメンしょうや
引用:尾道ラーメンしょうや

広島県尾道市と福島市で尾道ラーメンを提供する飲食店です。同社はSTUDIOを使い、店舗の紹介サイトを制作しました。

ページ上部では尾道ラーメンとチャーシューが交互に表示され、ユーザーの食欲を掻き立てます。チャーシューとネギ、卵がふんだんに入ったラーメンは、思わず画面に近づくほどのインパクトです。

すぐ下にはチャーハンと尾道ラーメンの画像を並べて表示し、店の看板商品としてアピールしています。ページ中央からはスープや麵、チャーシューの特徴など、お店のこだわりが記載されているかたちです。

また、右上のメニューからストーリーをクリックすると、ラーメンを作る様子が映像で紹介されます。

STUDIOで作ったLPに関するよくある質問

STUDIOで作ったLPに関するよくある質問

STUDIOの特徴やLPの制作日数など、ユーザーから寄せられた質問をQ&A形式でまとめました。

Q.STUDIOでLPを作ると何が良くなりますか?

LPのデザイン性が高まります。フォームの位置やフォント、アニメーションを自由に設定可能です。画像の配置位置もピクセル単位で調整できるため、自社のこだわりを正確に表現できるでしょう。

また、サービス紹介や採用など、LP用の有料テンプレートは用途別に豊富な種類があります。一定の費用はかかるものの、有料テンプレートは高くても2万円程です。予算確保に不安を抱える企業も十分導入を検討できるでしょう。

STUDIOの活用によって、デザイン性と実用性を兼ね備えたLPを低コストで制作できます。

Q.そもそもLPとHPの違いは何ですか?

LPとHPの違いに関して以下の表にまとめました。

種類LPHP
目的・コンバージョン獲得率の最大化
・離脱率の改善
・情報発信
・事業内容や企業理念への理解向上
・ステークホルダーとのコミュニケーション
ページ数・1ページ・複数ページ
主な掲載情報・商品やサービスの特徴
・購入メリット
・利用実績
・FAQ
・問い合わせフォーム
・申し込みボタン
・会社概要
・事業内容
・所在地
・主な取引先
・採用情報
・IR
・新着情報
・問い合わせフォーム
ターゲット層・見込み顧客・顧客
・取引先
・求職者
・従業員
・投資家
流入経路・SNS
・メルマガ
・Web広告
・検索エンジン
・外部のWebサイト
・SNS
・Web広告

LPはWeb広告やメルマガ、SNSからのアクセスを想定しています。ユーザーが離脱しないよう、資料請求や購入申請など、目的に関する情報以外は極力掲載しません。ターゲット層は見込み顧客で、商品・サービスの特徴に関する情報を中心に発信します。

一方、HPは事業内容や採用情報など、自社に関するさまざまな情報を発信するのが目的です。自社への理解を深めてもらえるよう、情報の中身は必ずしもコンバージョン獲得に直結しません。LPと異なり、5~10ページほどでサイト全体が構成されています。

情報のターゲット層は顧客や取引先、求職者など、ステークホルダー全般です。また、ユーザーの流入経路には、検索エンジンやWebサイトからの外部リンクなどがあげられます。

Q.StudioでLPを制作するにはいくらかかりますか?

Studioには無料プランが用意されています。無料プランと無料テンプレートを利用した場合、LPの制作費用は発生しません

ただし、無料プランはサポートやセキュリティ対策、機能に制限が生じます。月間PV数やフォーム回答数にも上限があり、超えた場合は通知メールが表示されません。

本格的なLPやWebサイト制作を検討している場合は、有料のCMSブランを選びましょう。便利機能や外部ツールの制限もほとんどなく、月額2,480円で利用できます。

Q.LPのデザインは何日くらいかかりますか?

通常のプログラミング開発と比べて、制作期間を半分程度に抑えられます。たとえば、デザイン+コーディングで2か月かかると仮定しましょう。Studioはコーディングが必要ないため、1か月でLPを制作できます。

また、テンプレートを活用すると作成にかかる時間を短縮できるため、検討しましょう。

STUDIOで作るLPについて | まとめ

この記事では、STUDIOでLPを制作するメリットや手順に関して紹介しました。STUDIOは、フォームの位置やアニメーションなどを自由に設定できます。ドラッグ&ドロップで作業を進められるため、新たにエンジニアを採用する必要はありません。

デザイン性に優れたテンプレートも多く、LPを通じてイメージアップを図れるでしょう。ただし、STUDIOはログインや決済、ショッピングカートなど、実装できない機能も多いです。

SEO対策やSNSでの情報発信など、集客は自社で対応しなければなりません。社内リソースやノウハウに不安を抱える場合は、外注先に相談しましょう。

Swooo」はSTUDIOをはじめ、ノーコードツールでさまざまなサービスを開発してきました。テストマーケティング~SEO対策まで、サポート体制も充実しています。

STUDIOでのLP制作を検討している方は一度「Swooo」にご相談ください。

資料請求

Swoooのサービス資料をダウンロードいただけます。開発支援をご検討の方はぜひご一読ください。

ご相談・お問い合わせ

お客様の新規事業開発やマーケティング活動における課題解決をサポートします。
お気軽にご相談ください。

料金シミュレーション

たった2分で開発費用が分かります。
簡単な質問に答えるだけでお見積りが可能です。