
サービスサイト(LP)のテンプレートをSTUDIOで作ってみた①
こんにちは!
大阪でUI/UXデザイナーとして働いているミヤザワです。
今回は、ノーコードツールの「STUDIO」を用いてサービスサイト(LP)のテンプレートを作成しましたので、その過程についてご紹介いたします。
STUDIOを利用したテンプレートの作成目的
今回のテンプレート作成の目的は、社内のデザイナー以外の方が必要な時に即座にLPを作成できるようにすることです。また、様々な商品に適用可能なものとして設計しました。
そのため、汎用性が高く、使いやすく、かつテキストの編集を行うだけで容易に活用できるLPを目指しました。
SUTIDOとは
WEBサイト構築でつまずきがちなコーディングやサーバー設定が不要で、デザインから公開までをワンストップで完結できる、日本発のノーコードWEB制作プラットフォームです。ユーザー数35万人、公開されているサイトは10万を超えています。
構成について
先ほど述べた目標に基づき、LPの構成は以前資料で見た、成果の出るLPの基本構成を参考にしました。そして、どの商材でも適用可能なような構成にしました。以下がその構成です:
① キービジュアル(KV)
② 興味・関心(こんなお悩みありませんか?)
③ 説得・エビデンス(サービスの特徴)
④ 信頼(顧客の声・料金表・よくある質問)
この構成をもとにしてデザインを作成していきます。
作成したデザインはこちら

デザインのポイント
①親しみやすさを表現
親しみやすさを表現するために、イラストを活用し、全体的に角丸のデザインや丸いオブジェクトを使用しました。これにより、相談しやすさを感じてもらえるように工夫しました。
②テンプレートとしての使いやすさ
特定のサービスに関連するイラストなどは極力避け、どのサービスでも使いやすいデザインを心がけました。
また導入事例は画像がある場合とない場合の2パターン作成しました。
③追従フォーム
今回は私自身がSTUDIOでまだ試したことのない追従フォームを導入しました。
常に画面に表示されることでCVRを向上させることを目指しました。
さいごに
如何でしたでしょうか?
次回はSTUDIOの実装について詳しく書いていきたいと思います。
最後までご覧いただきありがとうございました✨