未ログイン状態で閲覧中
  • 投稿日:2026/04/26
  • 更新日:2026/04/26
【保存版】Claude Codeを導入したのに使えてない人へ|レベル別に実例紹介

【保存版】Claude Codeを導入したのに使えてない人へ|レベル別に実例紹介

みずの@寄り添うWebデザイナー

みずの@寄り添うWebデザイナー

この記事は約11分で読めます
要約
Claude Codeを入れたけど「結局、何に使えばいい?」と止まっていませんか?ウェブ制作フリーランスの僕が実際にやってきた使い方を、初心者レベル~仕事でも使えるレベルまで、ステップ別に紹介します。

みなさん、こんにちは~!
Webデザイン部管理人の「みずの」です😊

今回は「Claude Codeを入れたあと、どうやって使えばいいか」レベル別にお話しします!

「導入はしたけど、良い使いかたが思いつかず止まっている…」
「みんなすごい使い方をしている気がして、自分だけ出遅れている気がする」
初心者でもムリなく続けられる順番が知りたい」

とお悩みの方へ、実際に僕がやってきたことを紹介します!

何をすればいいかわからないという方は、この記事の「レベル1 超初心者レベル」から順番にやっていくのがオススメです!

自分でやったことが増えていったらこちらの記事も更新します!ご興味のある方はブックマークしておくと便利です💪)

レベル1:PCの面倒ごとを任せる(最初の一歩)

最初の一歩は、自分のPCの中の簡単な作業をお願いするところからやってみましょう💡

① 画像のリネーム

「IMG_2371.jpg」のような写真ファイルを、撮影日や被写体ごとに一括で名前変更してもらう使い方です。

特にウェブ制作で使うなら、ホームページに使いたい画像を1つのフォルダにまとめて、写っている内容をそのままファイル名にしてもらうのがおすすめです。

例えば「exterior.jpg」「staff-group.jpg」「counter-seats.jpg」のように英語名にしておけば、WordPressにアップするときも迷わず使えますし、後から「あの画像どこだっけ?」と探し回る時間もゼロになります。

これを1枚ずつ手作業でやろうとすると、30枚なら30回クリックしてリネームして…と、地味に時間がかかりますよね…!
Claude Codeなら、こんな感じでお願いするだけで一瞬です。

このフォルダの中の画像ファイルを、写っている内容が伝わるような英語のファイル名に一括変更してください(例:exterior.jpg、staff-group.jpg)。フォルダのパス:C:\Users\(あなたのユーザー名)\Desktop\HP用画像

最初の一歩としては、このくらいのシンプルな作業が一番ちょうどいいです。
Claude Codeで自分のPCのフォルダを実際にいじるとはどういうことか」という感覚を、ここで体験しておきましょう💡

② フォルダの整理

散らかったダウンロードフォルダやデスクトップを、用途ごとにフォルダ分けしてもらいます。
「PDFは資料フォルダ、画像は写真フォルダに移して」と頼むだけでOKです。

意外と有効なのが、Claude Codeが作ったフォルダやファイルの整理です!

Claude Codeを使い始めると、いろいろ試行錯誤するうちにフォルダやファイルがどんどん増えていくので、ある程度たまったタイミングで整理してもらいましょう!

「最初は何が何だかわからずフォルダを作りまくってしまった…」という状態は、使い始めのあるあるだと思います。
そんなときこそ「このフォルダの中を整理してほしい。用途がわかるようにまとめて」と頼んでみてください。

自分で片付けようとすると何時間もかかるものが、あっという間に終わりますよ😊

レベル2:壁打ち相手として使う(思考整理)

慣れてきたら、自分の頭の中を整理する相手として使うフェーズに入ります。
Claude Codeのいいところは、背景情報を覚えてくれること!

最初に「自分はこういう仕事をしている、こういうクライアントを担当している」と伝えておけば、次からはその前提を引き継いで話が進むので、以下のような使い方がとてもやりやすくなります。

③ 記事の構成案の壁打ち

ノウハウ図書館だけでなく、noteやブログ記事の構成案を作るのにも使えます。
最初に「こういう人に向けて書きたい、自分にはこういう経験がある」と背景情報を渡しておけば、次からは書きたいネタのことだけを話せばOKです。

僕の場合、大抵こんな感じで壁打ちしています。

〇〇という悩みを持った人がいて、その人の悩みを解決したくて記事を書こうと思ってます。僕にはこういう経験があるのですが、どんな切り口で伝えると刺さりそうですか?

Claude Codeと壁打ちをしながら「構成案」を出してもらって、一緒にブラッシュアップしていく感じです。
モヤッとしたアイデアが、意外とすんなり記事の形になっていきますよ😊

④ 競合サイトの分析

自分でももちろん分析はするんですが、Claude Codeが得意なのは「複数のサイトを見比べて、わかりやすく整理してまとめること」です。
競合サイトのURLをいくつか渡して「それぞれの強み・ターゲット・価格帯・差別化ポイントを表にして」と頼むだけで、提案前のリサーチがかなりラクになります。

一度まとめた情報はそのままClaude Codeが持ち続けてくれるので、「さっき分析した競合の情報も踏まえて…」と次の提案に引き継ぐことができます。
これが次の⑤の壁打ちと組み合わさると、提案の質がかなり上がりますよ💡

⑤ 競合分析を踏まえたクライアントの売上アップ施策の壁打ち

④で整理した競合の情報をそのまま引き継いで、今度はクライアントへの提案を一緒に考えてもらいます。
クライアントのホームページの内容・ターゲット層・サービスの強みなどをあらかじめ渡しておくと、競合分析の結果をふまえたうえで、自分では思いつかなかった施策を出してくれることがあります。

「競合はこういう訴求をしているから、うちはここで差をつけましょう」という流れで提案が組み立てられるので、クライアントへの提案の質がかなり上がりますよ💪

レベル3:資料・コンテンツを作る

壁打ちに慣れたら、いよいよ「成果物そのもの」を一緒に作ってもらうフェーズです!

⑥ 旅のしおりHP(個人用の練習として)

まずは仕事じゃなく、自分のプライベートで試してみた話から始めます。
僕は家族旅行のしおりをHTMLで作ってみました。

GmailやGoogleカレンダーと連携させると、予約済みのホテル情報や移動のスケジュールを自動で集めてくれて、1枚のHTMLにまとめてくれるんです。
チェックインとチェックアウトの時間も自動で抜き取ってくれるので、「あのホテル何時入りだっけ?」と情報を探し回る手間がなくなりました。

さらに、HTML上で持ち物チェックリストも作れます。旅の前に「持った?持ってない?」とチェックしながら準備できるので、持ち物の抜け漏れが格段に減りました💡

仕事以外でもこういう個人用のもので使ってみると、「なるほどこういうことか」という感覚がつかみやすいですよ😊

⑦ 家族用の買い物リストアプリの作成

旅のしおりで「自分たちの使いやすいものを作れるんだ」という感覚がつかめたら、次に家族用の買い物リストアプリを作ってみました。
家族で同期して使えるようにして、画面上でアイテムを追加・削除できる仕様です。

「牛乳追加して」「卵はもう買ったからチェック」みたいな感じで、スーパーに行くたびに使っています。今も現役ですよ😊

アプリやツールは最初から全体公開を目指さなくても、まず自分や家族が使えるものを作ってみるのがオススメです。
自分で使うものだからこそ、使いながら「ここを直したい」と気づいて、どんどん完成度が上がっていく体験をしてみましょう!

⑧ WordPress記事の作成〜入稿

レベル2で壁打ちして作った構成案をもとに、ブログのドラフトを丸ごと作ってもらって、最後に自分の言葉で仕上げる流れもオススメです。
Claude Codeを使うと、完成した記事をそのままWordPressの下書き画面まで持っていくことができます。
投稿ボタンを押す一歩手前の状態まで一気に持っていけるので、1記事あたりの所要時間がかなり短くなりますよ💡

⑨ MEO提案資料の作成

クライアント向けにMEOの提案をしたいとき、提案資料もClaude Codeに作ってもらえます。
この段階までにクライアントの背景情報や自分の得意分野をすでに渡しているので、「こういう内容のMEO提案資料を作って」と一言伝えるだけで、かなりのクオリティで初稿が上がってきます。

実際にクライアントさんに提案したとき、先方は速さとクオリティにびっくりしていました!笑

レベル4:仕組みごと作る(自分専用ツール)

最後は、自分の周りにある小さな面倒事を解決するツールを作ってみましょう!

⑩ 請求書・領収書の自動作成システム

毎月の請求書や領収書をスプレッドシートなどで手打ちするのがめんどくさい、保存のたびに自分でフォルダを移動するのが地味にストレス…という悩みを解決するために、ブラウザからワンクリックで書類を作れるシステムを作ってみました!

こちらの作り方の詳細は以下の記事でまとめているので、ぜひ合わせて読んでみてください!

>> 【AI活用例】フリーランスの請求書・領収書を自動作成する方法

⑪ タスク管理サイトの作成

Claude Codeに並列でいろんな作業をさせることが多くなってきて、自分でもタスクの抜け漏れが把握しにくくなってきました。
そこで、タスクがパッと見えるサイトをHTMLで作ってもらいました。

・今Claude Codeに何を頼んでいるか
・自分にはどんなタスクがあるか
・次に何をすれば良いか
・時間ができたら何をするか

これが一目でわかるようになって、作業の抜け漏れがかなり減りました。
もしかしたら同じ悩みを持っている方もいるかもしれないので、「自分もこういうの欲しい!」という声があれば記事にしようかなと思っています😊

⑫ ヒアリングシートのHTML化

これまでスプレッドシートで運用していたヒアリングシートを、ブラウザで答えられるHTMLにしてもらいました。
クライアントさんが書き込みやすく見やすいのはもちろん、こちらも回収後の管理がしやすくなりました。
ホームページ用とLP用の2種類を作っていて、今もそれを使って運用しています😊

(おまけ)画像生成系は他のAIに任せています

ここまでClaude Codeの使い方ばかりお話ししましたが、僕はバナーやロゴ・イメージ画像など「絵を作る系」の作業はChatGPTやGeminiに任せています。(2026年4月現在)

画像生成は別のAIが得意な領域なので、使い分けるのが結局いちばんラクです。「全部Claude Codeでやらなきゃ」と頑張らなくて大丈夫ですよ💡

まとめ:レベル1から、無理なく階段を上がっていこう!

ここまで読んでくださってありがとうございます!!

今回はClaude Codeの活用例をレベル1〜4でお話ししました。

・レベル1:PCの中の面倒ごとを任せる
・レベル2:壁打ち相手として使う
・レベル3:資料・コンテンツを一緒に作る
・レベル4:自分専用の小さなツールを作る

最初からレベル4を狙う必要はなくて、レベル1の「画像リネーム」みたいな地味な作業からで十分です。
「とりあえず動かしてみる経験」が積み重なると、自然と次のレベルに手が届くようになりますよ😊

みんなで小さく始めて、自分のペースで自由をつかんでいきましょう~!

こちらの記事に関する質問はみずのまでお気軽にDMください😊

また、生成AIやClaude Codeの導入・始め方・使い方に関するオフ会も開いています!
興味のある方はぜひDMください✨

あわせて読みたい関連記事

Claude Codeの使い方をもう少し深掘りしたい方向けに、関連する記事をまとめました。

そもそもClaude Codeって何?というところから整理したい方には、よくある質問を集めた記事がおすすめです。>> 【初心者向け】Claude Codeのよくある質問20選!非エンジニア・AI苦手さんにもやさしく解説

これからClaude Codeを試してみたい方には、PCを汚さず安全に始められる方法を解説した記事がおすすめです。>> 【最も安全な始め方】Claude CodeはCodespaceで動かそう!PCを汚さない「7つの手順」

「指示出しが面倒そう」と感じている方には、エージェント型AIの仕組みを解説した記事がおすすめです。>> 【誤解を解く】Claude Codeの「指示が面倒」は勘違い!ChatGPTより楽になる3つの仕組み

指示の出し方をもっと上達させたい方には、公式ドキュメント準拠のコツをまとめた記事がおすすめです。>> 【公式準拠】Claude Codeへの指示出しが上達する5つのコツ

MCP(外部サービスとの連携機能)が気になる方には、仕組みと活用例を解説した記事がおすすめです。>> 【効率アップ】MCPって何❓️5分でわかる仕組みと3つの活用例✨️

「周りの人がすごすぎて焦る…」と感じている方には、小さく始めるためのヒントをまとめた記事がおすすめです。>> 【小さく始めよう】「周りのクロコ事例すごすぎ…」と焦っているあなたへ

AIの勉強ばかりして動けないと感じている方には、踏み出すきっかけを綴った体験談がおすすめです。>> 【完璧主義さんに届け…】AIの勉強ばかりしていて動けなかった僕が踏み出せたきっかけ

少しでも役にたったと思ったらレビューをしていただけるとモチベーションがあがります🙌✨
後で見返すためのブックマークも便利でオススメ💡

ブックマークに追加した記事は、ブックマーク一覧ページで確認することができます。
あとから読み返したい時に便利です。

みずの@寄り添うWebデザイナー

投稿者情報

みずの@寄り添うWebデザイナー

トラ会員

この記事に、いいねを送ろう! 参考になった記事に、
気軽にいいねを送れるようになりました!
この記事のレビュー(3
  • 会員ID:YmWYFNOm
    会員ID:YmWYFNOm
    2026/04/26

    とてもわかり易い言葉でまとめていただきありがとうございます。 情報がありすぎて、導入したけどどう進めば良いのだろうと、迷子になっている、ウェブ制作に関わっている方そして、多くのclaude迷子の方必見の内容です。 段階を追って優しくスキルアップできます。 ご説明いただいたセミナーも、参加者の視点に寄り添っていただき、とてもわかり易かったです。 いつもありがとうございます😊🍀

    みずの@寄り添うWebデザイナー

    投稿者

    2026/04/26

    ぽとすさん!ありがとうございます😆 そういって頂けて嬉しいです! こちらこそいつもありがとうございます🙌

    みずの@寄り添うWebデザイナー

    投稿者

  • 会員ID:vUgkOcRy
    会員ID:vUgkOcRy
    2026/04/26

    参考になる記事をありがとうございます✨ 今ヒアリングシートはスプレッドシートで記入頂くようにしているので、HTML化作ってみようと思います😊🙌🏻

    みずの@寄り添うWebデザイナー

    投稿者

    2026/04/26

    トリコットさん、コメントありがとうございます🙌 HTML化はメリット大きいので、ぜひ参考にしてみてください!!

    みずの@寄り添うWebデザイナー

    投稿者

  • 会員ID:RwIa7NTA
    会員ID:RwIa7NTA
    2026/04/26

    本日(2026/4/26)のOviceのオンラインセミナーに通りすがりで参加させていただき、こちらの記事にたどり着きました。 他の記事も読んで、参考にさせていただきたいと思います。 ありがとうございました。

    みずの@寄り添うWebデザイナー

    投稿者

    2026/04/26

    ちゅらさん、オンラインセミナーにご参加いただきありがとうございます😊レビューも嬉しいです! 是非是非!読んで実践してみてください💪✨

    みずの@寄り添うWebデザイナー

    投稿者