こんにちは、Risaです☆
ノーコードのSTUDIO（スタジオ）はLP制作にとても便利なツールですよね。
Webサイトを簡単に作れるノーコードツール・STUDIOを使ってLPをリニューアルした際のプロセスを紹介したいと思います。
今日は、STUDIOのLP制作に置いて、STUDIOそのものの使い方ではなく、その「プロセス・仕事の流れ」にフォーカスしてお話しします。
近年は、ノーコードがあれば素早くLP、Webサイト、Webアプリやネイティブアプリが作れます。例えばSTUDIOを使えばLP制作はあっという間に行えます。
しかし、それはノーコードによって「コーディングのプロセス」が簡略化されたに過ぎません。
コーディングに入る前のフェーズ、要求整理、要件定義、情報設計などなど、そういったフェーズはコーディングする場合でもノーコードの場合でも当然必要になってきます。
逆に、ノーコードだから簡単にできるんでしょ？とそのプロセスを甘くみていると、良いプロダクトが出来ないことが多いです。
今回は、合同会社CitrusAppのサービス「ノーコードAdaloスクール」のLP（ランディングページ）をリニューアルした時のプロセスを紹介したいと思います。
＜今回のお題のサイト＞：ノーコードAdaloスクールのLP
LP（ランディングページ）リニューアルの背景
元々、合同会社CitrusAppはAdaloスクール事業を立ち上げる際に、「とりあえず何かしらLPがないと困るよね」ということで、
まずは素人がノーコードを用いて何も考えずにやっつけ仕事でLPを作ったそうです。
これはこれで、LPの品質よりもビジネスのスピードを優先させた、という一つの方法だと思います。
ただ、最初はそれでいいですが、長期的に考えると当然どこかのタイミングでしっかりと作り直す必要がありますよね。
そこで、今回私が相談を受け、情報設計からリニューアルを行う流れとなりました。
STUDIOでのLP制作のプロセス
今回はSTUDIOを使い以下の流れでLP制作作業（既存サイトのリニューアル作業）を行いました。ただ、STUDIOに限らず、どのツールを使おうとスクラッチで作ろうと、LP制作は似たような流れになると思います。
現状のサイト分析
ベンチマークサイト集め
理想的なLPの構成に沿ってコンテンツを整理
コンテンツ情報書き出し
ワイヤー作成
STUDIOで実装
それぞれ解説していきます。
現状のサイト分析
まずは既存サイトの分析です。
今回のLP制作案件はすでに既存サイトがあるので、まずは既存サイトを分析します。サイトマップを作成し、現状のフローを整理します。
そして、Google Analyticsを使い、
「どういった経路で流入してきているか？」
「直帰率や離脱率はどうなっているか？」
「PCユーザー、モバイルユーザーの比率はどうか？」
などなど、現状を整理します。
こういった分析をすることで、現状の課題や改善案のヒントが洗い出されていきます。
まずは現状調査、ですね。
ベンチマークサイト集め
LP制作において、ベンチマークとなるサイトを調べるのはとても重要です。
「競合他社はどんなLPを作っているのか」
「他業種でも、参考にできるサイトはどんなものか」
調査を行います。
特にLPはもうかなり最適化されていて、自分で無理にゼロから考えオリジナリティを出そうとするよりも、売れているサイトから参考にする方が効率が良い部分も多いです。
ベンチマークサイトの調査を行ったら、それらと現状のサイトの差異、過不足を分析します。
理想的なLPの構成に沿ってコンテンツを整理
理想的なLPの構成とはどんなモノでしょうか？
よく言われるのは以下のような流れです。
期待させる
共感を得る
解決方法を提示する
比較してもらう
信用してもらう
不安を解消する
感情を動かす
行動を促す
こうやって書いてみると、ごく普通のことですよね？
「1ヶ月で〇〇ができるようになる！」
のような期待させるセリフから始まり、
共感を得るような記載があると。
そして「でも、じゃあどうしたらいいの？」と思ってるところに、具体的解決方法を提示してくれる。
でも「この会社でホントにいいのかな？」と思ってるところに競合他社と比較ができて、
最後トドメに「感情を動かす何か」（期間限定の割引とか）があると
行動に移しやすいですよね。
普通のことではありますが、残念ながら既存サイトはこれが十分にできていませんでした。
ですが、これは結構よくあることです。
Webサイトが作れる、デザインが作れるだけではなく、
ユーザーの行動を考えた上での情報設計・UX設計ができる、
ということが非常に重要です。
自分でLP制作をするとき、もしくはLP制作を委託するときは、
この視点を持つこと、あるいはこの視点を持ってる人に依頼することが重要だと思います。
既存サイトのコンテンツ整理の仕方の例
例えばですが、私はまず既存サイトを上記の理想的LPの構成に従い、
「どの部分が何に当たるか？」
を整理しました。
例を挙げると、以下のような感じですね。
この整理した情報を元に、理想的なLPの構成と照らし合わせて何が足りないか、どう順番を変えた方がいいかなどを検討していきます。
コンテンツ情報書き出し
さて、次はコンテンツ情報の書き出しです。
上記の理想的LPの構成（期待、共感、解決方法、比較、信用、不安解消、感情、行動）を元に、
流れに沿って必要な情報をメモレベルで書き出します。
こんな感じ。
ワイヤー作成
簡単にワイヤーを作成します。
ワイヤーを作成することでプロダクトオーナーや各ステークホルダーと認識合わせがしやすくなります。
例えばこんな感じで、メモを書き込みながらイメージを伝え、すり合わせを行います。
STUDIOでLP制作
さて、LP制作もいよいよ終盤！ 実際にノーコードツール・STUDIOで実装を始めます。
ここまでできるとあとはそこまで時間がかかりません。
さすがはノーコード、パッとできます。
STUDIOだと実装も簡単な上に、デザインも綺麗に作れるので非常に使いやすいです。
LPはこんな感じに仕上がりました。
STUDIOでのLPの作り方の流れ：まとめ
今日はLPの作り方の流れ、情報設計の仕方のようなことを説明してきました。
いかがでしたでしょうか。
ノーコードは便利です。
Webサイトやアプリをあっという間に構築することができます。
しかし、その前後のプロセスが無くなるわけではありません。
クライアントの要求をヒアリングし、現状を整理し、理想のユーザー体験を想像しながら情報設計していく。
その仕事の仕方にこそバリューがあると思います。
逆に、そのスキルがあれば、ノーコードを使って様々な場面で価値を提供できるようになります。
これからLPを作成する方は、ぜひ試してみてください！
STUDIOでのLP・Webサイト開発事例集
以下にSTUIDOで作ったWebサイト・LP制作の参考事例を共有ます。
https://citrusapp.jp/posts/studio-lp-example
STUDIOならコストを抑えつつ最速でサービスのLP・Webサイトを立ち上げることが可能です。
ただ、それだけではなく、この記事で解説してきたようにSTUDIOなどで作成する前に調査分析、設計フェーズが最も重要になります。弊社はそういった上流フェーズからクライアント様のご要望に沿った提案が可能です。
最速・高品質のLPやWebサイト作成のご依頼・ご相談はこちら
合同会社CitrusApp（シトラス・アップ）では、スタートアップ向けにコストを抑えたLP制作やWebサービス・アプリ開発に特化しています。
コストを抑えつつ最速での開発をご提案します。
また、数々の新規サービス立ち上げ経験から、「ただ作るだけ」ではなく、スタートアップの進め方のコンサルティングからサポート致します。
相談レベルでもご気軽にお声がけくださいね☆