Amazon Bedrock を活用した Web ページ作成をアシストする仕組みの構築 ~ 株式会社ペライチによるページ作成 AI 機能の実装解説

builders.flash メールメンバー登録で、毎月の最新アップデート情報とともに、AWS を無料でお試しいただけるクレジットコードを受け取ることができます。

弊社は主に SMB (Small to Medium Business) のユーザー様をターゲットにサービスを展開しています。ホームページ制作・運用にあたり現場のユーザーの方々が抱えている課題として「ページの内容を決めるのが難しい」や「社内にノウハウが蓄積されていない」、「制作費用が高い」といった課題が存在します。ペライチではこれらの課題に対して「誰でも簡単に初期費用無料で、600 種類以上のテンプレートから選んで編集するだけでページを作成・公開できる」サービスを提供することで課題解決に取り組んできました。

しかし、それでもユーザー様の中には

• そもそもどのテンプレートを選べばよいか分からない
• どのデザインパーツを追加したら良いか分からない
• いまあるページをイチから作り直すのはハードルが高い

といった課題を抱えているユーザー様が多く、ノーコードツールのホームページ作成エディターだけでは解決しきれない課題が残っているのも事実でした。

従来は弊社のカスタマーサポートのメンバーなどがテンプレートの選択やデザインパーツの選択、素材の移行などでサポートすることで解決に取り組んできました。

今回の機能は入力情報として外部の URL 情報を与え、そこからユーザー様のビジネスや商材、ページのユースケースなどの情報を抽出・要約し、それらの情報を元にしてページを生成することを試みています。「古いページを作り直すケース」や「既存の EC 販売サイトとは別に独自の EC サイトを立ち上げたい」などといったユースケースを想定しています。インプット情報を簡便化し、そこからユーザーに必要な情報を抽出・推論することで、今までヒューマンタッチでサポートしていた部分を一部生成 AI によって置き換えて、ユーザーの制作コストやリードタイムを削減できないかという試みをしています。

機能としては「前処理 : URL から Web ページの情報を取得し、内容を説明・要約・抽出する」と「後処理：前処理で抽出された情報を元にテンプレートを選択・文章を生成・画像やページの配色などを選びページを生成する」の 2 つのステップに分かれています。生成されたページは既存の「ペライチ」の編集画面で後から加工することができるため、テキストや画像、デザインパーツなどは後からユーザーが GUI 上で編集することが可能です。

最初のステップでは入力された URL 情報から WEB ページの情報の抽出・説明・要約する処理を「AWS Step Functions」と「AWS Lambda」そして「Amazon Bedrock」を活用して実装しています。

URL 情報から HTML と WEB ページのスナップショットを取得し、構造化データから取得できるものは構造化データから、配色など構造化データだけでは取得できないものは WEB ページのスナップショットから取得・推論しています。そのため、基盤モデルとしては画像をインプットとして取り扱えるマルチモーダルモデルの Claude 3 Sonnet を利用しています。

Step Functions と Lambda を利用し、ユースケースの特定や情報の抽出、配色の推論を並列で処理することで生成の精度と速度の向上に取り組んでいます。

ワークフローは大きく 3 つのステップに分かれています。

• 1 : Web ページの HTML ファイルの取得と画面キャプチャの取得
• 2 : 取得した HTML と画面キャプチャを元にした情報の判定・抽出・要約
• 3 : 抽出・要約した情報の整形

Amazon Bedrock を利用しているのは主に 2 と 3 のステップです。

例えば 2 において、Web ページの情報を取得する際には「その Web ページがどのような目的で作成されているのか ?」といったページのユースケースによって抽出する情報や情報を抽出するためのプロンプトを分離させることで出力する情報の精度を上げています。具体的には対象とするページが 無形商材ないしは有形商材を販売する EC サイトなのか、またはイベントの予約を行うページなのかによって取得したい情報や取得するためのプロンプトが異なってくるためです。

上記のようにして最初に Web ページのユースケースを判定させて個別の情報を抽出・要約しつつ、ユースケースに関わらず共通で取得可能な情報、例えば、ページの制作者情報や Web ページの画面キャプチャから判定されるデザインや配色に関する情報の抽出・要約作業を並列で個別のプロンプトにより実行しています。

なお、権利を持っていないページの URL を指定することはお断りしております。

後処理では、前処理から渡された情報を元にして主に下記の処理を行っています。

1. デザインテンプレートの選択
2. デザインテンプレート内の文言の生成・置き換え
3. デザインテンプレート内の画像の置き換え
4. 配色などの決定

STEP 2 の部分は既存システムとのつなぎ込み等も考慮し、元々弊社内で運用していた、文言生成などの処理をまとめた API サーバー上に構築しています。

後処理においても、基本的には前処理と同様に最終的なアウトプットである Web ページの生成プロセスを細かく分解してそれぞれプロンプトを作成しています。

なお、基盤モデルとしてはマルチモーダルモデルの Claude 3 Sonnet を利用していますが、後処理については文章生成や文字の置き換えなどが中心のため、コストや生成速度などを鑑みて、今後 Claude 3 Haiku などへの置き換えも検討しています。

開発は著者 (PdM)、フロントエンドエンジニア 1 名、バックエンドエンジニア 1 名、デザイナー 1 名の計 4 名という少人数体制で進めてきました。プロセス自体はユースケース検討・確定⇒要件定義⇒設計・開発⇒評価というプロセスとなり一般的なプロダクト開発と大きな違いはありませんが、私を含めて AI のプロダクト開発が初めてのメンバーが大半であったため、「そもそもユースケースの確定が難しい」や「Amazon Bedrock を利用したベストプラクティスが分からない」といった課題感がありました。

この点については、 AWS 様主催の生成 AI 活用のためのユースケース確定ワークショップに参加させていただいたり、プロトタイピング支援をいただいたりしました。

ワークショップでは、LLM を利用したアプリケーションのユースケースについてご紹介いただき、自社の課題を解決するための適切なアプローチについて多くのアドバイスをいただくことができました。また、その後にご提案いただいたプロトタイピング支援では、主に STEP 1 の「URL からの Web ページの情報の抽出・説明・要約」を行うプロセスにおいて、AWS の各種サービスを用いたアーキテクチャや実装の提案をいただきました。たとえば、シンプルな LLM の処理 (タスク) を組み合わせて精度を高めるアプローチに、 Step Functions と Lambda を活用するなど、弊社内には元々なかった知見を得ることができ、プロトタイピング開発を前進させることができました。この場を借りて、改めて感謝申し上げます。

また、今回の実装においては「ページを作成するときにデザイナーがどのような思考プロセスで情報を抽出し、ページに埋め込み直しているのか」という WEB デザイナーや WEB ディレクターといった職種の方々が実施している一部ケースの AI への置き換えのため、AI の実装そのものよりも、プロセスの整理や既存のデザインモジュールの整理といった要件定義・設計部分でのディスカッションが実装プロセスにおいては大半を占めました。

本記事では、 Amazon Bedrock と AWS の各種サービスを利用した AI プロダクト開発の背景や設計の事例を紹介しました。本機能のユーザー提供はまだ始まったばかりで、実際のユーザーフィードバックやコスト面を踏まえた機能の評価はまだまだこれからです。作って終わりではなく、コスト面なども含めてユーザー課題を解決できたのかといった内容については、またどこかのタイミングでご紹介する機会があれば嬉しく考えています。