LPのデザインを外注するときは、PC版だけでなくスマホ版も依頼範囲に含める必要があります。
PC版をそのまま縮小しただけでは、文字が小さい、ボタンを押しにくい、画像が途中で切れるといった問題が起きます。スマホでは画面幅に合わせて、掲載順や余白、文字サイズ、ボタンの位置を組み直す必要があります。
ただし、サービスによってはスマホ版が基本料金に含まれず、追加料金になることがあります。「レスポンシブ対応」と書かれていても、スマホ用デザインデータが納品されるとは限りません。
LPデザインにスマホ版が必要な理由
スマホ版が必要なのは、画面幅が狭くなると情報の見せ方が変わるからです。
PCでは画像と文章を横に並べられますが、スマホでは基本的に縦へ積み重ねます。横並びのまま縮小すると、文字や写真が小さくなり、内容を確認しにくくなります。
スマホ版では、主に次の部分を調整します。
- 見出しの文字サイズ
- 本文の行間
- 写真の比率
- 横並び要素の掲載順
- 申し込みボタンの大きさ
- ボタン同士の間隔
- 表や料金プランの見せ方
- メニューの表示方法
- 画面左右の余白
- ファーストビューの高さ
特にLPは縦に長くなるため、スマホでスクロールしたときの読みやすさが重要です。
PC版で整っていても、スマホ版の設計が不十分なら、途中で読むのをやめられる原因になります。
「レスポンシブ対応」と「スマホ版デザイン」は同じではない
レスポンシブ対応とは、画面幅に応じて表示を切り替える実装方法です。
一方、スマホ版デザインは、スマホでどのような配置にするかを示した設計データです。
両者の違いを整理すると、次のようになります。
| 項目 | スマホ版デザイン | レスポンシブ実装 |
|---|---|---|
| 主な作業者 | Webデザイナー | コーダー、エンジニア |
| 作業内容 | スマホでの配置や見た目を決める | 画面幅に応じて表示を切り替える |
| 主な納品物 | Figma、画像、PDFなど | HTML、CSS、WordPressなど |
| 公開できるか | データだけでは公開できない | サーバーへ設置すれば公開できる |
| 確認する点 | スマホ画面が制作範囲に含まれるか | 実装費が含まれるか |
「スマホ対応」とだけ書かれている場合は、スマホ版のデザイン制作なのか、コーディングまで含むのか確認してください。
デザインのみのサービスでは、完成後に別の担当者がレスポンシブ実装を行います。
PC版だけ依頼してコーダーに任せる方法はある？
PC版だけをもとに、コーダーがスマホ表示を判断して実装する方法もあります。
ただし、デザイナーの意図が十分に共有されていないと、次のような問題が起きます。
- 情報の掲載順が想定と変わる
- 写真の切り取り位置が不自然になる
- 見出しが長くなりすぎる
- ボタンが小さくなる
- 余白のバランスが崩れる
- 重要な訴求が画面下へ移動する
- PC版とスマホ版の印象が大きく変わる
シンプルなページなら、PC版だけで実装できる場合もあります。
一方、縦長のLP、複数の料金プラン、比較表、実績一覧、利用者の声などがある場合は、スマホ版デザインも用意したほうが安全です。
PC・スマホセットで依頼したほうがよいLP
次のLPは、スマホ版までデザイナーに依頼するのが適しています。
広告から集客するLP
Web広告やSNS広告から誘導するLPでは、スマホから閲覧されることを前提に設計する必要があります。
広告画像を見た直後に、同じ訴求がファーストビューへ表示されるようにします。
申し込みフォームがあるLP
問い合わせ、資料請求、予約、購入などを目的とする場合は、ボタンとフォームの使いやすさが重要です。
スマホでは、入力欄や選択肢が小さいと操作しにくくなります。
料金比較があるLP
PCで横に並べた料金表は、スマホ画面へそのまま表示できません。
縦に並べる、横スクロールにする、重要項目だけ抜き出すなどの調整が必要です。
説明する内容が多いLP
縦長8,000px前後のLPでは、情報の区切り方とスクロール中のメリハリが重要です。
見出し、背景、写真、ボタンを適切に配置しないと、どこを読んでいるのか分かりにくくなります。
スマホ版が基本料金に含まれるか確認する
見積もりでは、「レスポンシブ対応ですか」と聞くだけでは不十分です。
次のように具体的に確認します。
- PC版とスマホ版の両方を制作するか
- スマホ版のデザインデータが納品されるか
- スマホ版は基本料金に含まれるか
- タブレット版も必要か
- コーディングは含まれるか
- 画面の長さに上限があるか
- 表やフォームのスマホ表示も設計するか
- 修正回数はPCとスマホを合わせた回数か
- PC版確定後にスマホ版を作るのか
- 納品形式は何か
料金だけを比較するのではなく、どこまで制作されるかをそろえて比較してください。
PCのみとPC・スマホセットの違い
| 比較項目 | PC版のみ | PC・スマホセット |
|---|---|---|
| 初期費用 | 抑えやすい | PC版のみより高くなる場合がある |
| 実装時の判断 | コーダーに任せる部分が多い | デザインどおりに実装しやすい |
| スマホの見やすさ | 実装担当者の判断に左右される | 事前に画面を確認できる |
| 修正のタイミング | 実装後に発生しやすい | デザイン段階で調整できる |
| 向いているページ | 短く単純なページ | LP、広告用ページ、情報量の多いページ |
| 発注管理 | デザイナーとコーダー間の調整が必要 | 納品データをそのまま共有しやすい |
PC版のみのほうが安くても、実装後にスマホ表示を修正すると、結果的に費用が増えることがあります。
最初からPC・スマホセットで依頼すれば、実装前に完成イメージを確認できます。
スマホ版デザインで確認するポイント
ファーストビューに何が表示されるか
スマホでは、最初に見える範囲が限られます。
最低限、次の情報が早い段階で伝わる構成にします。
- 商品やサービスの名称
- 誰向けのサービスか
- 主なメリット
- 申し込みボタン
- 信頼性を補う情報
PCでは横に並んでいた写真や実績が、スマホでは画面下へ移動することがあります。
何を最初に見せるかを確認してください。
ボタンを押しやすいか
申し込みボタンは、指で押せる大きさと間隔が必要です。
ボタン内の文字が2行、3行になると、見た目が崩れる場合があります。短い文言へ調整することも必要です。
横スクロールが発生しないか
料金表、比較表、実績一覧などは、スマホ画面からはみ出しやすい部分です。
表示方法は主に次の3種類です。
- 項目を縦に並べ直す
- 横スクロールできるようにする
- 重要項目だけを表示する
どの方法を選ぶかは、情報量とLPの目的で決まります。
文字量が多すぎないか
PCでは適切な文章量でも、スマホでは長く見えます。
一文を短くし、箇条書きや小見出しを使って区切ります。
写真が適切に切り取られているか
横長の写真をスマホ画面へ配置すると、人物や商品が切れることがあります。
PC版とスマホ版で別の切り取り方を指定するか、別画像を使用します。
デザインのみの外注で必要な役割分担
PC・スマホ版のデザインが完成しても、LPは自動的に公開されません。
デザインのみを外注する場合は、次の担当を決めます。
- 原稿を作る担当者
- 写真やロゴを用意する担当者
- デザインを確認する担当者
- コーディングする担当者
- フォームを設置する担当者
- サーバーへ公開する担当者
- 公開後に修正する担当者
社内にコーダーがいない場合は、デザイン発注前に実装先も探しておきます。
コーダーへは、希望する納品形式を確認してください。Figmaで受け取れるか、画像書き出しだけでよいかによって、デザイナーへの指定が変わります。
このサービスでは、LPまたはトップページについて、PC・スマホ両方のデザインを依頼できます。
基本料金の対象は縦長8,000pxまでで、Figma、JPEG、PNG、PDFなどの形式に対応しています。コーディングは含まれないため、納品後の実装担当者を別に用意する必要があります。
基本料金に含まれる主な内容
基本料金として案内されているのは、次の内容です。
- LPまたはトップページのデザイン
- PC版デザイン
- スマホ版デザイン
- 縦長8,000pxまで
- 無料修正3回まで
- Adobe Stockの画像素材
- Figmaなどでのデータ納品
Adobe Stockの素材は、デザイナーによる選定だけでなく、発注者が選ぶ方法も相談できます。
自社で使える写真がない場合でも、イメージに合う素材を探しやすくなります。
追加料金になりやすい内容
掲載されている主な追加オプションは次のとおりです。
| 追加内容 | 料金 |
|---|---|
| 追加修正 | 3,000円 |
| トップページのサブ案1点 | 12,000円 |
| ロゴデザイン2案 | 30,000円 |
| 下層ページ1ページ | 12,000円 |
| 下層ページのスマホ版 | 上記料金に含む |
8,000pxを超えるLP、大幅な構成変更、4回目以降の修正などは、別途見積もりになる可能性があります。
購入前に、予定しているLPの長さと掲載項目を伝えてください。
8,000px以内に収まりやすい構成
一般的なLPでは、次のような順番で構成します。
- ファーストビュー
- 利用者の悩み
- 商品やサービスの特徴
- 選ばれる理由
- 利用方法
- 実績
- 料金
- 利用者の声
- よくある質問
- 申し込みボタン
各項目の文章や実績が多い場合は、8,000pxを超える可能性があります。
特に長くなりやすいのは、次の部分です。
- 利用者の声を多数掲載する
- 料金プランを細かく比較する
- 導入事例を詳しく紹介する
- よくある質問を多数掲載する
- 商品機能を一つずつ説明する
- 会社情報や代表者紹介を入れる
すべてを1ページに詰め込まず、購入判断に必要な内容へ絞ると制作費も抑えられます。
初稿提出までに用意するもの
サービスでは、トップページ初稿を5営業日以内と案内しています。
制作を止めないため、発注時に次の情報を共有します。
- LPを作る目的
- ターゲット
- 掲載原稿
- ロゴ
- 商品やサービスの写真
- 希望するデザイン
- 参考サイト
- 希望納期
- 納品形式
- 既存サイトの有無
- コーディング担当者の有無
未定の項目は、「相談したい」と伝えることもできます。
ただし、原稿や構成が未定の場合は、制作範囲や納期が変わる可能性があります。決まっている内容と未定の内容を分けて伝えてください。
修正3回を無駄にしない伝え方
無料修正は3回までです。
細かな変更を1件ずつ送るのではなく、社内で確認してから一度にまとめます。
修正指示は、次のように具体的に伝えます。
- 「青を明るくする」ではなく、参考色を指定する
- 「写真を変える」ではなく、候補画像を添える
- 「文字を大きくする」ではなく、目立たせたい見出しを指定する
- 「分かりにくい」ではなく、どの情報を先に見せたいか伝える
- 「スマホが長い」ではなく、削除できる項目を指定する
初稿段階でPC版とスマホ版の両方を確認し、同じ回の修正としてまとめると効率的です。
複数案が必要か判断する
基本の提案は1案です。
複数案が必要なのは、社内でデザインの方向性が決まっていない場合です。
たとえば、次のような比較をしたいときです。
- 高級感と親しみやすさ
- 写真中心と文字中心
- 法人向けと個人向け
- 落ち着いた配色と明るい配色
- 実績を強調する案と価格を強調する案
一方、参考サイトや配色が決まっているなら、1案を修正したほうが費用を抑えられます。
複数案を依頼するときは、LP全体を複数作るのか、トップページやファーストビューだけを比較するのか確認してください。
PRO認定サービスを選ぶ際も制作範囲を確認する
PRO認定は、ココナラ運営の審査を通過したサービスであることを示します。
ただし、認定の有無にかかわらず、発注者が確認すべき項目は変わりません。
- 基本料金に含まれる画面
- PC・スマホ版の有無
- ページの長さ
- 修正回数
- 提案数
- 納品形式
- コーディングの有無
- 写真素材の費用
- 著作権の扱い
- 実績公開の可否
- 納期
高品質なデザインを依頼しても、コーディングが必要なことを見落とせば、予定日に公開できません。
見積もり相談で送る内容
相談時は、次のように依頼内容をまとめます。
「商品販売用のLPデザインを検討しています。
PC版とスマホ版の両方を希望します。予定している構成は、ファーストビュー、商品の特徴、実績、料金、利用者の声、FAQ、購入ボタンです。
原稿とロゴは用意済みですが、写真はありません。Adobe Stockから選定をお願いしたいです。
LPの長さは8,000px前後を想定しています。納品形式は、コーディング担当者の希望によりFigmaを指定します。
希望初稿日は○月○日、最終納品日は○月○日です。この内容が基本料金内に収まるか、追加料金の有無をご提示ください。」
ページの長さが分からない場合は、原稿と構成案を送って判断してもらいます。
PC・スマホ込みかを料金比較の基準にする
LPデザインの料金を比較するときは、表示価格だけではなく、PC版とスマホ版の両方が含まれるか確認します。
比較する項目は次のとおりです。
- PC版のみか
- スマホ版も含むか
- LPの長さ
- 画像素材の費用
- 修正回数
- 提案数
- 納品形式
- コーディングの有無
- 納期
- 追加ページの料金
スマホ版が別料金の場合、表示価格が安くても総額は高くなることがあります。
反対に、PC・スマホ版、画像素材、修正が基本料金に含まれていれば、追加費用を予測しやすくなります。
PC・スマホ両方のLPデザイン、8,000pxを超えた場合の料金、希望納期、納品形式を伝えて見積もりを相談できます。
コーディング担当者の有無も共有し、デザイン完成後の実装まで含めてスケジュールを組んでから購入してください。
