色々なフォームの作り方へ

フォームに画像を挿入して分かりやすくする方法|見本写真・サイズ表・クリックで拡大表示も

テキストだけでは伝わりにくい項目がある

「どのサイズをご希望ですか」「該当する状態の写真を選んでください」「会場の地図をご確認のうえお申し込みください」——こうした項目は、選択肢や説明文だけで伝えようとすると、回答者によって解釈がぶれてしまいがちです。

フォームには、回答者がアップロードする「ファイル」項目とは別に、フォーム作成者側が画像を貼り付けて見せるための「画像」ブロックがあります。サイズ表・見本写真・地図・案内図などを本文中に直接表示できるパーツです。

「画像」ブロックでできること

  • 画像ファイルをアップロードして、入力画面の任意の位置に表示する
  • 画像の代替テキスト(alt)を設定できる(画像が読み込めない場合や読み上げ用)
  • 画像の表示幅を調整できる
  • 「クリックで拡大表示」をオンにすると、回答者がタップ・クリックして画像を大きく確認できる

スマートフォンでは画面が小さいため、特に「拡大表示」を有効にしておくと、細かい文字が入ったサイズ表や地図でも回答者が読み取りやすくなります。

活用例

  • サイズ・カラー表: 注文フォームで、サイズ表や色見本の画像を選択肢の直前に配置する
  • 状態確認: 買取・査定依頼フォームで「A・B・Cランクの見本写真」を並べ、該当ランクを選んでもらう
  • 地図・案内図: 会場受付フォームで、会場までのアクセス地図や駐車場の案内図を掲載する
  • 記入例: 申請書のような複雑な項目の前に、記入例のスクリーンショットを貼っておく
  • ロゴ・雰囲気の演出: フォームの冒頭に主催者のロゴやイメージ画像を置き、フォームの世界観を伝える

いずれの場合も、「画像を見た上で選んでほしい項目」の直前に置くのが基本です。画像と選択肢が離れていると、回答者が見比べながら回答しにくくなります。

設定の手順

  1. フォーム編集画面の「入力画面」タブを開く
  2. 左側のパーツ一覧から「画像」をクリックして追加する
  3. 画像ファイルをアップロードする
  4. 右パネルで代替テキスト・表示幅・クリックで拡大表示の有無を設定する
  5. 見せたい項目の直前・直後にドラッグで位置を調整する
  6. プレビューで、パソコンとスマートフォンの両方の見え方を確認する

気をつけたいポイント

  • ファイルサイズ: 大きすぎる画像は読み込みが遅くなり、離脱の原因になります。あらかじめ圧縮しておくと安心です。
  • 文字が細かい画像: サイズ表など文字情報が多い画像は、拡大表示をオンにしておかないとスマホでは読めないことがあります。
  • 画像だけに頼らない: 環境によって画像が表示されない可能性もゼロではないため、重要な情報はテキストの説明文とあわせて伝えるとより安全です。

よくある質問

回答者がアップロードした画像と混同しませんか?

異なる機能です。「画像」ブロックは作成者が事前に貼り付けて表示するもので、回答データにはなりません。回答者に写真を送ってもらいたい場合は「ファイル」項目を使います。

画像は何枚でも追加できますか?

枚数の上限は設けていません。ただし枚数が多いとフォームが縦に長くなり読み込みも遅くなるため、本当に必要な箇所に絞るのがおすすめです。

画像を大きい表示のまま常に見せることはできますか?

はい。「クリックで拡大表示」をオフにすれば、設定した表示幅のまま常時表示されます。細かく見せたい場合だけ拡大表示をオンにするとよいです。

関連記事

この記事をシェア

https://rakufo.com/support/detail/177
X LINE

Welcome back

おかえりなさい

メールアドレスとパスワードでサインイン

Googleでログイン

Get started free

アカウントを作成

メールアドレスや Google 連携を使ってRAKUFOをご利用ください(無料)。

Googleで無料登録