成功
お問い合わせフォーム
メッセージフォームと任意のビジネス詳細を含む、わかりやすいお問い合わせページを作成します。
このセクションを使用してメッセージを収集し、問い合わせの前に必要になる可能性のある連絡先情報を表示します。フォーム、連絡先詳細パネル、またはその両方を含め、ブロックの順序を並べ替えて、どのコンテンツを最初に表示するかを変更できます。
基本的なセクション設定
Section titled “基本的なセクション設定”このセクションは、まずページの主な目的を決めると最も効果的です。訪問者にすばやくメッセージを送ってほしい場合は、フォームブロックを最初に配置します。訪問者が問い合わせの前に電話番号、メールアドレス、所在地、営業時間を必要とすることが多い場合は、連絡先情報ブロックを最初に配置します。
エディターでブロックの仕組みをより広く確認するには、セクションとブロックに関するShopifyドキュメント をご覧ください。
- 両方のブロックを使用すると、完全なお問い合わせページになります。
- フォームブロックのみを使用すると、よりシンプルで行動重視のレイアウトになります。
- 連絡先情報ブロックを使用して、直接連絡できる手段をフォームに補足します。
ブロックの並べ替えにより、レイアウトと読み取りの流れが変わります。ブロックを移動した後は、デスクトップとモバイルでページをプレビューし、最も重要な連絡方法が最初に表示されることを確認してください。
これらの設定は、セクションのアイコン、メインテキスト、サブ見出しテキストに対して、テーマのデフォルトカラーを上書きします。お問い合わせエリアを目立たせたい場合や、カスタム背景の上に配置する場合に特に便利です。
色の値を空欄にするか、デフォルトに近いままにすると、通常はテーマのフォールバックスタイルが維持されます。より明示的な色、グラデーション、メディアを選ぶと、セクションがより独立して見えるため、問い合わせエリア全体が1つの単位として機能しているか確認してください。
スタイル設定されたブロック背景も追加する場合は、各エリアを個別に扱うのではなく、セクションとブロックの色が連動するようにします。ここでは強いコントラストが重要です。訪問者は詳細を読み取り、フォームを負担なく完了できる必要があるためです。
対応ブロックタイプ
Section titled “対応ブロックタイプ”- 連絡先情報
- 連絡フォーム
このブロックを使用して、フォームと並べて実用的な詳細を表示します。たとえば、電話番号、メール、住所、営業時間、ソーシャルメディアアイコンなどです。独自の任意の見出しエリアも含まれているため、ページに両方のブロックがある場合でも、このコンテンツをわかりやすくラベル付けできます。
- 詳細は短く、見やすくまとめてください。
- ソーシャルアイコンは、そのプロフィールがアクティブで、継続的に管理されている場合にのみ表示してください。
- 連絡先詳細を別パネルのように見せたい場合は、ブロック背景設定を使用してください。
連絡先情報に関するCompany XYZドキュメント で詳しく見ることができます。
連絡フォーム
Section titled “連絡フォーム”このブロックを使用して、メッセージフォーム自体を表示します。送信ボタンのスタイルを設定したり、モバイルでは全幅にしたり、必要に応じてブロック内に小さな見出しエリアを追加したりできます。
- このフォームの用途を訪問者が理解できるように、短い見出しまたはサブ見出しを追加します。
- 小さい画面でも入力しやすくしたい場合は、モバイルで全幅のボタンを使用します。
- 連絡先詳細ブロックですでに強めの背景を使っている場合は、フォームエリアの見た目をシンプルに保ちます。
- 公開後は、空、成功、エラーの各状態を確認し、確認メッセージと検証メッセージが見やすいままになっていることを確認します。
お問い合わせフォームに関するCompany XYZドキュメント で詳しく見ることができます。
標準セクション設定
Section titled “標準セクション設定”ヘッダー設定
Section titled “ヘッダー設定”ヘッダー設定 は、ブロックの上に表示される導入コンテンツを制御します。これには、配置、アイコン、キャプション、見出し、補足テキスト、任意のボタンが含まれます。このエリアを使ってページの導入を行ったり、構成を追加したり、道順、予約、ヘルプコンテンツなどの補助的なアクションを含めたりできます。
見出しタイプは慎重に選び、ページのコンテンツ階層が明確になるようにしてください。任意のボタンを追加する場合は、デスクトップとモバイルでの表示位置を確認し、主要な問い合わせの流れを妨げないようにします。
セクション背景設定
Section titled “セクション背景設定”セクション背景設定 を使用すると、セクション全体の背後に色、グラデーション、画像、または動画を追加できます。お問い合わせエリアをより目立たせたい場合や、周囲のコンテンツと視覚的に分けたい場合に適しています。
背景メディアは、特に両方のブロックを表示している場合、読みやすさとレイアウトのバランスに影響することがあります。画像または動画を使用する場合は、オーバーレイとテキストの色を合わせて確認し、コンテンツが明確に見えるようにします。
余白設定 は、セクションの上下のスペースを制御します。お問い合わせエリアに余裕を持たせたい場合や、ページにすでに複数のセクションがある場合にレイアウトを詰めたい場合に使用します。
デスクトップとモバイルの余白は意図的に設定してください。お問い合わせレイアウトでは、窮屈に見えないよう、小さい画面で少し余裕を持たせる必要があることがよくあります。
区切り線設定
Section titled “区切り線設定”区切り線設定 は、セクションの上部または下部に任意の線を追加します。これは、完全な背景処理を追加せずに、問い合わせエリアを近くのコンテンツから分ける簡単な方法です。
カスタムの区切り線色を使うのは、デフォルトのボーダースタイルが控えめすぎる場合だけにしてください。多くのレイアウトでは、薄い区切り線で十分です。
表示設定 は、セクションをデスクトップ、モバイル、またはその両方に表示するかどうかを制御します。小さい画面で別の問い合わせ体験を提供したい場合に役立ちます。
片方のデバイスでのみセクションを非表示にするのは、そのデバイスでも訪問者が明確に問い合わせられる方法を持っている場合に限ります。主要な連絡方法が突然消えてしまうレイアウトは避けてください。
幅設定 は、セクション内のコンテンツ幅と、セクションラッパー自体の幅を制御します。フォームを読みやすくしたい場合や、背景をコンテンツよりも広く表示したい場合に使用します。
コンテンツ幅は、通常、快適さと可読性に最も大きく影響します。エディター上だけでなく公開ページでも幅の変更を確認してください。エディターの表示では、レイアウトの違いが実際より小さく見えることがあるためです。
使用上の注意
Section titled “使用上の注意”- 主なアクションを先に示します。 すぐに問い合わせたい場合はフォームを最初に配置し、メッセージ送信の前に参照情報が必要な訪問者が多い場合は連絡先詳細を最初に配置します。
- 情報を最新に保ちます。 このセクションの信頼性を保つため、電話番号、メールアドレス、住所の内容、営業時間、ソーシャルリンクを定期的に確認してください。
- 読みやすさを守ります。 カスタム背景、オーバーレイ、色の上書きを使用する場合は、テキストとフォームの内容がひと目で読みやすいことを確認してください。
- モバイルでの確認を最適化します。 モバイルのボタン幅、ブロック順、表示設定を使用して、小さい画面でも使いやすくします。
- 幅は控えめに使います。 中程度のコンテンツ幅の方が、非常に広いレイアウトよりも、通常は問い合わせフォームとビジネス詳細を見やすくします。
- 両方のビューポート設定を確認します。 デスクトップとモバイルで異なるメディアやレイアウトを使用する場合は、各デバイスでトリミング、フォールバック動作、テキストの読みやすさが問題なく機能することを確認してください。