コーディング不要！Googleフォームのデザインをカスタマイズする方法

Googleフォームは無料で簡単にフォームを作成できることから、企業のアンケートや問い合わせフォームなどに多く使用されています。

しかし、シンプルさが特徴のツールであるため、デザイン性や機能面に物足りなさを感じていませんか？企業の窓口として使用するフォームだからこそ、自社のイメージに合わせてカスタマイズが必要です。

Googleフォームは、コーディングの知識がなくても、一部デザインのカスタマイズや機能の追加ができます。
本記事では、コーディングの知識がなくてもできる、Googleフォームのカスタマイズ方法を解説します。

▶︎自社のデザインに合わせて自由にカスタマイズしたいなら「formrun」がおすすめ！

• Googleフォームのカスタマイズは自由度が低い
• 高度にカスタマイズしようとすると逆に時間や労力がかかる
• 自社のデザインに合ったフォームを作成したい

このように「Googleフォームのカスタマイズ機能では足りない」と感じたら、「formrun（フォームラン）」をお試しください。
条件分岐、顧客管理、メール自動返信など、フォーム運用に必要な機能がワンストップで利用できます。

formrunとGoogleフォームの違いを比較したい方はこちら
>> formrunとGoogleフォームの違いは？

▼ 合わせて読みたい記事
【2024年完全版】Googleフォームの使い方を徹底解説｜作り方から作成例まで詳しく紹介

Googleフォームをカスタマイズする方法①プログラミングなし

プログラミングの知識がなくても、Googleフォームの管理画面からデザインの変更や機能の追加ができます。

たとえばフォーム全体のカラーやフォントなどの変更が可能で、「メールの自動返信」「Googleスプレッドシートとの連携」といった機能の追加も可能です。クリック操作やコピー&ペーストの操作だけで完結するため、簡単にカスタマイズできるのがメリットです。

専門的な知識は不要ですが、カスタマイズできる範囲は限られてしまいますので「とにかく手軽にカスタマイズしたい」という方におすすめできます。

以下より、具体的な方法をご紹介します。

1.フォントの変更

Googleフォームの管理画面から、フォーム全体のフォントを変更できます。

フォントを変更するためには、まずGoogleフォーム作成画面の右上にある、パレットのようなアイコン（テーマをカスタマイズ）をクリックしてください。

テーマオプションが開きますので、画面右下に表示されている「フォントスタイル」のプルダウンから任意のフォントを選択すれば、フォントの変更は完了です。

掲載サイト全体の統一感を出すために、企業やサイトのイメージに合ったフォントを選びましょう。

2.文字の装飾

Googleフォームでは、タイトルや説明文の文字を装飾できます。装飾の種類は下記の通りです。

• 太字
• 斜体
• 下線
• リンク挿入
• 番号付きリスト
• 箇条書き
• 書式のクリア

文字を太字や斜体にしたり、下線を引くことで文章を読みやすくします。さらに重要な部分を強調することで、注意を促す効果があります。

箇条書きや番号付きリストは、操作手順や応募の注意点など、フォーム入力の際に留意してほしいポイントを簡潔に伝える際に便利です。

リンク挿入の機能は、フォームのタイトルや説明文では伝えきれないより詳細な内容を伝えたい場合に役立ちます。例えば、会議や企画、イベントの詳細ページにアクセスできるようリンクを設定しておくと、入力者は、必要な情報を収集するために自分で検索する必要がありません。

ただし、文字の装飾は使いすぎてしまうと、逆に読みにくくなってしまう場合があります。入力者目線で読みやすいかどうかを考えながら設定しましょう。

文字装飾は組み合わせて使用できますが、フォームと質問のタイトルでは、箇条書きと番号付きリストは使用できません。

3.テーマ画像の変更

Googleフォームのテーマ画像変更する際も、画面右上にあるパレットのようなアイコンをクリックしてテーマオプションを開きます。

次にヘッダーの「画像を選択」をクリックし、「ヘッダーの選択」画面を表示します。

Googleフォーム側であらかじめ用意されているテーマ画像か、自分でアップロードした画像を選択し「挿入」もしくは「完了」をクリックしてください。これで選択したテーマ画像が、Googleフォーム全ページのトップに表示されます。

ヘッダーの設定について詳しく知りたい方はこちらの記事をご覧ください。
>> Googleフォームのヘッダーサイズは？画像などデザインをカスタマイズする3つの方法

4.Googleフォーム全体のカラー変更

Googleフォーム全体のカラーを変更する際も、パレットのようなアイコンをクリックしてテーマオプションを開きます。

「テーマの色」から任意のカラーを選択すると、フォームの背景や各セクションに色が反映されます。

あらかじめ用意されているカラー以外にも、「テーマの色」に表示されている「+」ボタンをクリックすることで、自分でカスタムしたカラーに変更することが可能です。

さらにGoogleフォームをカスタマイズしたい方はこちらの記事をご覧ください。
>> Googleフォームのデザインをカスタマイズする方法3選！効果を高めるコツ

5.質問・回答への画像挿入（動画の挿入も可能）

Googleフォームでは、質問や回答に画像を挿入することも可能です。

質問に画像を挿入するには、質問の右に表示されている「画像を追加」アイコンを選択してください。「画像の挿入」画面が開きますので、画像をアップロードするか、自分のGoogleドライブに保存されている画像を選択して「挿入」をクリックます。

これで質問の下に、選択した画像が挿入されます。

また、回答へ画像を挿入する際も同じように「画像を追加」アイコンをクリックして、差し込みたい画像を選択してください。

さらにGoogleフォーム内に動画を挿入したい場合は、セクションの右に表示されている、アイコンが縦並びになっているタスクバーから「動画を追加」を選択します。「動画を選択」画面が開きますので、挿入したい動画を選び「選択」をクリックしてください。

6.フォームの進捗状況表示

入力項目が多く、長めのフォームを作成しているなら、以下画像のような進捗状況を表示するバーを設置するとユーザーに親切です。

進捗状況を表示するには、まずフォーム作成画面の右上にある歯車のアイコンをクリックし、設定画面を開いてください。

次に「プレゼンテーション」タブを選択し「進行状況バーを表示」にチェックを入れます。画面右下の「保存」をクリックすると、Googleフォームの下部に進捗状況のバーが表示されるようになります。

7.質問内容の条件分岐

Googleフォームでは、質問の回答内容に応じて別の質問に自動で誘導できる「条件分岐」が可能です。

条件分岐を設定するためには、まず「ラジオボタン」または「プルダウン」で質問を作成します。

プルダウンについて更に詳しく知りたい方はこちらの記事をご覧ください。
>> Googleフォームでのプルダウンの使い方を分かりやすく解説！スプレッドシートへ集計する方法も紹介

次に質問の右に表示されている、アイコンが縦並びになっているメニューバーから「セクションを追加」を選択します。セクションが新しく追加されますので、タイトルや質問内容を編集しましょう。

セクションについて更に詳しく知りたい方はこちらの記事をご覧ください。
>> G oogle formのセクションの作り方とは？ 回答ごとに質問を分岐させる方法も解説

新しいセクションを編集したら最初に作成したセクションに戻り、右下の点が縦に3つ並んでいるボタンをクリックし、「回答に応じてセクションに移動」を選択します。

それぞれの質問にプルダウンが表示されますので、誘導したいセクションを選択してください。これで条件分岐の設定が完了し、ユーザーの回答内容に応じて次の質問が表示されるようになります。

更に詳しく条件分岐について知りたい方はこちらの記事をご覧ください。
>> Googleフォームで条件分岐を設定する手順を解説｜活用するメリットも紹介

8.メールの自動返信

Googleフォームでは、回答者に対して自動でメールを送る「自動返信メール」を設定することもできます。しかし、標準では自動返信メールの機能が実装されていないため、アプリに機能を追加するプログラムである「アドオン」を使用する必要があります。

以下記事にて「アドオン」を使った自動返信メールの設定方法を解説しますので、ぜひ参考にしてください。
>> 【画像で解説】Googleフォームの自動返信メールを設定する方法

今すぐformrunでフォームを作成したい方はこちら！ Googleアカウントがある方はワンクリックで登録可能です。
 >> 無料でフォームを作成する

9.Googleスプレッドシートとの連携

GoogleフォームとGoogleスプレッドシートを連携することで、回答内容の情報をスプレッドシートに集計することができます。回答があった日時や、質問に対する回答内容が一覧で確認できるため、問い合わせ管理や顧客管理を行う際に役立つでしょう。

Googleスプレッドシートと連携するためには、まず「回答」タブをクリックします。次に緑色のGoogleスプレッドシートアイコンをクリックし、「新規」と「既存」2つの中から、連携したいスプレッドシートを選択してください。

以上で、Googleフォームでの回答内容がスプレッドシートに連携されるようになります。

更に詳しくスプレッドシートとの連携方法について知りたい方はこちらをご覧ください。
>> Googleフォームをスプレッドシートに連携する方法とは？画像17枚でわかりやすく解説

10.Googleフォームに回答があった際のメール通知

Googleフォームに回答があった際に、フォーム作成者はメール通知を受け取ることができます。メール通知を設定することで顧客からのアクションに素早く気づけるため、対応スピードの向上や、クレーム対応のクオリティアップができるでしょう。

フォーム作成者にメール通知が届くよう設定するには、「回答」タブを選択します。次にGoogleスプレッドシートアイコンの右にある、点が縦に3つ並んでいるボタンをクリックしてください。

表示されたメニューの中から「新しい回答についてのメール通知を受け取る」を選択すれば、フォーム作成者のアカウントに、通知メールが届くようになります。

また以下の記事では、作成者以外のフォーム運用メンバーにもメール通知を設定する方法を解説していますので、ぜひ参考にしてください。
>> 【全解説】Googleフォームの回答をメール通知する方法

11. GoogleフォームをHTMLで自社サイトに埋め込む

プログラミングの知識がなくても、クリックとコピー&ペーストの操作だけで、作成したGoogleフォームを自社サイトに埋め込むことが可能です。

Googleフォームを埋め込むには、画面右上に表示されている「送信」ボタンをクリックしてください。

「フォームを送信」画面が表示されたら、「< >」のタブを選択し、右下の「コピー」をクリックします。これでフォームを埋め込むためのコードがコピーされますので、自社サイトのHTMLファイル内に貼り付けてください。

補足として、「フォームを送信」画面にて「幅」や「高さ」を調整することで、表示されるGoogleフォームの大きさを変更できます。

Googleフォームの埋め込み方法について更に詳しく知りたい方はこちらの記事をご覧ください。
>> Googleフォームの埋め込み方法2つ！サンプルも紹介

Googleフォームをカスタマイズする方法②アドオンを活用する

Googleフォームはアドオンを活用して、カスタマイズできます。アドオンとは、Googleフォームの機能を拡張できるプラグインです。

アドオンを活用すれば管理画面上でではできないカスタマイズができるようになります。専門知識が不要なため、初心者にもおすすめの方法です。

ただし、アドオンをインストールしすぎると、ブラウザの動作が遅くなったり、管理が大変になってしまうため注意が必要です。アドオンをインストールする際には、本当に必要か、セキュリティ面でも安全なアドオンかをしっかり調査した上で導入を決定しましょう。

アドオンの導入方法

アドオンを導入するには、まず、Googleフォームの「︙」をクリックします。メニューが表示されるので、「アドオンを取得」を選択しましょう。

さまざまなアドオンが表示されます。導入したいアドオンを選んでインストールしてください。追加したいアドオンが決まっているならば、検索枠にアドオン名を入力すると便利です。

アドオンの中には有料のものもあるため注意しましょう。

Googleフォームにおすすめのアドオン

Googleフォームに活用できるアドオンを3つ紹介します。

Googleフォームをサイトに埋め込む「Formfacade」

Formfacadeは、Googleフォームをサイトに埋め込むためのアドオンです。埋め込みたいサイトのデザインに合うようフォームを調整して埋め込みます。

デザインの編集にはHTMLやCSSの専門知識が必要ですが、Formfacadeを活用すれば、知識がなくても問題ありません。設置用のコードを取得してサイトに設置するだけです。

Googleフォームはシンプルなデザインが特徴で、すぐにGoogleフォームだとわかってしまう点がデメリットとして挙げられます。企業でGoogleフォームを活用したい、専門知識はないが、自社サイトのデザイン性を崩さずにフォームを設置したい方におすすめです。

Formfacadeは毎月100件の回答までは無料で使用できます。回答数が多いフォームを設置したい場合は、毎月1000件の回答で8ドルから使用可能です。

入力が完了したユーザーに自動でメッセージを送信「Form Notification」

Form Notificationは、フォームへの入力が完了したユーザーに自動でメッセージを送信できるアドオンです。送信するタイトルや文章を自由に設定できます。

また、Form NotificationはGoogle公式のアドオンで安心して使用できる点も魅力的なポイントです。

フォームの入力者は、入力した情報が正しく送信されたか、何も反応がないと不安に感じてしまいます。そのため、フォーム入力完了直後に、フォームが正しく送られたことを伝えるメッセージの送信が重要なのです。ユーザーに安心感を与え、顧客満足度の向上につながります。

入力が正しく送信されたことを伝えるメッセージを個別で対応していては時間がかかります。Form Notificationを活用し、業務の効率化をはかりましょう。

フォームへの入力を自動で停止できる「form Limiter」

form Limiterは、回答数や日時など、設定した条件に達した際にフォームへの入力を自動で停止できるアドオンです。

期間限定の応募フォームや、回答人数に制限のあるアンケートフォーム、先着順のイベント申し込みフォームを作成したい場合に役立ちます。

制限に達した際に表示するメッセージは、フォームの内容に合わせて自由にカスタマイズ可能です。

「form Limiter」を使用せずに回答制限や、公開期間制限などをかけたい方は以下の記事をご覧ください。
>> Googleフォームで人数制限を設定する方法を徹底解説｜質問ごとに定員上限を設定する手順もご紹介
>> Googleフォームの回答期限の設定方法とは？初心者でも簡単にできる作り方を徹底解説

Googleフォームをカスタマイズする方法③HTMLやCSSを編集する

HTMLやCSSといったプログラム言語を利用することで、フォーム全体のデザインや問い合わせ完了ページの変更など、管理画面上からのカスタマイズよりも細かい変更が可能です。

ただし、プログラム言語に慣れていないと難易度が高いため、「パソコンが苦手」「プログラミングの知識がない」という方にはおすすめできません。

HTML/CSSを編集する際は、具体的に以下のような作業を行います。

• HTML/CSSを使って独自のフォームを作成する
• Googleフォームを作成する
• 作成したGoogleフォームのHTMLソースをもとに、自作したフォームのHTMLを編集する
• 正しく動作するかをテストする

専門知識が必要なため難易度は高いものの、外注するためのコストがかからない点がメリットです。

Googleフォームをカスタマイズする方法④プログラミングの知識がある人に依頼する

Googleフォームを理想のデザインにカスタマイズしたいと考えつつも「プログラミングの知識がない」という場合は、知識がある人に依頼するのも一つの手段です。

クラウドソーシングやココナラなどのサービスを通じて依頼すれば、自分でプログラミングを行う必要がありません。カスタマイズする範囲にもよりますが、クラウドソーシングで依頼する場合の費用目安は5,000円ほどです。

外注するためには費用がかかるため、予算に余裕がある場合におすすめできる方法です。

無料でformrunでデザイン性の高いフォームを作成したい方はこちら！ Googleアカウントがある方はワンクリックで登録可能です。
 >> 無料でフォームを作成する

Googleフォームをカスタマイズするときの注意点

自分でGoogleフォームをカスタマイズすることは可能ですが、ユーザーの離脱を防ぎつつ回答率を上げるためには、いくつか注意すべき点があります。

Googleフォームをカスタマイズする際は、以下の3点に注意してください。

入力項目は少なくする

Googleフォームをカスタマイズする際は、入力項目はできる限り少なくすることが重要です。入力項目が多いとユーザーに負担がかかってしまい、「入力するのが面倒」という理由で離脱してしまう可能性があります。

実際に株式会社WACULが行った「B2Bサイトのフォームにおけるベストプラクティス研究」という調査によると、入力項目を1つ減らすごとにフォーム通過率が2%ほど向上したという結果が出ています。

どうしても入力項目が増えてしまう場合は、カスタマイズをする前に項目の必要性を一度見直すと良いでしょう。

参考： B2Bサイトのフォームにおけるベストプラクティス研究 | WACULテクノロジー＆マーケティングラボ

掲載サイトとデザインテイストは合わせる

Googleフォームのデザインを変更する際は、掲載サイトとのデザインテイストは合わせるようにしましょう。サイト内のデザインが統一されていないと、ユーザーが「外部のサイトに誘導されたのでは？」と勘違いしてしまい、不信感を抱く可能性があります。

ユーザーに不信感を与えてしまうと、フォームから離脱してしまうだけではなく、会社全体の信用が低下してしまうおそれがあります。

そのため掲載サイトと大きく異なるデザインや、ひと目で「Googleフォームだ」とわかるようなデザインは避けたほうが良いでしょう。

Googleフォームの仕様が変更される可能性も

手間をかけてGoogleフォームをカスタマイズしても、今後予告なく仕様が変更される可能性があります。

仕様が変更されると画面やソースコードの構造も変わるため、「どのボタンからカスタマイズしたらいいかわからない」「編集していたタグが見つからない」となってしまうリスクがありますので注意してください。

また、仕様が変わるたびに新しいカスタマイズ方法を調べて対応しなければならないので、手間もかかってしまうでしょう。

「formrun（フォームラン）」なら手軽にフォームをカスタマイズできる

Googleフォームのデザインを自由にカスタマイズすることは可能ですが、HTMLやCSSの知識が必要です。またプログラミングの知識がない場合も、Googleフォームの管理画面からカスタマイズすることはできますが、変更できる範囲は限られてしまいます。

手軽にカスタマイズできるフォームを作成したいなら、フォーム作成ツール「formrun（フォームラン）」がおすすめです。formrunなら、専門知識がなくてもデザイン性の高いフォームを作成できます。

デザインのテンプレートが豊富に用意されており、クリック操作だけでフォーム作成・デザインのカスタマイズができるため、手間がかかりません。

さらに、formrunは機能面でもカスタマイズに優れています。画像をアップロードできる機能や、決済機能付きのフォームなどが簡単に作成可能。フォームからの離脱を防止するEFO機能も搭載しています。

Googleフォームと同じく、formrunで作成したフォームは簡単に自社サイトへ埋め込めるので、すぐに運用を始めら れます 。

formrunとGoogleフォームの主な違いを以下の比較表にまとめてみました。

Googleフォームよりももっとデザイン性の高いフォームを作成したい、機能面でも充実したフォームを作成したい方は、ぜひ1度無料でフォームを作成してみてください。

formLab編集部

formrunやフォーム作成や顧客管理に関する情報を発信しております。

EFO（エントリーフォーム最適化）や問い合わせ対応など、
フォームに関するお悩みを解決します。