【Claude Code】細かい調整からWeb公開まで｜スクショ1枚で解決できた話 | Claude Code修行中〜素人がAIを使いこなすまで〜

前回の記事でSTEP1・2の話をした。「作りたいものを言葉にして投げる」「うまくいかないをそのまま報告する」これだけでWebアプリの骨格が出来上がる、という話やった。

今回はその続き。STEP3の「細かい調整」と、最後の「Webへの公開」まで解説するわ。

結論から言うと、細かい修正もスクショ（スクリーンショット・画面の写真のこと）1枚＋一言で解決できた。

STEP3：細かい調整は「指示と確認」の繰り返し

Webアプリの基本が動くようになったら、次は「使いやすくする」フェーズに入る。

私がやった細かい修正はこんなやつ。

全部、日本語で「こうしてほしい」と言うだけで対応してくれた。

中でも一番便利やと思ったのが、スクショを貼ってそのまま説明する方法や。

私の場合、スマホで確認したらレイアウト（見た目の配置のこと）がガタガタに崩れてた。

文章で説明しようとすると「なんか上の方のやつがはみ出てて…」みたいなふわっとした感じになるよな。そこでスクショをClaudeに見せてこう言った。

「スマホで見るとこうなってます。崩れてるので直してください」

Claudeは画像を見て「あ、これはレスポンシブ対応（スマホ画面に合わせて表示を調整すること）ができてませんね」と言って、自分で直してくれた。

私はスマホで画面をパシャっと撮って貼っただけ。それだけでプロが見てもわかるような問題を特定して解決してくれた。

もう一個おもろかったのが、「なんか違う」という感覚的な表現でも通じること。

私が「全体的になんかごちゃごちゃしてて見づらい気がする」と言ったら、Claudeが「余白（スペースのこと）が少なすぎるかもしれません。整えましょうか？」と提案してきて、見た目をスッキリさせてくれた。

デザインの知識ゼロの私が「なんか違う」と言うだけで、プロっぽい見た目に仕上げてくれる。これはほんまにすごい。

Webアプリが完成したら、次はネットに公開する作業や。

これが一番「わからん」ってなりそうなところやんな。私もそう思った。「サーバー（インターネット上でデータを置いておく場所のこと）とかドメイン（サイトのアドレスのこと）とか、また難しいやつが出てくるんちゃうか…」って。

でもClaudeに「これをネットで公開したい」と言ったら、手順を一つひとつ全部教えてくれた。

「Vercel（バーセル）という無料サービスを使う方法が一番簡単です。以下の手順でやってみてください」

Vercelというのは、作ったWebアプリを無料でネットに公開できるサービスや。GitHubアカウント（ソースコードを管理するサービス）と連携するんやけど、その登録方法から全部教えてくれた。

公開作業中に何度もつまずいた。

「GitHubって何？登録が難しそう」「コマンド（パソコンへの命令文のこと）を打ったらエラーが出た」「Vercelでデプロイ（公開する作業のこと）したら真っ白になった」

でもその都度「こうなってます」と報告したら、全部解決してくれた。

一番笑ったのが、「コマンドを入力したらこんな文字が出てきました」と画面の文字をそのままコピーして貼ったら、「それは成功しています。次はこれをやってください」と言われた場面や。

成功してたのに「エラーかな？」と思って焦ってたわけ（笑）。知識がないってそういうことや。

公開作業を終えてURLが発行されたとき、スマホでそのURLを開いてみた。

自分が作ったWebアプリが、ネット上で普通に動いてた。

コードを1行も書いてない。プログラミングを勉強したわけでもない。ただClaude Codeと会話しながら「こうしてほしい」「これがうまくいかない」を繰り返しただけ。

それでも完成した。

50代でITは苦手やと思ってた自分が、Webアプリを作ってネットに公開した。この感覚はちょっとクセになるわ（笑）

3記事にわたって書いてきた内容を最後にまとめるとこれだけ。

技術は何もいらん。必要なのは「こんなものが作りたい」というアイデアと、「うまくいかない」を報告し続ける根気だけや。

コードが書けない自分には無理、と思ってる人に伝えたい。AIがある今は、アイデアを言葉にできる人が一番強い。まずやってみること。それだけでええ。