Shifter で使える問い合わせフォームサービス解題

1. Technical Support
Tomohyco Tsunoda
2022.4.7
問合せフォーム再考
— その確認画面は必要ですか —

2. ツノダトモヒコ
DigitalCube でテクニカルサポートをやっています。
Shifter や AMIMOTO のサービスページの右下に常駐して、
おやすみからおやすみまでお客さまのトラブルを見つめています。
好きなもの
ギネスビール
嫌いなもの
蛍光灯の光 (浴びると溶けそう)
最近やったこと・やりたいこと
Metroid Dread とEnder Lilies を Nintendo Switch でプレイをしました。2D の
探索型アクションアドベンチャー (Metroidvania)はいいですね。
Diablo ][ Resurrected 用に Windows マシンを組みたい。
自己紹介

3. 1. 前提
2. 問合せフォームで実現したいこと
3. Shifter の仕様
4. 問合せフォームの実装
5. Shifter で使える問合せフォームのサービス
6. その確認画面は本当に必要ですか
7. 別紙
目次

4. 前提
対象とすること
● 一般的な問合せフォーム (氏名、連絡先、相談内容、規約への同意、送信ボタンなど )
対象としないこと
● ショッピングカートや決済・発送システム

5. 受信側の想定フロー
1. 問合せの受付
2. 担当者・社内で問合せ内容を確認・見積・返信内容のレビュー
3. 返信
4. (見込み) 顧客とのやり取り (2から4を繰り返す)
5. 対応完了 (受注 or 失注)
前提

6. ケースA
問合せの受信以降のやり取りを営業担当者がメール・電話などで行う
ケースB
問合せの受信・やり取り・顧客管理まで (ほぼ) オンラインで行う
問合せフォームで実現したいこと — 受信体制ごとのケース分類

7. A. 問合せの受信以降のやり取りを営業担当者がメール・電話などで行う
● ウェブサイトからの問合せの数はあまり多くない
○ 別経路での問合せ・受注がある (既存顧客からの紹介・電話など )
● 問合せ後の受注確度が高い
○ 問合せ = 受注
● 問合せ後の対応はメールや電話などが多い
● 問合せ後の管理は既存のシステム (エクセル管理など)
問合せフォームで実現したいこと — 受信体制ごとのケース分類

8. A. 問合せの受信以降のやり取りを営業担当者がメール・電話などで行う
● 問合せフォームは初回連絡用の窓口
● 受信・顧客情報は既存の方法で管理
ゆえに
● ウェブサイトに組み込む際もシンプルなフォームでよい。
● シンプルなので組み込む際の労力や管理稼働を比較的抑えられる。
● 無料で使えるサービスが多い。
問合せフォームで実現したいこと — 受信体制ごとのケース分類

9. 問合せフォームで実現したいこと — 受信体制ごとのケース分類
B. 問合せの受信・やり取り・顧客管理までまで (ほぼ) オンラインで行う
● ウェブサイトからの問合せがほとんど。
○ ウェブサイト以外からの問合せ・受注がほぼない。
● 相談レベルの問合せが多い。
● 問合せから受注までに時間がかかる。
○ 顧客毎などに細かいやり取りが多く発生する。
● 問合せのあった顧客を管理できるリソースがある。

10. B. 問合せの受信・やり取り・顧客管理までまで (ほぼ) オンラインで行う
● HubSpot や Intercom のような CRM を使う管理が向いている。
● チャットボットを調整していけば、状況に応じてテンプレートの返信が可能。
● 初期のセットアップ・組み込みや管理に稼働がやや取られる傾向にある。
○ フリーミアムもあるものの、基本的に有料サービス。
● 既存システムとの連携が場合によって必要になる。
問合せフォームで実現したいこと — 受信体制ごとのケース分類

11. ● Shifter は静的サイトジェネレーター
● 公開領域において Web サーバやデータベースサーバがない (PHP,
GCI は動かない)
ゆえに、WordPress の問合せフォームプラグインは動かない。
Shifter の仕様

12. みんな大好きフォームプラグイン
● Contact Form 7
● Snow Monkey Forms
● Ninja Forms 等
Shifter の仕様

13. Shifter の仕様
みんな大好きフォームプラグイン
● Contact Form 7
● Snow Monkey Forms
● Ninja Forms 等
困った

14. 問い
静的化されたサイトにおいて、
どのようにして問合せフォームを
実装すればよいか
問合せフォームの実装

15. 答え
外部サービスを使う
問合せフォームの実装

16. 外部サービスを使う利点
データベースサーバの管理が不要
WordPress 内に持つ場合は、問合せ情報を保存するテーブ
ルが必要。しかも WordPress と同じサーバ内におかれるた
め、WordPress の状態の影響を受けやすい。
メールサーバの管理が不要
問合せフォームにはメールの送信・受信を伴う。内製だとこの
管理も必要。セキュリティにも大変気を使う。サーバによっては
送信先も spam 判定を受ける場合も多い。
問合せフォームの実装

17. 実装方法の候補
甲: フォームのセクション全体を埋め込む (iframe, JavaScript など )
乙: フォーム内の action にサービスの endpoint を指定する
丙: 問合せページをやめてチャットにする
問合せフォームの実装

18. 甲: フォームのセクション全体を埋め込む (iframe, JavaScript, など )
編集画面
問合せフォームの実装

19. 甲: フォームのセクション全体を埋め込む (iframe, JavaScript, など )
フロント画面
問合せフォームの実装

20. 乙: フォーム内の action にサービスの endpoint を指定する
編集画面
問合せフォームの実装

21. 乙: フォーム内の action にサービスの endpoint を指定する
フロント画面
問合せフォームの実装

22. 丙: 問合せページをやめてチャットにする
編集画面
問合せフォームの実装

23. 丙: 問合せページをやめてチャットにする
フロント画面
問合せフォームの実装

24. 甲: フォームのセクション全体を埋め込む
● キューボ (Qubo)
● フォームラン (Formrun)
● Google Forms
● Typeform
他
Shifter で使える問合せフォームのサービス

25. 甲: フォームのセクション全体を埋め込む
● 実装が容易 (コードをコピー、固定ページなどペーストするだけで設置が
完了)。
● みんなが好きな確認画面は実装されている傾向。
Shifter で使える問合せフォームのサービス

26. 乙: フォーム内の action にサービスの endpoint を指定する
● Getform.io
● Formspree
● Kwes Forms
● Staticforms
他
Shifter で使える問合せフォームのサービス

27. 乙: フォーム内の action にサービスの endpoint を指定する
● フォームの構成やデザインの自由度が高く、 IFTTT/Zapier など、
他のサービスと連携をしやすい
Shifter で使える問合せフォームのサービス

28. 丙: 問合せページをやめてチャットにする
● Freshdesk Messaging
● HubSpot
● Intercom
他
Shifter で使える問合せフォームのサービス

29. 丙: 問合せページをやめてチャットにする
● サイトの右下などに配置されるので、専用の問合せページを作成
しなくてよい。
Shifter で使える問合せフォームのサービス

30. メリット
甲: フォームのセクション全体を埋め込む
○ 実装が容易 (コードを取得し、固定ページなどに貼り付けるだけで
設置が完了)。
○ みんなが好きな確認画面は実装されている傾向。
乙: フォーム内の action にサービスの endpoint を指定する
○ フォームの構成やデザインの自由度が高く、 IFTTT/Zapier など、
他のサービスと連携をしやすい
丙: 問合せページをやめてチャットにする
○ サイトの右下などに配置されるので、専用の問合せページを作成
しなくてよい。
Shifter で使える問合せフォームのサービスの実装

31. デメリット
甲: フォームのセクション全体を埋め込む
○ 構成やデザイン面での自由度は高くない。
乙: フォーム内の action にサービスの endpoint を指定する
○ 設置と管理にやや手間がかかる。
○ サービスページなどの言語は英語が基本。
○ 確認画面は未実装。
丙: 問合せページをやめてチャットにする
○ 対応する人間の張り付きがある程度必要。
○ 「ちゃんと問合せをしたい人」にはコレじゃない感を与えが
ち。
Shifter で使える問合せフォームのサービスの実装

32. 実装例
labworks.digitalcube.jp
HubSpot Form を採用。
問合せと顧客管理も行う。
Shifter で使える問合せフォームのサービスの実装

33. 実装例
www.amimoto-ami.com
Hubspot を採用。
問合せと顧客管理も行う。
Shifter で使える問合せフォームのサービスの実装

34. 実装例
www.getshifter.io
Intercom を採用。
問合せと顧客管理も行う。
Shifter で使える問合せフォームのサービスの実装

35. 問合せフォームサービスの選択
● 問合せフォームで実現したいことは何か
● フォームが体制や運用に合うか、または体制・運用を合わせられるか
● 社内のリソースをどこまで割けるか
その確認画面は本当に必要ですか

36. 問合せフォームサービスの選択
確認画面は必要という呪縛から開放されて
サービスを選びましょう。
その確認画面は本当に必要ですか

37. 別紙
別紙という名のリンク集
問合せフォーム関連の Shifter のサポートドキュメント
● https://support.getshifter.io/en/collections/1394677
● https://support.getshifter.io/en/collections/2260106

38. 別紙 Shifter で使える問合せフォームサービス (一部)
サービス名
設定方法 (埋め込み、endpoint 指
定、チャット)
確認画面の有無 サポートドキュメント
キューボ 埋め込み ◯
https://support.getshifter.io/e
n/articles/5369234
フォームラン 埋め込み ◯
https://support.getshifter.io/e
n/articles/5270958
Google Forms 埋め込み ×
https://support.getshifter.io/e
n/articles/4100351
Formspree Endpoint 指定 ×
https://support.getshifter.io/e
n/articles/3052298
Staticforms Endpoint 指定 ×
https://support.getshifter.io/e
n/articles/5101778
HubSpot チャット ×
https://support.getshifter.io/e
n/articles/3892369
Intercom チャット ×
https://support.getshifter.io/e
n/articles/4042067

39. 別紙 Shifter で使える問合せフォームサービス (一部)
サービス名
設定方法 (埋め込み、endpoint 指
定、チャット)
確認画面の有無 サポートドキュメント
キューボ 埋め込み ◯
https://support.getshifter.io/e
n/articles/5369234
フォームラン 埋め込み ◯
https://support.getshifter.io/e
n/articles/5270958
Google Forms 埋め込み ×
https://support.getshifter.io/e
n/articles/4100351
Formspree Endpoint 指定 ×
https://support.getshifter.io/e
n/articles/3052298
Staticforms Endpoint 指定 ×
https://support.getshifter.io/e
n/articles/5101778
HubSpot チャット ×
https://support.getshifter.io/e
n/articles/3892369
Intercom チャット ×
https://support.getshifter.io/e
n/articles/4042067

40. 設定・トラブルに関する相談は
ダッシュボード右下のアイコンから
導入に関する相談は
オンライン個別相談会で
https://getshifter.io/ja/office-hours/