Keita Yagi

ChatGPT (OpenAI) API入門シリーズ① はじめに

ChatGPT (OpenAI) API入門シリーズ① はじめに

こんにちは!KCompanyの八木です。 本日からOpenAI APIのリファレンス入門シリーズをやっていこうと思います。 基本的に本家のAPIリファレンスの内容にそってやってみた(内容をまとめてみた)、という内容になります。 一回目の今日はGETTING STARTEDの内容をやってみようと思います。 それではっそくいってみましょう!

開発環境

実際の内容に入る前に、私の開発環境についてお伝えしておきます。

  • OS: MacOS
  • Node.js: 22.1.0

ですので、原則としてNode.jsを使って説明していきます。ただし、説明の進行上、Curlを使ったものも含まれます。(APIリファレンスには他にもCurlやPythonを使ったバージョンもあります。Curlバージョンは別途またまとめるかもしれません。Pythonについては、筆者が今のところ利用するシーンが少ないため、劣後になっています。) 本投稿では、Node.jsなどの開発環境自体の構築については割愛しています。

イントロダクション

OpenAI APIは、HTTPリクエストを通じてAPI通信が可能です。基本的にどのようなプログラミング言語にも対応しているようですが、代表的なものとしてNode.js, Pythonなどがあります。開発者コミュニティによって、コミュニティライブラリも作られています。

例えばNode.jsであれば、以下でインストールが可能です。

npm install --save openai
# or
npm install openai@^4.0.0

認証

APIキー

OpenAI APIを使うには、APIキーが必要です。APIキーを使って、API利用の認証を得ることができます。APIキーは外部に漏らさないよう慎重に管理しましょう。

APIキーは、ユーザーアカウントやサービスアカウントごとに作成できます。サービスアカウントは主に本番環境へのアクセスを提供するために使用されます。

各APIキーは1.プロジェクトキー、2.ユーザーキーがあります。

  1. プロジェクトキー
    1. 特定のプロジェクト向け
    2. ユーザーキーよりセキュリティ上、優れている
  2. ユーザーキー
    1. 従来のAPIキー。ユーザーにひも付き全組織・全プロジェクトにアクセスできる
    2. 広範なアクセス権限の反面、セキュリティ上のベストプラクティスとしては非推奨

APIリクエスト時は常に以下のHTTPヘッダーを含める必要があります。

Authorization: Bearer OPENAI_API_KEY

組織とプロジェクト(オプション)

ユーザーキーを利用している場合、APIリクエストに特定の組織やプロジェクトを指定するためのヘッダーを追加する必要があります。

APIキーの取得

APIキーの取得には、OpenAIアカウントを作成・ログインし、APIキーのページに遷移してください。

Create new secret keyボタンを押下し、適切な名前等を設定してください。

APIキーはご自身で適切な場所に秘匿し保存してください。

APIキーの設定(Node.js/MacOS)

以下、Quickstartのドキュメントを参考にしています。

全てのプロジェクトでAPIキーを設定することで、SDKが自動的にAPIキーを検出してくれるため、コードを書く必要がなくなります。以下、詳細の設定手順です。

  1. ターミナルを開く
    1. アプリケーションフォルダ内にあるターミナルを開くか、Spotlight(Command + Space)を使って検索します。
  2. bashプロファイルを編集
    1. 以下のコマンドを使用して、プロファイルファイルをテキストエディタで開きます。新しいバージョンのMacOSでは~/.zshrcを使用します。
    nano ~/.bash_profile
    # or
    nano ~/.zshrc
  3. 環境変数を追加:
    1. エディタで、以下のようにAPIキーを設定します。your-api-key-hereの部分を実際のAPIキーに置き換えてください。
    export OPENAI_API_KEY='your-api-key-here'
Google アナリティクス(GA4)を設定する手順を詳細に解説

Google アナリティクス(GA4)を設定する手順を詳細に解説

はじめに

こんにちは!

先日、クライアント様から依頼を受けてGoogleアナリティクス(GA4)の設定をする機会がありました。2023年7月1日からGoogleアナリティクスが完全にGA4に移行したこともあり、今回はGoogleアナリティクスの設定について改めてまとめてみようと思います。

このブログの目的は、Googleアナリティクスをこれから設定したい人に参考になればと思っています。設定の手順を書いておけば、私自身も復習になるしGA4の知識が深まるかなと考えています。

このブログではGA4の概要を説明した上で、具体的なアカウント作成や設定方法をまとめていきます。メモ書き的な内容になりますが、手順通りにやっていけば基本的な設定は完了するはずです。ただし、レポートの読み方やGAを使ったWebマーケティングについては触れません。あくまでも「設定方法」に絞った内容になります。また、Google広告についても扱いません。

ではGA4の概要から見ていきましょう!

Google アナリティクス4の概要(GA4とは)

Google アナリティクス4ができた背景

GA4ができた背景には、デジタルマーケティングやウェブ分析の領域が急速に進化し、ユーザーの行動が複雑化したことがあります。つまり、これまでのUniversal Analyticsでは対応しきれなくなってきたんですね。具体的にはこんな状況が出てきました。

まず第一に、ユーザーの行動が複雑化し、デバイス間のシームレスな追跡が必要になりました。ユーザーは複数のデバイス(スマホ、タブレット、PCなど)を使い分けてサイトやアプリにアクセスするようになりました。GA4はこれらのデバイス間を行き来するユーザーを追跡し、一連の行動を統一したユーザージャーニーとしてとらえられるようになったんです。

次に、プライバシー規制への対応が課題となりました。最近はGDPRやCCPAなどでユーザープライバシー保護が強化され、Cookieに頼ったユーザー追跡が難しくなってきています。GA4はCookieを使わずにユーザー識別できるプライバシー重視の仕組みを取り入れているんですね。

Google アナリティクスの特徴

GA4には以下のような特徴があります。

  • イベントベースのデータ収集: セッションベースではなく、サイトやアプリ上の具体的な行動(イベント)を細かく追跡できます。
  • プライバシー管理機能: Cookieを使わない測定やユーザーモデリングなど、プライバシー保護に配慮した機能があります。
  • 予測機能: 複雑なモデルなしでユーザー行動を予測できるんです。マーケティングにも活かせます。
  • メディア連携: ウェブ/アプリ上の行動を促進するため、メディアプラットフォームと直接連携できます。

Google アナリティクス4でできること・できないこと

Google アナリティクス4でできること

  • どんなユーザーが訪れたか: どの経路(ソーシャル、検索、広告など)から訪れたかが分かります。
  • どんな経路で訪れたか: 訪問者がどのマーケティングチャネルを通じてサイトに到達したか、例えば直接訪問、検索エンジン、ソーシャルメディア経由などの情報を得ることができます。
  • どのページを見たか: サイト内のページビューデータが手に入ります。コンテンツ改善に活かせますね。
  • どのくらい見たか: 滞在時間やイベント実行からユーザーの関心度が分かります。
  • どのくらい売り上げたか: オンラインストアなら商品の売上データも把握できます。

Google アナリティクス4でできないこと

  • 自分のサイト外の行動: 自分のサイト/アプリ外での行動は追跡できません。競合サイトの動向は分かりません。
  • ページ内のどこを見たか: ページ内のどこを見ているかまでは分かりません。ヒートマップなど他のツールとの併用が必要です。

Google アナリティクス4で測定する仕組み

GA4はサイトの各ページにJavaScriptのトラッキングコードを埋め込むことで、ユーザーの行動を測定します。サイトにアクセスされると、このコードが動作して行動データ(閲覧ページ、クリックイベント、滞在時間など)を収集するんですね。

このコードを設置するには、まずGA4のアカウントを作成し、そのアカウントに対応したIDを取得します。次にこのIDが含まれるJavaScriptコードをサイトのHTMLに挿入します。サイト内の全ページにこのコードが正しく設置されていれば、GA4はサイト全体の行動を捉えられるようになります。

Google アナリティクスの基本構成

Google アナリティクスのレポートの見方

GAのレポートには、「ディメンジョン」「指標」「セグメント」という3つの主な要素があります。

  • ディメンジョン: レポート内の行の部分で、データを分類するための項目のことです。例えば「ブラウザ」はユーザーが使っているブラウザの種類を表すディメンジョンになります。
  • 指標: 列の部分で、数値で測られるデータのことです。「新規ユーザー」は設定期間内に初めてサイト/アプリを訪れた人数を指します。
  • セグメント: ディメンジョンと指標を使ってデータをさらに絞り込んだもので、条件に合うユーザーグループを指します。「東京限定」セグメントなら東京からのユーザーデータだけが表示されます。

Google アナリティクスで理解できること

Google アナリティクスを利用することで、以下の4つの重要な情報が手に入ります。

  1. ユーザー情報 – 年齢、地域、使用デバイスなど、訪問者の属性が分かります。
  2. 行動データ – ページビュー数、セッション時間、イベント発火数などからユーザーの行動が追えます。
  3. 訪問経路 – ユーザーがどの経路(検索、ソーシャル、広告など)から訪れたかが分かります。
  4. 売上データ – オンラインストアなら売上高や購入率などのビジネスデータが手に入ります。

こういった情報があれば、マーケティングや改善の意思決定がしやすくなりますね。以下の画像は上記を確認することができるGoogleアナリティクスのメニューです。…

OpenAI Visionを活用した画像検索の精度と応用について

OpenAI Visionを活用した画像検索の精度と応用について

概要

本記事では、OpenAI社のVision APIを用いた画像検索の精度とその応用について解説します。具体的には、画像から商品名を特定するケーススタディを通じて、APIの利用方法とその効果を探ります。

OpenAI Visionとは

OpenAI Visionは、画像に含まれる要素を分析し、それらに関する詳細情報を提供するAIベースのツールです。特に、画像中のオブジェクトやシーンの認識、分類に優れています。

ケーススタディ: トレファク商品紹介ブログ

方法

トレファクさんの商品紹介ブログの画像を使用し、Vision APIを用いて画像検索を行いました。以下にその手順とコードを示します。

  1. OpenAIのPythonライブラリをインストールし、APIキーを設定。
  2. Vision APIを呼び出し、画像のURLをパラメータとして渡す。
  3. 結果を受け取り、解析。
				
					pip install --upgrade openai
from openai import OpenAI
import os
import openai

os.environ["OPENAI_API_KEY"] = "your_api_key_here"
client = OpenAI()

response = client.chat.completions.create(
  model="gpt-4-vision-preview",
  messages=[
    {
      "role": "user",
      "content": [
        {"type": "text", "text": "What’s the items' name in this image? Specify the brand and series of items. If you have several names, please list up all. Answer must be in Japanese."},
        {
          "type": "image_url",
          "image_url": {
            "url": "image_url_here",
          },
        },
      ],
    
文書管理システム:効率化とセキュリティを向上させるための必須ツール

文書管理システム:効率化とセキュリティを向上させるための必須ツール

文書管理システムは、効率とセキュリティの向上に不可欠なツールです。ビジネスにおいて、情報の効率的な管理は競争力を維持するために欠かせません。しかし、古い方法ではこれを達成することは難しいかもしれません。文書管理システムは、紙ベースの文書や手動のプロセスから離れ、デジタル化されたワークフローを提供することで、企業の生産性向上に寄与します。さらに、セキュリティの観点からも重要な役割を果たします。機密性の高い情報の安全な保管やアクセス制限の設定は、文書管理システムが提供する利点の一つです。企業が情報漏洩やデータの紛失から保護され、規制や法的要件に適合することができます。文書管理システムは、効率性、セキュリティ、コンプライアンスの面で企業を強化し、競争力を高めるツールです。

本ブログでは以上に述べたような、文章管理システムに関する概説をまとめました。背景として、現在お引き受けしている仕事の一つに企業間の文章管理・やり取りを行うシステムがあり、世の中にはどのような文章管理システムがあるのだろうかといったことが気になり調べ始めました。調べてまとめ始めたら結構なボリュームになってしまいしたが、せっかくなのでブログにて公開してみます。また、近いうちに他のエントリーにて、当オフィスで開発した文章管理システムについても紹介していければと考えています。

Table of Contents

文書管理システムの紹介

「文章管理システム」とは、テキストや文章を効率的に管理、整理、保存するためのシステムです。主に次のような機能が含まれます。

  • テキストの保存と検索:文章やドキュメントをデジタル形式で保存し、必要に応じて簡単に検索できるようにします。
  • バージョン管理:文書の異なるバージョンを追跡し、過去のバージョンに戻ることができます。
  • 共同編集:複数のユーザーが同時に文書にアクセスし、編集することを可能にします。
  • アクセス権管理:特定の文書へのアクセスを制限し、ユーザーごとに異なるアクセスレベルを設定します。
  • フォーマットとテンプレート:一貫したスタイルとフォーマットを維持するためのテンプレートを提供します。

文章管理システムは、企業や教育機関、出版社など、多くのテキストやドキュメントを扱う組織にとって重要なツールです。それにより、文書の整理、コラボレーションの効率化、情報のセキュリティの向上が可能になります。

文章管理システムには、大きく分けて「オンプレミス型」と「クラウド型」の2種類があります。オンプレミス型は、自社にサーバーやストレージを設置して運用するタイプです。セキュリティやカスタマイズ性に優れている一方、初期費用や運用コストがかかります。クラウド型は、クラウドサービスとして提供されるタイプです。初期費用や運用コストが安価で、インターネットに接続できる環境であればどこからでも利用できます。

文章管理システムを導入する際には、自社の目的や予算、運用体制などを考慮して、適切なタイプを選択することが重要です。

企業における文書管理システムの重要性

企業における文書管理システムの重要性は、情報の取り扱いにおける効率性とセキュリティの強化にあります。このシステムは、文書の整理、検索、共有を容易にし、ビジネスプロセスをスムーズにします。また、重要なビジネス情報のセキュリティを確保し、規制遵守をサポートすることで、企業のリスク管理を強化します。文書管理システムは、データの整合性を保ち、企業の知的財産を保護するためにも不可欠です。これにより、企業は市場での競争力を維持し、成長を続けることができます。具体的には、以下の要素によって詳しく説明できます。

効率化と生産性の向上

  • 時間の節約:文書の検索とアクセスが迅速になり、従業員が他の作業にもっと時間を割けるようになります。
  • 自動化:一部のルーチンタスク(文書の分類、保存、更新など)が自動化され、人的エラーを減少させる。

コラボレーションの強化

  • リモートアクセス:リモートワークや異なる地域にいるチーム間での協力が容易になります。
  • 同時編集とコメント:複数のユーザーが同時に文書を編集し、フィードバックを提供できる機能。

コンプライアンスとセキュリティの確保

  • 規制遵守:特定の業界では文書の管理が法律や規制によって求められています。文書管理システムはこれらの要件を満たすのに役立ちます。
  • データの保護:機密情報が不正アクセスや漏洩から保護されます。

バージョン管理と追跡

  • 履歴の維持:文書の変更履歴を保存し、必要に応じて以前のバージョンに戻ることができます。
  • 責任の明確化:どのユーザーがいつ何を変更したかを追跡することで、透明性が保たれます。

空間とコストの削減

  • 物理的なストレージの削減:紙の文書をデジタル化することで、物理的な保管スペースの必要性が減少します。
  • プリントコストの削減:デジタル文書の使用により、印刷に関連するコストが削減されます。

情報の統合

  • 一元化された情報源:すべての文書が一つのシステムに保存されるため、情報の一貫性が保たれ、重複が防げます。

決定の迅速化

  • 情報への迅速なアクセス:必要な情報を素早く見つけることができるため、意思決定プロセスが加速します。

持続可能な環境への貢献

  • 紙の使用の減少:デジタル文書の利用により、紙の消費量が減少し、環境への影響が低減します。

総合すると、文書管理システムは企業にとって多くの利点をもたらします。これにより、業務の効率化、コスト削減、セキュリティ強化、コンプライアンスの確保、そして環境への影響削減が可能になります。特に、情報量が多く、多様なステークホルダーとの連携が必要な大企業や、高いコンプライアンス基準を満たす必要がある業界においては、文書管理システムの導入は必須の要素と言えるでしょう。

文書管理システムの特徴とメリット

文書管理システムは、文書のデジタル化、集中管理、セキュリティ強化といった多くの特徴を持っています。デジタル化された文書は、物理的なスペースを節約し、検索や共有が迅速になります。集中管理により、文書のバージョン管理やアクセス制御が容易になり、情報の整合性が保たれます。また、セキュリティ機能によって機密情報の保護が可能で、データ漏洩のリスクを減少させることができます。これらの特徴により、文書管理システムは、企業の生産性向上、コスト削減、リスク管理強化に大きく貢献します。

主な特徴とメリットを詳しく解説します。

特徴

  • デジタルストレージ:物理的なスペースを占有する紙の文書をデジタル形式に変換し、電子的に保存します。
  • 検索と検索性
GitHub CopilotとClaspによるGAS開発革命:NotionとGoogleカレンダーを活用したToDo管理ツールの作成をしてみた

GitHub CopilotとClaspによるGAS開発革命:NotionとGoogleカレンダーを活用したToDo管理ツールの作成をしてみた

GitHub Copilotとclaspの可能性

このブログの最後に、今回作成したNotionとGoogleカレンダーを連携させたGASをメルマガ登録特典として公開しています。ご興味ある方はご登録いただければ幸いです。

GAS開発の新たな可能性とGitHub Copilot、Claspの組み合わせの紹介

2023年12月29日にGitHubは「GitHub Copilot」のすべてのユーザーが、追加料金なしに「GitHub Copilot Chat」を利用できるようにしたと発表されたとのニュースがありました。これは、開発者コミュニティにとって大きな一歩であり、特にGoogle Apps Script(GAS)の開発において新たな可能性を開くものです。GitHub CopilotのAI支援機能とClaspのコマンドラインツールを組み合わせることで、GAS開発のプロセスを効率化し、生産性を大幅に向上させることが可能になります。

NotionとGoogleカレンダーを統合するToDo管理ツールの構想

GitHub CopilotとClaspを活用したGoogle Apps Script(GAS)開発の新たな可能性を探るため、NotionとGoogleカレンダーを統合する革新的なToDo管理ツールの構想を練りました。これまでのタスク管理方法は、紙やスプレッドシート、ドキュメントにToDoリストを記録し、Googleカレンダーでスケジュールを管理するというものでした。しかし、この方法では繰り返しのルーチン作業や都度の書き出しに多くの時間が割かれ、効率的ではありませんでした。

そこで目をつけたのがNotionです。既に作業用のメモとして活用していたNotionを、タスク管理にも応用することで、スムーズかつ効率的な作業フローを実現しようと考えました。さらに、Googleカレンダーとの連携により、スケジュール管理の自動化を図ることができると考えました。

このプロジェクトの目的は、GitHub CopilotとClaspを用いたGAS開発の可能性を検証することにあります。GitHub Copilotの提供するコード補完機能と、Claspのコマンドラインベースのデプロイメント機能を組み合わせることで、GAS開発のプロセスを効率化し、より洗練された形にすることが目標です。

具体的には、Notionでタスクデータベースを作成し、Notion APIを通じてGASと連携させることで、タスクの取得とGoogleカレンダーへのデータ登録を自動化します。このアプローチにより、タスク管理の繰り返し作業を軽減し、開発者がより重要なタスクに集中できるようになります。

この構想は、開発者が自身のワークフローを最適化し、生産性を向上させるための新しい道を切り開くものです。NotionとGoogleカレンダーの連携は、タスク管理の新しい可能性を提示し、GitHub CopilotとClaspの組み合わせによって、GAS開発の未来が大きく変わることを示しています。

GitHub Copilotとは

GitHub Copilotは、開発者がコーディング作業を効率化し、生産性を向上させるためのAI支援ツールです。以下にその歴史と機能について詳細を記載します。

GitHub Copilotの歴史と機能

GitHub Copilotの歴史

  • 発表: Wikipediaによれば、GitHub Copilotは2021年6月29日にGitHubによって発表されました。最初はVisual Studio Code開発環境でのテクニカルプレビューとして提供され、その後2021年10月29日にJetBrainsマーケットプレイスでプラグインとしてリリースされました。2021年10月27日にはGitHub Copilot Neovimプラグインが公開リポジトリとしてリリースされ、2022年3月29日にVisual Studio 2022 IDEでの利用が発表されました。2022年6月21日には、テクニカルプレビューを終了し、個人開発者向けのサブスクリプションベースのサービスとして提供開始されました。
  • 進化: GitHub Copilotは、2014年2月にリリースされたVisual Studio 2013用の「Bing Code Search」プラグインの進化版です。このプラグインは、MSDNやStackOverflowなどの様々なソースと統合され、自然言語のクエリに対して高品質で文脈に適したコードスニペットを提供していました。

GitHub Copilotの機能

  • コード補完: GitHub Copilotは、Visual Studio Code、Visual Studio、Neovim、JetBrainsなどの統合開発環境(IDE)でのコードの自動補完に役立ちます。Python、JavaScript、TypeScript、Ruby、Goなどの言語での使用に最適化されています。
  • 機能: 自然言語で提示されたプログラミング問題に対して、解決コードを生成する能力があります。コードの説明を英語で行ったり、プログラミング言語間でのコードの変換が可能です。GitHub Copilotには、コードコメントを実行可能なコードに変換する機能や、コードのチャンク、繰り返し部分、メソッドや関数全体の自動補完機能が含まれています。
  • サポート言語とプラットフォーム: GitHub Copilotは、公開リポジトリに含まれる自然言語テキストとソースコードに基づいてトレーニングされた、GitHub、OpenAI、Microsoftによって開発された生成AIモデルによって駆動されます。これにより、さまざまなプログラミング言語でのサポートが可能になっています。

詳細な情報については、GitHub Copilotの公式ウェブサイト(GitHub Copilot)を参照してください

GitHub Copilotの概念とGPT-4との違い

こちらの記事(英語) によればGitHub CopilotはMicrosoftによって開発され、主にコーディングを支援することに特化しています。一方、ChatGPTはOpenAIによって作られ、より広範な会話型AI能力を提供します。両者は高度なAIを使用していますが、それぞれ異なる特化領域があります。

以下ではこちらの記事を参考に、GitHub CopilotとGPT-4の違いをまとめてみます。

GitHub Copilot

  • 開発者: GitHub CopilotはGitHubとOpenAIによって共同開発されました。主に統合開発環境(IDE)内でのコード補完に特化しており、コード行や関数全体の提案を直接提供します。
  • 特化領域: GitHub Copilotは、Visual Studio、VS Code、Neovim、JetBrainsなどのIDE内で使用されることに重点を置いており、GitHubなどの大量のコードからトレーニングされています。これにより、大規模なコードの文脈を分析することができます。
  • 技術基盤: GitHub
ChatGPT(GPT-4)とプロンプトエンジニアリングでプログラミングを効率化する

ChatGPT(GPT-4)とプロンプトエンジニアリングでプログラミングを効率化する

前回「Generative AI (ChatGPT) × SpreadSheetで業務効率化/自動化」という記事を書きました。記事の中では、GenerativeAI全般とどのように付き合っていくか、その全体的な指針となるようなものを個人的な整理も兼ねてまとめました。
最近遅ればせながら、ChatGPT PlusでGPT-4を使い始め、コーディング能力の高さに感動したので、今回のブログではGPT-4を使って、プログラミングを効率化する方法を探って(まとめて)いきたいと思います。

趣旨としては以下になります。

  1. ChatGPT(GPT-4)になるべくコーディングを任せて、プロトタイプやサンプルプログラムを素早く作ることができるのではないか。
    • 本実装までのリードタイムを短くすることができるのではないか。
  2. テストやリファクタリング、仕様書作成なども一部任せることができるのではないか
    • 納品までのリードタイムも短くできるのではないか。
    • もしくは、限られた時間の中で、お客様へのヒアリングや改善提案など(今の所)人間にしかできないインサイトが必要な事柄に時間を割くことができるようになるのではないか。それによって、より創造的な仕事ができるようになるのではないか。
  3. 上記を達成するために、適切なプロンプトエンジニアリングを行う方法を習得・開発することが必要ではないか。

今回のブログでは1を念頭において、3について調査やまとめた内容を公開します。また、それを踏まえて、実際にGoogle Apps Scriptを対象として、実用的なアプリケーションをChatGPT(GPT-4)になるべく任せる形で作っていく試みをします。

正直なところ、1についてはGitHub Copilot Xもリリースされていますし、いわずもがな、な部分はあるかもしれません。とはいえ、いったん今の所の状況整理の意味も兼ねて改めてまとめてみたいと思います。

目次

ChatGPTとプロンプトエンジニアリング

プロンプトエンジニアリングとは何か

今回、ChatGPT(GPT-4)にきちんと指示・命令を出すためにも、改めてプロンプトエンジニアリングについてまとめてみます。前回の「Generative AI (ChatGPT) × SpreadSheetで業務効率化/自動化」に「ChatGPTの使い方(プロンプトデザイン)」という部分でも一部まとめてがありますので、こちらも別途ご覧ください。

さて、プロンプトエンジニアリングとは、人工知能や機械学習の一分野で、コンピューターやAIに指示や質問を与える際に、どのように文章や情報を提示するかを工夫する技術のことを言います。これにより、コンピューターやAIがより効果的に理解し、正確で役立つ回答や結果を提供できるようになります。

例えば、学校で先生が「この数式を解いて」と言ったとき、生徒はどの数式を解けば良いかを理解する必要がありますね。プロンプトエンジニアリングも同様で、AIに与える情報や質問の仕方を工夫することで、AIが望ましい答えを導き出せるようになります。

Prompt Engineering Guide

プロンプトエンジニアリングに関して、良い教材を見つけました。Prompt Engineering Guideというサイトです。このサイトはDAIR.AIのプロジェクトで、Prompt Engineeringについて、研究者や実践者に教育することを目的としているそうです。有志で日本語訳が随時行われており、大変参考になりますので、ぜひアクセスしてみてみてください。以下では、個人的に気になった・有用に感じた部分を抜粋していきます。

まずは基本となるプロンプトの要素についてです。単に命令するだけでなく、文脈や入力データ、出力指示子をいれるとより正確な回答が得られやすいということですね。

プロンプトの要素

WP見出し用画像_ブログVol.24

Generative AI (ChatGPT) × SpreadSheetで業務効率化/自動化

ChatGPTに代表されるGenerative AIが一大トレンドになっています(2023年3月20日現在)。当オフィスではいわゆるDXの一環である業務効率化や自動化をサポートする観点から、Generative AIをどのように活用できるのかを、このブログを通じて考察してみたいと思います。

なお、このブログの最後に、ChatGPT APIをGoogle SpreadSheet内の関数として動かしたサンプルのスプレッドシートをお配りしています!ご興味のある方は、ぜひご活用ください。

 

目次

Generative AIとは何か

さて、まずGenerative AIとは何でしょうか。後述もしますが、試しにNotion AIを使ってGenerative AIとは何かを説明してもらいました(この記事を書いている最中、ちょうどChatGPTはサービスダウンしていました)

 

Generative AIとは、大量のデータから学習したAIモデルが新しいデータ(文章、画像、音声など)を自動生成する技術のことです。AIが学習データからパターンを見つけて、そのパターンに基づいて新しいデータを作り出すのです。代表的なGenerative AIモデルにGPT-3などがあります。

Notion AI

もっともらしい回答が返ってきましたね!比較のために、Google検索で見つけた産総研マガジンに記載されていた「ジェネレーティブAI」とは?の記述も確認してみましょう。

Gartner社が2022年の「戦略的テクノロジーのトップ・トレンド」として発表したキーワード「ジェネレーティブAI」。ジェネレーティブAIとは、「コンテンツやモノについてデータから学習し、それを使用して創造的かつ現実的な、まったく新しいアウトプットを生み出す機械学習手法」と言われています。データ駆動型のAIが得意とする「データがたくさんある世界」だけで活躍する技術ではなく、少ない情報から新しいことを生み出せるなど、データが十分でない領域に踏み出す技術、という点で「次世代のAI技術」のひとつとして注目されています。

産総研マガジン

Generative AI自体の定義に幅はありそうですが、これら2つの結果を簡単にまとめると、大量のデータモデルを予め学習させた上で、新しいコンテンツ(文章、画像、音声など。今後は動画や3Dモデルも容易になりそう)を、大量に生成していくことができる、ということになりそうです。筆者はAIや機械学習の専門家ではありませんが、様々な記事やメディアで得た知識を元に総合的に主観で判断する限り、NotionAIの回答は問題ないレベルなのではないかと思われます。

Generative AIに関する最近のニュースのまとめ

このブログを書いているそばから、日々矢継ぎ早に新しい発表があるため、この段落を設けました。以下は最近発表のあったニュースやプレスリリースのまとめです。BIG Tech系の目立ったニュースしか載せてませんが、当然これらにも多種多様な発表やAPI使った新しいサービスが雨後の筍のように出てきているような状況です。正直ChatGPTがサービスダウンしている状況に少しホッとしていたりします。

Vuetifyを使ったUI作成 スマホ対応サイトをいい感じに作る

Vuetifyを使ったUI作成 スマホ対応サイトをいい感じに作る

このブログでは、スマホ対応をいい感じに行うことができるVuefityというフレームワークで作成したページのご紹介をいたします。

早速ですが、こちらからアクセスすることが可能です。 それぞれのメニューから、各コンポーネントなどの動作確認をすることができます。 このページは随時更新を行って行く予定です。 どんなことを行えるかについては、後ほど詳しく解説いたします。

目次

スマホ対応サイトの重要性について

なぜスマホ対応が必要なのか

最近のホームページ(Webサイト)制作においては、スマートフォン対応はもはや必須のものとなっています。
ところで、なぜこれほどまでにスマホ対応が求められているのでしょうか?

スマートフォンは、私たちの生活、仕事、コミュニケーションのあり方を大きく変えました。スマートフォンは私たちの生活の重要な一部であり、ほんの10年前には不可能だった信じられないほど幅広い機能にアクセスすることができるようになりました。また、Googleでは「モバイルファースト インデックス」を行っています。2015年4月以降はモバイル(スマホ)対応サイトを優先的にインデックスしています。以下はモバイルサイトとモバイルファースト インデックスに関するおすすめの方法からの抜粋です。

Google のインデックス登録とランキングでは、スマートフォン エージェントでクロールしたモバイル版のサイト コンテンツを優先的に使用します。これをモバイルファースト インデックスと呼びます。

モバイルサイトとモバイルファースト インデックスに関するおすすめの方法

なお、自分のサイトがモバイルフレンドリーかをチェックすることもできます。こちらのモバイルフレンドリーテストで自社ドメインを入力して1-2分待つことで、結果を教えてくれます。

こうしたデバイスの普及や検索アルゴリズムの変更によりスマホサイトの重要性が一気に増加しました。今となっては日常使いするレベルのアプリやWebサイトにアクセスする程度であれば、デスクトップパソコンを広げることもなくスマホを利用すれば十分です。何か新しいサイトやサービスに触れるとき、当然のようにスマホに手を伸ばしアクセスしてみる、といった行動が自然と生まれることに違和感はありませんよね。これらのことは、あまり深く考えることもなく実感値として感じていただける方が多いのではないでしょうか。

しかしながら、世の中にはスマホ対応がしきれていないサイト・サービスが多くあります。また、新しいサイト・サービスを立ち上げるにあたり、スマホ対応をどうすればよいかわからないといった声も聞きます。近年、テクノロジーおよびそれを取り巻く世界は劇的に変化しており、もしあなたのウェブサイトがモバイル対応でなければ、大きなハンディキャップを背負っていくことになります。

いつでもどこでもサービスにアクセスできるといった状態が当たり前に求められる今日のデジタル社会で成功するためには、スマホ対応が前提のサービスを提供することの重要性を理解することが、最優先事項であるべきと考えます。

スマホ対応とレスポンシブ対応の違い

ところで、スマホ対応といったとき、レスポンシブ対応という用語についても聞く機会があるかと思います。この違いについて説明をしておきます。

スマホ対応とは、Webサイトをモバイル端末向けに最適化し、特定の機能や美観を実現する手法のことです。
画像を小さくしたり、ナビゲーションを簡略化したり、必要なサービスやコンテンツだけにアクセスできるようにしたりします。

一方、レスポンシブ対応とは、最高のユーザー体験を提供するために、閲覧するデバイスにリアルタイムで対応するウェブサイトを設計することです。
ディスプレイの大きさに応じて視覚的に調整するだけでなく、ユーザーの操作に応じて異なるコントロールやコンテンツを提供するウェブページを開発することも含まれます。レスポンシブ対応で最も重要なことは、ユーザーが複数のデバイスを使用する際に制限を受けないよう、シームレスなエクスペリエンスを実現することでしょう。

したがって、スマホ対応を行う一環としてレスポンシブ対応を行っていくという理解になるかと思います。
レスポンシブ対応をしただけでは、スマホで見たときに対応が不十分である場合もあります。
そのため、最終的にはデスクトップPC版・スマホ版をそれぞれ確認しつつ、スマホでの表示が最適になるように調整を行うことが必要になってきます。

デスクトップPC版とスマホ版を効率よく開発しユーザーエクスペリエンスを損なうことなくサービス提供を行うためにも、レスポンシブ対応はとても重要といえるでしょう。

必要に応じてデバイスを使い分けたいといったユーザーからすると、デスクトップPC版とスマホ版でUI/UXが異なっていると不便です。また、開発者としても同時に開発を行っていくことで開発効率を上げることができます。

このレスポンシブ対応を行うために、今回はVuetifyというフレームワークを利用していきます。

Vuefityを使ったスマホ対応サイトについて

Vuetifyとスマホ対応およびレスポンシブ対応の関係

まずVuetifyとは何でしょうか。

Vuetifyは、Vue.jsでユーザインタフェースを作成するためのフレームワークです。
すぐに使えるコンポーネントがたくさん用意されているので、自分で作成する手間が省ける、という点が特徴です。
このコンポーネントがPC/スマートフォン両方サポートしているため、スマホ対応が可能になる、ということです。

正確にはVuetifyで行っていることは所謂レスポンシブウェブデザインというものです。レスポンシブデザインとは、デスクトップ版のウェブページとスマホやタブレットのウェブブラウザのサイズにあわせて表示できるようにする技法のことを指します(以下、レスポンシブ対応)。

先程も申し上げたように最終的には、レスポンシブ対応後にスマホ最適な調整を行いますが、これらもVuetifyを利用して行っていきます。

補足:Vue.jsとは何か

Vuetifyは、Vue.jsでユーザインタフェースを作成するためのフレームワークと、先程述べました。ここでVue.jsについても補足説明をしておきます。
Vue.js公式サイトによれば、Vueの定義は以下の通りです。

 

Vue (発音は /vjuː/、view と同様) は、ユーザーインターフェースの構築のための JavaScript フレームワークです。標準的な HTML、CSS、JavaScript を土台とする、コンポーネントベースの宣言的なプログラミングモデルを提供します。シンプルなものから複雑なものまで、ユーザーインターフェースの開発を効率的に支えるフレームワークです。

Vue とは?

Vue.jsはその軽量なサイズと習得しやすい構文により、開発者の間で急速に絶大な人気を博し、開発者はプロジェクト開発に素早く取り掛かることができます。

軽量であるだけでなく、Vue.jsは双方向バインディング、再利用可能なコンポーネント、直感的なAPIセットアップなどの機能を完全に備えており、インタラクティブなユーザー体験を作成するための汎用的なオプションとなっています。

AngularやReactJSのような他の人気のあるフレームワークと比較して、Vue.jsは、そのシンプルな使用と小さなバンドルサイズのおかげで際立っています。このため、小規模なチームや限られたリソースで作業するWeb開発者にとって魅力的な選択肢となります。

この最新のフレームワークについてもっと知りたい、プロジェクトですぐに使い始めたいという人のために、この強力なツールを最大限に活用するための出発点を提供する、役に立つオンラインチュートリアルがたくさんあります。詳細は公式サイトのガイドチュートリアルを参考にするとよいでしょう。

Vuetifyを使ったUIの事例集

Wireframes

Vuetifyによく使うレイアウトをまとめたWireframesがあります。

2023年2月18日現在の私の作ったサンプルページではBaselineを使っています。

他のコンポーネントは公式サイト内にコードがのっているのですが、WireframesについてはGithubのexamplesの中にありました。

Navigation drawers

いわゆるハンバーガーメニューをポチッと押すと、左側メニューがにゅっとでてくるやつですね(何を言ってるのかよく分からないかもしれませんが、、、)

Navigation drawersを使うことで実現できます。メニューを出す位置だったり、メニューを出す挙動(クリックで出すかマウスオーバーでだすか)だったり、背景イメージだったり様々な設定を行うことができます。

Vuetify_NavigationDrawers

Lists

Listsを使うことで上記画像の「Dashboard」や「Account」などのリスト表示を行うことができます。

その他の内容

今後随時更新予定です。

補足:Netlifyを使ってプロジェクトを公開する

Netlifyを使うことで、ローカルで開発したプロジェクトをWebへ公開することができます。 本ブログで紹介しているサンプルページもNetlifyを使って公開しています。 ここでは公開する手順を備忘録的にまとめてみます。 なお、Vue/Vuetifyでのプロジェクト構築は一通り完了している前提で話をしていきます。

WP見出し用画像_ブログVol.22

Webフォーム作成ツール5選!無料・有料問わず、徹底比較してみた

Webフォームの作り方

Web フォームはウェブサイトの訪問者や顧客からデータを収集するための優れた方法です。お問い合わせフォームはもちろん、顧客へのアンケートやイベント登録、メルマガ購読の案内といった使い方が代表的でしょうか。最近ではこうしたマーケティングリードを獲得する以外に、FAQやチャットルームといったカスタマーサクセスの文脈でも利用される場合もあります。このように、Web フォームは人々がウェブサイトで何を探しているのか何を必要としているのかどのようにすれば彼らの体験を改善できるのかを理解するのに役立ちます。

しかしどのようにすれば Web フォームを作成することができるでしょうか。もちろん自作をするという方法もありますが、それにはお金や時間といった学習コストがかかります。そうした場合には、Web フォーム作成ツールを使えばいいのです。このブログでは無料有料問わず17種類の Web フォーム作成ツールをご紹介します。これらのツールの詳細と、どのツールがあなたに適しているのか、ご覧ください。

Webフォーム作成ツールの種類

一口に Web フォーム作成ツールと言っても様々な種類があります。ここでは、最近の一般的なWebフォーム作成ツールの種類について挙げていきたいと思います。

最近主流でかつ人気なWebフォーム作成ツールはなんと言っても、ノーコード系のものでしょう。基本的にWebフォームの項目をドラッグアンドドロップで設計でき、任意でテキストや画像、その他のデザインを指定するだけで簡単にカスタムフォームをデザインすることができます。ノーコードというようにコーディングのスキルは必要とされません。

次にウェブサイトの所有者や開発者が WordPress やその他の CMS(コンテンツ管理システム)に直接フォームを追加することを可能にする、フォームビルダープラグインがあります。Wordpressなどではプラグインを追加し、管理画面でノーコードツールと同様に基本的にコーディング不要で設置することができます。

また、ツールではありませんがコーディングを行い独自のフォームを開発するという方法もあります。HTMLコーディングが基本ですが、最近は様々なフロントエンド技術の発展により以前よりも柔軟性が高くセキュリティ要件も担保しつつ開発を行うことが可能な環境が整ってきているのではないでしょうか。

また、ツールではなくサービスとなるため、上記にあげたものとは少し毛色は異なりますが、アンケートやリサーチだけを目的とするならば、オンラインアンケートサービスを使うという方法もあります。アンケートを取得したい項目を指定すれば一定期間でアンケート結果が得られるというものになります。

Webフォーム作成ツールのメリット

Webフォーム作成ツールは、利用する企業にとって多くのメリットがあります。

  1. 専門知識がなくても多種多様なフォームが簡単に作成できる
  2. 集計や管理が楽に行える
  3. 効果測定や検証も行うことができる
  4. セキュリティ面の対策がなされている

まずノーコード系ツールに代表されるように、専門的な知識がなくても簡単にフォームを作成することができる点が挙げられます。様々な種類のテンプレートが用意されているため、デザインに時間をかけることなく、必要なフォームをすぐに作成することができます。

そして、アンケート結果や顧客データを、スプレッドシートやデータベースに手入力することなく、簡単に顧客データを収集することができます。Webフォーム作成ツールの中には、自動化機能として御礼メールやステップメールなどのワークフロー機能を備えているものもあります。

さらに、これらのツールのほとんどは、広範な分析機能を備えており、時系列でのパフォーマンス追跡や、フォームから送信された個々のレポート作成が容易に行えます。

最後に、セキュリティ面です。Webフォーム作成ツールの中には、reCAPTCHAやGDPR対応がなされているツールもあります。reCAPTCHAを用いればbotによるスパム攻撃を防ぐことができます。海外からのアクセスや事業展開をされている企業であれば昨今GDPR対応は必須の流れとなっています。これらのセキュリティ対策が行われていることは企業内の稟議や監査を通す意味で重要となるケースもあります。

Webフォーム作成ツールのデメリット

それでは逆に、Webフォーム作成ツールのデメリットはなんでしょうか。

  1. 基本的に有料であり、サブスクリプションモデル
  2. ツールの学習コストがかかる
  3. スイッチングコストが高い
  4. 他ツールや社内システム連携がしにくい

Webフォーム作成ツールのデメリットの一つに、費用面が挙げられます。多くのWebフォーム作成ツールはいわゆるSaaSとして提供されており、その料金体系は重量課金型のサブスクリプションモデルとなっています。その料金体系もツールによって様々であり、購読料が必要なものもあれば、ユーザーごと、またはツールのインターフェースから送信された内容ごとに課金されるものもあります。そのため、価格面からみた製品比較が容易ではありません。

また、学習コストが発生する点もデメリットとして挙げられるでしょう。GoogleスプレッドシートやMicrosoftのエクセルは、多くのオフィスワーカーにとって標準的なスキルセットとなりつつあるため、これらを用いたデータ管理であれば、それほど学習コストはかからないと想像できますが、Webフォーム作成ツールを扱うとなるとそうはいきません。各ツールごとに設計思想からインターフェースが異なるため、利用者として「自走」状態でツールを活用できるまでには、時間とコストが必要になります。また、その知見を社内やチームに広めていくといった努力も必要になってきます。よくあるパターンとして、ツールを導入したものの高機能すぎて使いきれなかったり、結局データをスプレッドシートに連携したりエクセルにダウンロードして使うといった失敗例が挙げられます。

また、製品によっては、各製品やサービスプロバイダーが提供する機能が異なるため、ユーザーがあるプラットフォームから別のプラットフォームへ移行する場合、時間とコストの面で切り替えコストが高くなることがあります。

データをスプレッドシートや他のデータベース管理ツールと連携できるものもありますが、それらは有料であったり手動での作業を挟むといった不便さを内包しているツールが多いのが現状です。ツール提供企業としてはスイッチングコストを高くすることで顧客およびデータを囲い込みたいため、そうした事柄は当然とも言えるかもしれません。

さらに、特定のWebフォーム作成ツールを使用する場合、市場でさまざまなベンダーが使用するソフトウェアプログラム間の互換性の問題により、外部システムと内部システムの統合が困難な場合があります。結果的に社内の他のシステムとの連携が行いにくいといった課題が生まれる原因にもなりえます。

以上で、Webフォーム作成ツールの種類やメリット・デメリットについて大枠の概要をお伝えしてきました。以下では実際に市場で提供されている様々なツールについて個別にレビューをしていきます。なお、これらのレビューについては筆者の私見である点についてご留意ください。また、2022年12月時点の内容であるため、今後各ツールで提供されているサービス内容などに変更がある場合があることを予めご了承いただければ幸いです。

Webフォーム作成ツール・サービス17選

formrun(フォームラン)

高品質なフォームを30秒で作成することができるというキャッチフレーズなのがformrunです。集計データはリスト以外にボード(カンバン形式)で表示できるなど、運用面での配慮が行き届いている印象があります。
Webフォーム作成ツール19選!無料・有料問わず徹底比較してみた2

以下、筆者が利用してみて感じた「メリット」「デメリット」「料金」「セキュリティ」についてまとめます。

  • メリット
    • 国産SaaSであるため、UI/UXが日本国内の個人・法人にとって使いやすい印象がある。
    • デザイン的に洗練されたフォームがサクッと作ることができる
  • デメリット
    • データをformrun以外に外部連携する方法としてGoogleSpreadsheetやMailchimp連携があるが、STARTER,PROFESSIONALにアップグレードが必要である。
      • 特にGoogleスプレッドシートの自動出力はPROFESSIONALで月額25,800円(年間309,600円税抜)とそこそこの値段がする。
    • 複数フォームを使った場合のデータ統合がデフォルトではできない(これもスプレッドシート連携が必要になる)。
    • フォーム作成数が無制限になるのはPROFESSIONALからである。
    • 業務システムとして発展させていこうとすると、SaaSなので制約が生じる(結局のところPROFESSIONALに契約しないといけなくなる→3年契約すると100万弱になる)。
  • 料金
    • PROFESSIONAL
      • 25,800円/月
      • フォーム作成数:無制限
      • チームメンバー数:10人
      • 添付ファイルの保存容量:30GB
      • 個別メール送信数:無制限
      • その他、全機能が利用可能
    • STARTER
      • 12,980円/月
      • フォーム作成数:50個
      • チームメンバー数:5人
      • 添付ファイルの保存容量:10GB
      • 個別メール送信数:無制限
      • 機能制限あり。Googleスプレッドシート連携(自動更新)などは行えない
    • BEGINNER
      • 3,880円/月
      • フォーム作成数:5個
      • チームメンバー数:2人
      • 添付ファイルの保存容量:5GB
      • 個別メール送信数:250通/月
      • 機能制限あり。フォーム送信前の確認画面表示、formrunクレジット非表示のみ利用可能
    • FREE
      • 0円/月
      • フォーム作成数:1個
      • チームメンバー数:1人
      • 機能制限あり。
  • セキュリティ

 

Hubspot(ハブスポット)

Hubspotは米国製のマーケティングプラットフォームツールです。CRM(カスタマーリレーションシップマネジメント)、SFA(セールスフォースオートメーション)、MA(マーケティングオートメーション)まで統合的になんでもやってくれるサービスとなります。

マーケティングから営業、コンテンツ管理、カスタマーサービス、オペレーションに至るまで、HubSpotのCRMプラットフォームはさまざまな業務に欠かせないツールや連携機能を備えています。プラットフォーム上の各ソフトウェアは単体でも大きなメリットがありますが、組み合わせることで何倍もの効果を発揮します

Hubspot公式サイトより
Webフォーム作成ツール19選!無料・有料問わず徹底比較してみた3

以下、筆者が利用してみて感じた「メリット」「デメリット」「料金」「セキュリティ」についてまとめます。

  • メリット
Googleフォームでお問い合わせフォームをhtmlを使い作成する - Step by Stepガイド

Googleフォームでお問い合わせフォームをhtmlを使い作成する Step by Stepガイド

Googleフォームでお問い合わせフォームを作りたいですか?そんな方のためにこの記事をまとめました。この記事では Googleフォームでお問い合わせフォームを作成する方法を一通りまとめました。それぞれの方法でどのようにすればお問い合わせフォームが作成できるかも手順を追って説明しています。Googleフォームで素晴らしいお問い合わせフォームを作る秘訣を学び始めましょう!

Googleフォームでお問い合わせフォームを作る方法

Googleフォームは今日のビジネスにとって必要不可欠なツールとなっています。Google フォームはユーザーと回答者の両方にとって便利で、素早く簡単に情報を集めることができる素晴らしい方法です。Google フォームでは、ウェブサイトに埋め込む、既存のフォームにリンクする、あるいは独自のカスタムフォームを作成して使用する、などの方法でコンタクトフォームを作成することが可能です。

Googleフォームでお問い合わせフォームを作成する方法は以下の5つの方法になります。

  1. リンクを埋め込む
  2. HTMLコードを埋め込む
  3. Gmailに埋め込む
  4. 自作フォームと連携する(HTML/CSS)
  5. 自作フォームと連携する(Vue.js)

①Googleフォームで作ったお問い合わせフォームにリンクさせる

この方法が最も手軽にウェブサイトにお問い合わせフォームを導入することができます。

Googleフォームでお問い合わせフォームの項目を入力して作成し、発行したURLをお持ちのウェブサイト上のテキストや画像などにリンクさせるだけです。

上場企業の採用募集ページやメルマガ登録でもこの方法でフォームを設けているところはあります。

素早く作成し既存サイトのテキストに載せるだけといった手軽さがメリットですが、リンククリックでの遷移となるため、ウェブサイト内で完結しない、外部サイト(Googleフォーム)へ遷移してしまう(そのためコンバージョンの計測もできない)、デザインはGoogleフォームで可能なカスタマイズに限られるためデザイン性に乏しいといったデメリットがあります。

具体的には下記のような方法で導入することができます。

【STEP①-1】Googleフォームでお問い合わせ用のフォームを作成する

まずGoogleフォームでお問い合わせに必要な項目を入力してお問い合わせ用のフォームを作成します。

Googleフォームでお問い合わせフォームをhtmlを使い作成する Step by Stepガイド 1

上の画像の右上の「送信」ボタンを押すと下記のウィンドウが表示されます。

Googleフォームでお問い合わせフォームをhtmlを使い作成する Step by Stepガイド 2

こちらで表示されている「リンク」のURLをコピーします。「URLを短縮」をクリックして短縮URLを使って頂いても問題ありません。

【STEP①-2】ウェブサイトでGoogleフォームで作成したお問い合わせ用のフォームをリンクさせる

Googleフォームでお問い合わせフォームをhtmlを使い作成する Step by Stepガイド 3

上記はWordpressの投稿ページでの設定になりますが、リンクを指定したいテキストを選択して、先ほどコピーしたURLをリンク先に指定します。HTMLの場合はhrefでURLを指定します。

Googleフォームでお問い合わせフォームをhtmlを使い作成する Step by Stepガイド 4

サイト側へ反映されれば指定したテキストがリンクテキストになります。

リンクテキストをクリックすることで、作成したGoogleフォームへ遷移します
なお、作成したGoogleフォーム側では回答がきちんと集計されることを確認しておくと良いでしょう。

②Googleフォームで作ったお問い合わせフォームをhtmlコードで埋め込む

2番目の方法として、Googleフォームで作ったお問い合わせフォームをHTMLコードで埋め込む方法をご紹介します。

この方法を用いると、既存のウェブサイト内に作成したGoogleフォームを表示させることができるようになります。①で問題であったお問い合わせフォームが外部サイトに遷移してしまい既存サイト内で入力を実施することができないといった問題点を解消することができます。

とはいえ、Googleフォームを埋め込んでいることに変わりはないため、デザインはGoogleフォームで指定したデザインがそのまま表示されます。そのため、既存ウェブサイトのデザインと馴染まず違和感を覚えることになる可能性が非常に高いです。もしこの方法を利用する場合は、Googleフォーム側でデザイン面を既存サイトになるべく合わせるといった工夫が必要になります。

具体的には以下の方法で導入することができます。

【STEP②-1】Googleフォームでお問い合わせ用のフォームを作成する

基本的なやり方はSTEP①-1と同じです。今回はヘッダー画像を中心にテーマ設定を変えてみることにしてみます。なお、後述の表示にもあるように、画像の通りGoogleフォーム側でヘッダー画像を設定してみても、今回の方法ではヘッダー画像は反映されないことにご注意ください。(ヘッダー画像が反映されないことの確認のために、この記事ではあえてヘッダー画像を指定しています)
Googleフォームでお問い合わせフォームをhtmlを使い作成する Step by Stepガイド 6

こちらもSTEP①-1同様に「送信」ボタンを押し、「<>」のアイコンでHTMLを埋め込む再のHTMLのタグを取得します。下記画像の「コピー」ボタンを押下でコピーをします。

【STEP②-2】Googleフォームでお問い合わせ用のフォームをHTMLで埋め込む

先ほど取得したHTMLを既存のサイト内に埋め込みます。下記はWordpressで埋め込んでいる様子です。
Googleフォームでお問い合わせフォームをhtmlを使い作成する Step by Stepガイド 11

サイト側に反映することができれば、以下のように既存サイト内に直接Googleフォームで作成したお問い合わせフォームを表示することができるようになります。以下では本記事の冒頭にお問い合わせフォームを設置してみた様子です(現在は削除しているのでこのお問い合わせフォームは表示されていないことにご注意ください。)

【STEP②-3】Googleフォームでお問い合わせ用のフォームのサイズを調整する

さて、上記では特に問題はないのですが、場合によりサイトの横幅や縦幅の都合上、表示するGoogleフォームを調整したいといった場合があるかと思います。その場合の調整方法をご紹介します。

Googleフォームでお問い合わせフォームをhtmlを使い作成する Step by Stepガイド 8

まず、調整したいサイトをGoogle Chromeで開き、調整したい画像などの上で右クリックをして「検証」からGoogle Developer Consoleを開いてください。

Googleフォームでお問い合わせフォームをhtmlを使い作成する Step by Stepガイド 9

そうすると上記赤枠画像のようにサイズを確認することができます。今回はタイトルロゴ画像の横幅サイズに合わせるといったことをやってみたいと考えたとします。

STEP②-1でお伝えしたHTML取得の際に、幅を上記画像の表示サイズ973ピクセルに合わればOKです。

③Googleフォームで作ったお問い合わせフォームをGmailで送信する

3番目の方法として Google フォームで作ったお問い合わせフォームを Gmail で送信する方法についてお伝えします。

この方法を用いると指定したメールアドレスに対して、メールの本文の中もしくはリンクテキストでお問い合わせフォームを送ることができます。

メールですので、既存のウェブサイトのデザインとは独立してお問い合わせフォームを送ることができます。

ただし、こちらの方法もこれまでご紹介してきた方法と同様にデザインのカスタマイズ性は乏しいです。最低限カラーイメージを揃えるなどしか行うことはできません。これらの制限は特に気にせず手早くメールでお問い合わせフォームを送りたいという場合に適しているでしょう。

具体的には以下の方法で導入することができます。

【STEP③-1】Googleフォームでお問い合わせ用のフォームを作成する

Googleフォームでお問い合わせフォームをhtmlを使い作成する Step by Stepガイド 13

まず前述してきた方法と同様にお問い合わせフォームを作成します 。そして、右上に表示されている「送信」ボタンをクリックします。

Googleフォームでお問い合わせフォームをhtmlを使い作成する Step by Stepガイド 14

【STEP③-2】Googleフォームでお問い合わせ用のフォームをメールで送信する設定を行う

送信方法でメールのアイコンを選択しましたら各項目を埋めていきます。

① 送信先を指定します。こちらにはメールアドレスを指定することができます。メールアドレスはコンマで区切ることによって複数の送信者に対して送ることができます。

②次に件名を決めます。そのままメールの件名となりますので、相手にとってわかりやすい件名を心がけるとよいでしょう。

③その次にメッセージをきめます。こちらは本文のお問い合わせフォームないしお問い合わせフォームへのリンク前に掲載されます。シンプルなものがよいでしょう。

④最後にフォームをメールに含めるかどうかを決めます。「フォームをメールに含める」のチェックをクリックすることでメールで送信される際に、メールの本文にお問い合わせフォームが表示されるかどうかを選択することができます。

最後に送信ボタンを押すことによって指定した送信先にメールが送信されます。

【STEP③-3】メールでGoogleフォームで作成したお問い合わせ用のフォームが送信されることを確認する

 
Googleフォームでお問い合わせフォームをhtmlを使い作成する Step by Stepガイド 15

こちらは「フォームをメールに含める」を選択した場合に送信先に受信されるメールになります。ご覧のようにメール本文の中にお問い合わせフォームの内容が反映されています。

 

そしてこちらは「フォームをメールに含める」にチェックを入れなかった場合のメールになります。ご覧の様にメールの中にはお問い合わせフォームは含まれずフォームに記入するというリンクだけが表示されています 。

 「フォームをメールに含める」にチェックを入れるかどうかはケースバイケースで、ご自身のご利用状況に合わせて選ぶのがよいでしょう。

④Googleフォームで作ったお問い合わせフォームを自作フォームと連携させる

4番目の方法として Google フォームで作ったお問い合わせフォームを自作フォームと連携させる方法についてお伝えします。

こちらのメリットとしては 、既存や新規で立ち上げるウェブサイトのデザインに組み込む形で作成ができますので、デザイン面でのカスタマイズやコントロールを確実に行うことができるという点が挙げられます。また、Google Analytics を使ってコンバージョン計測も行うことができます。これまで挙げてきた3つの方法ではこれらのことを行うことができませんでした。

一方で、HTML フォームを自作するということになりますので、それなりに工数がかかることにもなりますし、フォームのバリデーションやセキュリティーなどの面についても、同時に考慮することが必要となってきます。

【STEP④-1】Googleフォームでお問い合わせ用のフォームを作成する

まずこれまでと同じようにお問い合わせフォームを Google フォームで作成します。

Googleフォームでお問い合わせフォームをhtmlを使い作成する Step by Stepガイド 17

その次に「送信」ボタンを押して下記のウィンドウを表示させます。

Googleフォームでお問い合わせフォームをhtmlを使い作成する Step by Stepガイド 18

画像のようにリンク URL をコピーして、Google Chromeなどのブラウザで実際にGoogleフォームを開きます。

【STEP④-2】Googleフォームで作成したお問い合わせフォームで必要な情報を抜き出す

下記はGoogle Chromeでの実行例になります。

Googleフォームでお問い合わせフォームをhtmlを使い作成する Step by Stepガイド 19

Google フォームのお問い合わせフォームを開きましたら、右クリックをして、検証をクリックします。

Google Chrome のデベロッパーコンソールを開いてElemntsでHTMLを表示します。