「自分でWebサイトや社内ツールを作ってみたいけれど、プログラミングなんてやったことないし無理そう…」と思っていませんか？
今回は、上司からの「サイト作ってみちゃいなよ」という一言をきっかけに、プログラミング未経験の私がClaudeで簡単なツールを作ってみた体験談を紹介します。難しいコードの知識がなくても、AIに日本語でお願いするだけでどこまでできるのか、実際に試してみました。
この記事でわかること（結論）
- プログラミング未経験者でも、Claudeの「Artifacts（アーティファクト）」機能を使えば一瞬で簡易ツールやWebサイトが作れること
- 開発者向けの高度なツールを覚える前に、まずは身近なClaudeの画面内で試す方が圧倒的にスムーズであること
- 自分の業務内容や事前データをClaudeに共有しておくことで、実務に直結したオリジナルツールが1分で形になること
身近な疑問から始まった「サイト作成」への挑戦
BOSSが私に言うんです。「さくらこ、サイト作ってみちゃいなよー」と。最初は「あはは～」と笑っていたのですが、どうやらBOSSは本気のご様子。「これは近いうちに、本当に自分でサイトを作ることになるな…」と、にわかに焦りを感じ始めました。
しかし、私はサイト制作なんて一度もやったことがありません。そもそも「サイトを作る」とは具体的に何をどうすればいいのかすら、ピンときていない状態でした。AIを活用すれば初心者でも簡単に作れると言われても、そんな簡単に出来ないでしょ～って感じで。それでも、いざというときに簡単なサイトくらいは自分でサクッと作れるようになっておきたいと思い、ちょこっとお試しで動いてみることにしました！
まずは頼れるアシスタント「Claude」に聞いてみた
ツール作成やコーディングに強いのはClaudeだと思い、Claudeに相談することに。世の中には「Claude Code」「CodeX」「Cursor」といった、AIを使った開発ツールやエディタの名前が溢れています。ただ、名前くらいは知っていても、今までに触れたことは特にありませんでした。というのも、「こういうのって、専門のエンジニアの人が使うものでしょ？」と勝手に思っていた部分があって。
ですが、実際にサイトを作るとなれば、こうしたツールも必要になるかもしれません。そこで、Claudeにストレートに相談してみました。「もしかしたら近いうちに自分でサイトやツールを作るようになるかもしれないんだけど、Claude Codeとかを覚えた方がいいのかな？」と。
Claudeが出した正直で的確なアドバイス
返ってきた内容は以下のようなものでした。
「Claude Codeは確かに便利なんですが、さくらこさんの状況に照らすと、今すぐ必須かというと微妙です。」「まずはArtifactsで作れるレベルを上げておく方が先で、Claude Codeはその後でも遅くないかな、という印象です。」
なかなか正直な回答でよろしい。実は私は、普段の業務内容が変わったり増えたりするたびに、その内容をClaudeやChatGPTなどのAIに伝えるようにしています。そうして自分の状況をある程度覚えてもらっておくと、今回のように「今の自分にとって本当に必要かどうか」まで踏まえて答えてくれるので、かなり便利です。
AIを仕事で使うなら、自分のプロフィールや業務背景をあらかじめ設定しておくのがおすすめです。設定まわりについては他の記事でも紹介しているので、ぜひあわせて読んでみてください。
意外と使いこなしていた？「Artifacts」の正体
ふむふむ、と思いながらClaudeの返答を読んでいたのですが、ここでひとつ疑問が出てきました。「Artifactsって何？」という話です。Claudeでも特に意識して触ったことはなかったですし、そういえば画面のサイドバーあたりにそれっぽいものがいたような…？くらいの認識でした。
そこで改めて、「Artifactsって何ができるの？」とClaudeに聞いてみました。すると、どうやらPDFでも資料でもグラフでも、Claudeに何かしらの成果物を作ってもらったときに、右側にポンッと出てくるあの独立した画面のことを「Artifacts（アーティファクト）」と呼ぶらしいのです。振り返ってみれば、Excelの表を綺麗にまとめてもらったり、遊び感覚でちょっとした簡易ツールを出力してもらったりと、私はその名前を知らないまま「Artifacts」をすでに何度も使っていました。
「それならすでに使ったことがあるし、見たこともある！」と一気に親近感が湧いてきました。ただ、遊び感覚で使うのと、業務で使えるレベルのものを狙って作るのはまた別の話です。Claude Codeなど専門的なものに進む前に、まずはこのArtifactsでどこまで作れるのか、もう少し慣れておいた方がよさそうだな…ということで、さっそく何か実用的なツールを作ってみることにしました。
実務直結のツールがわずか1分で完成
何を作ろうかな、の段階もAIに相談
いざ何かを作ろうと考えたものの、今回はあくまで「いつか来る本番のための練習（仮定の話）」です。今すぐ絶対に作らなければならない具体的なアイデアが、自分ではパっと思い浮かびませんでした。そこで、ここでもClaudeに「今の私の業務に役立つツールの候補を出して」と丸投げして尋ねてみることにしました。
すると、私のこれまでの業務履歴や設定を理解しているClaudeは、以下のような的確な候補を提案してくれました。
- ① ブランド別相場チェッカー：過去の調査結果を記憶させておき、ブランドや商品カテゴリを選択するだけで「仕入れ目安価格・二次流通相場・利益率」がパッと一画面に表示されるツール。
- ② 仕入れ判断シミュレーター：仕入れ値を手入力すると、予想される利益額や利益率が自動計算されるインタラクティブな計算ツール。
ちょうど直近の業務で、自社で仕入れる予定がある在庫のブランド価値を調べる作業を控えていました。私の状況をしっかり把握した、まさに今欲しいと思える提案です。すごいなぁと感動しつつ、さっそ「① ブランド別相場チェッカー」の作成を依頼してみました。
爆速ツール生成
すると、1分も経たないうちに完成してしまい、普通にびっくりしました。具体的なプロンプトを細かく送ったわけではなく、ただ「①を作ってみてください」とお願いしただけです。それだけでカタカタとコードが生成され始めて、あっという間に画面の右側に綺麗なデザインの簡易ツールができあがりました。これまでにも、遊び感覚で簡単なツールを作ってみたことはあったので、ある程度は想像していましたが、やっぱり速いなぁという印象です。
今回は、事前に各ブランドの情報を別のチャットで調査させておいたので、その内容を引っ張ってきて表示している簡易的なページではあります。それでも、ただ情報を並べただけではなく、見やすく整理された画面としてすぐに完成したので、「もう少し調整を加えたら実務でも普通に使えそう」と感じました。
実際に生成されたページ
以下は実際に生成されたぺージの例です。（※一部修正を加えている箇所があります）タップすると拡大表示されます。
簡易ツールから本格的なWebサイトへの展望
今回作ったものは、あくまでClaudeの画面内で完結する仕組みです。ここからさらに発展させて、「常に最新のリアルタイム情報を自動で反映できるようにする」とか、一般的なWebサイトのように「ボタンを押したら別の独立したページにリンクで飛べるようにする」といった、本格的なWebサイトの構造を組み込んでいくとなると、もう少し大変な作業や専門知識が必要になってくるのだろうな、とは感じています。
しかし、現段階であっても「自分の業務をサポートしてくれる簡易的なツールやサイト」であれば、プログラミング知識ゼロの私でも、AIへの日本語の指示だけで一瞬で作れるんだな、と改めて実感しました。エンジニアの方が使うような難しい開発環境を用意しなくても、普段のチャット画面の延長線上でここまでできるのは大きな自信になります。
この手応えをきっかけに、次はもっと本格的なサイト制作や、より細かな機能を持ったツール作成にもどんどん挑戦してみようと思っています！
まとめ：Artifactsなら誰でも一瞬でツールを作れる
「サイトやツールを作ってみたいけれど、何から始めればいいか分からない」という方は、ぜひ重く考えずにClaudeのArtifactsを活用してみてください。難しいコードを覚える必要はありません。自分がやりたいことや、作ってほしいツールのイメージをいつもの言葉で伝えるだけで、AIが目の前ですぐに形にしてくれます。
まずは何でもOKです。自分が作りたい簡単なツールが一瞬で完成する楽しさを体感してみませんか？
