NotionエージェントでインタラクティブなHTMLブロックを作成する【知らなきゃ損するNotion AI実践テク】Vol.23
Web制作に携わる方の中には、日常的に「Notion」を活用している人も多いでしょう。本連載では、NotionのAI機能「Notion AI」を、制作現場でより効果的に使いこなすための実践的な活用術を紹介していきます。
今回のテーマは、「HTMLブロック」です。Notionエージェントを使って、ページ内で実際に操作できるインタラクティブなコンテンツを作成してみましょう。
目次
コードを書かずに動くコンテンツを作成
Notionは、「ブロック」と呼ばれるさまざまな要素を組み合わせてページを作成できることが特徴です。テキストや見出し、画像、表、データベースなど多彩なブロックがあらかじめ用意されていますが、そこに最近新たに加わったのが「HTMLブロック」です。このブロックは、インタラクティブなWebコンテンツをページ内に埋め込むことができるもの。たとえば、入力した数値に応じて結果が変わる料金シミュレーターや、項目をクリックすると詳しい情報が表示される会社の年表や組織図など、ユーザの操作に応じて表示内容が変化するコンテンツをNotionページ内に配置できます。
こうしたコンテンツを作成するには、通常であればHTMLやCSS、JavaScriptを記述する必要があります。そのため、プログラミングの知識がない人にとっては、少しハードルが高く感じられるかもしれません。しかし、NotionのHTMLブロックは、AIエージェントである「Notionエージェント」に作成を任せることができます。つくりたいものを自然な言葉で伝えるだけで、コードを書かずにHTMLブロックを生成できるのです。
作成手順もシンプルです。Notionページ上で「/html」と入力して「HTML」を選択すると、HTMLファイルをアップロードするためのメニューに加えて、「AIで作成する」という項目が表示されます。ここには「スライド」「ダッシュボード」「報告」「説明者」「プロトタイプ」「ゲーム」といった選択肢が用意されており、つくりたいものに近い項目を選んで内容を指示できます。該当する項目がない場合は、下部のチャット欄に作成したいものを自然な言葉で入力すれば、NotionエージェントがHTMLブロックを自動で生成してくれます。
たとえば、「このページにあるデータをもとに、ROI（投資対効果）計算ツールをHTMLブロックでつくって」と指示すれば、ユーザが数値を入力するだけで、その場で投資対効果を試算できるHTMLブロックが生成されます。完成後も、「入力項目を追加して」「計算結果をグラフでも表示して」などと追加で伝えることで、Notionエージェントとのやりとりを重ねながら内容を調整できます。
対話だけでアイデアをカタチに。広がる可能性
このほかにも、HTMLブロックの活用方法はさまざま考えられます。たとえば、Webサイトの一部の画面や操作を試す簡単なプロトタイプを作成したり、ページ内の情報をダッシュボードとして見やすくまとめたり、社内マニュアルをクイズ形式にして理解度を確認できるコンテンツにしたりといった使い方が可能です。文章や静止画だけでは伝わりにくい画面の動きや操作イメージも、実際に操作できる形で共有できるため、企画や提案の質を高められるでしょう。
さらに、コードを書かずに対話だけで内容を作成・修正できるので、アイデアをすばやく形にしたい場面でも役立ちます。
文：水川歩