Daizo Hara「WordPressブログを始めたばかりで、画像の入れ方からもう戸惑っている…」「せっかく画像を入れたのに、表示がなんだかおかしい…」「最近、サイトの表示が遅い気がするけど、もしかして画像のせい？」WordPressサイト運営において、こんな壁にぶつかっていませんか？ 画像は、訪問者の目を引き、内容の理解を深めるための強力な武器ですが、扱い方を間違えるとサイトの足を引っ張る原因にもなりかねません。でも、ご安心ください。
私はこれまで500件以上のWordPressサイト制作に携わり、特に多くの初心者の方がサイトを育て、集客に繋げられるようサポートしてきました。大手クラウドソーシングでもトップフリーランスとして評価をいただいている経験から断言できます。この記事を読めば、あなたもWordPressの画像を自信を持って使いこなせるようになります。基本的な挿入方法から、プロが実践する最適化テクニック、そして意外と見落としがちな注意点まで、私の知識と経験を総動員して、どこよりも分かりやすく解説します。この記事を通じて、あなたのWordPressサイトがもっと魅力的で、もっと快適になるお手伝いができれば嬉しいです。
WordPressでの画像活用の基本
WordPressで情報発信をするなら、テキストだけでなく画像を効果的に使うことが、読者の心をつかむ鍵となります。まずは基本として、なぜ画像がそれほど重要なのか、そしてどんな種類の画像ファイルがWordPressで使えるのかを知っておきましょう。
なぜWordPressサイトに画像が重要なのか？
画像は単なる飾りではありません。実はサイトの成果に直結する、たくさんの大切な役割を担っているんです。
読者の理解を助け、エンゲージメントを高める
百聞は一見に如かず、と言いますが、まさにその通り。複雑な情報や手順も、適切な画像や図があれば、読者はパッと見て理解しやすくなります。文章だけだと難しく感じてしまう内容も、画像があるだけで「読んでみようかな」という気持ちになりませんか？ 結果として、読者がページに長く留まってくれたり（エンゲージメント向上）、内容を深く理解してくれたりする効果が期待できます。多くのサイトを見てきた経験上、画像の使い方が上手なサイトは、やはり読者の反応が良い傾向にあります。
SEO（画像検索）への影響
Googleなどの検索エンジンは、ページの内容を評価する際に、テキストだけでなく画像も見ています。特に「代替テキスト（alt属性）」をしっかり設定することで、Googleは「この画像は何の画像か」を理解しやすくなります。これが適切に行われていると、通常の検索結果だけでなく、Google画像検索からのアクセス増も期待できるのです。意外と見落とされがちなポイントですが、SEO対策としても画像の扱いは重要です。
サイトデザインとブランディングへの貢献
サイト全体の雰囲気や第一印象は、使われている画像によって大きく左右されます。高品質で統一感のある画像を選べば、サイトはぐっとプロフェッショナルに見えますし、「このサイトらしいな」というブランドイメージを伝える手助けにもなります。特に記事一覧などで表示されるアイキャッチ画像は、まさにサイトや記事の「顔」と言えるでしょう。
WordPressで扱える画像ファイル形式
WordPressでは、Webで一般的に使われている主要な画像ファイル形式を扱うことができます。それぞれの特徴を掴んでおくと、使い分けに役立ちます。
よく使われるJPEG, PNG, GIFの特徴
JPEG (.jpg, .jpeg) 写真のような色数の多い画像に向いています。ファイルサイズを比較的軽くできますが、圧縮しすぎると画質が荒くなるのがデメリット。背景を透明にはできません。デジカメで撮った写真などは、ほとんどこの形式ですね。
PNG (.png) ロゴやイラスト、図解など、色の境界がはっきりした画像に適しています。JPEGと違い、背景を透明にできるのが大きな特徴です。Webサイトのデザインでは非常に重宝します。ただし、写真のような複雑な画像をPNGで保存すると、ファイルサイズがJPEGより大きくなりがちです。
GIF (.gif) 扱える色数が少ない代わりに、簡単なアニメーションを作ることができます。背景透過も可能です。最近ではあまり使われなくなりましたが、短い動きを見せたいアイコンなどに使われることがあります。
次世代フォーマットWebPとそのメリット
WebP (.webp) Googleが開発した比較的新しい画像フォーマットです。「ウェッピー」と読みます。JPEGやPNGと同じくらいの画質を保ちながら、ファイルサイズをもっと小さくできるのが最大のメリット。サイトの表示速度を改善したい場合に非常に有効です。WordPressもバージョン5.8から標準でサポートするようになり、今後ますます利用が広がるでしょう。ただし、ごく一部の古いブラウザでは表示できない可能性もゼロではないので、その点だけ少し注意が必要です。
SVGは使える？注意点
SVG (.svg) ロゴやアイコンによく使われる、拡大縮小しても画質が全く劣化しない「ベクター形式」の画像です。非常に便利なのですが、WordPressではセキュリティ上の理由から、初期状態ではアップロードできません。SVGを使いたい場合は、専用のプラグインを入れるなどの対応が必要になります。安易に有効化するとセキュリティリスクを高める可能性もあるため、利用は慎重に検討しましょう。
【超基本】WordPressに画像を挿入する手順（ブロックエディタ）
さて、いよいよ本題です。WordPressの標準エディタである「ブロックエディタ」を使って、記事やページに画像を挿入してみましょう。初めての方でも、以下の手順に沿えば確実にできますよ。
新規投稿・固定ページに画像を追加する
まずは、新しい投稿を作成する（または固定ページを作る）際に、画像を挿入する最も基本的な流れです。
1. 画像ブロックを追加する
記事編集画面を開き、画像を置きたい場所で改行するなどして、新しいブロックを追加できる状態にします。 左上や行の右側に出てくる「+」（ブロック挿入ツール）ボタンをクリックします。 ブロックの選択肢が表示されるので、「画像」ブロックを選びます。（見当たらない場合は、検索窓に「画像」と入力してみてください）
2. アップロード方法を選ぶ（アップロード、メディアライブラリ、URLから挿入）
画像ブロックが挿入されると、ブロック内にボタンが表示されます。どの方法で画像を用意するかを選びます。
アップロード あなたのパソコンの中に保存されている画像ファイルを、直接WordPressにアップロードして使う方法です。これが一番よく使う方法だと思います。
メディアライブラリ 以前にWordPressへアップロードしたことがある画像の中から選んで使う方法です。同じ画像を何度も使いたい場合に便利です。
URLから挿入 他のウェブサイトにある画像のURL（アドレス）を指定して表示する方法です。ただし、これは注意が必要です。他人のサイトの画像を勝手に使うのは著作権の問題がありますし、リンク先の画像が削除されたら表示されなくなってしまいます。基本的には使わない方が良いでしょう。
3. 画像をアップロードまたは選択する
「アップロード」を選んだ場合 ボタンをクリックすると、パソコン内のファイルを選ぶ画面が開きます。使いたい画像ファイルを選択して「開く」ボタンを押します。
「メディアライブラリ」を選んだ場合 ボタンをクリックすると、これまでにアップロードした画像が一覧で表示されます。使いたい画像をクリックして選び、右下の「選択」ボタンを押します。
4. 挿入完了！エディタでの表示確認
選んだ画像が、エディタの中に表示されます。これで、ひとまず画像の挿入は完了です！簡単ですよね？
メディアライブラリを使いこなす
WordPressにアップロードした画像は、「メディアライブラリ」という場所に一元管理されます。このメディアライブラリの仕組みを理解しておくと、後々の画像管理がとても楽になります。
メディアライブラリとは？過去の画像を再利用
メディアライブラリは、あなたのWordPressサイト専用の画像保管庫のようなものです。一度アップロードした画像は、削除しない限りずっとここに保存されています。ですから、過去に使った画像を別の記事でまた使いたい、という時に、わざわざ再アップロードする必要はなく、メディアライブラリから簡単に呼び出せるのです。
WordPress管理画面の左側メニュー「メディア」>「ライブラリ」からもアクセスできます。
メディアライブラリから画像を挿入する手順
先ほど説明した通り、記事編集画面で画像ブロックを追加し、「メディアライブラリ」ボタンを押して、使いたい画像を選ぶだけです。
画像の詳細情報（タイトル、キャプション、説明）の編集
メディアライブラリで画像を選ぶと、右側にその画像に関する情報を入力・編集する欄が表示されます。
代替テキスト (alt) これは非常に重要です！後ほど詳しく説明しますが、必ず設定するようにしましょう。
タイトル 画像のファイル名が自動で入ることが多いですが、管理しやすい名前に変更もできます。メディアライブラリ内で画像を探す時に役立ちます。
キャプション 画像の下に表示したい説明文があれば、ここに入力します。（例：「写真提供：〇〇」など）
説明 これは主に管理用のメモ欄です。サイト訪問者が見ることは通常ありません。
これらの情報は、画像を挿入する時だけでなく、後からメディアライブラリでいつでも修正できます。
【応用】複数画像を美しく見せるギャラリーブロック
記事の中で、いくつかの画像を並べて見せたい時ってありますよね。そんな時に便利なのが「ギャラリー」ブロックです。
ギャラリーブロックの追加方法
通常のブロック追加と同じように、「+」ボタンから「ギャラリー」ブロックを選択します。
画像の選択と並び順の変更
ギャラリーブロックを追加すると、画像をアップロードするか、メディアライブラリから選ぶ画面になります。 ギャラリーに入れたい画像を複数選択します。（パソコンのCtrlキー（MacならCommandキー）を押しながらクリックすると、複数選べます） 選び終わったら、「ギャラリーを作成」ボタンを押します。 次の画面（ギャラリーを編集）で、画像の表示順をドラッグ＆ドロップで入れ替えたり、それぞれの画像にキャプションを付けたりできます。 並び順などが決まったら、「ギャラリーを挿入」ボタンを押します。
カラム数の調整と表示設定
記事内に挿入されたギャラリーブロックを選択すると、画面右側の設定パネル（ブロック設定）で、画像を横に何列で並べるか（カラム数）を調整できます。また、「画像をクリックした時に、元の大きな画像ファイルを開くようにするか（リンク先設定）」なども選べます。見せ方に合わせて調整してみてください。
【応用】テキストと画像を組み合わせるメディアとテキストブロック
画像と、それに関連するテキストを横並びにして、スッキリ見せたい場合にぴったりなのが「メディアとテキスト」ブロックです。
メディアとテキストブロックの追加
これも「+」ボタンから「メディアとテキスト」ブロックを選択します。
画像とテキストの配置調整
ブロックを追加すると、初期状態では左側に画像エリア、右側にテキスト入力エリアが表示されます。（逆の場合もあります） 画像エリアには、通常の画像ブロックと同じように画像をアップロードするか、メディアライブラリから選択します。 テキストエリアには、説明文などを入力します。 ブロックを選択した状態で、上部に出てくるツールバーのボタンを使えば、画像とテキストの位置（左右）を簡単に入れ替えることも可能です。また、右側のブロック設定で、画像をブロック内で縦方向にどの位置に揃えるか（上揃え、中央揃え、下揃え）なども調整できます。
これらの応用ブロックも使いこなせると、記事の表現力がぐっと上がりますよ。
WordPress画像を思い通りに！編集と設定をマスター
画像を記事に入れたら、次は見栄えや使い勝手を良くするための調整です。WordPressには標準で、画像のサイズ変更、切り抜き（トリミング）、配置調整、リンク設定などの機能が備わっています。さらに、SEOにも関わる重要な「代替テキスト」の設定もここで行います。
画像のサイズを変更する（リサイズ）
挿入した画像の大きさは、記事全体のレイアウトや読者の見やすさに直結します。適切なサイズに調整しましょう。
ブロック設定でのサイズ調整（S, M, L, フルサイズ）
記事編集画面で、サイズを変えたい画像ブロックをクリックして選択します。 画面右側に「ブロック」設定パネルが表示されているはずです。（もし表示されていなければ、画面右上の歯車アイコン⚙をクリックしてみてください） その中の「画像設定」または「スタイル設定」といった項目に、「画像サイズ」という選択肢があります。「サムネイル」「中」「大」「フルサイズ」など、あらかじめWordPress側で定義されたサイズを選ぶことができます。（これらの具体的な大きさは、WordPressの「設定」>「メディア」メニューで確認・変更できます）
ピクセル単位での幅・高さ指定
より細かくサイズを決めたい場合は、「画像サイズ」の下あたりにある「幅」や「高さ」の入力欄に、直接数値をピクセル（px）単位で入力します。 通常、片方の数値を入力すれば、画像の縦横比を保ったまま、もう片方も自動で調整されます。 また、すぐ下にある「25%」「50%」「75%」「100%」といったボタンを使えば、元の画像の大きさに対する割合でリサイズすることも可能です。
メディアライブラリでの事前リサイズ
実は、一番おすすめなのは、WordPressにアップロードする「前」に、あらかじめ画像編集ソフトなどで適切なサイズにリサイズしておくことです。なぜなら、大きな画像をWordPress内で縮小表示しても、元の大きなファイルのデータ量は変わらないため、ページの表示速度に影響する可能性があるからです。（この点については、後の「画像最適化」の章で詳しく触れます） とはいえ、WordPressのメディアライブラリにも、簡単なリサイズ機能はあります。メディアライブラリで画像を選び、「画像を編集」ボタンを押すと、編集画面で新しい寸法（ピクセル数）を指定して「縮尺変更」ボタンでリサイズできます。ただし、この方法で一度小さくすると元には戻せないので、注意が必要です。
画像を切り抜く（トリミング）
写真の一部だけを使いたい、不要な部分をカットしたい、という時にはトリミング機能が役立ちます。
メディアライブラリでのトリミング手順
メディアライブラリでトリミングしたい画像を選び、「画像を編集」ボタンを押します。 編集画面が表示されたら、画像の上にあるツールバーの中から「切り抜き」アイコン（四角い枠のようなマーク）をクリックします。 画像の上で、マウスをドラッグして、残したい範囲を選択します。点線の枠で囲まれるはずです。 範囲が決まったら、もう一度「切り抜き」アイコンをクリックします。 これで選択範囲外がカットされます。最後に必ず「保存」ボタンを押して、変更を確定させてください。
アスペクト比（縦横比）を固定したトリミング
切り抜く範囲を選ぶ時に、パソコンのShiftキーを押しながらドラッグすると、正方形（1:1の比率）を保ったまま範囲選択できます。 また、編集画面の右側にある「画像の切り抜き」設定エリアで、「アスペクト比」の欄に「16:9」や「4:3」、「1:1」といった比率を入力してから範囲選択することもできます。これを使うと、例えばブログのアイキャッチ画像で推奨されている縦横比に合わせて、きれいにトリミングできるので便利です。
画像の配置と回り込みを設定する
記事の中で、画像をどの位置に表示させるか、テキストとの関係性をどうするかを設定します。
配置オプション（左揃え、中央揃え、右揃え）
画像ブロックを選択すると、ブロックの上部にツールバーが表示されます。 その中に、配置を変更するためのアイコン（横棒がいくつか並んだようなデザインが多いです）があります。これをクリックすると、「左揃え」「中央揃え」「右揃え」などが選べます。 記事本文中の画像は、特別な理由がなければ「中央揃え」にしておくのが、多くの環境でレイアウトが崩れにくく、一般的で見やすいでしょう。 テーマによっては、「幅広」（記事本文の幅より少しだけ広く表示）や「全幅」（画面の幅いっぱいに表示）といった選択肢もあります。デザインに合わせて使い分けてみてください。
テキストの回り込み設定
画像を「左揃え」や「右揃え」にすると、その画像の横のスペースに、続くテキストが流れ込むように表示されます。これを「回り込み」と言います。 うまく使うと、雑誌のようなおしゃれなレイアウトを作ることもできます。 ただし、注意点もあります。パソコン画面ではきれいに見えても、スマートフォンのような幅の狭い画面で見た時に、回り込みが解除されたり、テキストが読みにくくなったりすることがあります。設定したら、必ずスマホ表示でも確認するようにしましょう。個人的には、初心者の方は無理に回り込みを使わず、中央揃えを基本にするのが無難かもしれません。
画像にリンクを設定する方法
画像そのものをクリックできるようにして、別のページに飛ばしたり、元の大きな画像を表示させたりすることができます。
リンク先URLの設定（カスタムURL、メディアファイル、添付ファイルのページ）
リンクを設定したい画像ブロックを選択し、上部ツールバーの「リンク」アイコン（鎖が繋がったようなマーク）をクリックします。 URLを入力する欄が表示されるので、飛ばしたいページのURL（アドレス）を直接入力します。これが「カスタムURL」です。 入力欄の下に、「メディアファイル」や「添付ファイルのページ」といった選択肢が表示されることもあります。 「メディアファイル」を選ぶと、画像ファイルそのもの（例: ~~.jpg）へのリンクになります。クリックすると画像だけが表示されます。 「添付ファイルのページ」を選ぶと、その画像だけが表示されるWordPress内の専用ページへのリンクになります。 通常、商品紹介ページや関連記事など、特定のページに誘導したい場合は、「カスタムURL」を使ってそのページのURLを入力します。
リンクを新しいタブで開く設定
URLを入力した後、もう一度リンクアイコンをクリックするか、入力欄の横にある設定ボタン（下向き矢印など）を押すと、オプションが表示されます。 「新しいタブで開く」というスイッチ（トグル）があるので、これをオンにします。 こう設定しておくと、読者が画像リンクをクリックした時に、現在開いているページはそのままに、新しいブラウザタブでリンク先のページが開くようになります。自分のサイト内の別ページへのリンクならオフでも良いですが、外部サイトへのリンクの場合は、オンにしておく方が親切ですね。
SEOにも効く！代替テキスト（alt属性）の設定
さて、画像設定の中でも、これは特に重要な項目です。「代替テキスト」、または「alt属性」「オルトテキスト」などと呼ばれます。面倒くさがらずに、必ず設定する習慣をつけましょう。
代替テキストとは？なぜ重要なのか？
代替テキストは、その画像が「何を描写しているか」を説明するための、目には見えないテキスト情報です。これがなぜ重要かというと、主に以下の理由があります。
一つ目は、検索エンジン（Googleなど）のためです。 検索エンジンは、人間のように画像を「見て」内容を理解することはできません。代替テキストに書かれた言葉を読むことで、「あ、この画像はこういう内容なんだな」と理解します。これが適切に設定されていると、検索エンジンからの評価（SEO）にも良い影響があり、特に画像検索からのアクセスに繋がりやすくなります。
二つ目は、アクセシビリティのためです。 通信状況が悪かったり、画像のURLが間違っていたりして、画像がうまく表示されなかった場合に、代替テキストが画像の代わりに表示されます。これがあれば、画像が見えなくても「ここには〇〇の画像があるんだな」と読者は理解できます。 また、目の不自由な方が利用するスクリーンリーダー（画面読み上げソフト）は、この代替テキストを読み上げることで、画像の内容を伝えます。代替テキストがないと、画像があることすら伝わらない可能性があります。
このように、代替テキストはSEOとアクセシビリティの両面で非常に重要な役割を果たしているのです。
具体的な設定方法と記述のポイント
設定は簡単です。画像ブロックを選択し、右側のブロック設定パネルにある「代替テキスト」という欄に入力するだけです。メディアライブラリで画像を選ぶ際にも設定できます。
何を書けばいいか？
まず、画像の内容を具体的に説明することです。 その画像が何であるか、どんな状況かを、簡潔かつ具体的に書きます。「写真」「イラスト」といった漠然とした言葉ではなく、「笑顔でノートパソコンを操作する女性」「WordPressのダッシュボード画面のスクリーンショット」のように記述しましょう。グラフなら「〇〇の年間売上推移を示す棒グラフ」のように、内容がわかるように書きます。
次に、キーワードを意識しつつ、自然な文章にすることです。 記事のテーマに関連するキーワードを代替テキストに含めるのは、SEOの観点からも有効です。ただし、キーワードを無理やり詰め込みすぎるのは逆効果（キーワードスタッフィングと呼ばれ、ペナルティを受ける可能性も）。あくまで「画像の内容を正確に説明する」ことを第一に、自然な文章になるように心がけましょう。
最後に、装飾目的の画像の場合です。 ページの飾りとして使っているだけで、特に意味を持たない画像（例: 区切り線に使っている模様など）の場合は、代替テキストは空欄のままでも構いません。スクリーンリーダーは空欄のalt属性を読み飛ばすため、不要な情報を伝えずに済みます。
最初は少し面倒に感じるかもしれませんが、検索エンジンにも、そして何より読者にも親切なサイトを作るために、代替テキストの設定は必ず行いましょう。500件以上のサイト制作経験の中でも、この設定を疎かにしているサイトは意外と多いのですが、非常にもったいないと感じています。
見た目を整えるキャプションの追加
画像のすぐ下などに、補足説明を表示したい場合に使うのが「キャプション」です。
キャプションの表示・非表示
画像ブロックを選択すると、画像の下あたりに「キャプションを追加」という文字が表示されるので、そこをクリックしてテキストを入力するだけです。 入力したテキストは、通常、画像のすぐ下に表示されます。
効果的なキャプションの書き方
キャプションは必須ではありませんが、以下のような場合に使うと効果的です。
画像だけでは伝わらない情報（例: 「図1：〇〇と△△の比較」） 写真の出典や提供元を示す場合（例: 「Photo by 〇〇 on Unsplash」） 読者に注目してほしいポイントを簡潔に伝える場合
必要に応じて活用し、画像の情報を補足しましょう。
WordPressサイトを高速化！画像最適化の重要知識
WordPressサイトを運営する上で、画像の「最適化」は避けて通れない重要なテーマです。特にサイトの表示速度に直接影響するため、しっかり理解し、実践していきましょう。なぜなら、表示が遅いサイトは、読者にも検索エンジンにも嫌われてしまうからです。
なぜ画像最適化が必要なのか？
高画質できれいな画像を使いたい気持ちはよく分かります。しかし、ファイルサイズが大きいままの画像をたくさん使うと、無視できないデメリットが生じます。
サイト表示速度への影響（ユーザー体験とSEO）
読者は待ってくれない 画像ファイルが大きいと、ページの読み込みに時間がかかります。皆さんも経験があると思いますが、なかなか表示されないページはイライラしますよね？ 多くの訪問者は、表示に数秒かかると、ページが完全に表示される前に離脱してしまいます。これは大きな機会損失です。
検索エンジンも速度を重視 Googleは、ウェブサイトの表示速度を検索ランキングを決める要因の一つとして明確に挙げています。つまり、表示が遅いサイトは、検索結果で不利になる可能性があるということです。せっかく良い記事を書いても、表示速度が遅いせいで読んでもらえない、検索順位が上がらない、というのは避けたいですよね。
サーバー容量の節約
ファイルサイズが大きい画像を大量にアップロードすると、契約しているレンタルサーバーのディスクスペース（容量）をどんどん消費していきます。特に長くサイトを運営していると、画像ファイルは溜まっていく一方です。サーバーの容量がいっぱいになると、プランをアップグレードする必要が出てきたり、最悪の場合サイトが表示できなくなったりすることもあります。画像を最適化することは、サーバー資源の節約にも繋がるのです。
最適な画像サイズとは？目安を知ろう
画像最適化の第一歩は、まず「適切なサイズ」で画像を準備することです。ここでの「サイズ」には、見た目の大きさである**ピクセルサイズ（寸法）と、ファイルの重さであるファイルサイズ（容量）**の2つの意味があります。
コンテンツ幅に合わせるのが基本
画像の**ピクセルサイズ（特に横幅）**は、その画像を表示する場所の幅に合わせて用意するのが鉄則です。 例えば、あなたのブログの記事本文が表示されるエリアの幅が最大800ピクセルだとします。そこに、デジカメで撮ったままの横幅4000ピクセルの巨大な画像を挿入しても、結局ブラウザが800ピクセルに縮小して表示するだけです。見た目は同じでも、読み込んでいるデータ量は巨大なままなので、表示速度は遅くなります。これは非常にもったいない！ まずは、自分のWordPressテーマの記事エリアの幅（コンテンツ幅）がどれくらいかを知ることが大切です。テーマのドキュメントに記載があるか、ブラウザの検証ツール（右クリック→検証など）を使って実際の表示幅を測ってみましょう。
推奨ピクセルサイズ（横幅の目安：例 800px〜1200px）
一概に「このサイズが絶対！」とは言えませんが、一般的なブログ記事で使う画像であれば、横幅800ピクセルから、大きくても1200ピクセル程度あれば十分なケースがほとんどです。これより大きいサイズが必要になることは稀でしょう。 アイキャッチ画像などは、テーマが推奨するサイズ（例: 1200 x 630 ピクセルなど）が決められていることが多いので、それに合わせるのが一番です。
ファイルサイズの目安（例：1枚あたり100KB〜200KB以下）
画像のファイルサイズ（容量、重さ）は、できるだけ軽くすることが目標です。 これも厳密なルールはありませんが、1枚あたり100KB（キロバイト）から200KB以下、多くても300KB程度に収めることを目指しましょう。写真などでどうしても画質を保ちたい場合でも、1MB（メガバイト = 1000KB）を超えるような画像は、極力避けるべきです。 適切なピクセルサイズにした上で、さらに「圧縮」という処理を行うことで、ファイルサイズを小さくしていきます。
【実践】画像ファイルサイズを削減（圧縮）する方法
画質をできるだけ落とさずに、ファイルサイズ（容量）だけを小さくする技術を「圧縮」と言います。WordPressに画像をアップロードする「前」に、一手間かけて圧縮を行うのが、最も確実で効果的な方法です。
WordPressアップロード前に圧縮するツール
幸い、専門的な知識がなくても使える便利なツールがたくさんあります。
オンラインツール（例：TinyPNG/JPG）
TinyPNG / TinyJPG ( https://tinypng.com/ ) 私が初心者の方にまずおすすめするのがこれです。Webサイトにアクセスし、圧縮したい画像ファイル（JPEGまたはPNG）をドラッグ＆ドロップするだけで、驚くほどファイルサイズを小さくしてくれます。しかも、見た目の画質劣化はほとんど感じられません。無料で使え、操作も非常に簡単なので、ぜひブックマークしておきましょう。 他にも、同様のオンライン圧縮ツールはたくさんあります。（例: iLoveIMG, Compress JPEG など）
PCソフトウェア（例：画像編集ソフトの書き出し設定）
もしあなたがAdobe Photoshopのような高機能な画像編集ソフトをお持ちなら、「Web用に保存」や「書き出し」機能を使う際に、画質とファイルサイズのバランスを調整しながら保存できます。 無料の画像編集ソフト、例えば「GIMP」などでも、JPEGで保存する際に「品質」スライダーを調整することで、ファイルサイズをコントロールできます。品質80〜90程度でも、見た目はそれほど変わらずにファイルサイズを削減できることが多いです。
WordPressプラグインで自動圧縮する
毎回手動で圧縮するのが面倒…という方には、WordPressのプラグインを使って、画像をアップロードする際に自動で圧縮する方法もあります。
おすすめプラグイン紹介（例：EWWW Image Optimizer, Smush）
EWWW Image Optimizer 高機能で昔から人気のあるプラグインです。新しくアップロードする画像の自動圧縮はもちろん、すでにアップロード済みの画像を一括で最適化する機能もあります。WebP形式への自動変換など、多機能なのが特徴です。
Smush こちらも非常に人気が高く、使いやすいインターフェースが魅力です。無料版でも、画質を劣化させずに圧縮する「ロスレス圧縮」や、後述する「遅延読み込み（Lazy Load）」機能が使えます。より強力な圧縮（ロッシー圧縮）は有料版になります。 他にもたくさんの画像最適化プラグインがあります。（例: Imagify, ShortPixel Image Optimizer など）
プラグイン設定のポイントと比較
圧縮方式 「ロスレス圧縮」（画質劣化なし、圧縮率は低め）と「ロッシー圧縮」（わずかに画質が劣化する可能性あり、圧縮率は高め）を選べるプラグインが多いです。どちらが良いかは、サイトの性質や画質へのこだわりによります。ブログ記事の画像なら、ロッシー圧縮でファイルサイズを優先しても問題ないことが多いです。
リサイズ機能 アップロード時に、設定した最大幅や高さを超える画像を自動でリサイズしてくれる機能。ピクセルサイズの調整忘れを防げます。
WebP変換機能 対応ブラウザにはより軽量なWebP形式で画像を配信する機能。サイト高速化に効果的です。
遅延読み込み (Lazy Load) 機能 ページの読み込み時に、画面に表示されていない（スクロールしないと見えない）画像を後から読み込む技術です。これにより、ページの初期表示速度を劇的に改善できる場合があります。多くの画像最適化プラグインにこの機能が含まれています。
プラグインは非常に便利ですが、種類によってはサーバーに負荷をかけるものもあります。また、設定項目が多くて初心者には少し難しく感じるかもしれません。個人的には、まずはアップロード前の手動圧縮（TinyPNGなど）を基本とし、遅延読み込み機能はキャッシュ系プラグイン（LiteSpeed Cacheなど、サーバー環境に合ったもの）で対応する、という組み合わせが、シンプルで効果も高く、コントロールしやすいのでおすすめです。
次世代フォーマットWebPへの変換
さらなる表示速度向上を目指すなら、WebP形式の活用も視野に入れましょう。
WebPのメリット（高画質・軽量）
繰り返しになりますが、JPEGやPNGよりもファイルサイズを小さくできるのが最大の利点です。ページの読み込み時間が短縮され、ユーザー体験向上に繋がります。
WebP変換プラグインの活用
EWWW Image Optimizerなどの画像最適化プラグインには、アップロードされた画像を自動でWebP形式に変換し、WebP対応ブラウザにはWebPを、非対応ブラウザには元のJPEGやPNGを配信してくれる機能を持つものがあります。 WebP変換に特化したプラグインも存在します。
設定は少し複雑になる場合がありますが、表示速度改善への効果は大きいので、サイト運営に慣れてきた中級者以上の方は、導入を検討してみる価値は十分にあります。
WordPressの「顔」！アイキャッチ画像の効果的な設定
ブログの記事一覧や、SNSでシェアされた時に表示される「アイキャッチ画像」。これは文字通り、読者の注意（アイ）を惹きつける（キャッチ）ための重要な画像です。設定は簡単ですが、効果的に使うためのポイントがいくつかあります。
アイキャッチ画像とは？その役割と重要性
記事一覧やSNSシェア時の見栄え
あなたのブログのトップページやカテゴリーページを開くと、記事タイトルと一緒に小さな画像が表示されていますよね？あれがアイキャッチ画像です。また、記事のURLをFacebookやX（旧Twitter）に投稿した際にも、通常はこのアイキャッチ画像が表示されます。これが魅力的かどうかで、記事がクリックされるかどうかが大きく変わってきます。まさに記事の「第一印象」を決める、重要な顔なのです。
クリック率向上への貢献
たくさんの記事が並んでいる中で、読者はまずアイキャッチ画像とタイトルを見て、どの記事を読むかを判断します。内容を的確に表し、かつ魅力的なアイキャッチ画像は、「おっ、この記事面白そうだな」「私の知りたいことが書いてありそうだ」と読者に思わせ、クリックしてもらうための強力な後押しとなります。
効果的なアイキャッチ画像の作成ポイント
ただ画像を設定するだけでなく、少し工夫するだけで、アイキャッチ画像の効果は格段に上がります。
推奨サイズとアスペクト比（テーマによって確認）
アイキャッチ画像が最もきれいに表示されるサイズ（ピクセル数）や縦横の比率（アスペクト比）は、実はあなたが使っているWordPressテーマによって異なります。テーマの制作者が推奨サイズを指定していることが多いので、まずはテーマのマニュアルや設定を確認してみましょう。 もし推奨サイズが不明な場合でも、一般的には横長の比率、特に16:9（テレビ画面などと同じ比率）で作っておくと、多くのテーマやSNSでの表示に対応しやすいです。具体的なピクセル数としては、例えば横幅1200ピクセル × 高さ630ピクセルなどが、Facebookの推奨するOGP画像サイズでもあり、よく使われます。
デザインツールを活用した簡単な作り方（例：Canva）
「デザインなんてやったことない…」という方でも大丈夫。今は「Canva ( https://www.canva.com/ )」のような、無料から使える便利なオンラインデザインツールがあります。 Canvaには、ブログのアイキャッチ画像に適したテンプレートがたくさん用意されているので、好きなデザインを選んで、文字や画像を差し替えるだけで、プロっぽいアイキャッチ画像が簡単に作れます。Canva内で使えるフリー素材の写真やイラストも豊富に用意されていますよ。
著作権フリー素材の探し方と注意点
アイキャッチ画像に使う写真やイラストは、著作権に十分注意が必要です。インターネットで見つけた画像を無断で使うのは絶対にやめましょう。（詳しくは次の章で解説します） 自分で撮った写真や作ったイラスト以外を使う場合は、必ず著作権フリーの素材を提供しているサイトから入手し、そのサイトの利用規約をしっかり読んで、ルールを守って使いましょう。
アイキャッチ画像の設定手順
アイキャッチ画像の設定自体は、WordPressの編集画面から簡単に行えます。
投稿編集画面での設定方法
記事の編集画面を開き、画面右側の設定パネル（「投稿」タブが選択されている状態）を見てください。 その中に「アイキャッチ画像」という項目（セクション）があります。 「アイキャッチ画像を設定」という文字リンクか、もし既に何か画像が設定されていればその画像自体をクリックします。 すると、メディアライブラリが開きます。 ここで、新しく画像をアップロードするか、既にメディアライブラリにある画像の中から選びます。 画像を選んだら、右下にある青い「アイキャッチ画像を設定」ボタンをクリックします。 編集画面右側の「アイキャッチ画像」の項目に、選んだ画像が表示されれば設定完了です。
メディアライブラリからの選択・アップロード
設定フローの中でメディアライブラリが開くので、そこで画像をアップロードすることも、既存の画像を選ぶことも、どちらも可能です。
WordPress画像の著作権とフリー素材の基礎知識
Webサイトで画像を使う上で、絶対に理解しておかなければならないのが「著作権」です。これを知らずに他人の画像を勝手に使ってしまうと、後で大変なトラブルになる可能性があります。フリーランスとして多くのクライアントワークをこなす中でも、この著作権に関する意識は非常に重要だと感じています。
画像の著作権を理解する重要性
無断使用のリスク
まず大原則として、インターネット上で見つけた写真やイラストには、基本的にそれを作成した人（または権利を持つ会社）の著作権があります。それを、権利者の許可なく自分のサイトに掲載することは、著作権侵害という法律違反にあたります。 もし著作権侵害をしてしまうと、権利者から画像の削除要求や警告を受けたり、場合によっては損害賠償を請求されたりする可能性があります。そうなると、サイトの信頼も失墜してしまいます。軽い気持ちでの無断使用は絶対にやめましょう。
クリエイティブ・コモンズライセンスとは？
著作権者が、自分の作品を他の人に使ってもらう際に、「こういう条件を守ってくれれば、自由に使っていいですよ」という意思表示をするための世界的なルール（ライセンス）があります。これを「クリエイティブ・コモンズ（CC）ライセンス」と言います。 CCライセンスにはいくつかの種類があり、「原作者の表示（BY）」「非営利（NC）」「改変禁止（ND）」「同じ条件で継承（SA）」といった条件の組み合わせで示されます。例えば「CC BY」なら、「作者名を表示すれば、改変も商用利用もOK」という意味になります。 フリー素材サイトなどで、このCCライセンスを採用している場合があります。利用する際は、どの種類のCCライセンスなのか、そしてその条件をしっかり確認することが不可欠です。
安全に使えるフリー素材サイトの探し方
著作権トラブルを避け、安心して画像を使うためには、著作権フリーの素材を提供しているサイトを利用するのが最も現実的で簡単な方法です。
おすすめフリー素材サイト紹介（写真・イラスト）
世の中には、高品質なフリー素材を提供してくれる素晴らしいサイトがたくさんあります。いくつか例を挙げますが、これ以外にもたくさんありますので、自分に合ったサイトを探してみてください。
写真素材サイト
海外サイトですが、非常におしゃれで高品質な写真が多く、商用利用も可能です。クレジット表記も不要な場合が多いです。
こちらも高品質な写真や動画素材が豊富。日本語での検索も可能です。
写真だけでなく、イラストやベクター画像、動画素材も扱っており、種類が豊富です。日本語対応。
日本の会社が運営しており、日本人モデルの写真や日本の風景など、国内サイト向けの素材を探しやすいのが特徴です。無料会員はダウンロード数などに制限があります。
イラスト素材サイト
多種多様なテイストのイラストがあり、非常に有名です。（写真ACの姉妹サイト）
シンプルでおしゃれな線画イラストが多数。加工も自由。
温かみのあるタッチのイラスト素材。汎用性が高く使いやすいです。
利用規約を必ず確認するポイント
フリー素材サイトを使う上で、一番大事なのは、各サイトの利用規約を必ず読むことです。「フリー」という言葉に安心して、規約を読まずに使うのは危険です。特に以下の点は必ず確認しましょう。
商用利用は可能か？ あなたのサイトがアフィリエイト広告を貼っていたり、商品やサービスを販売していたりする場合、「商用利用」にあたります。商用利用が許可されているかは必ず確認が必要です。
クレジット表記（作者名やサイト名の表示）は必要か？ サイトによっては、画像を使う際に「Photo by 〇〇」のようなクレジット表記を義務付けている場合があります。
画像の加工・改変は許可されているか？ ダウンロードした画像の色を変えたり、トリミングしたり、文字を入れたりする加工が許されているかを確認します。
禁止されている使い方はないか？ 素材の再配布（ダウンロードした素材を他の人に配ること）、アダルトサイトや公序良俗に反するサイトでの利用、ロゴなどへの使用を禁止している場合があります。
利用規約はサイトごとに本当に様々です。「あのサイトでOKだったから、こっちも大丈夫だろう」という思い込みはせず、使うサイトごとに必ず確認する習慣をつけましょう。これが、安全にサイト運営を続けるための鉄則です。
自分で撮影・作成した画像の権利
もちろん、最も安全で確実なのは、自分で撮影した写真や、自分で描いたイラスト、作成した図などを使うことです。これらは、あなた自身が著作権者となるため、誰に気兼ねすることなく自由に使えます。オリジナリティを出すという意味でも、可能であれば自分で素材を用意することも考えてみましょう。
【困ったときに】WordPress画像のよくあるトラブルと対処法
WordPressで画像を扱っていると、「あれ？うまくアップロードできない」「画像が表示されなくなった…」といった予期せぬトラブルに遭遇することもあります。慌てずに原因を探り、対処していきましょう。ここでは、初心者の方が遭遇しやすい代表的なトラブルとその対処法のヒントをご紹介します。
画像がアップロードできない
ボタンを押しても反応がない、エラーメッセージが出る、といった場合です。
ファイルサイズが大きすぎる WordPressやサーバーには、一度にアップロードできるファイルの最大サイズが設定されています（例: 8MBなど）。これを超えたサイズの画像はアップロードできません。 対処法 まずは、アップロードしようとしている画像のファイルサイズを確認しましょう。もし上限を超えているようであれば、前述した画像圧縮ツール（TinyPNGなど）を使ってファイルサイズを小さくしてから、再度アップロードを試してみてください。これが一番簡単な解決策です。根本的な解決としては、サーバーの設定（php.iniなど）でアップロードサイズの上限を上げる方法もありますが、少し専門知識が必要になります。
ファイル形式が対応していない WordPressが標準で扱える画像形式（JPEG, PNG, GIF, WebPなど）以外のファイルをアップロードしようとしていませんか？ 例えば、Photoshopのファイル（.psd）やIllustratorのファイル（.ai）などは、そのままではアップロードできません。 対処法 対応しているファイル形式（JPEGやPNGなど）に変換してからアップロードし直しましょう。
一時的なサーバーエラーや通信の問題 まれに、サーバー側の問題や、お使いのインターネット回線の状況によって、一時的にアップロードがうまくいかないこともあります。 対処法 少し時間を置いてから再度試してみる、あるいは可能であれば別のネットワーク環境（例: スマホのテザリングなど）から試してみると、問題が切り分けられる場合があります。
プラグインの干渉 何か新しいプラグインを入れた後からアップロードできなくなった、という場合は、そのプラグインが原因かもしれません。 対処法 原因と思われるプラグインを一時的に無効化して、アップロードできるか試してみましょう。もしそれで解決するなら、そのプラグインの設定を見直すか、代替のプラグインを探す必要があります。
画像が表示されない・壊れている
記事には挿入したはずなのに、サイトを見ると画像が表示されていなかったり、バツ印や壊れたアイコンが表示されたりする場合です。
画像のURL（ファイルパス）が間違っている 画像ファイルがサーバー上のどこにあるかを示す住所（URL）が間違っていると、ブラウザは画像を見つけられません。サイトを引っ越し（サーバー移転）したり、ドメインを変更したりした後によく起こります。 対処法 ブラウザの検証ツール（右クリック→検証）を開き、「コンソール」タブにエラーメッセージが出ていないか確認します。また、「要素」タブで表示されていない画像の<img>タグを探し、src属性に書かれているURLが正しいか、実際にそのURLにブラウザでアクセスして画像が表示されるかを確認しましょう。URLが間違っている場合は、正しいパスに修正する必要があります。（修正方法はケースバイケースで、プラグインで一括置換したり、データベースを直接編集したりする必要がある場合もあります）
キャッシュの影響 WordPressのキャッシュ機能（プラグインやサーバー側）や、あなた自身のブラウザのキャッシュが古い情報を記憶していて、それが原因で画像が正しく表示されないことがあります。 対処法 まずは、お使いのブラウザのキャッシュをクリア（スーパーリロード: WindowsならCtrl+Shift+R、MacならCmd+Shift+R）してみてください。それでもダメなら、もしキャッシュ系のプラグインを使っている場合は、プラグインの設定画面からキャッシュを削除（クリア）する操作を行ってみましょう。
遅延読み込み（Lazy Load）機能の問題 サイト高速化のために導入した遅延読み込み機能が、他の機能（JavaScriptなど）と衝突して、画像の表示を妨げている可能性があります。 対処法 遅延読み込み機能を提供しているプラグインの設定を見直し、特定の画像を遅延読み込みの対象外にするなどの調整ができないか確認します。あるいは、一時的に遅延読み込み機能をオフにして、画像が表示されるか確認してみましょう。
ファイルが削除された、または壊れた 何らかの理由で、サーバー上から画像ファイル自体が削除されてしまったり、ファイルが破損してしまったりしている可能性も考えられます。 対処法 WordPressのメディアライブラリや、FTPソフトなどでサーバー上のwp-content/uploadsフォルダを確認し、該当の画像ファイルが存在するか、ファイルサイズが0になっていないかなどを確認します。もしファイルがなければ、元のファイルを再アップロードする必要があります。
画像の編集ができない
メディアライブラリで画像を編集しようとしても、ボタンが押せない、エラーが出る、といった場合です。
ユーザー権限の問題 WordPressにはユーザーごとに役割（権限グループ）があり、役割によってはメディアの編集権限がない場合があります。 対処法 あなたがログインしているユーザーの権限を確認してください。通常、管理者（Administrator）権限があれば全ての操作が可能です。もし権限が低い（例: 投稿者、寄稿者など）場合は、管理者に権限の変更を依頼する必要があります。
プラグインの干渉 画像編集機能を持つプラグインや、メディアライブラリの機能を拡張するようなプラグインが、WordPress標準の編集機能と衝突している可能性があります。 対処法 「画像がアップロードできない」場合と同様に、怪しいプラグインを一つずつ無効化して、編集機能が使えるようになるか確認してみましょう。
サーバー側の問題 画像の編集処理には、サーバー側で特定のプログラム（GDライブラリやImagickといった画像処理ライブラリ）が動いている必要があります。これらがサーバーにインストールされていないか、バージョンが古い、あるいはサーバーのメモリが不足しているといった理由で、編集処理が失敗することがあります。 対処法 これは少し技術的な問題になるので、まずは利用しているレンタルサーバーの仕様を確認したり、サーバー会社に問い合わせてみるのが良いでしょう。
トラブルが発生すると焦ってしまいますが、一つ一つ原因の可能性を探っていけば、解決の糸口が見つかるはずです。多くの初心者の方が同様の経験をしていますので、諦めずに試してみてください。
まとめ｜WordPress画像をマスターして魅力的なサイト制作を
さて、今回はWordPressで画像を効果的に扱うための知識とテクニックを、基本から応用、そして注意点まで、かなり詳しくお伝えしてきました。いかがでしたでしょうか？
画像の挿入、編集、サイズや代替テキストの設定、そして表示速度を意識した最適化。これらをマスターすれば、あなたのWordPressサイトは、もっと見やすく、もっと魅力的になり、読者にとっても検索エンジンにとっても価値の高いものになるはずです。特に、今回強調させていただいた**「代替テキストの設定」と「画像サイズの最適化（ピクセルサイズとファイルサイズの圧縮）」**は、地味に思えるかもしれませんが、サイトの成果を左右する非常に重要なポイントです。これは、私が500件以上のサイト制作を通して実感していることです。ぜひ、面倒くさがらずに実践する習慣をつけてください。
この記事でお伝えした内容が、あなたのWordPressサイト運営をよりスムーズで、より楽しいものにするための一助となれば、これほど嬉しいことはありません。
「でも、やっぱり自分でサイトを作るのは難しそう…」「もっと本格的な機能やデザインを実現したいけど、どうすればいいか分からない…」
もし、あなたがWordPressサイトの制作や運営で、専門家のサポートが必要だと感じていらっしゃるなら、どうぞお気軽にご相談ください。これまで培ってきた豊富な経験と知識を活かし、あなたの目標達成に最適な方法を一緒に考え、形にするお手伝いをさせていただきます。初心者の方にも、専門用語をできるだけ使わずに、丁寧にご説明いたしますのでご安心ください。あなたのウェブサイトという大切な資産作りを、全力でサポートいたします。