見出し画像

Gemini ProをWebサイト制作に活用 生成AIで関連リンクを作って導線を改善

イー・エージェンシーで広報・PRを担当しているノンプログラマーの甲斐大樹です。
Webサイトで関連リンクを作るのはなかなか大変ですよね。
今回は生成AIのGemini Proを使って、関連リンク先となるコンテンツを探す試みを行ってみました。


関連リンクを作って導線を改善する

サイト運用において、コンテンツの量を増やすことは大切ですが、それと同じくらい大切なのが、コンテンツ間の導線を作ること、すなわちユーザーがサイト内をスムーズに移動できるようにすることです。これによって、ユーザーにより多くのコンテンツに触れてもらうことができ、ユーザーのサイトへの理解を深め、エンゲージメントを高めることができます。

導線をうまくつくりたい

コンテンツ間の導線を作るのによく用いられるのは関連リンクです。関連リンクを通じて過去のコンテンツに新たな導線を作り、ペルソナやジャーニーマップに沿った体験を提供することが可能です。過去に作成したコンテンツの有効活用にもなります。

しかし、関連リンクを作るにはコンテンツ同士の関連性を把握する必要があり、これがなかなか大変な作業になります。何か良い方法はないものでしょうか?
ここで、生成AIの登場です。生成AIなら、大量のコンテンツを意味レベルで分類することが可能です。たとえば、「会社のミッションやビジョンに関連するコンテンツ」など、特定のテーマに沿ったコンテンツを素早く見つけ出し、関連づけることができます。

関連する既存コンテンツをAIに見つけてもらおう

今回は、自社の採用サイトのプチ・リニューアルにあたって、Google Cloudの提供するVertexAIのGemini Proを活用して、過去のコンテンツを関連リンクとして再発掘する取り組みを行いました。

Gemini Proでコンテンツとテーマの関連度をヒートマップ化

まず、ちょっとわかりにくいかもしれませんので、最終的にどういうものを作ったのか、次の表をご覧ください。

上の表は、コンテンツとテーマの関連度を評価するためのGoogle スプレッドシートです。各行はコンテンツを、各列はテーマを表しています。関連度の評価は1点から5点までの点数で行い、点数が高いほど関連度も高いことを意味します。赤色の濃さは関連度の高さを表し、赤色が濃いほど関連度が高いことを意味しています。つまり、各コンテンツが各テーマにどれだけ関連しているかを一目で把握するためのヒートマップになっています。

そして、この表に基づいて、各テーマとの関連度が高いコンテンツ同士を関連リンクで結びます。

たとえば、「ミッション・ビジョン」というテーマの場合、その関連度が5点満点の「ミッション・ビジョンへの取り組み」と「2023年は目先の損得を超えた関係が大事」というコンテンツ同士を関連リンクで結べばよいわけです。

GASでサイトをスクレイピング、Gemini Proで関連度を評価

では、このコンテンツとテーマの関連度を評価するGoogle スプレッドシートの作り方をご紹介します。今回も、ノンプログラマーの僕がイチから作るのは大変ですので、次の2つのブログを参考に作成しました。

1.GASでサイトをスクレイピング

GASを使ったスクレイピングの作成手順を紹介!

株式会社LIGさんのブログを元に、指定したURLのページからページタイトルと本文内のテキストをスクレイピング(抽出)するコードをGAS(Google Apps Script)で作り、Googleスプレッドシートで実行できるようにしました。ちなみに、カスタマイズには、ChatGPTで生成したコードを活用しています。

ただし、このブログにも注意書きがありますが、スクレイピングについては下記の注意を守るようにしてください。

短時間かつ自動で情報を取得できるスクレイピングは、web制作に限らずとても便利なツールです。
しかし、Webブラウザーではなくプログラムからアクセスすることを禁止しているサイトやサイトのデータを再利用することを許可していないサービスは多く存在しています。作業前に、必ずクロール先の利用規約を確認して、問題がないことを確認してから作業をしましょう。

上記リンクバナーと同じ株式会社LIGさんのブログより

2.Gemini Proでコンテンツとテーマの関連度を評価

Gemini ProとPaLM2をGoogleスプレッドシートで数千のセルで使用するための包括的なガイド

次に、このメディアのブログで紹介されている、GoogleスプレッドシートからGemini Proを利用するためのGASのコードを用いて、スクレイピングした本文内のテキストが各テーマとどの程度関連かを評価できるようにしました。

  • 【赤枠】B列のURLのページから、スクレイピングのGASを使ってページタイトルとページ本文を取得し、それぞれC列・D列に入力しています。

  • 【青枠】E列から右の上段は関連リンクのテーマ(31個)です。これらのテーマと、C列・D列のページタイトルとページ本文がどれくらい関連しているかについて、関連度を評価するプロンプトをGemini Proに渡し、採点しています。

Gemini Proには次のような関数をプロンプトとしてを渡しています。

=GEN_AI("次のページタイトルとページ内容は、
株式会社イー・エージェンシーのブログサイトの記事を
ピックアップした内容です。

###
ページタイトル:"&$C129&"
ページ内容:"&$D129&"
###

この記事を分類しようとおもっています。「"&E$2&"」というテーマで分類できるかどうかを、
5段評価(5が最高に一致)で数字で答えてください。
")

プロンプトで渡している関数は非常に簡単なもので、このようなスクリプトで評価できることには本当に驚かされます。

結果は次のようになりました。

生成AIはWebサイト制作のプロセスを大きく変える

というわけで、関連リンクで結ぶべきコンテンツは明らかになりました。正直に言って、最初に「関連リンクを作ろう! 増やそう!」と思ったものの、人力で一つ一つのページを読んで、テーマと関連するかどうかをチェックしていくのは、考えるだけで心が折れそうでした。それが、生成AIを使ってみたら、想像以上によいアウトプットができ、生成AIは本当にすごい!と実感する取り組みになりました。

本番公開はもう少し先ですが、新旧のコンテンツが相互に結びつき、ユーザー(求職者)にとってより濃密な情報体験を提供できる採用サイトの公開を楽しみにしながら、作業を進めているところです。

生成AIを活用することで、こんなにも関連リンクが充実

と言っていたのも束の間、採用サイトのプチ・リニューアルが完了しましたのでご紹介します!

イー・エージェンシーに興味をお持ちの方へ

社長のnoteの過去の記事へ関連リンクを張って、導線を充実させています。関連リンクのテーマは「私にとってのイー・エージェンシー」「事業と組織の作り方」「(イー・エージェンシー)最初はこうしてはじまった」です。

働く人を知る

各事業部のスタッフや遠隔地で働くスタッフのインタビュー記事(当社の公式note)へ関連リンクを張って、導線を充実させています。関連リンクのテーマは「データ事業」「プロダクト事業」「DX事業」「遠隔地で働く」「部長に聞く」です。

その他AIに関する記事はこちら

少し前の記事ですが、以前からこんなこともやっています。最近の記事はトップからご覧ください。

AIに関する社長の考え方もご覧ください。

一緒に働く仲間を募集しています!

イー・エージェンシーでは一緒に働く仲間を募集しています。下記の採用情報をぜひご覧ください。ご応募をお待ちしております!

在宅勤務・全国内フルリモートOK!shutto翻訳開発エンジニア募集中!

採用サイトで、もっと先輩社員を知る!

▰在宅勤務・全国内フルリモートOK!エンジニア募集中!▰


この記事が参加している募集

企業のnote

with note pro

AIとやってみた

この記事が気に入ったらサポートをしてみませんか?