Lステップの回答フォームでは、冒頭に画像を配置することで、フォームの目的やブランドの印象を伝えやすくなります。
一方で、「ヘッダー画像はどのサイズで作ればよいのか」「スマートフォンで文字が見切れないか」と悩む担当者も少なくありません。
現在のブロック形式の回答フォームでは、画像ブロックを追加し、「共通ヘッダ」または各セクションに画像を設定します。
この記事では、以下の内容を解説します。
- ヘッダー画像に固定の推奨サイズはあるのか
- 画像ブロックの設定方法
- 「通常」「フルサイズ」の選び方
- スマートフォンで見切れにくくするための工夫
回答フォームのデザインを整え、回答を始める前の迷いを減らしたい方は参考にしてください。
Lステップの回答フォームでできることや、導入するメリット、業種別の活用例については、以下の記事で詳しく解説しています▼
Lステップの回答フォームとは？活用するメリットと事例を紹介！
目次
Lステップ回答フォームのヘッダー画像に決まったサイズはある？
1. 公式の固定推奨サイズは確認できない
Lステップの新しい回答フォームでは、画像ブロックを追加して画像を配置します。
公式情報では、画像ファイルを「○○px × ○○px」で作成すべきという固定の推奨サイズは確認できません。
そのため、画像のピクセル数だけで正解を決めるのではなく、次の3点をセットで考える必要があります。
- 画像の縦横比
- 画像内の文字やロゴの配置
- スマートフォンでの見え方
新しい回答フォームでは、共通ヘッダ・セクションに画像ブロックを追加でき、画像の表示サイズは「通常」「フルサイズ」から選択できます。
まずは画像を設定し、プレビューと実機で見え方を確かめながら調整しましょう。
2. 横長の画像を基本に作成する
フォームの最初に配置するヘッダー画像には、横長の画像が向いています。
制作を始めるときは、横と縦の比率を3：1程度にすると、フォームの導入部分に収まりやすいデザインを作れます。
例えば、次のようなサイズです。
- 1,500px × 500px
- 1,200px × 400px
- 900px × 300px
ただし、これらはLステップ公式が指定する推奨サイズではありません。
あくまで画像制作を始めるための目安です。
同じ1,500px × 500pxの画像でも、画像内の文字配置や表示設定によって、見やすさは変わります。
特に、画像の端まで文字を置くと、スマートフォンでは読みにくくなりやすいため注意が必要です。
3. 「通常」と「フルサイズ」はプレビューで比較する
画像ブロックには「通常」と「フルサイズ」の表示サイズがあります。
ヘッダー画像として大きく見せたい場合は、まずフルサイズでプレビューを確認するとよいでしょう。
一方、画像の左右に余白を残したい場合や、本文の一部として画像を見せたい場合は、通常表示も選択肢になります。
ただし、画像の見え方はフォーム全体の構成によって変わります。
「フルサイズだから必ずヘッダー向き」「通常だから文字が見切れない」とは言い切れません。
画像を設定した後は、実際のフォーム画面で比較してください。
ヘッダー画像が見切れる・読みにくくなる原因
1. 画像の端に文字やロゴを置いている
ヘッダー画像の左右や上下は、端末の画面幅や表示状態によって見えにくくなることがあります。
会社名、ロゴ、フォーム名、キャンペーン名など、切れてはいけない情報を画像の端に置くと、内容が伝わりません。
重要な情報は、できるだけ中央寄りに配置しましょう。
画像の端には、見切れても意味が変わらない背景写真や模様を置くと、表示差の影響を受けにくくなります。
2. スマートフォンで文字が小さくなる
パソコンで画像を制作すると、画面上では文字が十分に大きく見えることがあります。
しかし、LINEから回答フォームを開くユーザーは、スマートフォンで見るケースが多くなります。
スマートフォンでは画像全体が縮小されるため、細い文字や長い説明文は読みにくくなります。
ヘッダー画像に入れる文字は、フォーム名や短い訴求に絞ることが大切です。
詳しい説明、参加条件、回答期限などは、画像ではなくテキストブロックに記載してください。
3. 画像に情報を詰め込みすぎている
ヘッダー画像は、フォームの内容を一目で伝えるための要素です。
画像内に説明、実績、注意事項、申込手順まで詰め込むと、文字が小さくなり、かえって読みにくくなります。
例えば、セミナー申込フォームなら、ヘッダー画像に入れる情報は次の程度で十分です。
- セミナー名
- テーマ
- 主催者名またはロゴ
日時、対象者、参加条件、個人情報の取り扱いは、その下のテキストブロックで説明しましょう。
画像とテキストの役割を分けると、読みやすいフォームになります。
ヘッダー画像を作るときのポイント
1. 中央を安全な表示エリアとして使う
画像を作る際は、中央を「必ず見せたい情報を置くエリア」と考えます。
フォーム名やロゴを中央へ集め、左右には背景や装飾を配置してください。
たとえば、セミナーのキービジュアルを使う場合も、登壇者の顔やタイトルを端に寄せすぎないことが重要です。
見切れた場合でも、フォームの目的がわかる状態を目指しましょう。
2. フォームの目的がひと目で伝わる内容にする
ヘッダー画像を見たユーザーが、「何のために入力するフォームなのか」をすぐ理解できることが大切です。
フォーム別の構成例は、以下のとおりです。
| フォームの種類 | ヘッダー画像に入れる情報の例 |
|---|---|
| セミナー申込 | セミナー名、テーマ、主催者名 |
| 資料請求 | 資料名、表紙、得られる情報 |
| 来店・相談予約 | サービス名、予約の目的、店舗や担当者のイメージ |
| 診断フォーム | 診断名、対象となる悩み、ブランド名 |
ヘッダー画像を装飾だけで終わらせず、回答する理由を伝える要素として使いましょう。
3. フォーム全体のデザインとそろえる
ヘッダー画像の色や雰囲気が、フォーム本文やボタンのデザインと大きく異なると、ユーザーは別のページへ移動したように感じることがあります。
ブランドカラーを使う場合は、見出しやボタンにも同系色を取り入れると、フォーム全体に統一感が出ます。
ただし、色をそろえることよりも優先したいのは、文字の読みやすさです。
背景色と文字色の差が小さい場合は、画像の見た目がよくても、内容が伝わりません。
スマートフォンで確認し、文字が読める配色になっているか確認してください。
Lステップ回答フォームにヘッダー画像を設定する方法
1．対象の回答フォームを開く
Lステップ管理画面の左メニューから「回答フォーム」を開きます。
新しく作成する場合は、「＋新しい回答フォーム」を選択してください。
すでに作成済みのフォームへ画像を追加する場合は、対象フォームを開きます。
この記事で解説しているのは、「＋ブロックを追加」が表示されるブロック形式の回答フォームです。
2．共通ヘッダまたはセクションを選ぶ
新しい回答フォームでは、各ページに共通して表示する内容を「共通ヘッダ」に設定できます。
ロゴやフォーム名など、すべてのページで同じ画像を見せたい場合は、共通ヘッダへ画像を追加します。
一方、ページごとに画像を変えたい場合は、各セクションに画像ブロックを追加してください。
使い分けの目安は以下です。
- 共通ヘッダ：ロゴ、フォーム名、共通のキービジュアル
- 各セクション：質問テーマごとの画像、ページごとに変わる案内
複数ページのフォームで、どの画像をどこへ設定したか分からなくならないよう、最初に設計を決めておきましょう。
3．画像ブロックを追加する
画像を追加したい場所で「＋ブロックを追加」を選択し、「画像」を追加します。
画像は「新規アップロード」または「登録メディア」から選択できます。
新しい画像をその場で設定する場合は、新規アップロードを使用します。
ロゴや定期的に使うキャンペーン画像など、複数のフォームで使う画像は登録メディアで管理すると、探しやすくなります。
登録メディアに保存する画像は、用途が分かる名前で管理することも大切です。
4．画像の表示サイズを選択する
画像ブロックを追加したら、表示サイズを「通常」または「フルサイズ」から選びます。
ヘッダーとして使う横長画像は、フルサイズで確認してみてください。
フォーム本文の途中に挿入する補足画像や、余白を含めて見せたい画像は、通常表示も比較しましょう。
ここで重要なのは、設定画面上の見え方だけで判断しないことです。
編集画面のプレビューでフォーム全体を確認し、画像の直後に質問項目が続く場合は、画像が大きすぎて入力開始が遅くなっていないかも見てください。
5．保存後、スマートフォンで表示を確認する
フォームを保存したら、プレビューを開きます。
その後、テスト用のLINEアカウントへフォームを送り、実際にスマートフォンで開いてください。
確認する項目は、次のとおりです。
- 画像内のタイトルやロゴが読める
- 文字が端に寄りすぎていない
- 画像が大きすぎて、質問項目が見えにくくなっていない
- 画像とフォーム本文の内容に矛盾がない
- 各セクションで意図した画像が表示される
ヘッダー画像を活用する実務例
1. セミナー申込フォーム
セミナー申込フォームでは、ヘッダー画像に「誰向けの、どのようなセミナーか」が分かる情報を入れます。
例えば、「採用担当者向け」「LINE活用セミナー」のように対象者とテーマを短く示すと、フォームを開いたユーザーが内容を判断しやすくなります。
開催日時や参加条件まで画像に入れる必要はありません。
画像の下にテキストブロックを置き、日時、会場、参加費、注意事項を整理して記載しましょう。
2. 資料請求フォーム
資料請求フォームでは、資料の表紙やタイトルをヘッダー画像に使うと、ユーザーは受け取れる内容をイメージしやすくなります。
例えば、「LINE運用チェックリスト」「採用活動の改善ガイド」など、資料名を大きく表示します。
その下に「このフォームで入力する内容」「資料の受け取り方」をテキストで案内すると、回答前の不安を減らせます。
資料請求後にタグを付けたり、お礼のメッセージを送ったりする場合は、回答後のアクション設定も必要です。
具体的な設定方法や処理の順番については、以下の記事で詳しく解説しています▼
Lステップのアクション設定とは？基本の考え方・活用例・注意点をわかりやすく解説
3. 複数ページの診断・アンケートフォーム
複数のセクションに分かれた診断フォームでは、共通ヘッダに診断名やロゴを設定します。
これにより、ページを移動しても、ユーザーは何の診断に回答しているのかを把握しやすくなります。
各セクションには、質問テーマを補足する画像を必要に応じて追加します。
ただし、すべてのページに大きな画像を置くと、質問までスクロールする回数が増えます。
画像を入れる目的があるページに絞り、回答の妨げにならない量に調整しましょう。
回答フォームを診断コンテンツに活用する場合は、画像だけでなく、診断結果、質問内容、回答後の案内まで先に設計することが重要です。
診断コンテンツの作り方については、以下の記事も参考にしてください▼
Lステップの診断コンテンツの作り方｜設計から設定手順・活用方法まで初心者向けに解説
設定後の確認チェックリスト
公開前には、テスト用アカウントで以下を確認してください。
- フォームの目的が画像を見ておおまかに分かる
- 重要な文字やロゴが画像の端に寄っていない
- スマートフォンで文字が読める
- 「通常」「フルサイズ」の表示が意図どおりになっている
- 共通ヘッダと各セクションの設定場所を間違えていない
- 画像とフォーム本文の内容が一致している
- 画像が大きすぎて、質問項目が見えにくくなっていない
- テスト用LINEアカウントでフォーム全体を確認した
- 使用した画像の用途や保存場所が分かる
公開後に画像を差し替える可能性も考え、フォーム名、画像名、更新日を管理表へ記録しておくと、複数人での運用や引き継ぎがしやすくなります。
Lステップ回答フォームのヘッダー画像に関するよくある質問
1. ヘッダー画像の推奨サイズはありますか？
Lステップ公式では、固定の推奨ピクセルサイズは確認できません。
横長の画像を基本とし、3：1程度の比率を制作の目安にすると作りやすくなります。
ただし、1,500px × 500pxなどの具体的なサイズは公式推奨ではありません。画像の端に重要な文字を置かず、実際の表示を確認して調整してください。
2. 1,500px × 500pxなら画像は見切れませんか？
必ず見切れないとは言えません。
画像のサイズだけでなく、文字やロゴの位置、表示サイズ、閲覧する端末の画面幅が影響します。
重要な情報を中央へ寄せ、スマートフォンとパソコンの両方で確認しましょう。
3. 「通常」と「フルサイズ」はどちらを選べばよいですか？
ヘッダーとして大きく画像を見せたい場合は、まずフルサイズで確認します。
本文の途中に補足画像を置く場合や、余白を含めて見せたい場合は、通常表示も選択肢です。
どちらが適しているかは、画像の内容とフォーム全体の構成によって異なるため、プレビューで比較してください。
4. 共通ヘッダとセクションの画像はどう使い分けますか？
全ページで共通して見せるロゴやフォーム名は、共通ヘッダに設定します。
ページごとに画像を変えたい場合は、各セクションへ設定してください。
複数ページのフォームでは、共通ヘッダに共通情報を集約し、セクション画像は必要なページだけに使うと整理しやすくなります。
5. 新しい回答フォームはどのプランで利用できますか？
Lステップ公式ブログでは、新しい回答フォームはフリープランを含む全プランで利用できると案内されています。
プランや機能の提供条件は変更されることがあるため、設定前に最新の公式情報を確認してください。
まとめ
Lステップの新しい回答フォームでは、画像ブロックを使ってヘッダー画像を設定できます。
ヘッダー画像には固定の推奨サイズがあるわけではありません。
横長の画像を基本にし、重要な文字やロゴを中央へ配置すると、端末による表示差に対応しやすくなります。
また、共通ヘッダと各セクションを使い分けることで、複数ページのフォームでも画像を整理して設定できます。
画像を追加した後は、編集画面のプレビューだけで終わらせず、テスト用LINEアカウントからスマートフォンで開いて確認しましょう。
