Claude Codeを活用して、本文に画像・図解を挿入しよう｜ブログ画像のサイズと著作権の注意点

「設定の手順を文章だけで説明するのは、さすがに伝わりにくい気がする……」「画像を入れたいけど、サイズや著作権のことがよく分からない」

記事を書き慣れてくると、文章だけでは伝えきれない場面が出てきますよね。

結論から言うと、画像を用意するのは自分、アップロードや配置、代替テキストの入力はClaude Code、と分担するのがおすすめです。画像は「文章だけでは伝わらない部分」にしぼって入れれば、手間も最小限で済みます。この記事では、本文に入れる画像の用意の仕方と、Claude Codeに挿入してもらう手順、サイズや著作権の注意点を解説します。

本文への画像・図解を入れる目的

本文に画像を入れる目的は、大きく分けて次の3つです。

• 文章では伝わりにくいことを見せる：「画面の右上にあるボタン」のような操作手順は、画像があると一瞬で伝わる
• 体験の説得力を上げる：自分で使った商品の写真や、実際の画面は、「本当に使っている」ことの証拠になる
• 読み疲れを防ぐ：文字ばかりが続く長い記事に、区切りを作れる

ただし、すべての記事に画像が必要なわけではありません。Claude Codeが力を発揮するのは文章なので、まずは文章だけで記事を公開し、検索から読まれ始めた記事から画像を足していく、という順番でも大丈夫です。

また、図解やイラストは、作り方によってはAIっぽさが出やすいものです。このサイトでは、記事の中で図解やイラストは使わず、比較や整理は表で行う方針にしています。どうしても図解が必要な内容なら、自分の手で作るほうが安心です。

本文に入れる画像の用意の仕方

本文でよく使う画像と、その用意の仕方をまとめました。

画像の種類	向いている場面	用意の仕方
スクリーンショット	ツールの操作手順、設定画面の説明	パソコンに標準で入っている機能で撮る
自分で撮った写真	商品のレビュー、体験談	スマホなどで撮影する
自分で作った画像	記事の要点をまとめた画像など	Canvaなどのデザインツールで作る
フリー素材	雰囲気を伝えるイメージ画像	利用規約を確認したうえで使う

スクリーンショットの撮り方

スクリーンショットは、追加のアプリを入れなくても、パソコンの標準の機能で撮れます。

パソコン	操作	できること
Mac	Shift＋Command＋4	ドラッグで選んだ範囲を撮る
Mac	Shift＋Command＋5	画面全体・ウインドウ・選んだ範囲などを選んで撮る
Windows	Windowsキー＋Shift＋S	Snipping Toolで、選んだ範囲などを撮る

画面全体を撮るより、説明したい部分だけを範囲指定して撮るほうが、読者にとって分かりやすく、画像のファイルも小さくなります。

個人情報が写り込んでいないか確認する

スクリーンショットで特に気をつけたいのが、個人情報の写り込みです。次のようなものが写っていないか、公開前に必ず確認しましょう。

• メールアドレス、氏名、アカウント名
• WordPressのアプリケーションパスワードや、APIキーなどの接続情報
• 画面の端に出ている通知や、ブラウザで開いているほかのタブの名前

Claude Codeは画像の中身を読み取れるので、「このフォルダのスクリーンショットに、メールアドレスやパスワードのような個人情報が写っていないか確認して」と頼むこともできます。見つかった部分は、画像を撮り直すか、画像編集ツールで隠してから使いましょう。

本文への画像・図解の挿入手順

自分で挿入する場合

1. 記事の編集画面で、画像を入れたい場所に「画像」ブロックを追加する
2. 「アップロード」から画像を選ぶか、「メディアライブラリ」からアップロード済みの画像を選ぶ
3. 画面右側のブロックの設定で、「代替テキスト」を入力する
4. 記事を保存する

Claude Codeに挿入してもらう場合

1. 画像を作業フォルダに入れる：記事ごとにフォルダを分け、「xserver-panel-dns.png」のように、内容が分かる英数字のファイル名で保存する
2. お手本を1つ作る：自分で画像ブロックを1つ入れた記事を下書き保存し、「この下書きの本文を読んで、画像ブロックの書き方を覚えて」と頼む
3. 場所を指定して頼む：「images/〇〇フォルダの画像をWordPressのメディアにアップロードして、この記事の『DNSレコードの設定』の見出しの直後に入れて。代替テキストは、画像を見て内容が分かるように書いて」と伝える
4. 表示を確認する：送った本文とWordPressに保存された本文が一致しているかを確認してもらい、プレビューでも画像の位置や大きさを確認する

2つ目の「お手本を作る」がポイントです。WordPressの画像ブロックは、保存される形が決まっています。推測で書かせると、編集画面で「無効なコンテンツ」のエラーが出ることがあるので、実物を見せてから真似してもらいましょう。このコツは、SWELLの記事で紹介したブロックの扱い方と同じ考え方です。

代替テキストは、画像を見られない人への説明

代替テキスト（alt属性）は、画面の読み上げソフトを使う人や、通信環境が悪くて画像が表示されない人のために、画像の内容を文字で伝えるものです。Googleも、適切な代替テキストを書くことを勧めています。

良くない例	良い例
（空欄）	エックスサーバーのサーバーパネルで、DNSレコード設定を開いた画面
サーバー 設定 画面 DNS エックスサーバー	DNSレコードの追加画面で、種別に「TXT」を選んだところ

キーワードを並べるだけの代替テキストは、読み上げたときに意味が伝わりません。Claude Codeは画像を見て内容を説明するのが得意なので、代替テキストの下書きは任せてしまって大丈夫です。

本文への画像・図解、サイズ・容量の注意点

画像を入れるときに気をつけたいのが、画像の大きさとファイルの容量です。大きすぎる画像は、ページの読み込みを遅くする原因になります。

• 必要以上に大きな画像を使わない：スマホで撮った写真などは、そのままだとかなり大きいことがある。記事の表示幅に合う程度まで小さくしてからアップロードする
• 必要な部分だけを切り取る：スクリーンショットは、説明に必要な範囲だけにする
• 形式を選ぶ：写真はJPEG、文字の多い画面のスクリーンショットはPNGが一般的。WordPressは、容量を抑えやすいWebP形式の画像もアップロードできる

なお、WordPressは、画像をアップロードすると表示場所に合わせた複数のサイズを自動で作ります。また、とても大きな画像（初期設定では幅か高さが2560ピクセルを超えるもの）は、アップロード時に自動で縮小されます。とはいえ、元の画像を適度な大きさにしておくほうが、メディアライブラリも軽く保てます。

画像を小さくする作業も、「このフォルダの画像を、横幅1200ピクセル以内に縮小して」のようにClaude Codeに頼めます。ただし、使える方法はパソコンの環境によって異なるので、元の画像は別の場所に残しておくと安心です。

本文の画像の著作権・引用の注意点

ネットで見つけた画像を、許可なく記事に使うのはやめましょう。画像にも著作権があります。

他の人の著作物を自分の記事で使う方法として「引用」がありますが、著作権法で認められる引用には、次のような条件があるとされています。

• 自分の文章が「主」で、引用する部分が「従」であること
• 引用した部分が、自分の文章と明確に区別されていること
• その画像を引用する必然性があること
• 出所（どこから引用したか）を明示すること

画像の引用は、この条件を満たしているかの判断が難しくなりがちです。基本は、自分で撮ったスクリーンショットや写真、自分で作った画像を使うと考えておくのが安全です。

サービスの画面のスクリーンショットを使う場合も、サービスによっては画面の画像の使い方についてガイドラインを出していることがあります。気になる場合は、そのサービスの利用規約やガイドラインを確認しておきましょう。

本文の画像に関するよくある疑問

Q. 1つの記事に、画像は何枚くらい入れればいいですか？

A. 決まった枚数はありません。「この画像がないと伝わらないか」を基準に、必要な場所にだけ入れましょう。飾りのための画像を増やすより、手順の説明に必要なスクリーンショットをきちんと入れるほうが、読者の役に立ちます。

Q. 図解をAIの画像生成ツールで作ってもいいですか？

A. 使うこと自体が禁止されているわけではありませんが、AIで作った画像は、ちょっとした不自然さから「AIで作ったな」と読者に気づかれやすいものです。このサイトでは使っていません。図解が必要な場合は、Canvaなどで自分で作るか、表で整理できないかを先に考えてみてください。

Q. 画像を入れたら、編集画面でエラーが出ました

A. 画像ブロックの書き方が、WordPressが想定している形と違っている可能性があります。自分で画像ブロックを入れた下書きをお手本にして、Claude Codeに書き直してもらいましょう。公開前に確認したい項目は、投稿前チェックリストの記事にまとめています。

本文への画像・図解の挿入、まとめ

この記事では、本文に入れる画像の用意の仕方と、Claude Codeに挿入してもらう手順、サイズや著作権の注意点を解説しました。ポイントを振り返っておきます。

• 画像は「文章だけでは伝わらない部分」にしぼって入れる。まずは文章だけで公開してもいい
• スクリーンショットは標準の機能で撮り、個人情報の写り込みを必ず確認する
• 挿入はお手本を見せてからClaude Codeに任せ、代替テキストも書いてもらう
• ネットの画像は勝手に使わず、自分で撮った・作った画像を使う

記事ができあがって公開したら、Googleに記事の存在を知らせておきましょう。次は、インデックス登録のリクエストのやり方です。

このカテゴリ（ロードマップ・応用編）の記事一覧は、応用編のまとめ記事で紹介しています。