Claude 3.5 SonnetのArtifactsを使って経路検索を可視化してみた

こんにちは。最近のAI技術の進展に興味を持っているエンジニアです。OpenAIのChatGPTに続いて、AnthropicのClaude 3.5 Sonnetが注目を集めています。特に興味深いのが、Claudeの「Artifacts」機能です。今回は、この機能を使って日常的によく使う経路検索を可視化してみました。

## はじめに

経路検索は多くの人が日常的に使用するツールです。GoogleマップやYahoo!乗換案内などのアプリは便利ですが、時には複数の経路を一度に比較したいことがあります。そこで、Claude 3.5 SonnetのArtifacts機能を使って、経路の可視化と比較を試みました。この記事では、その過程と結果を共有し、AI技術の新しい応用可能性について考察します。

## Claude 3.5 SonnetとArtifactsとは？

Claude 3.5 Sonnetは、Anthropicが開発した最新の大規模言語モデル（LLM）です。Artifactsは、Claudeが会話の中で図表やコードなどを生成できる機能です。この組み合わせにより、テキストベースの入力から視覚的な出力を得ることができます。

## 実装

今回は、東京の渋谷駅から上野動物園までの経路を例に取り上げます。

### 1. Claudeへの指示

まず、Claudeに次のように指示しました：

```
渋谷から上野動物園に行きます。経路のパターンについてArtifactsを使用して、経路パターンを可視化して、そのメリット、デメリット、優先度を一覧にまとめてください。
```

### 2. 生成された図表

Claudeは渋谷駅から上野動物園までの主要な3つの経路（JR山手線、東京メトロ銀座線、東京メトロ半蔵門線→日比谷線）を示すフローチャートを生成しました。

この図表の優れている点は以下の通りです：

- **一目で分かる選択肢**: 主要な3つの経路が即座に理解できます。
- **経路の構造**: 各経路の乗換回数や経由駅が明確に示されています。
- **比較の容易さ**: 異なる経路を並べて表示することで、直感的な比較が可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/1a124798-ea61-9115-4f07-629a170b2fe9.png)

```mermaid
graph TD
    A[渋谷駅] --> B1[JR山手線]
    A --> B2[東京メトロ銀座線]
    A --> B3[東京メトロ半蔵門線]
    B1 --> C1[上野駅]
    B2 --> C2[上野駅]
    B3 --> D[半蔵門線から日比谷線に乗り換え]
    D --> C3[上野駅]
    C1 --> E[上野動物園]
    C2 --> E
    C3 --> E
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/8a7c86a3-c98f-9c1c-3736-b19c879f4aa6.png)

### 3. 経路比較表

さらに、Claudeは各経路のメリット、デメリット、優先度を比較する表を生成しました。この表には、JR山手線、東京メトロ銀座線、半蔵門線→日比谷線の3つの経路について、それぞれのメリット、デメリット、優先度が簡潔にまとめられています。

この表の特徴は：

- **簡潔な情報整理**: 各経路の特徴が簡潔にまとめられています。
- **意思決定の支援**: メリット、デメリット、優先度の情報により、ユーザーの状況に応じた選択が容易になります。

## 視覚化と表の組み合わせによる効果

フローチャートと比較表を組み合わせることで、ユーザーは以下のような利点を得られます：

1. **全体像の把握**: フローチャートで経路の全体像を素早く理解できます。
2. **詳細情報の参照**: 表で各経路の具体的な特徴を確認できます。
3. **状況に応じた選択**: 時間、快適さ、景色など、ユーザーの優先事項に基づいて最適な経路を選べます。

## 技術的考察

Claudeがこのような視覚化を生成できる背景には、以下のような技術があります：

1. **自然言語理解**: ユーザーの質問から必要な情報を抽出します。
2. **知識グラフ**: 駅や路線の関係性を理解し、正確な経路を構築します。
3. **マルチモーダル生成**: テキスト情報を視覚的な図表に変換します。

## 課題と今後の展望

1. **リアルタイム性**: 現在の実装では、リアルタイムの運行情報は反映されていません。将来的には、リアルタイムデータを統合した動的な図表生成が可能になるかもしれません。

2. **カスタマイズ性**: ユーザーの好みや条件（例：歩くのが苦手、景色を楽しみたい）に応じた提案ができるとより便利です。機械学習を活用して、ユーザーの過去の選択や好みを学習し、個人化された提案を行う機能も考えられます。

3. **インタラクティブ性**: ユーザーが直接図表を操作できるようになれば、より柔軟な経路計画が可能になるでしょう。例えば、経由地の追加や、特定の駅や路線の除外などをインタラクティブに行える機能が考えられます。

4. **マルチモーダル統合**: 将来的には、テキスト、画像、音声などの複数のモダリティを統合して、より豊かな情報を提供できる可能性があります。

## まとめ

Claude 3.5 SonnetのArtifacts機能を使うことで、経路検索の結果を視覚的に分かりやすく表現できることが分かりました。この手法は、旅行計画や日常の移動計画に新しい視点をもたらす可能性があります。

AI技術の進化により、従来の経路検索アプリとは異なる、より直感的で柔軟な経路提案システムが実現可能になりつつあります。今後は、よりパーソナライズされた提案や、リアルタイムデータとの統合など、さらなる発展が期待できます。

みなさんも、普段使っているアプリやサービスにAIを組み合わせることで、新しい可能性が見えてくるかもしれません。ぜひ試してみてください！

## 参考

興味を持った方は、ぜひAnthropicの公式紹介動画をご覧ください。1分30秒ほどの短い動画で、その素晴らしさを実感できると思います。
<iframe width="560" height="315" src="https://www.youtube.com/embed/rHqk0ZGb6qo?si=kzqkVAcEqXdps2VC" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

https://www.anthropic.com/news/claude-3-5-sonnet

## 参考リンク

- [Anthropic Claude](https://www.anthropic.com/)
- [東京メトロ](https://www.tokyometro.jp/)
- [JR東日本](https://www.jreast.co.jp/)