SWELLには、難しいコードを使わずにランディングページが作れる「LP機能」があります。
ランディングページとは、ウェブサイトなどのデジタルメディアにおいて特定のアクションを促すためのウェブページの事を指し、LPと呼ぶことが多いです。
わかりやすい例でいうと、「お問い合わせ」や「お申し込み」などを行ってもらうためのページです。プロモーションを行う際には、ユーザーに対して購入や登録を促す目的で使用されます。
通常LPを作成する場合、CSSやHTMLなどの専門的な知識が必要です。しかし、SWELLではLP機能を使えば専門知識がなくても誰でも簡単に作成できます。
SWELLはブロックを入れ込むだけでLPが作れる
SWELLはLPに必要な項目が、ブロック機能として配置されています。デザインを自分で作成する必要なく、ブロックに入っているカラムやメニューを選ぶだけで、簡単に自分好みのLPが作れます。
依頼するのはお金がかかるけれど、LPを作りたい！
SWELLはそんな方におすすめです。
初心者の方でも気軽にLPを作れるのが、SWELLの魅力です。
「そもそもSWELLがどういうものかわからない！」という方は、こちらの記事から読んでくださいね。
SWELLを使ったランディングページ（LP）の作り方
それでは早速、SWELLのランディングページの作り方を解説していきます。
大枠の作り方
SWELLでLPを作る場合は、「投稿」ではなくダッシュボードの「LP」から作成します。
「新規投稿を追加」を選択すると、以下の画面に移ります。
LP設定という項目がありますが、特にこだわりがなければ初期設定のままで問題ありません。
もしも、ダッシュボードに「LP」の表示がない場合は、「SWELL設定」からLP機能を停止していないか確認してください。
LPを停止についているチェック項目を外せば、ダッシュボードにLPが表示されます。
メインビジュアルの作り方
メインビジュアルはLPの顔となる部分です。SWELLの公式サイトだと、クリックして最初に表示されるこちらの部分がメインビジュアルとなります。
画面上に表示されているメニュー部分はヘッダーで作成できます。はじめのうちは、ヘッダー部分のないシンプルなLPを作成するのが簡単でおすすめです。
作成方法は、ブロックから「カバー」を選択し、メディアを追加をします。
メインビジュアルとして設定したい画像をアップロードします。SWELLの公式サイトのように動く画像を入れたい場合は動画をアップロードしましょう。
画像・動画を追加すると、カバー上にキャッチコピーが入力できる箇所が表示されます。
フォントサイズやカラー、太字などに変更できるのでイメージに合わせたキャッチコピーを入れてください。
また、メインビジュアルに「お申し込み」や「お問い合わせ」などのCTAボタンを配置することもできます。
カバー上のプラスボタンから「ボタン」ブロックを追加します。ボタンの位置は、上部バーから変更できます。
コンテンツエリアの作り方
次に、コンテンツエリアを作ります。コンテンツエリアがLPの中身となる部分です。
コンテンツエリアは、LPの完成イメージによって使用するブロックが異なります。まずは、どのようなコンテンツを入れるのか整理しておきましょう。
- どのようなお客様を対象にしているのか
- サービス内容・魅力
- サービスで得られるメリット
- お客様の声
etc…
LPに必要な要素を洗い出し、入れるコンテンツを定まったら、それにあわせたコンテンツエリアを配置します。
ベースはフルワイドブロックを使用
コンテンツエリアは、各セクションをフルワイドブロックで作ると、幅いっぱいにコンテンツを配置できます。
最初にキャンパスを作るイメージです。その後、作りたいLPに合わせてフルワイドブロックの上にブロックやテキスト・画像を配置します。
横並びブロックはリッチカラムブロックを使用
以下の画像は、SWELL公式のデモサイトに表示されているものです。
このように横並びにブロックを配置する場合は、「リッチカラム」ブロックを使用します。
- フルワイドブロック追加
- リッチカラムブロックを必要分追加
- リッチカラム上の「＋」ボタンから画像追加
- 画像を選択して「＋」ボタンからリンク追加
上記は例でご紹介しているデモサイトのようなコンテンツを入れる場合の手順です。
横並びでサービスを紹介したい場合は、テキストと画像を組み合わせることもできます。
画像や色を入れてメリハリをつけると見映えがします。
フルワイドブロックは、横幅いっぱいにレイアウトを広げるもので、文章や画像などのコンテンツを設置する時に使われる方法です。
テキストを目立たせるなら背景色変更
上記SWELLのサイトのように、テキスト説明を目立たせることもできます。
フルワイドブロックを選択すると、背景色が設定できます。色は微調整ができるので、濃くして目立たせることも薄くしてテキストを際立たせることも可能です。
その後、「見出し」と書かれているところにキャッチコピーやタイトルを入れ、以下に段落でテキストを入れれば上記のようなコンテンツが作れます。
他にもできることはたくさんあるので、
簡単な作成方法を熟知したら試してみてくださいね！
フッターの作り方
フッターは、以下の赤で囲んでいる部分のようにLPの最後に表示される項目です。
フッターを表示せずに終えることもできますが、LPではプライバシーポリシーやコピーライト「©（名前）」の表示が必要です。上記のようなフッター設定をしておくと安心です。
フッターを表示する場合は、LP設定の「フッターを使用する」にチェックを入れます。
フッターはどのブロックを使用しても問題ありませんが、フルワイドを使うと簡単に作成できます。
コピーライトなどの必要なテキストを入力し、背景色を変更すれば完成です。
SWELLでランディングページ（LP）を魅力的に作るポイント
ご紹介したように、SWELLはLP機能を使って様々なLPが簡単に作れます。ただし、機能がたくさんあるので「どれを使えばいいかわからない」と感じる方も多いでしょう。
LPを作成する前に、まずはどのようなLPを作りたいのか完成形をイメージしてください。そのうえで、参考としたいサイトがあれば、ピックアップしておくと安心です。
イメージに近いサイトがどのようなコンテンツを組み合わせているのかがわかれば、実際に作成する時に悩む心配がありません。
まとめ
さて今回は、SWELLでのランディングページの作り方というテーマで、詳しく解説しました。
LPは、ユーザーに製品購入してもらう際や、会員登録をしてもらう際に効果的です。
そのため、ユーザーから見て魅力的なページを作成する必要がありますが、SWELLでは私のような専門的な知識がなくても簡単にランディングページを作る事ができます。
LPを作りたいけれど、自分ではできないし、依頼するお金もない・・・とお悩みの方は、ぜひSWELLでLPを作ってみてくださいね。
「これを機にSWELLを始めてみよう！」と思った方は、こちらの記事もあわせてご覧ください。