レッスン1：AIウェブアプリとは何か、そしてなぜ今それが重要なのか

imgimgimgimgimg

はじめに

AIウェブアプリとは、情報を表示するだけでなく、裏側にある人工知能モデルを使って生成・推論・代行してくれるウェブサイトです。通常のウェブサイトを販売機にたとえると、ボタンを押せば決まった商品が出てくるようなものです。AIウェブアプリは、料理の人に例えることができます。注文を読み、考えて、その場でカスタムメイドのものを作ってくれます。

中心となる考え方はシンプルです。ユーザーが文字を入力したりファイルをアップロードしたりすると、その入力がAIモデル（大規模言語モデルなど）に送られ、モデルの応答がページ内に表示されます。「ウェブアプリ」の部分とは、ブラウザで動作し、インターフェースを持ち、読むための静的な記事ではなく、使えるツールのように感じられるということを意味します。

従来のウェブサイトとの違い

従来のウェブサイトは固定されたコンテンツを中心に構築されています。ブログ記事、商品ページ、企業のホームページは人間が一度書いて作成され、すべての訪問者に同じように表示されます。ページがJavaScriptを使って一部を更新する場合でも、出力のソースは依然としてサーバー上にある人間が書いたファイルです。

AIウェブアプリには、動く真実のソースがあります。ページ上のコンテンツは、ユーザーが操作した瞬間に生成されます。10人が同じAIウェブアプリを使用した場合、10人全員がそれぞれ異なる応答を見る可能性が高いです。「保存して表示」から「生成して応答」へというこのシフトは、過去20年間でウェブソフトウェアの構築方法における最大の変化です。

🖼️ [ここにイラスト挿入の提案：従来のウェブサイト（リクエストがデータベースから固定HTMLを返す）とAIウェブアプリ（リクエストがAIモデルに転送され、モデルの返信がブラウザに返される）を比較した図]

なぜ今が重要なタイミングなのか

過去数年の間に3つのことが重なりました。まず、AIモデルが文章作成、要約、分類、翻訳などの実際のタスクを処理できるレベルまで進化しました。次に、それらのモデルを呼び出すコストが下がり、小規模なプロジェクトでも月に数千リクエストを利用できるレベルになりました。第三に、ウェブアプリを構築するためのツール（ノーコード・ロウコードプラットフォームを含む）が成熟し、プログラミングの知識がない人でも数日で動作する製品を出荷できるようになりました。

これは、アイデアを持つことと、実際のユーザーが試せるAIウェブアプリを持つことの間の障壁が、かつてないほど低くなったことを意味します。今このスキルを学んだ人は、まだ上向きの急カーブの初期段階にいることになります。

シンプルな例

「丁寧に書き直す」と書かれたボタンと1つのテキストボックスがある簡単なページを思い浮かべてください。ユーザーが失礼なメールを貼り付け、ボタンをクリックすると、その下にソフトなバージョンのメールが表示されます。裏側では、ページが短い指示と共にテキストをAIモデルに送り、返信を待って表示します。アプリ全体は、1つのHTMLファイルと小さなスクリプトで構成できます。

html
<!DOCTYPE html>
<html>
<head><title>Polite Rewriter</title></head>
<body>
<h1>Rewrite my email politely</h1>
<textarea id="input" rows="6" cols="50"></textarea>
<br>
<button onclick="rewrite()">Rewrite politely</button>
<p id="output"></p>
<script>
function rewrite() {
  const text = document.getElementById("input").value;
  document.getElementById("output").innerText = "Pretend AI replied: a softer version of — " + text;
}
</script>
</body>
</html>

上記のスニペットは、インターフェースの形状を示すプレースホルダーです。実際のアプリでは、「Pretend AI replied」とマークされた部分は、ユーザーのテキストの書き換え版を返す実際のAIサービスの呼び出しに置き換えられます。

よくある誤解

よくある間違いは、AIウェブアプリは未来的な見た目でなければならない、あるいは技術的に複雑でなければならないと考えることです。実のところ、成功しているAIウェブアプリの多くは、視覚的にシンプルで、1つの入力、ボタン、結果エリアだけという構成です。もう一つの間違いは、自分自身でAIモデルを訓練する必要があると思い込むことです。ほとんどの場合、既存のモデルをAPI経由で呼び出し、インターフェース、プロンプト、そしてその周りのユーザー体験に努力を集中します。

まとめ

AIウェブアプリとは、出力が事前に保存されるのではなく、リクエスト時にAIモデルによって作成されるウェブサイトです。すべての応答がユニークになる可能性があるため、従来のウェブサイトとは異なります。現在が好機である理由は、AIの能力、コスト、ノーコードツールがすべて実用的なレベルに到達したためです。コーダー以外の人にとって、これはオープンウェブ上で実際の製品を構築する最も手の届きやすい道のりの1つです。

次のレッスンでは、ほとんどのAIウェブアプリに登場する3つのコア構成要素である、フロントエンドインターフェース、バックエンドロジック、AIモデル呼び出しについて見ていきます。

レッスンのチェックポイント

1. AIウェブアプリと従来のウェブサイトの主な違いは何ですか？

2. ウェブアプリ内のAIモデルの役割について最もよく説明しているのはどれですか？

3. 今がAIウェブアプリの構築を始めるのに適している時期とされる理由は何ですか？

4. 丁寧なメール書き換えの例では、バックエンドは通常何を行いますか？

5. AIウェブアプリに関するよくある誤解はどれですか？

6. 10人が同じプロンプトで同じAIウェブアプリを使用した場合、最も起こりやすいことは何ですか？

7. レッスンによると、コーダー以外がAIウェブアプリを構築する際の典型的な焦点は何ですか？

8. AIウェブアプリを手の届くものにしたために収束した3つの要因は何ですか？