サマリ
Claude Artifactsを無料枠で試してみました。
背景
生成AIの進歩のスピードが早すぎて、
少しでも乗り遅れないように試してみました。(正直すぎる
ゴール
- Claude ArtifactsでTo Doリスト・Webページ・天気アプリを作成
対象読者
- Claude Artifactsが気になっている方
前提
必須:PC、インターネット環境
環境
- OS:macOS Sonoma バージョン 14.8.2
- ブラウザ:バージョン 143.0.7499.170(公式ビルド) (x86_64)
そもそも
Claude Artifactsとは公式サイトによると、
アーティファクトを使用すると、アイデアを共有可能なアプリ、ツール、またはコンテンツに変えることができます。必要なものを説明するだけで、ツール、ビジュアライゼーション、エクスペリエンスを構築できます。Claudeは、メインの会話とは別の専用ウィンドウで、実質的でスタンドアロンのコンテンツを共有できます。これにより、後で変更、構築、または参照したい可能性のある重要なコンテンツを簡単に操作できます。
(公式サイトより引用)
アイデア(やりたいこと)を打ち込むだけで、コードや画像を作成、それを指示用のチャット画面とは別画面(画面分割したもう片方)で表示してくれる便利なものです。(雑
実行
言葉では分かりにくいので、実際にやってみたいと思います。
基本的に、SHIFT AIさんの記事を参考にさせていただきました。
いい記事をありがとうございます。
Claudeアカウント作成
自分は以前作成していたため今回は割愛しますが、
以下のページを参照いただければ問題ないかと思います。
設定
Sonnet 4.5であれば自動でArtifacts機能が使えるようなのですが、
無料アカウントの場合デフォルトでSonnet 4.5になっているため特段の設定は不要です。
気になる場合は、左下のアカウントアイコンをクリックし、
「設定」→「機能」で、「アーティファクト」が有効になっているか確認すればOKです。
アプリ作成
勝手ながら、SHIFT AIさんの記事(再掲)のプロンプトを使用させていただきました。
せっかくなので、記事内で一番気になった天気アプリのプロンプトを実行。
体感1分も経たずに、画面右側に作成されたアプリが出てきました。
(おぉ〜すごすぎる
APIキーがデモ版なので実際の天気までは出ませんでしたが、
またAPIキー取得して試したいと思います。
余談
余談ですが、アプリが表示されている側の画面の上にある</>をクリックするとコードが見れます。
気になる部分をドラッグして選択すると、下図のように、改善と説明というのが出てきて、
改善は要望に合わせてコード修正(こんな風にしたい、こう書き換えて、など)が可能、
説明はそのコードがどんな意味合いなのかを画面左側のチャット部分で説明してくれます。
また、</>の右にある、バージョンをクリックすると、過去のバージョンに遡って表示・ファイルのダウンロードが可能です。
これもまたすごい・・・
他サンプルお試し
他にも、ポートフォリオの作成(SHIFT AIさんのプロンプトを少し改変)
ToDoアプリの作成(SHIFT AIさんのプロンプト)
もできました。
すごい。。
結果
Claude Artifactsにて、天気アプリのプロトタイプ、ポートフォリオページ、ToDoアプリの作成ができました。
(ちなみに、上記で試したすべて同じ1日の中で実行できたので、ちょっと試してみる分には無料枠で足りそうな印象でした。)
まとめ
自分個人としては、普段生成AIを使う場面はアイデアの壁打ち、雑談、論点整理などが多いため、
実際にこうやって簡単なWebページ・アプリを作成したのは初めてでしたが、
大まかな指示だけですぐに(しかも無料で)作れるのを体感してかなり感動しました!(時代遅れなもので今更ですが・・
パッと試しただけなので実用性・自分のスキルアップの観点ではまだまだ使い方を考えていく必要はあると思いますが、
まずは何かできたという感覚を積み重ねていくことも大事だと思うので、積極的に使っていきたいです!






