ハイ、にっしーです。
コーヒー飲みながらこれ書いてるんですけど、昨日、来間大橋のそばでお茶してたら農家さんの話になって。「出荷の計算、いちいち電卓叩くの面倒くさいよ〜」ってぼやいてたんですよ。そうそう、あるある。在庫の数から梱包数で割って、箱数出して……ってやつ。
そこで「Claudeに計算ツール作ってもらえば5分で解決するよ」って言ったら「え、アプリ作れるの？」ってなって。そう、作れるんですよ、これが。しかもその場で動く。
今日はその話です。
Claude Artifactsって何
Claudeに「〇〇のツール作って」とか「図にして」って頼むと、チャット画面の横にウィンドウが出てきて、その場でアプリが動く機能がArtifactsです。
普通のチャットだとコードの文字列が流れてくるだけで、「それをどう動かすの？」ってなりますよね。Artifactsは違って、コードが出てきた瞬間に「実行済み」の状態で表示される。ボタンを押せば動くし、数字を入力すれば計算される。
メモでいうと、Claudeが「ドキュメント」や「ツール」として別枠に出力するイメージです。URLで誰かに共有することもできる。「こんなの作ったよ」って送れる。
対応している形式はHTMLページ、JavaScript、SVG（図形）、マークダウンのリッチドキュメント、Reactコンポーネントあたり。平たく言うとブラウザで動くやつは大体作れると思っておいてOKです。
何が作れるか
「ブラウザで動くなら何でもいい」と言っても、具体的にピンとこないと思うので並べます。
計算系
金額計算ツール、割合計算、原価率チェッカー、人数×単価の見積もり計算機、BMI計算とか。スプレッドシートを開くほどでもないちょっとした計算を、入力欄を作って使い捨てで作れる。
フォーム・チェックリスト系
業務の確認チェックリスト、簡単なアンケートフォーム、入力→結果表示の簡易フォーム。「スタッフが毎朝確認する項目一覧」みたいなやつを一枚ページとして作れる。
図・ビジュアル系
組織図、フロー図、棒グラフや円グラフ、簡単なロードマップ。SVGで作るから拡大してもきれい。会議で使う説明図をその場で生成できます。
ミニWebページ系
シンプルなHTMLページ。チェックイン案内メール、商品紹介ページのプロトタイプ、宴会コース一覧とか。本番用というより「雰囲気を見る」「共有する」用途で使いやすい。
にっしーが作った宮古島ミニツール4つ
実際に僕が試したやつです。
1. 飲食店向け：宴会人数→料金計算ツール
「人数入れると各コースの合計金額が出る」計算ツール。Claudeに「3つのコースがあって、A=3,000円、B=4,500円、C=6,000円。人数入力したら各合計が出るHTMLを作って」って頼んだら2分で動いてた。スタッフが接客中にさっと見せられる。
2. 観光宿向け：チェックイン時間別の案内メール文
「14時チェックインと18時チェックインで、送るメールの文章を切り替えるツールが欲しい」って伝えたら、ドロップダウンで時間を選ぶとメール文が変わるHTMLが出てきた。コピペしてそのまま使える。
3. 農家向け：在庫→出荷可能数チェッカー
「マンゴーの総個数と、1箱に入れる数を入力したら箱数と端数が出るツール」で頼んだら1分で完成。冒頭の農家さんに見せたら「これでいい！」ってなってた。
4. 経営者向け：来客数の簡易グラフ
曜日ごとの来客数を入力すると棒グラフが出るツール。「スタッフミーティングで見せる用」に作った。Excelいらない、共有リンクで見られる。
使い方は10秒
Claudeのチャット画面で普通に頼むだけです。
「〇〇の計算ツールをHTMLで作って」「〇〇のフロー図をSVGで作って」というふうに、何を作りたいかを一文で書けばOK。するとArtifactsが起動して、チャットの横にウィンドウが開き、動くものが出てきます。
気に入らなければチャットで「ボタンを大きくして」「色を青にして」と続けて言えばその場で直してくれる。「もっと項目を増やして」もいける。
僕的には「まず雑に頼んで、出てきたものを見ながら調整する」のが一番楽だと思ってる。最初から仕様をきっちり決めなくていいんですよ。出てきたものを触りながら「ここが違う」って言い続ければ完成に近づく。
使えるプランはClaude Pro（月3,000円前後）以上が主な対応範囲。無料プランでも一部使えますが、上限があるので、毎日使うなら有料プランが快適です。
共有する方法
Artifactsのウィンドウ右上に「Share」や「Publish」のボタンがあって、パブリックリンクを発行できます。URLを送れば相手はClaudeアカウントなしで見られる。宿から宴会幹事さんに計算ツールのリンクを送る、とかが実用的な使い方かなと思います。
ただ、永続的な公開には向いてない。あくまで一時共有の感覚で使うのが安全で、社内の繰り返し使うツールとしては、WordPressの固定ページやGoogleサイトに貼る方が安定します。
社内向けに「このArtifactを常に使いたい」なら、Claude Projectsに保存しておく方法があります。ProjectsについてはClaude Projects、業務情報を覚えさせる使い方で書いてるので、セットで見てもらえると仕組みが分かりやすいと思います。
失敗パターン
使ってみた感触からいくつか。
依頼が複雑すぎると途中で止まる
「予約管理システムを作って」みたいな、工程が多いものは途中でコードが切れたり、動いてるように見えて実は機能してなかったりします。「1つのことだけする小さいツール」に絞るのが成功率が高い。
Pythonは動かない
Artifactsで動くのはHTML/JavaScript/SVGなどブラウザ完結のもの。「PythonでCSV処理して」はArtifactsでは動きません。PythonやExcelマクロが必要な処理はArtifactsの範囲外です。
長いコードだと途中で切れることがある
複雑な処理を1本のコードに詰め込みすぎると、生成途中で止まることがあります。その場合は「続けて」と言うか、機能を分けてシンプルにする方向で依頼し直すとうまくいきやすいです。
Artifactsはコーディング環境ではなく「チャットについでにちょっとしたツールが出てくる」機能として使うのが、一番ストレスないと思ってる。
本格コードは Claude Code へ
「もっと本格的なWebページを作りたい」「データベースと連携するものを作りたい」「社内ツールをちゃんと作りたい」という段階になってきたら、ArtifactsではなくClaude Codeの方が向いてます。
Claude Codeはターミナルから使う開発環境向けのAIで、ファイルを読み書きしながら本物のアプリを一緒に作れるやつです。エンジニア向けの話ではあるんですが、経営者がどういうものか知っておくだけでも「外注費の削減余地があるかも」という判断ができるようになる。Claude Code・Cursor・Antigravity、経営者は知るだけでOKで概要を書いてるので、興味があれば。
まず一回、頼んでみて
「計算ツール作って」って一文でこれだけのものが出てくる、というのは、実際に触ってみないと感覚がつかめないと思うんですよね。
今日10分だけ試してみてほしい。「人数と単価を入れたら合計金額が出るツールをHTMLで作って」これだけで動くものが出てきます。これ、使えたら結構時間浮くと思う。
Claudeの基本的な使い方がまだ不安なら、Claudeを使い始める最初の30分とプロンプトの基本、これだけ押さえとけば動くをセットで読んでもらえると準備が整います。
もし「こういうツール作れる？」って思ったら、気軽にONEstaに声かけてみてください。一緒に試してみますよ。