WordPressでサイトを作成したことあるけど、Studioでサイトを作成したことがない。ということで、StudioでLPを作ってみました！ブログを書きつつ、LP作成…制作期間は２日間でした。この記事を見ることで、StudioでLPを作る方法がわかるようになるかと思います。※デザインなど初心者🔰なのでダサい！ってツッコミはご遠慮ください。
Studioは、コードを書かずにWebサイトの構築・公開・運用が完結するノーコードWeb制作プラットフォームです。
初心者がStudioでLPを作ってみた件
Studioで実際に作ったLPがこちらです。
このLPを作ったのは実際にStudioを使ってサイトを作ってみたかったことが1番なのですが「こんなサービスがあったらいいな」をLPにしてみました。
「誰でも簡単にホームページが作れる時代になっています」が、何をしたらいいのかわからなくて作れていない方も中にはいるかと思います。
ユーザーが相談しながら「一緒に」サイトを作れるサービス。
こんな既存のサービスが実際あるかはわかりませんが、LPの目的・ターゲット、サービスの強みを考えて作りました。
LPの目的
- Webサイトを作りたい人から「一緒に作ってほしい」という相談・依頼を獲得する
- そのうえで、時間単位でサポート or 制作を行い、報酬を得る
LPのターゲット（想定利用者）
| ターゲット層 | 課題 | このサービスの魅力 |
|---|---|---|
| ノンデザイナーの個人 | サイトを作りたいが、難しくて進まない | プロと一緒に進められて安心＆学べる |
| 個人事業主（教室・店舗経営） | 予算は少ないけど、ちゃんとしたサイトがほしい | 自分の手を動かせばコストを抑えられる |
| 副業Web制作者の卵 | 自分の技術に自信がない | 技術者と一緒に実案件的に進められる |
| ブログ初心者 | WordPressの設定が難しい | 必要なところだけ一緒に作ってもらえる |
サービスの強み
- 「丸投げ」ではなく「一緒に作る」から納得感・スキルアップ感がある
- 初回相談は無料（難易度を事前診断）
- 時間制の明瞭料金（難易度に応じて時給変動）
- ツールは Studio or WordPress、相談内容で提案
StudioでLPを作る方法
ここからはStudioでLPを作る流れを説明します。
プロジェクトの作成
まずは、Studioの「無料ではじめる↗︎」をクリックし新規登録をしましょう！私はGoogleでログインしました。
ログイン後、studioのダッシュボード画面が表示されます。「＋新しいプロジェクト」をクリックし、「空白からはじめる」をクリックしてください。
※テンプレートから作成することもできますがLPの作成なので今回は、空白から作成していきます
Studioの基本的な使い方
Studioは視覚的に操作ができ、要素の追加はドラッグ＆ドロップで行えます。
レスポンシブデザインについては、レスポンシブバーを使って「デスクトップ」「タブレット」「スマートフォン」など各画面サイズでの表示の調整ができます。
ヘッダーの作成
セクションからナビゲーション2を追加し、編集していきます。追加したら、テキストで文字間、行高、サイズ、フォント文字の太さや色などを設定して完成！
ヒーローセクションの作成
ヒーローセクションとは、トップページに配置される、視覚的にインパクトのある大きなセクションのことです。実際に作っていきましょう！
細かく説明すると長くなってしまうのでざっくり説明していくと、まずボックスからセクションを追加します。
次にBoxとImageを追加し、ヒーローセクションに入れるメイン画像を選択します。
あとはテキストを追加しいい感じに位置を設定していきます。
出来上がったヒーローセクションがこちら！
サービス説明セクションを作成
次はサービス説明セクションを作成します。どんなサービスを提供するのかユーザーに一目でわかりやすく伝えていきたいところです。セクションからFAQ3をベースに修正していくことに決めました！
テキストの文章を変えたり背景色をヒーローセクションと合わせ、画像を変更して出来ました！
セクションにIDをつけて、メニュー「サービス内容」にリンクを設定することで、押したらサービスセクションに移動できるようになります。
動きは実際のLPで確認してみてください！
ターゲットセクションの作成
ターゲットセクションでは、どんな人がこのサービスの対象なのかユーザーに確認してもらいます。セクションから機能紹介をベースに修正していくことに決めました！
出来上がったターゲットセクションがこんな感じです。
機能紹介のセクションの上にBoxとimageを追加し、ヒーローセクションと同じようなデザインにしてみました。
制作実績セクションの作成
制作実績セクションは制作実績をユーザーに見てもらう箇所になるのですが、実績がないため…今後掲載するということで「モニター募集中」という内容で作ってみました。
ベースは、セクションのメイン2になります。
実際に作った制作実績セクションがこちら！
実績ができたら、他のページにお客様の声と実績を一緒に載せる想定で作っています。
※「制作実績一覧」クリックで制作実績ページに遷移
料金プランセクションの作成
料金プランセクションではユーザーにわかりやすく価格を提示します。セクションから料金プランをベースに修正していきました！
料金プランはなんと…時給1000円！プレミアムプランだけは見積もり制としてみました。
プラスで注釈も追加！
よくある質問セクションの作成
ユーザーからのよくある質問をQ&Aでまとめるセクションになります。セクションからFAQ２をベースに修正していきました！
ありそうな質問を想定して記載してみました。
次が最後のセクションで、お問い合わせになります！
お問い合わせセクションの作成
お問い合わせセクションは、セクションからコンタクト２をベースに項目を追加しつつ修正してみました。
必要な項目は、ボックスのForm Patsから追加。既存のフォームに「お客様区分」「会社名」「電話番号」を追加しました。
フッターの作成
最後に運営元の情報などがわかるようにフッターを作成していきます。セクションからフッターをベースに項目を追加しつつ修正してみました。
できました！運営元の情報入れたかったのですが…Xあればわかるかってことで、サブタイトル＋フッターメニューの変更ぐらいで終わらせました。
まとめ
いかがでしたか？実際に作ってみて「LPを作るにはStudioが便利だと感じました。」基本的にWordPressしか触ってなかったのですがこれからは、Studioでのサイト作成も学んでいきたいと思いました！
コメント