見出し画像

申し込みフォーム送信後のフローをデザインした話。

あけましておめでとうございます。
WEBデザイン勉強中のいちかです。

現在、私はまるみデザインファームというデザイナー向けのコミュニティに入っています。

デザイナーのまるみさんがツイッターで仕事を手伝って欲しい、と呟いた所、弟子志望者が100人近く集まってしまったことからコミュニティ化したという成り立ちのコミュニティです。
まるみさんは、更に応募者一人ひとりにツイッターでDMし続けていた所、スパムを疑われるという事態にまでなったというから驚きです。普通なら到底ありえないようなことですが、まるみさんの人望の高さと弟子への愛の深さを表現するには十分すぎるエピソードです。
(詳しくはまるみさんのnoteをご覧ください)

想いさえあれば、無謀とも思える高い山でも超えてしまえるのが人間というものです。

とはいえ、まるみさんがどんなに愛に溢れる人だとしても、残念ながら例外なく人には一日24時間しか与えられていないのは事実で、それが目の前の事務作業に追われ本当にしたいことが十二分に出来ないのはとても残念なことです。

そのため、どうにか仕事が減らないか業務の自動化をデザインしました。

1、きっかけ

きっかけはコミュニティへの申し込み用のWEBサイト(LP)のワイヤーフレーム(WEBサイトの設計図)回の最終回を観たことでした。

これまで手作業で受付をしているのを知ってはいましたが、LP完成後も問い合わせ先をツイッターにする、というやりとりを聞いて、「それじゃ、LPを作っても運営が楽にならないのでは・・・それは何とかしないと!」と謎の使命感に燃えてしまいました。

サービスと言われる類のものは基本的に運営している人の業務が楽にならない限り品質が上がらないと思っています。なぜなら、目の前の雑務に追われるだけでは、本当に時間をかけてやらなくてはいけない必要なことや大きい仕事は出来ませんし、更なるサービス改善や向上をしたりする時間が無いからです。

そのため、ルーチン作業は自動化・仕組み化して機械に任せ、その人にしか出来ないことに時間を費やすべき、というのが私の考えです。

2、フロー案の提案

早速、ざっくりとしたフローを提案した所、まるみさんとコミュニティマネージャーのさちさんに快く了解して頂きました。

上記のフローを二つに分解する

上記のままでは分かりにくいため、タスクを二つに分解してみます。

Googleフォームに送信されたら、

  • 参加希望者に自動返信メールが届く

  • Slackの任意チャンネルに通知が投稿される

3、自動返信メールについて

単に入会案内の手順を表示させるだけで良ければ、サンクスページ(送信後に表示されるWEBページ)を表示するという方法もあります。

*前提条件として、LPの実装はSTUDIOというノーコードサービスを使用し、フォームを埋め込む予定です。

フォームをGoogleフォームに拘るのであれば、基本機能でリダイレクトさせることは不可能なので、以下のような手法が考えられます。しかし、コードを編集出来ないSTUDIOでは実現不可です。

STUDIOオリジナルのフォームを使用すれば、送信後の移動先ページの設定は可能です(Googleフォームが使用出来なくなるため、フォーム作り直し・送信データの管理を考えると労力がかかりすぎる)

また、サンクスページのデメリットとしてページを閉じてしまうと参加方法がわからなくなるため、余計に問い合わせが発生する可能性があります。そのため、後から見返すことが出来る自動返信メールの設計を考えることにしました。

自動返信メールの実現方法

自動返信メールを実現する場合、主に以下の方法が考えられます。

  • アプリ連携サービスを使用・・・IFTTT、Zapierなどのアプリ同士を連携できるサービスを使用して自動化する。

  • GASでプログラムを作成・・・Googleが開発・提供しているプログラミング言語であるGoogle Apps Script(GAS)を使い、Google FormとGmailを連携させて自動化させる。

  • Googleアドオンを追加する・・・自動返信メール機能を追加できる拡張機能をインストールし自動化させる。

ここでどういう方法を選ぶかどうかは、目先の効果だけでなく更新・運用まで考えたバランスを考えることが大切です。
ITツールというのはあくまで業務負担を軽くしたいという目的のために使う道具です。そのため、道具を使うために更なる作業が増えてしまっては本末転倒です。

例えば、チームにコードに詳しい人が居て業務効率化のプログラムを作ってもらった。だけど、その後退職してしまい、トラブルが起きても誰もコードを触れず、お金を出して専門家の人に作業を依頼しなくてはいけなくなった。パソコンに詳しい人のExcelファイルが関数やマクロを駆使しすぎて誰も触れなくて困る、という意見を聞いたこともあります。

複数人で管理する場合、他にシンプルな方法があるのに、あえて高度な知識を必要とする固有の仕組みにして現場を混乱させることは望まれません。
(個人の趣味ならそれでも良いでしょう)

チームワークというものを前提に考えれば、技術的には可能だけど総合的に見てあえて選択しない、やらないという判断をすることが時には必要ではないかと思います。

今回はこの中で一番、導入・運用が簡単であり環境を変えることなく実現できるGoogleアドオン(Form Notifications)を追加することにしました。

また、世の中には便利なアプリケーションやサービスは溢れる程あります。しかし、新しいサービスを導入することは、新規登録のハードル(会社であれば関係各所の承認プロセスなど)や手間、操作方法の教育コスト、導入コスト、場合によってはPCや社内システムに影響を与えないかの検証もつきまとって来ます。そのため、先ずは出来るだけ現行のIT環境を変えずに実現できる方法は無いかを考えたい、というのが個人的な意見です。

具体的な作業は、アカウントの面からフォームの所有者であるまるみさんに作業してもらう必要があったため、notionで作業マニュアルを作成し対応して頂きました。

自動返信メールの設定方法

具体的な方法は、以下リンク先の2−1|自動返信メールフロー案 ver.2に記載してあります。

結果、Googleフォームから送信されると、自動で以下のようなメールを送信することが可能になりました。

4、入会申し込みの通知について

Googleフォームから送信があると、Gmail宛にメール内容が受信される仕組みにはなっています。ですが、それだと他のメールに埋もれてしまい、なかなかリアルタイムで気づくことが出来ません。

そのため、Slackのチャンネルに新規入会の通知が届く設定を考えました。

こちらはZapierを利用してGoogleフォームで送信ボタンが押されたらSlackのチャンネルに通知が来るように設定しました。

こちらは私のSlackのアカウントを使用し、ワークスペースの管理者の権限を頂き、作業代行しました。

Zapierについて

Zapierとは、2012年にアメリカで生まれたタスク自動化ツールです。異なるアプリやWebサービスを連携して、自分好みの業務自動化ツールを組むことができるサービスであり、アメリカ国内だけではなくさまざまな国で利用されています。

最大の特徴は複雑なプログラミングの必要がなく、誰でも簡単にアプリの連携システムを組める点です。ユーザー数は全世界で400万人以上とされており、リモートワークの普及により、さらなる増加が見込まれています。

https://www.sedesign.co.jp/blog/how-to-use-zapier

1、アカウント登録

Zapierにアクセスすると、以下の画面が表示されますので、Sign upして利用を開始します。

https://zapier.com/

2、自動化の作成

[Create Zap]というボタンをクリックする。

[✏️Name your zap]をクリックし、タイトルを入力する。

1.Trigger

基準となるアプリを選択します。
今回はGoogle formに入力されたらSlackに通知が来るようにしたいため、先ずGoogle formsを選択します。

Trigger Eventで[New Response in spreadsheet]を選択し、[Continue]をクリックする。

Google formsのアカウントを選択します。

Choose an accountをクリックすると以下の画面になります。
既にGoogleアカウントでサインアップしている場合は、ログインに使用しているアカウントが選択できるようになっています。
他のアカウントを指定したい場合は、[+Connect a new account]をクリックする。

Set up trigger
トリガーをセットアップします。

Google formはあくまで入力をするための画面で、入力結果はスプレッドシートに格納されています。ここでは、そのデータの保存先であるスプレッドシートを選択します。

基本的にはフォームとスプレッドシートは同じファイル名です。
また、ワークシートはフォームの回答1というシートのみで構成されているはずですが、複数ある場合は自動化に使用したいデータが保存されているワークシートを選択して下さい。

Test trigger
GoogleフォームアカウントのGoogleフォームの最近の回答を元に、トリガーが正しく設定されていることを確認します。

問題がなければ以下のメッセージが表示されますので、[Continue]をクリックします。

2.Action

次にどのアプリでどういうアクションをさせたいかを設定します。
具体的に、今回はGoogle formに新しい投稿があったら、Slackに投稿させたいので、Slackを選択します。

チャンネルにメッセージを送信させたいので、[Send Channel Message]を選択し、Continueをクリックします。

次にSlackのアカウントを選択します。
(ここではSlackのワークスペースの管理者であることが前提です)

今回はコミュニティのSlackに入会申し込み通知という非公開のチャンネル(まるみさん、さちさん、私のみ閲覧可能)を作成し、そこに投稿されるようにしています。

そのため、指定するチャンネルは[00-0 入会申し込み通知]を選択、投稿されるメッセージには最新のフォームの情報を挿入することが出来るため、お名前の情報のみスプレッドシートから引っ張ってきています。

当初は自己紹介のチャンネルに投稿させていましたが、お名前が人によっては本名と思われる方がいたため、一部の方に個人情報が勝手に転載されるのでは、という不安を感じさせてしまったため、即座に非公開チャンネルへ移動することにしました。

Test Action
設定に問題が無いか確認するため、動作確認を行い、問題なければ以下のような画面が表示されます。

Zapの有効化
最後にここまで作成したzapを有効化(enable)することを忘れないで下さい。ここまで頑張って作っても有効にしないと全く動きません。

5、最後に

あーでもないこーでもない、と思考をこねくり回した結果、何とか形になりホッとしました。

前職では十数年、ITサポートをしてきたのですが、もちろん「ありがとう」言って頂ける事の方が多いのですが、ここまで喜んで頂けるとやって良かったと思います。自分が勉強すればするほど誰かの役に立つことの幅が広がることが何よりやりがいだったように思います。

仕事でここまで感謝されることってないので、めちゃくちゃ嬉しかったです。

とはいえ、ここまではLP制作の下準備にしか過ぎません。
元々はLPのデザインを担当させて頂く過程で、デザインに入るまでの情報整理の一環として、うまく回るような仕組みで申し込みフローを固めておきたい、という思いがあったため提案させて頂きました!

現在は色々な方の協力の元、デザイン作業を進めています。
新年早々、子供の風邪でなかなか思うように進められず焦りを感じている日々ですが、どうにか皆さんの思い入れのある、このコミュニティをもっと多くの人に知ってもらえるようなデザインが出来たらと思っています。

これからもアップデートがあったらご報告したいと思います。
ここまで読んで頂きありがとうございました。

この記事を読んで、まるみデザインファームに入ってみたい!と思われた方は、以下の記事から入会申し込みをお願いします。


この記事が気に入ったらサポートをしてみませんか?