Googleフォームのデザイン変更方法まとめ｜初心者でもできるカスタマイズ3選

Googleフォームの魅力は、Googleアカウントさえあれば誰でも無料で利用できることです。

誰でも簡単に利用できるようシンプルなデザインが採用されている反面、 「デザインが似たり寄ったりになるから気になる…」という悩みを抱えていませんか。

本記事ではGoogleフォームのデザインをカスタマイズする3つの方法と、回答率を高めるコツについて解説します。

▼ ビジネスでのフォーム作成なら「formrun」がおすすめ！
Googleフォームのデザインに物足りなさを感じている方は、弊社のformrunがおすすめです。
配色・レイアウト・ロゴ画像などが自由に設定でき、自社デザインに合わせたフォームがノーコードで簡単に作成できます。

永久に無料で使い続けられ、Googleアカウントがあればワンクリックで始められます。
ビジネス用途では、formrun利用者の7割がGoogleフォームから乗り換えています。

Googleフォームとの違いを比較したい方は、こちらのページをご覧ください。
>> フォームランとGoogleフォームの違いは「便利で豊富な機能」があること

formrunでは120種類以上のテンプレート用意しています。
テンプレートを確認したい方は、こちらのページをご覧ください。
>> フォームランのテンプレート一覧

Googleフォームのデザインのカスタマイズは3つの方法がある

Googleフォームのデザインをカスタマイズする方法には、以下3つが挙げられます。

• Googleの標準機能を使う
• アドオン機能を追加する
• HTMLやCSSで編集する

Googleフォームの標準機能とアドオン機能の追加は、専門知識がなくても簡単にデザインをカスタマイズできるため、フォーム作成初心者の方にもおすすめです。

一方で、HTMLやCSSを使ったカスタマイズ方法は、デザインの自由度が高い反面、専門的な知識が必要になります。そのため、「時間や手間をかけてでも理想のデザインを反映させたい」という方は、HTML・CSSを活用しましょう。

Googleフォームの標準機能でデザインをカスタマイズする方法

Googleフォームのデザインを管理画面上からカスタマイズする方法には、以下の7つがあります。

• ヘッダー画像を追加・変更する
• テーマ色や背景色を変更する
• フォントを変更する
• 質問と選択肢に画像や動画を追加・変更する
• 進行状況を表示する
• 回答に応じて条件分岐させる
• Googleフォームを自社サイトに埋め込む

1つずつカスタマイズの手順を解説します。

ヘッダー画像を追加・変更する

Googleフォームの回答ページ最上部に画像を挿入すると、どのようなフォームかユーザーがわかりやすくなります。

右上のパレットアイコンをクリックします。画面右側に【テーマ】の編集画面が表示されるので、【ヘッダー】の【画像を選択】をクリックしましょう。

【ヘッダーの選択】という画面が現れたら、Googleから提供されているテーマから好きなデザインを選んだり、使用デバイスに保存している写真や画像をアップロードしたりすることで、ヘッダー画像の追加・変更が可能です。

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

テーマ色や背景色を変更する

フォームのテーマ色と背景色を変更することで、フォームに対する印象を変更することが可能です。

右上のパレットアイコンをクリックすると画面右側に表示される「テーマ」の編集画面から色や背景を変更できます。

「色」「背景」のそれぞれの項目から、フォームに採用したい色を選択しましょう。色自体をカスタマイズしたい場合は、「＋」をクリックするとカスタム色を追加できます。

ただし、背景色は「色」で選択した色に近い、4色しか表示されない点にご注意ください。

フォントを変更する

フォームのフォントを変更することで、読みやすさやフォームの内容に合わせたテキストに変更可能です。

画面右上にあるパレットアイコンをクリックします。「テーマ」編集画面の「テキスト スタイル」という項目から、フォントをカスタマイズします。

フォントは、ヘッダー・質問・テキスト、それぞれ個別で変更可能です。必要に応じて、テキストのフォントを使い分けてもいいでしょう。

質問と選択肢に画像や動画を追加・変更する

質問項目や選択肢に画像や動画を追加することで、回答者に質問の意図をより詳しく伝えることが可能です。

質問項目の右横にある写真アイコンをクリックすると、「画像を挿入」という編集画面が現れます。選択肢に写真を追加する場合は、各選択肢の右側にカーソルを合わせると、挿入アイコンが表示されます。

質問項目に動画を追加したい場合は、メニューバーの「動画を追加」をクリックします。ただし、Googleフォームに挿入できる動画は、YouTube動画に限定されている点に注意してください。

進行状況を表示する

ユーザーが回答する際に、あとどの程度で回答が完了するかという進行状況の確認ができるバーを表示できます。

画面上部中央にある「設定」から「プレゼンテーション」の順にクリックしてください。【進行状況バーを表示】という項目をオンにすると、フォームに回答の進行状況が表示されます。

ただし、進行状況バーはセクションを追加してフォームが複数ページにまたがる場合のみ有効です。フォームが1ページしかない場合は、進行状況が100%と表示されます。

回答に応じて条件分岐させる

ユーザーの回答内容に応じて、異なる質問を表示させたい場合は「条件分岐」を活用しましょう。

条件分岐の設定手順は以下の通りです。

• 条件分岐させるラジオボタンの質問を追加する
• 選択肢の数に合わせてセクションを追加する
• 各選択とセクションを紐づける
• 条件分岐を終了した際の表示ページを設定する

Googleフォームで条件分岐を活用したフォームの作成方法は、以下の記事で詳しく解説しているので、合わせてご覧ください。
>>Googleフォームで条件分岐を設定する手順を解説｜活用するメリットも紹介

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

作成したGoogleフォームは、自社サイトへ埋め込みにも対応しています。フォームの回答URLをわざわざ共有する必要なく、自社サイトのWebページからユーザーにフォームを入力させることが可能です。

フォーム編集画面の右上にある【送信】をクリックします。

「フォームを送信」の画面から「＜＞」マークをクリックすると、埋め込み用のコードが表示されます。

右下の「コピー」をクリックするとコードがコピーされるので、そのまま自社サイトのHTML内に貼り付ければ、自社サイトにGoogleフォームが埋め込まれます。

また、自社サイトで表示するGoogleフォームのサイズを変更したい場合は、コードをコピーする際に表示される「ピクセル変更」で最適なサイズに変更しましょう。

▼formrunなら面倒なデザイン調整なしで理想のフォームが作成可能！
formrunでは、120種類以上の豊富なテンプレートを用意しており、テンプレートを選ぶだけでデザイン性の高いフォームが使用できます。

Googleアカウントがあれば、わずか1クリックで登録してすぐに使い始められます。
「時間をかけずに、おしゃれなフォームを作りたい」という方は、formrunを試してみてください。

簡単にフォームを作成したい方はこちら
>> 無料でフォームを作成する [/btn]

Googleフォームとの違いを詳しく知りたい方はこちら
>> テンプレート一覧

Googleフォームをアドオン機能でカスタマイズする方法5選

アドオン機能とは、Googleフォームに自由に追加できる拡張機能のことです。
アドオン機能を活用することで、Googleフォームの標準機能では編集できない機能・デザインを反映させられます。

アドオン機能の追加は、まず編集画面右上にある「︙」をクリックしてください。

次に「アドオンを取得」を選択すると、追加できるさまざまなアドオンが表示されます。その中から追加したいアドオンをインストールしましょう。

Googleフォームには、多種多様のアドオンが公開されていますが、デザインのカスタマイズでは以下のアドオンがおすすめです。

• フォームチョイスリミッター
• Formfacade
• Form Ranger
• Timer for Google Forms
• Form Notification

制限に達した選択肢を削除「フォームチョイスリミッター」

フォームチョイスリミッターは、選択肢の回答数に制限を設け、制限に達した選択肢のみを自動で削除するアドオンです。

例えば、サービスの申込フォームで「プランA」は限定10人、「プランB」と「プランC」はそれぞれ50人ずつ条件を設けたい場合に有効です。

フォームチョイスリミッターを活用すると、プランAが制限に達した場合、「プランB」と「プランC」のみ選択可能です。

選択肢に回答制限をかけたい場合は、フォームチョイスリミッターを活用しましょう。

フォームをWebサイトのデザインに合わせて埋め込む「Formfacade」

Formfacadeは、自社サイトのデザインにあわせてGoogleフォームを埋め込めるアドオンです。

Formfacadeを活用することで、フォームを埋め込むWebサイトのデザインにあわせて、フォームのデザインを変換してくれます。

HTMLやCSSなどでプログラミングする必要はなく、簡単に自社サイトのデザインに合わせたGoogleフォームが使いたい方におすすめです。

ただし、アドオンの設定方法が英語で表記されている点にご注意ください。

▼Googleフォームのデザインでお悩みなら、formrunという選択肢も
Googleフォームを拡張するアドオンは便利ですが、導入や設定の手間がかかることもあります。

「もっと簡単に、おしゃれで高機能なフォームを作りたい」と感じた方は、テンプレートから選んですぐに使えるformrunを試してみませんか？
コーディング不要で自社サイトのデザインにも自然になじむフォームが、最短30秒で作成できます。

Googleスプレッドシートのデータを自動取得「Form Ranger」

Form Rangerは、Googleスプレッドシートのデータを自動で取得できるアドオンです。

選択肢の質問を追加する際、選択肢が大量にあると入力するのに大きな手間がかかります。Form Rangerを追加すれば、スプレッドシートに記載したデータを自動で選択肢に追加することが可能です。

例えば、スプレッドシートに記載した自社の商品データをフォームの選択肢に追加したい場合、Form Rangerを使えば、すべての商品データを自動で選択肢に反映させられます。

スプレッドシートの内容が変更されると、フォームの選択肢も自動で更新されるため、選択肢が頻繁に変動するケースなどにおすすめです。

カウントダウンタイマーを設置「Timer for Google Forms」

Timer for Google Formsは、Googleフォームの回答中にカウントダウンタイマーを設置できるアドオンです。

Webテストといった回答時間に制限をかけたいフォームに活用できます。

基本は無料で使用できますが有料プランに加入すると、フォーム入力中のユーザーをWebカメラで監視する機能が追加されます。Webテストで不正を防止したいときに役立ちます。

回答者にメールの自動返信を行う「Form Notification」

Form Notificationは、回答が完了したユーザーにメールで自動返信ができるアドオンです。

Googleフォームの標準機能でも、回答者に自動返信メールを送信できます。しかし、あくまで回答完了を知らせるだけで、メール本文の編集に対応していません。

Form Notificationを追加すれば、自由な文章を自動返信メールに記載することが可能です。そのため、お問合せフォームや申し込みフォームなど、回答後の対応が重要なフォームで役立ちます。

ただし、Form Notificationは1日20件までしか自動返信メールが送れません。それ以上の送信数を確保したい場合は、Google Workspaceの有料プランに加入する必要があります。

HTML/CSSを使ったカスタマイズの実用的な手順と注意点

1. Googleフォームと同じ内容のフォームをHTMLで作成する

まず、Googleフォームで作成した質問項目と同じ構成のフォームを、HTMLで再現します。

<form action=”[GoogleフォームのPOST先URL]” method=”POST”>
<label>お名前</label>
<input type=”text” name=”entry.123456789″>

<label>メールアドレス</label>
<input type=”email” name=”entry.987654321″>

<button type=”submit”>送信</button>
</form>

POST先のURLや entry.XXXXXX のパラメーターは、後述のデベロッパーツールから取得します。

2. Googleフォームの入力項目ID(entry番号)を取得する

Googleフォームの回答ページを開き、デベロッパーツール → Network → フォーム送信のリクエストを確認します。

ここに、項目ごとに付与されている entry.○○○○○○ の値があるため、それを控えてHTML側に反映します。

• 質問文とentry番号を紐づける
• 忘れがちな hidden属性も含めてコピーする

など、手作業の工程が多くなります。

3. CSSでフォームのデザインを整える

HTMLでフォームを再現できたら、CSSでデザインを調整します。

例:

form {
width: 100%;
max-width: 600px;
margin: 0 auto;
padding: 24px;
background: #ffffff;
border-radius: 12px;
}

label {
font-weight: bold;
margin-top: 16px;
display: block;
}

input {
width: 100%;
padding: 12px;
border-radius: 8px;
border: 1px solid #ccc;
margin-top: 6px;
}

• ブランドカラーの利用
• 角丸・影の追加
• フォント・余白の調整

など、自由度の高いカスタマイズが可能です。

※重要な補足

Googleフォームは仕様変更により外部POSTを制限するケースが増えています（CORS・reCAPTCHAなど）。そのため、この方法自体が動作しなくなる可能性があります。

公式サポート外である点も踏まえ、ビジネス利用の場合は Apps Script など代替手段の検討を推奨します。

4. 運用上の注意点

HTML/CSSでのカスタマイズは柔軟ですが、以下のデメリットもあります。

• Googleフォーム側の仕様変更により、entry番号が変わる可能性がある
• 質問内容を編集するたびに、HTMLも手動で更新が必要
• スパム対策・レスポンシブ対応も自力で実装する必要がある
• Googleフォーム公式のサポート対象外

そのため、長期運用を前提としたビジネス用途では、負担の大きい方法となります。

5. 手軽さを優先するならツール導入も選択肢に

「ブランドに合うデザインは作りたいけれど、複雑なコード管理は避けたい」という場合、ノーコードでデザイン調整できるフォーム作成ツールを使うのも有効です。

配色・レイアウト・ロゴ・背景画像などを自由に変更できるため、HTML/CSSのような工数をかけずに高品質なフォームが作れます。

▼もっと手軽に、デザイン性の高いフォームを作りたい場合は、フォーム作成ツール「formrun(フォームラン)」の利用がおすすめです。
formrunなら、120種類以上のテンプレートからデザインを選び、テキストを入力するだけで、最短30秒でフォーム作成が完了します。

レスポンシブ対応や入力補助機能も標準搭載されているため、ユーザーにとっても使いやすいフォームが簡単に実現できます。

Googleフォームとの違いを知りたい方はこちら
>>formrunとGoogleフォームの違い

デザインのカスタマイズ以外に重要なこと

フォームを作成する際は、フォームのデザインをカスタマイズする以外にも、以下の3つを意識する必要があります。

• Webサイトとフォームのデザインを合わせる
• EFO（入力フォーム最適化）を行う
• スパム対策を行う

Webサイトとフォームのデザインを合わせる

フォームを自社のWebサイトに埋め込む場合は、フォームのデザインをWebサイトのデザインに合わせることが大切です。

フォームのデザインがWebサイトのデザインが合っていないと、ユーザーは別サイトのフォームに誘導されたのではないかと不信感を抱きかねません。

その結果、離脱されてしまって回答率が下がったり、Webサイトに対する信用を失う原因になってしまいます。

例えば、Webサイトのメインカラーが青であれば、フォームのテーマカラーも同じ青にするなど、デザインに統一感を持たせましょう。

ただし、Googleフォームはある程度デザインをカスタマイズできますが、Webサイトのデザインを完全に合わせることは困難です。

Webサイトに合わせたフォームを作成したいなら、デザイン性の高いフォーム作成ツールを使用するのがおすすめです。

EFO（入力フォーム最適化）を行う

EFOとは、入力フォーム最適化のことで、回答率の向上を目的として行う施策を指します。施策の具体的な内容としては以下が挙げられます。

• 入力フォームを最適な大きさで表示させる
• 入力項目を最小限に抑える
• ページ数を少なくする
• リンクやバナーを表示させない
• エラーをリアルタイムで指摘する

上記のような対策を行うことで、ユーザーの入力負担が大きく軽減され、途中離脱を防止することが可能です。

EFO対策は、顧客獲得を目的としたビジネスでは特に重要です。ただ、Googleフォームには、このようなEFO対策につながる機能はほとんど付いていません。

本格的なEFO対策を行いたい場合は、専用のフォーム作成ツールの利用がおすすめです。

スパム対策を行う

フォームを公開する場合、自動でフォームに入力されたスパム回答が届く場合があります。フォームを作成して終わりではなく、不要な入力を防ぐスパム対策の実施しましょう。

Googleフォームで簡易的に行えるスパム対策としては、reCAPTCHA画像の活用があります。reCAPTCHA画像とは、botによる不正アクセスを防ぐためのものです。

ただし、この方法はGoogleから推奨されている方法ではありません。適切なスパム対策を行いたいなら、スパム対策機能が付いたフォーム作成ツールを利用するのがおすすめです。

formrunなら、自社らしいデザインのフォームがノーコードで簡単に作れます

「Googleフォームは便利だけれど、どうしても“既製品感”が出てしまう…」
このようなお悩みをお持ちではないでしょうか。

デザイン性の高いフォームがノーコードで作成できる

（formrunで提供されているテンプレートの一例）

ビジネスで求められる“安心できるフォーム運用”も実現

Googleフォームからformrunへの乗り換えが多い理由とは？

Googleフォームを効果的なデザインにカスタマイズしよう

Googleフォームのカスタマイズ方法には、以下3つの方法が挙げられます。

• 管理画面上からカスタマイズ
• アドオン機能を活用してカスタマイズ
• HTMLやCSSでカスタマイズ

管理画面上からのカスタマイズやアドオン機能を活用したカスタマイズであれば、専門知識が必要ないため、初心者の方でも簡単にデザインを変更できます。

HTML・CSSを活用すれば、自由にデザインをカスタマイズできますが、専門的な知識が必要だったり運用負担が上がったりするデメリットがあります。

フォームの利用目的に応じて適切なカスタマイズ方法を選択し、ユーザーが回答しやすい効果的なフォームを作成しましょう。

もっと簡単に、自社ブランドに合ったデザイン性の高いフォームを作成したい方には、ノーコードで使える「formrun（フォームラン）」がおすすめです。

formrunなら、配色・背景画像・ロゴの設定まで自由に設定でき、コードなしで自社イメージにぴったりなフォームを簡単に仕上げられます。Googleフォームでは難しい「信頼感の伝わるデザイン」が、誰でも簡単に実現可能です。

Googleアカウントがあればワンクリックで始められるので、ぜひ一度formrunをお試しください。

FAQ(よくある質問)

Q1. Googleフォームのデザインをおしゃれにする一番簡単な方法は何ですか?

Googleフォーム内の「テーマ」機能を使って、ヘッダー画像・テーマカラー・背景色・フォントを変更するのが最も手軽です。

ただし、細かい色設定やブランドカラーへの完全一致は難しいため、企業利用やブランド統一が必要な場合はデザインの自由度が高いフォーム作成ツールを併用すると効果的です。

Q2. Googleフォームは、HTMLやCSSを使って自由にデザインできますか?

可能ですが、Googleフォーム本体を直接編集するのではなく、HTML側にフォームを再現してGoogleフォームへPOST送信するという形式になります。

そのため、送信先URLの取得や項目IDの紐づけなど手作業が多く、Googleフォームの構造変更にも影響を受けるため、長期運用には不向きです。

Q3. Googleフォームの回答率を上げるためのデザインのコツはありますか?

ユーザーがストレスなく入力できるデザインにすることが重要です。

具体的には、余白を十分にとる・必須項目をわかりやすくする・入力負荷が低い質問から順番に並べる・信頼性の高い色を選ぶ(青や緑など)といった工夫が効果的です。

Q4. Webサイトに埋め込んだGoogleフォームのデザインを、サイトに合わせることはできますか?

Googleフォームの標準機能でもある程度調整できますが、自社サイトのデザインに細かく合わせるのは難しいです。

もしブランドカラー・フォント・ボタンの形状などをサイトと揃えたい場合は、自由度の高い埋め込み表示ができるアドオン(Formfacadeなど)や、デザイン調整が簡単なフォーム作成ツールの利用が効果的です。

Q5. Googleフォームを使う際のスパム対策はどのように行えばよいですか?

GoogleフォームにはCAPTCHA機能が標準搭載されていないため、完全なスパム対策は難しいのが実情です。

一般的にはreCAPTCHA画像を使った簡易対策が用いられますが、入力者の負担が増える点が課題です。確実にスパムを抑えたい場合は、専用のスパム防止機能を備えたフォーム作成ツールの使用が推奨されます。

Q6. アドオンを使う場合、どれを入れればデザインがよくなりますか?

Googleフォームの見た目を改善したい場合は Formfacade がおすすめです。

HTMLやCSSを書かずにWebサイトのデザインに合わせた表示に変換してくれるため、埋め込みフォームの見た目を整えたい場合に特に役立ちます。ただし設定が英語のため、初期設定に少し時間がかかります。

Q7. Googleフォームのテンプレートはどの程度カスタマイズできますか?

ヘッダー・色・背景・フォントなどは変更できますが、レイアウトやアイコン位置、ボタン形状などは自由に変えられません。

テンプレートの構造自体を大きく変えたい場合には、テンプレート数の多い外部ツールを利用したほうが効率的です。

formLab編集部

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

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