前回は、AIで作ったHTMLサイトのSEO設定についてお話ししました。
前回の記事はこちらです。
AIで作ったHTMLサイトのSEO設定をしてみた。titleタグ・構造化データ・サイトマップとは？
今回は、フォームまわりについてお話しします。
コーポレートサイトでは、フォームはとても大切です。
見た目の良いサイトでも、フォームが使いにくいと、最後の行動で止まってしまいます。
今回のサイトでは、お問い合わせフォームと、無料テンプレート申込フォームを調整しました。
実際のページはこちらです。
AIでHTMLサイトのフォームを調整してみた
今回のコーポレートサイトは、静的HTMLサイトです。
ただし、フォームは完全に自作したわけではありません。
フォーム部分は、既存の外部サービスを利用しています。
このは屋では、マイスピーのフォームを使っています。
そのため、HTMLサイト本体のデザインに合わせながら、外部フォームを自然に組み込む必要がありました。
今回調整したフォーム
- お問い合わせフォーム
- 無料テンプレート申込フォーム
- reCAPTCHA表示
- フォーム下の案内文
- スマホでの入力しやすさ
フォームは、サイトの最後の行動に近い場所です。
ここが雑に見えると、全体の印象にも影響します。
お問い合わせフォームを設置した
まず、お問い合わせページです。
お問い合わせフォームでは、いくつかの入力項目を用意しています。
主な入力項目
- お名前
- メールアドレス
- ホームページURL
- 電話番号
- お問い合わせ内容
このフォームは、問い合わせを受けるための重要な導線です。
そのため、ただ設置するだけではなく、見た目や入力しやすさも確認しました。
フォームの見た目を、サイトに合わせた
外部フォームを使う場合、見た目の調整が少し難しくなることがあります。
フォーム側が持っているHTMLやCSSの影響を受けるからです。
今回も、最初は一部の入力欄の見た目が、他の項目と少し違って見えました。
気になった部分
- ホームページURLの入力欄
- 電話番号の入力欄
- 入力欄の高さ
- 枠線の見え方
- 角丸の統一感
- スマホでの見え方
フォームの入力欄は、少し違うだけで、意外と目立ちます。
他の項目とデザインが違うと、急に質素に見えることがあります。
できる範囲で、統一感を出した
完全に自由に変えられるわけではありません。
ただ、CSSで調整できる部分は整えました。
- 入力欄の余白
- 枠線
- 背景色
- 角丸
- 文字サイズ
- ボタンの見た目
こうした調整で、フォーム全体がサイトの雰囲気に近づきました。
フォームは機能面だけでなく、信頼感にも関わります。
無料テンプレート申込フォームを設置した
次に、無料テンプレート申込ページです。
このページでは、「ネット集客テンプレート全13種」を無料で受け取れるようにしています。
コーポレートサイト内のCTAとして、基本的には、このページへ導線をそろえました。
CTAを一本化した理由
CTAとは、読者に次の行動を促す導線のことです。
今回のサイトでは、CTAを複数に増やしすぎないようにしました。
- 問い合わせ
- 無料相談
- 資料請求
- 商品購入
- メルマガ登録
こうした導線が多すぎると、読者が迷います。
そのため、今回は、無料テンプレートに寄せました。
コーポレートサイトとして、売り込み感を強くしすぎたくなかったことも理由です。
申込フォームで調整したこと
- メールアドレス入力欄の見た目
- 送信ボタンの文言
- フォームまわりの余白
- 案内文の読みやすさ
- スマホでの見え方
- reCAPTCHAの案内文
テンプレート申込フォームは、読者に行動してもらう場所です。
そのため、入力しやすく、安心して送信できる見た目を意識しました。
reCAPTCHAの表示を調整した
フォームには、reCAPTCHAを使っています。
reCAPTCHAは、迷惑送信を防ぐための仕組みです。
フォームを公開する場合、スパム対策は大切です。
ただし、reCAPTCHAを使うと、画面上にバッジや案内文が表示されることがあります。
reCAPTCHAで確認したこと
- バッジが、デザインを邪魔していないか？
- 案内文が、表示されているか？
- 日本語として、自然な文言になっているか？
- Googleのプライバシーポリシーへ、リンクしているか？
- Googleの利用規約へ、リンクしているか？
- スマホで、読みづらくないか？
今回、reCAPTCHAの案内文は日本語にしました。
文言は、次のような形です。
- このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシーと利用規約が適用されます。
必要な案内を残しつつ、サイトの見た目を邪魔しすぎないようにしました。
reCAPTCHAバッジは、扱いに注意が必要
reCAPTCHAバッジは、非表示にしたいと感じることがあります。
画面の右下などに表示され、デザイン上、気になることがあるからです。
ただし、reCAPTCHAを使う場合は、Googleの案内表示に関するルールがあります。
非表示にする場合の考え方
バッジを非表示にする場合でも、必要な案内文を表示する必要があります。
今回も、フォーム下に案内文を置く形で調整しました。
- reCAPTCHAで保護されていること
- Googleのプライバシーポリシーへのリンク
- Googleの利用規約へのリンク
デザインだけを優先して、必要な案内を消すのは良くありません。
見た目とルールの両方を考えることが大切です。
スマホでの入力しやすさを確認した
フォームは、スマホで使われることも多いです。
そのため、スマホでの入力しやすさも確認しました。
スマホで確認したこと
- 入力欄が、小さすぎないか？
- ラベルが、読みやすいか？
- 入力欄同士の余白は、十分か？
- 送信ボタンは、押しやすいか？
- エラー時に、見づらくないか？
- reCAPTCHAの案内文が、読めるか？
スマホでは、フォームの使いやすさが、とても大切です。
PCでは問題なく見えても、スマホでは窮屈に見えることがあります。
今回も、実機スマホで確認しながら調整しました。
外部フォームをHTMLサイトに組み込むときの注意点
外部フォームをHTMLサイトに組み込む場合、いくつか注意点があります。
注意点1：デザインの制約がある
外部サービスのフォームは、自由に変えられる範囲が限られることがあります。
そのため、できる部分と、できない部分を分けて考える必要があります。
- CSSで調整できる部分
- フォームサービス側の仕様で変えにくい部分
- 入力項目として必要な部分
- 送信処理に関わるため、触らない方が良い部分
見た目を整えることは大切ですが、フォームが正しく動くことが最優先です。
注意点2：送信処理を壊さない
フォームには、送信に必要な情報が含まれています。
見た目を調整するときに、必要な項目を消してしまうと、送信できなくなる可能性があります。
特に、次のような項目には注意が必要です。
- hidden項目
- フォームのaction属性
- method属性
- name属性
- reCAPTCHA用の項目
デザイン調整をするときは、送信に必要な部分を壊さないことが大切です。
注意点3：公開後に必ず確認する
フォームは、公開後の確認が特に大切です。
見た目だけでは、動作確認になりません。
できる範囲で、実際の動きを確認します。
- 入力できるか？
- 必須項目が、分かるか？
- 送信ボタンが、押せるか？
- reCAPTCHAが、動いているか？
- スマホで、入力しやすいか？
フォームは、サイトの中でも特に慎重に確認したい部分です。
フォームは、信頼感に関わる
フォームは、ただの入力欄ではありません。
読者が、個人情報を入力する場所です。
そのため、見た目の安心感が大切です。
不安になりやすいフォーム
- 入力欄のデザインが、バラバラ
- 何を入力すれば良いか、分かりにくい
- ボタンが、押しにくい
- 説明文が、足りない
- スマホで、入力しづらい
- 急に古いデザインになる
こうしたフォームだと、送信前に少し不安になります。
特に、会社サイトでは、フォームの印象も信頼感に関わります。
安心して入力できるフォーム
反対に、安心して入力できるフォームには、次のような特徴があります。
- 入力欄の見た目が、そろっている
- ラベルが、分かりやすい
- 余白が、適切にある
- ボタンが、見つけやすい
- スマホでも、入力しやすい
- プライバシーに関する案内が、ある
今回のフォーム調整では、こうした点を意識しました。
AIは、フォーム調整にも役立った
今回、フォームまわりの調整でも、AIに相談しました。
フォームは、見た目と機能の両方に関わるため、確認項目が多いからです。
AIに相談したこと
- 入力欄のデザインを、そろえられるか？
- スマホで、見やすくできるか？
- reCAPTCHAバッジを、どう扱うか？
- 案内文を、日本語でどう書くか？
- 送信処理に必要な項目を、壊していないか？
- フォーム下の説明文を、どう整えるか？
AIは、調整案を出すのに役立ちました。
ただし、フォームの動作確認は、必ず実際に行う必要があります。
今回、フォームを調整して感じたこと
フォームは、サイト全体の中では地味な部分です。
でも、かなり重要です。
フォームまで整っていると、サイト全体の完成度が上がります。
感じたこと
- フォームは、見た目と機能の両方が大切
- 外部フォームでも、できる範囲でデザインは整えられる
- スマホでの入力しやすさは、必ず確認した方が良い
- reCAPTCHAは、表示ルールも含めて考える必要がある
- フォームは、読者の不安を減らす場所でもある
入力する人にとって、フォームは少し緊張する場所です。
だからこそ、できるだけ分かりやすく、安心して使える状態にしたいところです。
まとめ
今回は、AIでHTMLサイトのフォームを調整した話をしました。
要点をまとめます。
- フォームは、サイトの最後の行動に近い重要な場所
- お問い合わせフォームと、無料テンプレート申込フォームを調整した
- 外部フォームは、自由に変えられる範囲に制約がある
- それでも、CSSで見た目を整えられる部分はある
- reCAPTCHAは、バッジや案内文の扱いに注意が必要
- スマホでの入力しやすさを、必ず確認する
- フォームは、見た目だけでなく信頼感にも関わる
- AIは、フォーム調整の確認や案出しにも役立つ
フォームは、ただ設置すれば良いものではありません。
- 入力しやすいか？
- 安心して送信できるか？
- サイト全体の雰囲気に合っているか？
ここまで見ることで、サイトの完成度は上がります。
実際のフォームはこちらです。
あなたがHTMLサイトにフォームを設置する場合も、公開前にスマホで確認してみてください。
- 入力欄は、見やすいか？
- ボタンは、押しやすいか？
- 必要な案内文は、あるか？
このあたりを見るだけでも、フォームの印象は変わります。
次回は、AIで作ったサイトのfaviconとapple-touch-iconについてお話しします。
小さなアイコンですが、意外と見え方に差が出る部分です。
