Typeform は、複雑な手順を踏むことなく、ユーザーがテンポ良く回答できるような使い勝手の良いフォーム作成サービスです。 本記事の執筆にあたり、実際にご紹介する手順で作成したフォームが こちら です。このようなフォームが数分で作れるようなサービスです。
※サービスに関して詳しく知りたい方は、先に こちらの記事 をご覧ください。

デザインが洗練されているため、フォームの作成側も、ユーザー側も迷わず直感的に利用することができます。 マーケティングや人事領域で利用できるようなテンプレートも約100個用意されているため、設問を自社に合った形に書き直すだけで、すぐに実践で使えるフォームが作成可能です。

フォームの共有も Webサイトに貼り付けるだけでなく、URL 形式の共有はもちろん、メールに貼り付けたり、チャットボット形式で利用することもできるサービスです。

Typeforme の Webサイト にアクセスします。画面右上①か、左下②の「Sign up」をクリックしてください。どちらでも構いません。アカウント作成画面に遷移します。

①に登録するメールアドレスとパスワードを入力してください。チェックボックスが2つありますが、上がサービスの利用規約、下がプライバシーポリシーの同意です。アカウントの作成にあたり、このチェックボックスへのチェックは必須ですが、「See options」をクリックすると表示されるメニューは「No」でも進行することができます。

①の項目の入力が完了したら、②の「Create my free account」ボタンをクリックしてください。入力したメールアドレス宛に、Typeforme から認証メールが送られます。

「Create my free account」ボタンをクリックした後の画面です。メールが届いていない場合、①を押して再送してください。迷惑メールに振り分けられている可能もあるので、注意してください。

Typeform から届くメールです。①の「Activate my account」をクリックしてください。クリックすると認証が完了して、アカウントのセットアップ画面が開きます。

開いたアカウントのセットアップ画面です。①の「Get set up」か、「Enter」ボタンをクリックしてください。以降の入力内容は、キャプチャーを割愛して、入力する内容のみを記載します。設問は全部で6個あります。

1→ What's your first name?
「名前」を入力してください。「橋架 太郎」という名前であれば、「太郎」です。漢字で入力しても構いません。入力すると、フォームの下に「OK」ボタンが表示されます。このボタンをクリックするか、「Enter」を押してください。以降も同じ手順です。

2→ And your last name?
「苗字」を入力してください。「橋架 太郎」という名前であれば「橋架」です。

3→ Hello, 「名前」 👋 What's the main thing you'll be using Typeform for?
Typeform の利用目的を選択してください。「A: 個人利用」「B: 学校」「C: 仕事」です。ここで選択した項目により、以降の選択肢が変わります。ここでは「C: 仕事」の選択を前提に進めます。

4→ Which of these best describes your role?Which of these best describes your role?
携わっている業務内容を選択してください。

なおこの選択肢以降は①の「Skip」で回答しなくても問題ありません。また、右下の②の部分でフォームの進行状況を確認できます。矢印をクリックすると、前の設問に戻ることもできるようになっています。

5→ What's the one main activity you want to do with Typeform?What's the one main activity you want to do with Typeform?
利用の目的を選択してください。

6→ And how did you first discover Typeform? And how did you first discover Typeform?
これが最後の設問です。どのようにして Typeform にたどり着いたかを選択します。Hashikake の記事からの場合、「A」をクリックしてください。

この画面に切り替わったら完了です。①の「Let’s do this」をクリックしてください。

クリック後の画面です。設問の「5」で選択した内容によって、レコメンドされるテンプレートが異なります。

Typeform のワークスペースです。①の「New typeform」をクリックすると、上のテンプレート一覧に切り替わります。

ワークスペースは、制作したフォームを管理する場所です。②の「+」をクリックすると、管理用のフォルダを作ることができます。クリックするとフォルダ名の入力画面が表示されるので、フォルダ名を入力してください。日本語で問題ありません。作成できると、③のように作成したフォルダが表示されます。

④は複数人で共同作業をするための招待ボタンです。共同作業は有料プランで利用できる機能です。

テンプレートは用意されていますが、今回は 0 から作成します。テンプレートを利用しない場合は、①の「Start from scratch」をクリックしてください。フォームの概要入力画面に進みます。

①にフォーム名を入力してください。②と③は目的です。②で選んだ選択肢に応じて、③の内容が決まります。入力したら、④をクリックしてください。

①の「Add your first question」をクリックしてください。挿入できるフォームの一覧が表示されます。

ここで表示されるメニューと組み合わせて、フォームを作成していきます。最初は「Welcome Screen」を選択するのが良いでしょう。フォームの目的や内容を表示させます。

これが編集画面です。①をクリックすると、②の編集項目が開きます。ここは後ほど説明します。③がプレビュー画面です。設定した内容は、リアルタイムでここに反映されるので、イメージを即座に確認することができます。④はベースとなるテキスト入力部分です。

①「Description」は必須ではありません。メインの文章を補足する文言を追加することができます。②は画像・動画の追加です。どちらかを選択することができます。動画の場合は、YouTube か Vimeo のリンクを追加することで、挿入ができます。③はボタンの文言です。

「Welcome Screen」の準備ができたら、設問を進める前に先に細かな設定をしておきます。①の歯車ボタンをクリックしてください。②の「GENERAL」が選択された状態で表示されます。③の「Language」から「Japanese」を選択してください。これにより、設問に自動的に挿入される文言が日本語に変わります。②で「MESSAGES」をクリックすると、文言を確認・修正できます。④はフォームの右下に表示される、回答者が確認する設問の進行状況の表示方法です。全体の設問数からの回答数で、「%」か「回答数/設問数」の表示を選択できます。

⑤と⑥は有料プランで利用できる機能です。⑤は「Typeform」というブランドの表示を消すことができます。⑥は回答者が全ての設問終了後に、自動的に切り替えるページの移動先を指定できます。

次に、背景やテキストカラーの設定を行います。①の「DESIGN」をクリックしてください。メニュー一番左「PUBLIC THEMES」で用意されているテンプレートを選べますが、今回は②「MY THEMES」でオリジナルのテンプレートを作成して進めます。②をクリックした後、③の「New theme」をクリックしてください。「CUSTOMIZE」に切り替わります。

①はテンプレート名を入力してください。②はフォントです。③でテキストやボタン、背景のカラーを選びます。④で背景画像を選択します。キャプチャーは背景画像を追加した後ですが、追加前は「Add」という表記になっています。クリックすると「IMAGE」と「UPLOAD」を選べます。「IMAGE」は Typeform が提携する外部のフリー素材サイト「Unsplash」の画像が選べます。「UPLOAD」でオリジナルの画像をアップロードできます。

画像が決まったら、④内にある「Layout」と「Brightness」で画像の大きさや明るさを調整してください。一旦の調整が終われば、⑤で保存してください。⑥の「Preview」をクリックすると、全画面で確認することができます。

ここからは、各設問を用意していきます。 ①で質問タイプを選んで、設問を追加していきます。

無料プランでは分岐を伴う設問が作れなかったり、設問数の上限が10までなどの制限があります。この記事では、無料プランでできる範囲の機能をご紹介します。

なお、利用できない設問を選択した場合、画面右上に①の警告が表示されます。

Typeform では以下の項目が、選択肢として設定できるようになっています。更に有料プランでは、回答の内容に応じて次の設問が切り替わる機能も備わっています。項目の前に「※」がついている設問は、無料プランでは利用できない設問です。

①は各設問の設定画面です。編集する場合は、設問の②か③をクリックしてください。

設問の順序を変えたい場合、①の領域からドラッグ&ドロップで移動させることができます。上下左右向きの黒の矢印が表示されるので、それが目印です。

デフォルトでは回答は必須になっていません。回答が必要な場合は、①の「Required」をチェックしてください。チェックがつくと、各設問の横に赤の米印がつきます。

Typeform には、前の回答を以降の設問に表示させることができます。例えば、氏名などです。①の「Recall information」をクリックすると、②のように以前の設問が表示されます。この場合ですと、③の「氏名」と「会社名」です。②で選択した項目が、④のように表示されます。実際の設問には⑤のように表示されます。これはプレビューのため空欄になっていますが、②で「氏名」を選択していた場合で、回答が「橋架 太郎」を入力されていると、⑤には「橋架 太郎」が入力された状態で設問が表示されます。

まだ設定できる箇所はありますが、だいたいの設定箇所は以上です。公開の準備ができれば、最後に右上の①「Publish」をクリックしてください。この部分がキャプチャーの用に黒いままだと、非公開状態になっており自分以外はフォームが見れない状態です。

無料プランの場合、有料プランでしか利用できない設問が含まれている場合、以下の画面が表示されて公開することができません。テンプレートから作成した場合、デフォルトで含まれていることがありますので注意してください。

次は制作したフォームの公開に進みます。

フォームを公開するには、上部のメニューから「SHARE」を選んでください。フォームの公開方法を4つあります。 一つ目が②のURL共有。コピーボタンでワンクリックでURLをコピーして任意の場所に貼り付けて共有することもできますし、下のアイコンから共有先を指定することもできます。 ③はWebサイトに貼り付け用コードの取得。④がチャットボット形式の公開。⑤はeメールへ貼り付け用のコードの取得です。この記事では、これらの公開方法については割愛します。

Twitter や Facebook などのソーシャルメディアに共有した際の表示方法を編集します。画像のサイズがあっていませんが、Twitter に共有した場合の表示イメージです。

①をクリックすると編集画面が立ち上がります。

①が検索エンジンの表示対象にするかどうかの設定です。特に必要なければ、デフォルトのOFFにしておきましょう。②が画像。③が表示テキストです。設定できたら、④で反映させましょう。

ここまで済めば、あとはURLを共有するだけです。最後に、そのURLをカスタマイズする方法をご紹介します。

画面右上の①のボタンをクリックしてください。登録した氏名のイニシャルが表示されたボタンです。クリックするとそのままメニューが開きますので、②「Settings」をクリックしてください。設定画面に切り替わります。

画面が切り替わると①「Overview」が選択された状態になっています。②の「Edit URL」をクリックしてください。編集画面が立ち上がるので、フォームに半角英字を入力してください。完了したら「Confirm」をクリックして設定完了です。仮に既に利用されている場合は、赤字でエラーが表示されます。その際は別の文字列を再入力してください。

Typeform は日本語に対応していないため、英語に苦手意識のある人にとってはとっつきにくいサービスかもしれません。しかし、Web サイトへ貼り付けるなくても気軽に使える、使い勝手の良いサービスです。無料プランでは回答数に制限はありますが、是非既存のフォームと比較して、どちらの方が回答率が高いかなどの比較をしてみてください。