スマホ対応LPをノーコードで作る方法｜初心者でもできる設計と注意点

結論から言うと、スマホ対応のLP（ランディングページ）は、ノーコードツールを使えばエンジニアでなくても自分で作れます。

Studioやペライチといったツールを使えば、テンプレートを選んで画像やテキストを差し替えるだけで、スマホでもきれいに表示されるLPが完成します。コードを1行も書く必要はありません。

ただし、「ツールを使えば誰でもうまくいく」わけではありません。スマホ対応LPには、PC向けとは異なる設計の考え方があります。ボタンの位置、文字の大きさ、スクロールの流れなど、スマホで見たときの体験を最初から意識して作ることが重要です。

この記事では、スマホ対応LPの設計の考え方から、ノーコードツールでの具体的な作り方、よくある失敗パターン、そしてノーコードで作るべきかの判断基準まで、一通り解説します。

なぜスマホ対応LPが必要なのか

スマホからのアクセスは全体の8割を超えている

総務省の調査によると、インターネット利用者の8割以上がスマートフォンを利用しています。Web広告からの流入も大半がスマホ経由です。

つまり、LPを見る人のほとんどがスマホユーザーです。PC向けに作ったLPをそのままスマホで見せてしまうと、大半のユーザーに「見づらいページ」を表示していることになります。

PC向けLPをスマホで見たときに起きる問題

PC向けに作ったLPをスマホで開くと、具体的に以下の問題が起きます。

• 文字が小さすぎて読めない：PCでは問題なく読める文字サイズでも、スマホの小さな画面では拡大しないと読めないケースがあります。

• ボタンが小さくて押せない：指でタップする操作では、PCのマウスクリックと違い、小さなボタンは正確に押せません。

• 画像やレイアウトが横にはみ出す：PC向けの横幅1200pxのレイアウトは、375pxのスマホ画面には収まりません。

• 結果、離脱率が上がる：見づらい・操作しづらいページからは、ユーザーはすぐに離れます。

運用で困る場面：外注LPの修正コスト

PC向けに外注で作ったLPをスマホ対応に作り直す場合、追加の費用と時間がかかります。さらに厄介なのが、公開後の修正です。

「CTAのテキストを変えたい」「キャンペーン画像を差し替えたい」といった小さな修正でも、コーディングされたLPでは制作会社に依頼しなければなりません。修正1回あたり数千円〜数万円、対応に数日かかるケースも珍しくありません。

急ぎのキャンペーンに間に合わない、費用がかさんで改善を諦める。こうした「運用の詰まり」が、成果の出ないLPを放置する原因になっています。

スマホ対応LPの考え方｜PCとの設計の違い

画面幅360px〜430pxを前提に設計する

PCの一般的なデザイン基準幅は1200px〜1440px程度です。一方、スマホの画面幅（CSSピクセル）は端末によって異なりますが、おおむね360px〜430px程度です。

つまり、PCの3分の1程度しか横幅がありません。PCで横に3つ並べていた要素は、スマホでは縦に並べ直す必要があります。「PC用のレイアウトを縮小すればいい」という考え方ではなく、最初からスマホの画面幅を前提に情報を整理するのが正しいアプローチです。

「1カラム・縦スクロール」が基本

スマホLPの基本レイアウトは「1カラム（1列）の縦スクロール」です。

PCでは左にメニュー、右にメインコンテンツという2カラム構成がよく使われますが、スマホでは画面幅が狭いため、横に要素を並べると読みにくくなります。1カラムで上から下に順番に読ませる構成にしましょう。

スマホ画面で見たときの具体的なイメージ

スマホでLPを見たときに、どこに何が表示されるべきか。具体的にイメージしてみましょう。

ファーストビュー（画面を開いた瞬間に見える範囲）

スマホのファーストビューは高さ約600〜650pxです。この範囲に、以下の3つの要素を必ず入れます。

1. キャッチコピー：1行15〜20文字以内が目安です。「何ができるか」が一瞬でわかる文言にします。PC向けのように長い文章を入れると、ファーストビューがテキストで埋まってしまいます。

2. メイン画像：サービスや商品のイメージが伝わる画像1枚。横幅いっぱいに配置します。

3. CTAボタン：「無料で相談する」「資料をダウンロード」など、行動を促すボタン。画面の横幅80%以上で配置し、親指が届く画面中央〜下部に置きます。

スクロール後のセクション構成

ファーストビュー以降は、以下の順番で情報を並べるのが王道です。

• 課題提起：「こんなお悩みありませんか？」ユーザーの課題に共感するセクション

• 解決策の提示：サービスや商品がどう解決するかを具体的に示す

• 実績・お客様の声：信頼感を持たせる証拠

• CTAボタン（2回目）：スクロール途中にもCTAを配置。最下部まで読まないユーザーを取りこぼさない

• よくある質問：不安や疑問を先回りして解消

• CTAボタン（3回目）：ページ最下部にも最終のCTA

ボタンのデザイン

• サイズ：高さ44pt（約44px）以上が推奨されています。これはAppleのHuman Interface Guidelinesで定められた最小タップ領域の目安で、指で正確にタップできるサイズです。

• 色：ページの背景色と明確にコントラストをつける（例：白背景に緑やオレンジのボタン）

• 文言：「送信」ではなく「無料で資料をもらう」のように、得られるメリットを書く

レスポンシブ vs スマホ専用ページ

スマホ対応には2つのアプローチがあります。

ノーコードツールで作る場合は、レスポンシブデザインが現実的です。ほとんどのノーコードツールは、PC表示とスマホ表示を自動で切り替えるレスポンシブ機能を標準で備えています。わざわざ2つのページを管理する必要はありません。

ノーコードでスマホ対応LPを作る手順

Step1：目的とゴールを決める

最初に決めるのは「このLPで何をしてもらいたいか」です。

• 問い合わせフォームへの送信

• 資料のダウンロード

• 商品の購入

• LINE登録

「とりあえずLPを作る」ではなく、ゴールを1つに絞ります。1ページに複数のゴール（問い合わせも購入もLINE登録も）を詰め込むと、ユーザーが迷って結局どれも押しません。

Step2：構成を組む（ワイヤーフレーム）

LPの構成を決めます。いきなりツールを触るのではなく、まず紙やメモアプリで「どの順番で何を見せるか」を整理しましょう。

基本の構成は以下の通りです。

1. ファーストビュー：キャッチコピー＋メイン画像＋CTAボタン

2. 課題提起：読者の悩みに共感する

3. 解決策：サービスや商品の説明

4. 実績・証拠：導入事例、お客様の声、数字

5. CTAボタン（2回目）

6. よくある質問

7. CTAボタン（3回目）

このとき、紙に書くなら「スマホの縦長の画面」を意識した縦長のラフを描いてください。横に広いPCレイアウトで構成を考えてしまうと、あとからスマホに落とし込むときに苦労します。

ラフの段階で、無料のCanvaやFigma（無料版）を使ってスマホサイズのフレームで描くのもおすすめです。

Step3：ノーコードツールを選ぶ

主要なノーコードLP制作ツールを3つ紹介します。

Studio

https://studio.design/ja

• デザインの自由度が高い

• ドラッグ＆ドロップで細かいレイアウト調整ができる

• レスポンシブ対応が自動で行われる

• 無料プランあり

Wix

https://ja.wix.com/

• テンプレートが800種類以上と豊富

• 多機能で、フォーム・決済・予約なども追加可能

• 無料プランあり

ペライチ

https://peraichi.com/

• 日本語対応で国内利用者が多い

• テンプレートが豊富で、選んで文字と画像を差し替えるだけで完成する

• 1ページ完結のLPに最適

• 無料プランあり（1ページまで）

ツール選びの基準

迷ったら、まずStudioの無料プランで実際にLP1ページを作ってみてください。使い勝手は触ってみないとわかりません。

Step4：スマホプレビューを見ながらデザインする

ツールが決まったら、Step2で作った構成をもとにデザインします。このとき、絶対に守ってほしいルールが1つあります。

「常にスマホプレビューで確認しながら作る」

PC画面の編集モードで「いい感じにできた」と思っても、スマホプレビューに切り替えると崩れていることはよくあります。必ず、1セクション作るごとにスマホ表示を確認してください。

具体的に気をつけるポイントは以下の通りです（いずれも目安としてお考えください）。

• フォントサイズ：本文は16px以上が目安です。14px以下になるとスマホでは読みづらくなる場合があります。

• ボタンサイズ：横幅44px以上を目安にしましょう。指でタップする操作を前提に、十分な大きさを確保します。

• 余白：セクション間には十分な余白を入れます。要素が詰まっていると圧迫感が出て、読む気がなくなりがちです。

• 画像の横幅：画面幅いっぱい（100%）か、左右に少し余白を残す程度が自然です。画像が画面からはみ出していないか確認してください。

• 1行の文字数：15〜20文字程度が読みやすい目安です。極端に長い行が続くと、スマホでは視線の移動が大きくなり読みにくくなります。

Step5：テスト・公開・改善

デザインが完成したら、公開前にテストを行います。

実機テスト

ツールのプレビュー機能だけで確認を終わらせないでください。必ず、実際のスマホで表示を確認します。

• iPhoneとAndroid端末の両方で確認する（画面サイズやブラウザの挙動が異なるため）

• Wi-Fiだけでなく、4G回線でも表示速度を体感する

• 実際にCTAボタンを押して、フォーム送信まで動作するか確認する

表示速度チェック

Googleの「PageSpeed Insights」（無料）でLPのURLを入力すると、表示速度のスコアと改善点がわかります。スマホでの表示に3秒以上かかると、ユーザーの53%が離脱するというGoogleの調査があります。画像のファイルサイズが大きすぎる場合は、ツール上で画像を圧縮するか、TinyPNG（無料）などで圧縮してからアップロードしましょう。

公開後の改善

LPは「作って終わり」ではありません。公開後のデータを見て改善することで、成果が変わります。

• CTAのクリック率が低い → ボタンの色・文言・位置を変えてABテスト

• ページの途中で離脱が多い → そのセクションの内容やデザインを見直す

• フォーム入力の完了率が低い → 入力項目を減らす（名前とメールだけで十分なケースも多い）

運用しやすい仕組みにしておく

ノーコードでLPを作る最大のメリットは「自分で更新できること」です。このメリットを活かすために、以下の点を意識しておきましょう。

• テキストや画像の差し替えを自分でできる状態にしておく：外注デザイナーに素材を作ってもらう場合でも、差し替え方法は教わっておく。

• ABテスト機能のあるツールを選ぶ：StudioやペライチにはABテスト機能が標準搭載されていないため、VWOやAB Tastyなどの外部ABテストツールとの連携を検討してください。Unbounceなどの海外LP制作ツールにはABテスト機能が組み込まれています。

• 月1回の数値確認を習慣にする：Googleアナリティクスと連携して、アクセス数・直帰率・CVR（コンバージョン率）を見る。数値を見ないと改善の方向がわかりません。

スマホ対応は「一度作って完了」ではなく、「運用しながら改善し続けるもの」です。だからこそ、自分で更新できるノーコードツールで作ることに意味があります。

よくある失敗パターン

PC画面で確認して「OK」にしてしまう

最も多い失敗です。制作中、PC画面の編集モードでデザインを確認して「いい感じにできた」と満足し、スマホでの見え方を確認せずに公開してしまうパターンです。

公開後にスマホで開いてみると、以下のような問題が起きています。

• テキストが詰まって読めない（行間や余白が足りない）

• 画像が画面からはみ出している

• ボタンの上下に要素が被っていて押しにくい

対策はシンプルです。「1セクション作ったらスマホプレビューで確認する」を徹底してください。完成してからまとめて確認すると、修正箇所が多すぎて心が折れます。

CTAボタンが押されない

LPの目的はユーザーにアクション（問い合わせ・購入など）してもらうことです。そのCTAボタンが押されないのでは、LPを作った意味がありません。

CTAが押されない原因は主に3つです。

1. ボタンが小さすぎる・目立たない：背景と同系色のボタンは埋もれます。周囲とコントラストのある色にして、44px以上のタップしやすいサイズにしましょう。

2. CTAがページ最下部にしかない：ユーザーの多くは最後まで読みません。ファーストビュー、ページ中盤、最下部の最低3か所にCTAを配置してください。

3. ボタンの文言が「送信」「申し込み」だけ：ユーザーが得られるメリットを文言にしましょう。「無料で相談する」「3分で資料をもらう」のように、ハードルの低さや具体的なメリットを伝える文言にします。

画像が重くて表示が遅い

PC用に書き出した高解像度の画像をそのままLPにアップロードすると、スマホでは表示に時間がかかります。Googleの調査によると、表示に3秒以上かかるとユーザーの53%が離脱します。

対策は以下の通りです。

• 画像は横幅800px程度にリサイズしてからアップロードする（スマホの画面幅の2倍程度で十分）

• JPEG品質は70〜80%に圧縮する（見た目にはほぼ影響なし）

• TinyPNG（無料）やSquoosh（Google製、無料）で圧縮してからアップロードする

• 使わない装飾画像は思い切って削除する

デザインを凝りすぎて更新できなくなる

外注でデザインを作り込み、アニメーションやパララックス効果をふんだんに盛り込んだLP。見た目はきれいですが、テキスト1行の修正でも制作会社に依頼しないと直せません。

修正1回あたり数千円〜数万円。対応に数日待ち。これを繰り返すうちに、改善が後回しになり、成果の出ないLPが放置されます。

ノーコードで自分で作る場合は、このリスクを避けられます。ただし、ノーコードでも凝ったデザインにすると更新の手間が増えます。シンプルな構成にしておくことで、テキストや画像の差し替えだけで改善を回せる状態を維持しましょう。

ノーコードで作るべきか？判断の基準

ノーコードで十分なケース

以下に当てはまるなら、ノーコードツールで作るのが合理的です。

• シンプルな1ページLP：問い合わせフォームや資料ダウンロードがゴールのLP。複数ページの遷移が不要。

• 自分で更新・改善したい：テキストや画像の差し替え、CTAの変更などを自分のタイミングで行いたい。

• 予算を抑えたい：外注すると20万〜50万円かかるLP制作を、ツールの月額数千円で始められる。

• スピード重視：外注だと1〜2か月かかるところ、ノーコードなら1〜2週間で公開できる。

コーディングや外注の検討が必要になるケース

以下のような要件がある場合は、ノーコードツールの標準機能だけでは対応しきれないことがあります。要件に応じて、追加の工夫やコーディング・外注の検討が必要です。

• 複雑なアニメーションやインタラクション：Studioなどのツールには基本的なアニメーション機能がありますが、スクロール量に連動した高度な演出や3D表現を多用する場合は、カスタムコードの埋め込みや追加の実装が必要になることがあります。

• 基幹システムとの連携：CRMやMAツールとのAPI連携、独自の決済フローなど、外部システムとの接続が多い場合は、カスタムコードや追加の開発が必要になることがあります。

• 大量のページバリエーション：広告のターゲット別に数十パターンのLPを出し分けるような運用は、CMS機能やテンプレートの工夫で対応できる場合もありますが、規模によっては運用コストが大きくなります。

• ブランドガイドラインへの厳密な準拠：ピクセル単位のデザイン調整や独自フォントの使用が求められる場合は、ツールの制約内で実現できるか事前に確認が必要です。

判断フローチャート

迷ったら、以下の3つの質問で判断できます。

Q1. 作るのはLP1ページだけですか？ → YES → ノーコードで十分です。

Q2. 公開後に自分で更新する予定はありますか？ → YES → ノーコードが向いています。自分で更新できることがノーコードの最大のメリットです。

Q3. 外部システムとの連携やカスタムの動きが必要ですか？ → YES → コーディングまたは外注を検討してください。ノーコードツールでは対応しきれない可能性があります。

Q1・Q2がYESで、Q3がNOなら、ノーコードで始めるのが最適です。まずノーコードで作って成果が出てきたら、予算をかけてリニューアルする、という段階的なアプローチも有効です。

まとめ

スマホ対応LPは、ノーコードツールを使えば自分で作れます。大事なのは以下の3つです。

1. スマホで見たときの体験を最初から設計すること：PCで作ってからスマホに合わせるのではなく、スマホの画面幅を前提に情報を整理する。

2. スマホプレビューを見ながら作ること：1セクションごとに確認し、崩れていたらその場で直す。

3. 公開後も自分で改善し続けること：CTAの位置・文言・デザインを変えながら、数値を見て改善する。

「まずはノーコードツールの無料プランで1ページ作ってみる」が、最もリスクが低く、学びが多い第一歩です。作ってみてから判断しても遅くはありません。