Googleフォームの魅力は、Googleアカウントさえあれば誰でも無料で利用できることです。
誰でも簡単に利用できるようシンプルなデザインが採用されている反面、「デザインが似たり寄ったりで稚拙に感じる」という悩みを抱えていませんか。
本記事ではGoogleフォームのデザインをカスタマイズする3つの方法と、効果を高めるコツについて解説します。
▼ フォーム作成ツールformrunなら120種類のテンプレートを用意！見栄えの良いフォームが簡単に作成できます。
目次
Googleフォームのデザインをカスタマイズする3つの方法
Googleフォームのデザインをカスタマイズする方法には、以下3つが挙げられます。
- 管理画面上から編集する
- アドオン機能を活用する
- HTMLやCSSで編集する
管理画面上からの編集とアドオン機能の活用は、専門知識がなくても簡単にデザインをカスタマイズできるため、初心者の方にもおすすめです。
一方でHTMLやCSSなどのプログラミング言語を使ったカスタマイズ方法は、デザインの自由度が高い反面、専門知識を必要とします。
「時間や手間をかけてでも理想のデザインを反映させたい」といった方向きです。
Googleフォームのデザインをカスタマイズする方法9選
Googleフォームのデザインを管理画面上からカスタマイズする方法には、以下の9つがあります。
- ヘッダー画像を追加・変更する
- テーマの色や背景色を変更する
- フォントを変更する
- 質問と回答に画像や動画を追加・変更する
- 進行状況を表示する
- 回答に応じて条件分岐させる
- Googleフォームを自社サイトに埋め込む
- 回答をGoogleスプレッドシートに集計する
- 回答があった際にメールで通知を受け取る
1つずつカスタマイズの手順を解説します。
ヘッダー画像を追加・変更する
右上のパレットアイコンをクリックします。画面右側に【テーマ】の編集画面が表示されるので、【ヘッダー】の【画像を選択】をクリックしましょう。
【ヘッダーの選択】という画面が現れたら、Googleから提供されているテーマから好きなデザインを選んだり、使用デバイスに保存している写真や画像をアップロードするなどして、ヘッダー画像を追加・変更可能です。
ヘッダーのサイズ等について詳しく知りたい方はこちらの記事をご覧ください。
>> Googleフォームのヘッダーサイズは？画像などデザインをカスタマイズする3つの方法
テーマの色や背景色を変更する
右上のパレットアイコンをクリックすると画面右側に表示される【テーマ】の編集画面から色や背景を変更できます。
【色】【背景】のそれぞれの項目から、フォームに採用したい色を選択しましょう。
表示されていない色を設定したい場合は、【＋】をクリックするとカスタム色を追加できます。
ただし、背景色は【色】で選択した色にあわせて4色表示されるため、そのなかから選択しなければなりません。
フォントを変更する
画面右上にあるパレットアイコンをクリックします。【テーマ】編集画面の【テキスト スタイル】という項目から、「ヘッダー」「質問」「テキスト」それぞれのフォントやサイズを変更しましょう。
質問と回答に画像や動画を追加・変更する
質問や回答の右横にある写真のアイコンをクリックすると、【画像を挿入】という編集画面が現れます。
回答箇所の写真のアイコンは、回答箇所にカーソルを合わせると出現します。
そこから、質問や回答箇所に追加したい画像をアップロードしましょう。
また、動画はメニューバーの【動画を追加】をクリックから追加します。【動画を選択】という画面が表示されるため、検索窓から挿入したい動画を探しましょう。
Googleフォームに挿入できる動画は、YouTube動画のみです。
進行状況を表示する
ユーザーが回答する際に、あとどの程度で回答が完了するかという進行状況の確認ができるバーを表示できます。
画面上部中央にある【設定】、【プレゼンテーション】の順にクリックしてください。
【進行状況バーを表示】という項目をオンにすると、フォームに回答の進行状況が表示されます。
回答に応じて条件分岐させる
ユーザーの回答内容に応じて、異なる質問に誘導したい際は「条件分岐」を活用しましょう。
「条件分岐」を設定したい場合は、回答方法は「ラジオボタン」もしくは「プルダウン」に設定します。
質問と回答の内容をそれぞれ入力し終えたら、メニューバーから【セクションの追加】をクリックします。セクションが追加されたら、条件分岐後の質問や回答内容を設定しましょう。
質問はメニューバーの【＋】から追加できます。
そして、最初のセクションに戻り、右下の「︙」をクリックしてください。
【回答に応じてセクションに移動】をクリックすると、回答の右横にプルダウンが表示されます。
回答内容に応じて誘導したいセクションをプルダウンから選択すると、条件分岐の設定は完了です。
Googleフォームを自社サイトに埋め込む
作成したGoogleフォームは、自社サイトへ埋め込み可能です。
画面右上にある【送信】をクリックします。
【フォームを送信】の画面から【＜＞】をクリックすると、埋め込み用のコードが表示されます。
右下の【コピー】をクリックしてください。コピーしたコードを自社サイトのHTML内に貼り付けるだけで、自社サイトへの埋め込みが完了します。
また、自社サイトで表示するGoogleフォームのサイズを変更したい場合は、コードをコピーする際に表示される「ピクセル変更」で最適なサイズに変更しましょう。
回答をGoogleスプレッドシートに集計する
Googleフォームでの回答をGoogleスプレッドシートに自動で集計することも可能です。
画面上部中央の【回答】、【スプレッドシートにリンク】の順にクリックします。
【回答の送信先を選択】の画面から、連携するスプレッドシートを選択します。
回答を新しいスプレッドシートに集計する場合は【新しいスプレッドシートを作成】を、既存のスプレッドシートに集計する場合は【既存のスプレッドシートを選択】を選択してください。
回答があった際にメールで通知を受け取る
ユーザーから回答を得た際に、メール通知を受け取るように設定できます。
画面上部中央の【回答】をクリックし、【︙】をクリックします。
そのなかにある【新しい回答についてのメール通知を受け取る】にチェックをつけましょう。
そうすると、紐づいているGoogleアカウントのメールアドレスに通知が送られてきます。
▼formrunならメールの他にもChatWorkやSlackとも連携可能！GoogleスプレッドシートやSalesforceとも連携できるためデータの分析にも便利です。
Googleフォームをアドオン機能でカスタマイズする方法5選
アドオン機能とは、Googleフォームに自由に追加できる拡張機能です。アドオン機能を活用することで、管理画面上からは編集できないような機能・デザインをGoogleフォームに反映させられます。
アドオン機能の追加は、まず編集画面右上にある「︙」をクリックしてください。次に【アドオンを取得】を選択すると、追加できるさまざまなアドオンが表示されます。その中から追加したいアドオンをインストールしましょう。
ただし、アドオンの種類によっては有料のものがあります。インストールする際は必ず確認することが大切です。
以下でおすすめのアドオンを5つ紹介します。
制限に達した選択肢を削除「フォームチョイスリミッター」
フォームチョイスリミッターは、回答に制限を設け、制限に達した選択肢のみを自動で削除するアドオンです。Googleフォーム上でも回答に制限を設けることは可能ですが、制限に達すると質問自体が削除されてしまいます。
フォームチョイスリミッターを活用すると、一部の回答が制限に達しても質問自体は削除されません。制限に達した選択肢のみを削除してくれます。
例えば、申込プランで「プランA」は限定10人、「プランB」と「プランC」はそれぞれ50人ずつ制限を設けるとします。フォームチョイスリミッターを活用すると、プランAが制限に達した場合、「プランB」と「プランC」のみ選択可能です。
そのため、一部の回答が制限に達しても新たにフォームを作成する必要がありません。
Googleスプレッドシートのデータを自動取得「Form Ranger」
Form Rangerは、Googleスプレッドシートのデータを自動で取得できるアドオンです。選択肢が多い場合、フォームにすべての項目を入力する手間が省けるため、効率的なフォーム作成が実現します。
例えば、スプレッドシートに自社の商品データが一覧で記載されているとします。この場合、Form Rangerでデータを自動取得し、手入力せずとも回答の選択肢にすべての商品データを反映させることが可能です。
スプレッドシートの内容が変更されると、フォームの選択肢も自動で更新されるため、選択肢が頻繁に変動するケースなどにおすすめです。
カウントダウンタイマーを設置「Timer for Google Forms」
Timer for Google Formsは、Googleフォームの回答中にカウントダウンタイマーを設置できるアドオンです。Webテスト用のフォームなどに活用できます。
有料プランに加入すると、フォーム入力中のユーザーをWebカメラで監視・観察できるため、不正防止にも役立ちます。
フォームをWebサイトのデザインに合わせて埋め込む「Formfacade」
Formfacadeは、自社サイトのデザインにあわせてGoogleフォームを埋め込めるアドオンです。Formfacadeを活用することで、フォームを埋め込むWebサイトのデザインにあわせて、フォームのデザインを変換してくれます。
HTMLやCSSなどのプログラミング言語でカスタマイズする必要もありません。
「Googleフォームがシンプルすぎて自社サイトとはデザインが合わない」といった方におすすめです。
回答者にメールの自動返信を行う「Form Notification」
Form Notificationは、回答が完了したユーザーにメールで自動返信ができるアドオンです。
回答者は、フォームの送信が問題なく行われたか不安に感じます。受付・申込・応募などの完了を知らせるメールを回答完了直後に送信できれば、ユーザーは回答が完了したことを把握でき、安心につながります。
手動でメールを送信する場合、手間がかかるうえ、抜け漏れが発生しかねません。効率的かつ返信メールの抜け漏れを防ぐためにも、Form Notificationの活用がおすすめです。
GoogleフォームをHTMLやCSSでカスタマイズする方法
HTMLやCSSを使ってデザインする場合でも、まずはGoogleフォームを作成しましょう。次に、Googleフォームで作成した質問・回答と同じ内容で、HTMLを使ってフォームを作成します。
そして、GoogleフォームとHTMLで作成したフォームを紐づけていきます。Googleフォームを【プレビュー】で開き、必要なソースコードをHTMLに反映させましょう。
2つのフォームを紐づけたら、最終的なデザイン、「テキストカラー」「テキストサイズ」「背景」「配置」などをCSSで調整します。最後に動作確認を行い、正常に動作すればHTMLやCSSを使ったフォームの完成です。
効果的なGoogleフォームのデザインを作る3つのコツ
効果的なGoogleフォームのデザインを作る3つのコツは次の通りです。
- Webサイトとフォームのデザインを合わせる
- EFOを行う
- スパム対策を行う
以下より1つずつ解説します。
Webサイトとフォームのデザインを合わせる
Googleフォームのデザインは、フォームを掲載するWebサイトのデザインと雰囲気や色を合わせることが大切です。
Webサイトとまったく異なるデザインのフォームにしてしまうと、ユーザーは別のサイトのフォームに誘導されたのではないかと不信感を抱きかねません。回答率が下がったり、Webサイトそのものへの信用を失う原因になってしまいます。
Webサイトのメインカラーが青であれば、Googleフォームのテーマカラーも青にするなど、デザインに統一感を持たせることが重要です。
EFOを行う
EFOとは、入力フォーム最適化のことで、回答率の向上を目的として行う施策を指します。施策の具体的な内容としては以下が挙げられます。
- 入力フォームを最適な大きさで表示させる
- 入力項目を最小限に抑える
- ページ数を少なくする
- リンクやバナーを表示させない
- エラーをリアルタイムで指摘する
上記のように、ユーザーがフォーム入力にストレスを感じないよう、EFO施策を実施することが大切です。
▼formrunなら40種類のテンプレートから自社サイトにあわせたフォームが作成できます！離脱率の軽減に役立つEFO機能も豊富に搭載！
スパム対策を行う
Googleフォームは手軽に誰でも作成できるため、スパム回答が届くことがあります。そのため、Googleフォームの作成と同時にスパム対策の実施が大切です。
Googleフォームで簡易的に行えるスパム対策としては、reCAPTCHA画像の活用があります。reCAPTCHA画像とは、botによる不正アクセスを防ぐためのものです。
Googleフォームの質問のひとつに、自作のreCAPTCHA画像を追加します。正しい回答が得られなければ回答の送信ができない仕組みを構築すれば、スパム回答を減らせます。
ただし、この方法はGoogleから推奨されている方法ではありません。スパム回答をゼロにできる保証がない点には注意しましょう。
フォームを手軽にカスタマイズするなら「formrun」
効率的にデザイン性のあるフォームを作成したい場合は、「formrun」の活用がおすすめです。
formrunは40種類以上ものテンプレートから最適なものを選択し、テキストを入力するだけでフォームを作成できます。わずか30秒でフォームが完成し、プログラミング言語などの専門知識は必要ありません。
途中でデザインを変更したい場合でも、クリックなどの簡単な操作で手軽に行えます。
FREEプランであれば、無料かつ期限なしで利用可能です。
効果的なフォーム作成にツールの導入を検討している方は、まずはformrunのFREEプランでフォームを作成してみてください。
Googleフォームを効果的なデザインにカスタマイズしよう
Googleフォームのカスタマイズ方法には、以下3つの方法が挙げられます。
- 管理画面上からカスタマイズ
- アドオン機能を活用してカスタマイズ
- HTMLやCSSでカスタマイズ
管理画面上からのカスタマイズやアドオン機能を活用したカスタマイズであれば、専門知識が必要ないため、初心者の方でも簡単にデザインを変更できます。
テーマの色やテキスト、条件分岐など、さまざまなカスタマイズが可能です。
自社サイトに最適なデザインにカスタマイズし、回答者がフォームを最後まで入力してくれるような効果的なフォームを作成しましょう。
formrunやフォーム作成や顧客管理に関する情報を発信しております。
EFO（エントリーフォーム最適化）や問い合わせ対応など、
フォームに関するお悩みを解決します。
