かつて、私は人々にウェブサイト用の写真をメールで送ってもらうように頼んでいました。メンバーシップサイトのプロフィール写真、チームページのヘッドショット、簡単な本人確認画像でさえも、毎回、やり取りが煩雑になっていました。
ファイルを添付し忘れる人もいました。あるいは、サイズが大きすぎる写真を送ってくる人もいました。時には、実際の画像を送る代わりに写真のスクリーンショットを撮る人もいて、画質はひどいものでした。
その後、WordPressフォームを通じて、人々が写真撮影や動画録画ができることに気づきました。ボタンをクリックして、写真を撮る（または簡単な動画を録画する）だけで完了です。
このガイドでは、WordPressフォームにこのカメラキャプチャ機能を追加する方法を紹介します。これにより、私が経験したような面倒な手間を省くことができます。
WordPressフォームでライブカメラキャプチャを追加する理由
WordPressフォームでのライブカメラキャプチャにより、写真や動画の提出がはるかに迅速かつ簡単になります。これにより、より多くのユーザーがフォームを完了できるようになります。
お問い合わせフォームに写真をアップロードするように依頼した場合に何が起こるかを考えてみてください。ユーザーは、やっていることを中断し、カメラアプリを開き、写真を撮り、カメラを閉じ、ギャラリーで写真を見つけ、そしてアップロードするために戻ってくる必要があります。
それは多くのステップです。そして、余分なステップごとに、誰かが諦めてしまう可能性が生まれます。そして、フォームを放棄する可能性があります。
ライブカメラキャプチャフィールドを使用すると、フォームから離れることなく写真やビデオを撮影できます。ボタンを1回クリックするだけで、ブラウザでカメラが開き、数秒で完了します。
これはあなたが思うよりも重要です。従来のファイルアップロードの手間を省くだけで、フォーム完了率が大幅に向上するのを見てきました。
カメラキャプチャが大きな違いを生む実際の状況をいくつかご紹介します。
| サイトの種類 | ユースケース |
|---|---|
| カスタマーサポートチーム | 言葉で説明しようとするのではなく、問題を見せてもらいましょう。 |
| 不動産/不動産サイト | テナントに、写真を送受信する代わりに、その場でメンテナンスの問題を記録してもらいましょう。 |
| 学校/eラーニングプラットフォーム | 保護者に個別のファイルをメールで送信するように依頼することなく、オンライン入学中に学生の写真を収集します。 |
| 保険会社 | 顧客に損害をすぐに撮影してもらうことで、請求を迅速化します。 |
この目的でプラグインを使用する最も良い点は、すべてが自動的に整理されることです。
誰かがフォームを送信すると、その写真やビデオは、他のすべての情報とともにエントリに添付されます。写真と正しい人物を一致させようと、メール受信トレイを検索する必要はもうありません。✨
それでは、WordPressフォームにカメラキャプチャ機能を追加するすべての手順を説明します。このガイドでカバーする内容は次のとおりです。
- ステップ 1: WPForms Pro のインストールと有効化
- ステップ2：フォームにカメラフィールドを追加する
- ステップ3：フォームのカメラフィールドを設定する
- Step 4: Set Up Button Style, Storage, and Access Settings
- ステップ5：フォームの通知と確認を設定する
- ステップ6：フォームをテストして埋め込む
- WordPressフォームでライブカメラの写真や動画をキャプチャすることに関するよくある質問
- WordPressフォームの使用に関するその他のガイド
ステップ 1: WPForms Pro のインストールと有効化
このガイドでは、WordPressのWPFormsを使用します。これはWordPress向けの最高のお問い合わせフォームプラグインです。このプラグインを選んだのは、カメラキャプチャフィールドがあり、簡単なドラッグ＆ドロップで簡単に追加できるからです。
WPFormsを使用して、お問い合わせフォーム、支払い付きのオンライン注文フォーム、投票やアンケート、ニュースレター登録など、さまざまなフォームを作成することもできます。
WPBeginnerでは、すべてのお問い合わせフォーム、サイト移行リクエスト、年次読者アンケートなどでWPFormsを使用しています。私たちはこのツールの大ファンであり、WPFormsの完全レビューで詳細を確認できます。
まず、WPFormsのウェブサイトにアクセスしてアカウントを作成してください。「今すぐWPFormsを入手」ボタンをクリックし、ニーズに合ったプランを選択してサインアップを完了してください。
💡 注意： カメラキャプチャ機能、および条件付きロジックやフォームテーマなどの追加機能を利用するには、WPForms Proが必要です。とはいえ、まずプラグインを試したい場合は、無料版のWPFormsで始めることもできます。
サインアップ後、プラグインのzipファイルとライセンスキーはWPFormsのアカウントダッシュボードで見つけることができます。このタブを開いたままにするか、ファイルとキーをパスワードマネージャーのような安全な場所に保管してください。
次に、WordPressダッシュボードに移動し、プラグイン » 新規追加に移動します。
次の画面で、検索バーを使用してWPFormsプラグインを検索できます。
検索結果で「今すぐインストール」をクリックし、表示されたら「有効化」をクリックします。
ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。
有効化したら、管理エリアからWPForms » 設定に移動して、WPForms Proライセンスを有効化します。
ライセンスキーをコピーしてボックスに貼り付けます。次に、「キーを検証」ボタンをクリックします。
WPFormsはライセンスがアクティブであることを確認します。これで、カメラキャプチャを使用してフォームの作成を開始する準備が整いました。
ステップ2：フォームにカメラフィールドを追加する
このステップでは、カメラキャプチャ機能を使用してフォームを作成します。
開始するには、WordPress管理ダッシュボードのWPForms » 新規追加に移動できます。
これにより、フォームに名前を付けることができるセットアップページに移動します。
これは参照用ですが、より多くのWordPressフォームを作成する際に、整理しやすいように、明確で説明的な名前を使用することをお勧めします。
次に、フォームの作成方法を選択します。
WPFormsでは、白紙のキャンバス、AI搭載フォームビルダー、または既製のテンプレートを使用してフォームを作成できます。
WPForms AIを使用すると、簡単なプロンプトを書くだけで済みます。AIフォームビルダーが数秒で生成します。
ただし、このチュートリアルでは、シンプルなコンタクトフォームテンプレートを使用します。
WPFormsには2,000以上の既製フォームテンプレートが用意されているため、ニーズに合ったものを見つけやすくなっています。
ステップバイステップの説明が必要な場合は、WordPressでコンタクトフォームを作成する方法に関するガイドを参照してください。
フォームがビルダーで開いたら、左側のサイドバーにあるフォームフィールドのリストを確認します。「Fancy Fields」というラベルのセクションまでスクロールダウンしてください。
ファイルアップロードフィールドのすぐ隣に、「カメラ」フィールドが表示されます。これをフォーム上の好きな場所にドラッグ＆ドロップできます。
💡 注: ファイルアップロードフィールドは、保存済みの写真やPDFなど、ユーザーがすでにデバイスに持っているファイルを収集するのに最適です。このチュートリアルでは、カメラフィールドの方が適しています。なぜなら、フォームを離れることなく、その場で写真やビデオをキャプチャできるからです。
フォームプレビューに小さなカメラアイコンが表示されることに気づくでしょう。ユーザーはこれをクリックして写真やビデオをキャプチャします。
この機能で興味深いと思ったのは、ラップトップやデスクトップでカメラボタンをクリックすると、キャプチャ前にフレンドリーな3秒間のカウントダウンが表示されることです。これにより、笑顔になったり、角度を調整したりするのに十分な時間が与えられます。
プレビューでは次のようになります。
これで完了です。この部分はすぐに終わると言いましたよね！
ステップ3：フォームのカメラフィールドを設定する
ここから、カメラフィールドを設定できます。
追加した「カメラ」フィールドをクリックして、左側の「フィールドオプション」パネルを開きます。ここで、カメラキャプチャの動作をカスタマイズします。
最初に見るのは「ラベル」設定です。
デフォルトではフィールド名は「カメラ」ですが、収集するものに合わせて名前を変更できます。たとえば、ユースケースに応じて、「プロフィール写真」、「エラーのスクリーンショット」、または「破損写真」などです。
「説明」では、写真に写るべきものや品質要件など、追加の詳細や指示を短いメモで追加できます。
例えば:
- プロフィール写真の場合は、「画像を鮮明に保つために、良い照明を使用してください。」
- エラーのスクリーンショットの場合は、「すべてのテキストが読みやすいことを確認してください。」
- 損害報告のために、「フレーム全体を写してください」。
これにより、ラベルが短くスキャンしやすくなり、説明は役立つガイダンスにのみ使用されます。
次に、「フォーマット」設定があり、2つの選択肢が表示されます。
- 写真 – プロフィール写真、IDカード、または簡単なスナップショットが必要なあらゆる状況に適しています。
- 動画 – 短い自己紹介、お客様の声を録画したい場合、または説明するよりも見せた方が簡単なことを説明したい場合に最適です。
デフォルトでは、WPFormsはこれを「写真」に設定しますが、いつでも切り替えることができます。
次に、「最大ファイルサイズ」設定までスクロールダウンできます。ここで、ユーザーが送信したファイルのサイズを制御できます。
メガバイト（MB）単位で任意の数値を入力できます。空白のままにすると、WPFormsは通常約64MBのサーバーのデフォルト制限を使用します。必要に応じて、最大ファイルアップロードサイズを増やすこともできます。
実際に必要なものに基づいて、妥当な制限を設定することをお勧めします。ファイルサイズが小さいほど、フォームの読み込みが速くなり、サーバーのスペースを節約できます。
ユーザーがこのフィールドをスキップできないように、「必須」ボタンをオンにすることを忘れないでください。
フォーマットとして「動画」を選択した場合、「時間制限」オプションも表示されます。デフォルトは1分30秒で、ほとんどの状況に適しています。
🧑💻 Pro Tip: 動画ファイルは大きくなり、WordPressのパフォーマンスを低下させる可能性があります。このフィールドは短いクリップ（30秒未満）には適しています。しかし、ユーザーに長い動画（5分以上）を送信してもらう必要がある場合は、クラウドサービスにアップロードしてリンクを共有する方が良いでしょう。
WordPressに動画をアップロードしてはいけない理由については、WordPressに動画をアップロードしてはいけない理由をご覧ください。
これらの設定は、ニーズに合わせて調整できます。
ステップ4：ボタンのスタイル、ストレージ、アクセス設定を行う
ここでは、カメラフィールドの詳細設定について説明します。ここで、カメラ機能の外観や、キャプチャされたファイルの保存場所を微調整します。
開始するには、フィールドオプションパネルの上部にある「高度」タブに切り替えます。
これらの設定オプションをそれぞれ詳しく見ていきましょう。
カメラボタンのスタイルとテキストをカスタマイズする
まず、「スタイル」ドロップダウンを見つけます。ボタンアイコンを表示するか、シンプルなリンクとして表示するかを選択できます。
私は通常、ボタンのスタイルを選択します。これはより分かりやすくクリックしやすいためですが、よりクリーンでミニマルな外観にしたい場合は、リンクオプションも効果的です。
そのすぐ下には、「ボタンリンクテキスト」フィールドがあります。これは、カメラボタンをよりパーソナルに、またはブランドに合ったものにするチャンスです。
デフォルトのテキストの代わりに、「写真を撮る」や「ビデオを録画する」のようなものを書くことができます。プロフィール写真フォームには、「チーズ！」のような楽しいフレーズを使用している人も見かけました。
これらのちょっとした工夫で、お問い合わせフォームがより親しみやすく、ロボット的でなく感じられるようになります。
CSSクラスでさらにスタイルを設定する
次に、CSSクラスフィールドが表示されます。これにより、カスタムクラス名を追加して、このカメラフィールドをCSSで異なるスタイルにすることができます。
たとえば、ここにcustom-camera-btnのようなクラスを追加できます。これはボタンを自動的にスタイル設定するわけではありませんが、後でこの特定のボタンをターゲットにするために、テーマ設定にカスタムCSSを追加することを（または開発者に）可能にします。
複数のCSSクラスを追加したい場合は、次のようにスペースで区切ることができます。camera-field large-button。
他のフォームフィールドとのスタイルの一貫性を保つために、これは空白のままにしておきます。
キャプチャしたファイルの保存場所を選択する
デフォルトでは、WPFormsはキャプチャされたすべての写真とビデオをサイトの「アップロード」フォルダ、具体的にはWPFormsディレクトリ内に保存します。
すべてのメディアを1か所にまとめておきたい場合は、「WordPressメディアライブラリ」にファイルを保存するオプションをオンにしてください。
メディアライブラリ内のファイルは一般に公開されやすいため、機密文書を収集している場合はこの設定をオフにしておくことを忘れないでください。
🧑💻 プロのヒント: ファイルを外部に保存したい場合は、WPFormsをDropboxまたはGoogleドライブに接続することもできます。サーバー容量の使いすぎが心配な場合や、自動的なクラウドバックアップが必要な場合に役立ちます。
ファイルをどこに保存しても、「エントリー」ダッシュボードで、各フォーム送信に添付された状態で常に表示できます。
アップロードされたファイルへのアクセスを制限する
フォームがID写真や個人文書などの機密情報を収集する場合、これらのファイルを表示できるユーザーを制限する必要があります。下にスクロールして「ファイルアクセス制限を有効にする」をオンにします。
これを有効にすると、2つのセキュリティオプションが利用できます。1つ目は、ログインしているWordPressユーザーのみがファイルを表示できるようにアクセスを制限することです。
もう1つのオプションは、セキュリティを強化するためにフォームにパスワード保護を追加することです。
これは、医療、法律サービス、または個人情報を扱うその他のコンテキストで使用されるフォームにとって特に重要です。
これらの制限がないと、ファイルURLを持つ誰でもアップロードされたメディアを表示できる可能性があります。
先に進む前に、これらの高度なオプションを構成するのに時間をかけることができます。
ステップ5：フォームの通知と確認を設定する
カメラフィールドが機能するようになったので、誰かがフォームを送信したときに実際に通知されるようにする必要があります。
これを行うには、フォームビルダーの設定 » 通知に移動できます。
WPFormsは、WordPress管理者のメールアドレスに送信される基本的なメール通知を自動的に設定します。誰かがキャプチャされた写真やビデオでフォームを送信するたびに、すべての詳細を含むメールが届きます。
これらの通知の受信者をカスタマイズするには、「送信先メールアドレス」フィールドを変更します。複数の人に通知したい場合は、すべてのメールアドレスをコンマで区切って入力してください。
スマートタグを使用して、たとえばフォームで送信されたメールアドレスに動的に通知を送信することもできます。
詳細については、複数の受信者を持つお問い合わせフォームの作成方法に関するガイドをご覧ください。
通知メールには、キャプチャされた写真またはビデオを表示するための直接リンクが含まれます。これにより、WordPressダッシュボードにログインする前に、受信トレイからすぐにファイルをプレビューできます。
💡 注: WordPressは常にメールを確実に送信するわけではなく、フォームの通知がスパムフォルダに入ったり、まったく送信されなかったりすることがあります。これを修正するには、WP Mail SMTPプラグインの使用をお勧めします。詳細については、WordPressがメールを送信しない問題を修正する方法をご覧ください。
フォームが送信された後、送信が成功したことを相手に知らせる必要があります。
フォームが送信された後に何が起こるかを決定するために、「確認」パネルに移動しましょう。
- メッセージ確認 – 送信後、同じページに「ありがとうございます！送信を受け付けました。」のような簡単なテキストメッセージを表示します。
- ページ表示確認 – ユーザーをサイトの別のページにリダイレクトします。これは、より多くの情報を含むカスタムのお礼ページに送信したい場合に効果的です。
- リダイレクト確認 – ユーザーを、希望する任意のURL、たとえ別のウェブサイトであっても、に送信します。私はこれを、送信後に予約ページや特別オファーにユーザーを送信するために使用しました。
あなたの状況に合わせて、最も適切なオプションを選択できます。
私は通常、「メッセージ」確認を選択します。なぜなら、シンプルで、ユーザーはすぐに送信が成功したことを知ることができるからです。
あなたもそれを使用したい場合は、ブランドの声に合わせるためにデフォルトのメッセージを書き直すことをお勧めします。
ステップ6：フォームをテストして埋め込む
フォームを公開する前に、カメラキャプチャが実際に機能することを確認する必要があります。
まず、フォームビルダーの右上にある「保存」ボタンをクリックして、すべての変更を保存します。
さて、このフォームをページでプレビューしてテストしてみましょう。
「プレビュー」ボタンをクリックして、新しいタブでフォームのプレビューを開いてください。
プレビューでは、ダミーデータでフォームフィールドに入力できます。
検証が機能していることを確認するには、タイプミスを入力したり、必須フィールドを空白のままにしたりしてみてください。
次に、フォーム内のカメラボタンをクリックします。
ブラウザはカメラへのアクセス許可を求めてきます。「今回のみ許可」または「サイト滞在中に許可」をクリックして、許可を与えてください。
注意: セキュリティ上の理由から、サイトがHTTPSを使用していない場合、一部のブラウザはカメラへのアクセスをブロックします。カメラボタンが機能しない場合は、SSL証明書がインストールされていることを確認してください。
これで、画面に3秒間のカウントダウンが表示されるはずです。笑顔で、写真やビデオをキャプチャさせましょう。
すべての項目を入力したら、「送信」をクリックして、確認メッセージが正しく表示されるか確認してください。「エントリーを表示」リンクをクリックすると、フォームの送信が正常に行われたか確認できます。
次の画面に、送信テストが表示されるはずです。
「アクション」列の「表示」をクリックすると、エントリーが表示されます。
これで、キャプチャした写真やビデオがそこに添付されているのを確認するために下にスクロールできます。
私の画面ではこのようになります。
すべて確認できたら、このフォームを WordPressウェブサイト に追加できます。
「埋め込み」ボタンをクリックすると、ウィザードが起動します。
ここで既存のページを選択するか、フォーム用の新しいページを作成できるポップアップが開きます。
- 既存のページを選択: WordPressサイト上のすべてのページがドロップダウンに表示されます。
- 新しいページを作成: 「ページに名前を付ける」フィールドが表示され、タイトルを入力できます。
このガイドでは、「新しいページを作成」を選択します。
次に、新しいページのタイトルを入力します。たとえば、私は「お問い合わせフォーム」と名付けます。
「開始する！」をクリックします。
フォームが読み込まれた状態で、そのページのブロックエディターに移動します。
ここから、右側のパネルで「フォーム設定」を調整できます。
デフォルトではフォームのタイトルは非表示になっているため、訪問者にコンテキストを与えるためにオンにしたい場合があります。追加した場合は説明を有効にすることもできます。
さらに見栄えを良くするために、フォームをスタイル設定してサイトのテーマに合わせます。
テーマセクションからテーマを選択してください。
見栄えに満足したら、「保存」をクリックします。
これで完了したら、ページを発行または更新し、「ページを表示」をクリックしてWordPressサイト上のライブバージョンを確認します。
詳細については、WordPressでフォームを埋め込む方法に関するガイドを参照してください。
🧑💻 プロのヒント: フォームを埋め込んだら、モバイルデバイスでページを開いて、カメラがスムーズに開き、小さな画面で自然に感じられることを確認してください。
WordPressフォームでライブカメラの写真や動画をキャプチャすることに関するよくある質問
まとめに入る前に、フォームでのカメラアップロードとファイルフィールドの使用に関して人々が抱く一般的な質問への回答をいくつか紹介します。
Googleフォームで写真を収集するにはどうすればよいですか？
Google Formsはファイルアップロードをサポートしていますが、専用のスマートカメラフィールドはありません。ユーザーは手動でファイルを選択できますが、WPFormsはカメラを直接起動するシームレスな統合を提供しており、ユーザーがスナップして送信するのをはるかに速くします。
WordPressフォームでカメラを使用できますか？
はい。WPFormsのような一部のWordPressフォームプラグインは、ユーザーがデバイスから直接写真やビデオを撮影してフォームと一緒に送信できるカメラフィールドをサポートしています。
ファイルアップロードフィールドとは何ですか？
ファイルアップロードフィールドを使用すると、ユーザーはフォーム送信時に画像、PDF、ビデオなどのファイルを添付できます。写真のアップロード、履歴書、ドキュメントなどに便利です。
WordPressフォームで写真を撮るにはどうすればよいですか？
WPFormsのような、それをサポートするフォームプラグインを使用して、フォームにカメラまたはファイルアップロードフィールドを追加します。カメラを搭載したデバイスでフォームを開くと、既存のファイルをアップロードする代わりに、直接写真を撮ることができます。
WordPressフォームでウェブカメラの写真を撮ることはできますか？
はい。フォームプラグインがライブカメラ入力をサポートしている場合、ユーザーはデスクトップのウェブカメラまたはスマートフォンのカメラを使用して写真を撮り、すぐに送信できます。
WordPressフォームの使用に関するその他のガイド
このチュートリアルが、WordPressフォームでユーザーがライブ写真やビデオを直接撮影できるようにカメラフィールドを追加するのに役立ったことを願っています。
次に、以下を学ぶとよいでしょう。
- WordPressフォームに画像選択肢を追加する方法
- WordPressでフローティングお問い合わせフォームを表示する方法
- WordPressでメールリストを増やすためにお問い合わせフォームを使用する方法
- WordPressフォームで条件付きロジックを使用する方法
- WordPressフォーム使用完全ガイド（知っておくべきことすべて）
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
質問や提案はありますか？コメントを残して、議論を開始してください。