第9章：画像管理

第9章：画像管理

この章では、画像のアップロード、管理、削除、そしてWebP最適化機能について説明します。

9-1. 画像の自動生成

AIを使って記事に合わせた画像を自動生成できます。

画像生成の設定

画像を生成する前に、設定画面で画像生成の設定を行います。

  1. 管理画面の左メニューから「設定」をクリック
  2. タブメニューから「画像」をクリック

設定できる項目：

項目 説明
画像生成スタイル 生成する画像のスタイルを13種類から選択します

  • 自動判断（記事内容から推測）
  • フォトリアル（写真のようなリアルな画像）
  • イラスト風（手描きイラスト調）
  • 水彩画風（透明感のある水彩タッチ）
  • アニメ風（日本のアニメ調）
  • 温かみのあるアニメ
  • ミニマル（シンプルで余白の多いデザイン）
  • ポップアート（鮮やかでポップな色使い）
  • ビンテージ（レトロで懐かしい雰囲気）
  • 3Dレンダリング（CGのような立体感）
  • 油絵風（重厚感のある油彩タッチ）
  • 鉛筆画風（モノクロスケッチ調）
  • サイバーパンク（近未来的・ネオン調）
アイキャッチ画像設定
  • API / モデル：使用するAPIとモデルを選択（詳細は9-5を参照）
  • 文字入れON/OFF：画像内にタイトルテキストを表示するかどうか
  • フォントスタイル：文字入れONの場合、7種類から選択
    • お任せ（AI自動選択）
    • モダン（シンプル・洗練）
    • エレガント（高級感・上品）
    • ポップ（カラフル・楽しい）
    • 手書き風（親しみやすい）
    • インパクト（太字・目立つ）
    • 和風（筆文字風）
記事内画像設定
  • API / モデル：使用するAPIとモデルを選択
  • 文字入れON/OFF：フォントスタイルはアイキャッチの設定が適用されます
  • 自動生成時の枚数：0枚（アイキャッチのみ）〜5枚から選択

ヒント

APIモデルの選択により画像の品質と費用が変わります。最安値のモデルから試してみることをおすすめします。
ただし、日本語の文字を入れる場合にはHigh品質以上のモデルが必要です。Low/Medium品質では日本語が崩れます。

アイキャッチ画像の生成

記事編集画面でアイキャッチ画像を生成できます。

  1. 管理画面の「記事管理」→「全記事一覧」から記事を開く
  2. 画面右側の「画像生成」エリアにある「アイキャッチを生成」ボタンをクリック
  3. 確認メッセージが表示されます
    • 「アイキャッチ画像を生成しますか？」
    • 「既存のアイキャッチは置き換えられます。」
    • 「（数十秒かかる場合があります）」
  4. 「OK」をクリックすると生成が開始されます
  5. 生成が完了すると、ページが自動的に再読み込みされます
  6. 記事の先頭にアイキャッチ画像が挿入されます

記事内画像の生成

h2見出しごとに画像を挿入できます。

  1. 記事編集画面の「画像生成」エリアにある「記事内画像を生成」ボタンをクリック
  2. 生成枚数を入力します（デフォルト：設定で指定した枚数）
  3. 確認メッセージが表示されます
    • 「記事内画像を生成しますか？」
    • 「h2見出しの後に画像が挿入されます。」
    • 「（数分かかる場合があります）」
  4. 「OK」をクリックすると生成が開始されます
  5. 生成が完了すると、ページが自動的に再読み込みされます
  6. 各h2見出しの直後に画像が挿入されます

注意

画像生成にはAPIの費用がかかります。生成枚数が多いほど費用も増加しますのでご注意ください。

9-2. 画像の手動アップロード

自分で用意した画像をアップロードして使用できます。

画像管理画面を開く

  1. 管理画面の左メニューから「画像管理」をクリック
  2. 画像管理画面が表示されます

画像をアップロードする

方法1：画像管理画面からアップロード

  1. 画面上部のアップロードフォームで「選択」ボタンをクリック
  2. アップロードしたい画像を選択
  3. 「アップロード」ボタンをクリック
  4. アップロードが完了すると、画像URLが表示されます

対応している画像形式：

  • JPEG（.jpg, .jpeg）
  • PNG（.png）
  • GIF（.gif）
  • WebP（.webp）

最大ファイルサイズ：5MB

方法2：記事編集画面から直接アップロード

  1. 記事編集画面のエディタで「画像」ボタン（画像アイコン）をクリック
  2. 画像選択モーダルが表示されます
  3. 上部のアップロードフォームから画像を選択してアップロード
  4. アップロードした画像をクリックすると、記事内に挿入されます

ヒント

画像をアップロードすると、自動的にWebP画像（3サイズ：900px/400px/200px）が生成されます。WebP画像は一覧表示や記事ページで使用され、表示速度の大幅な向上に役立ちます。

補足

GIF画像はアニメーションを保持するため、WebP変換の対象外となります。元のGIFファイルがそのまま使用されます。

9-3. 画像一覧・削除

アップロードした画像の確認と削除ができます。

統計情報の確認

画像管理画面の上部に統計情報が表示されます。

項目 説明
オリジナル画像 アップロードした画像の枚数と容量
合計容量 全ファイル（オリジナル画像＋関連ファイル）の合計容量とファイル数
WebP化率 WebP画像が生成されている画像の割合
未処理の画像がある場合は件数も表示されます

画像一覧の見方

画像はグリッド形式で表示されます（1ページに30件ずつ）。

画像にマウスを重ねると表示される情報：

  • ファイル名
  • ファイルサイズ
  • 使用している記事（使用中の場合）

バッジの意味：

バッジ 説明
数字 使用中の記事件数（緑色のバッジ）
どの記事でも使用されていない（グレーのバッジ）
WebP未処理 WebP画像（3サイズ）が未生成（黄色のバッジ）

画像を削除する

個別削除：

  1. 削除したい画像にマウスを重ねる
  2. 右上に表示される「ゴミ箱」アイコンをクリック
  3. 確認メッセージが表示されます
    • 使用中の画像：「この画像は記事で使用されています。削除してもよろしいですか？」
    • 未使用の画像：「この画像を削除しますか？（WebP画像も一緒に削除されます）」
  4. 「OK」をクリックすると削除されます

一括削除：

  1. 削除したい画像の左上にあるチェックボックスをクリック（複数選択可能）
  2. 画面上部の「すべて選択」チェックボックスで全画像を選択することもできます
  3. 「選択した画像を削除（○）」ボタンをクリック（○は選択数）
  4. 確認メッセージが表示されます
  5. 「OK」をクリックすると削除されます

注意

画像を削除すると、オリジナル画像と関連するWebP画像（3サイズ）がすべて削除されます。記事内でその画像が表示されなくなりますので、削除前に使用状況を必ず確認してください。削除した画像は元に戻せません。

9-4. WebP最適化機能

WebP画像は、ページの表示速度を大幅に向上させるための最適化された画像形式です。

WebP画像の仕様

項目 詳細
生成サイズ 1枚の画像から3サイズのWebPを自動生成します

  • 900px（大）：記事本文用
  • 400px（中）：一覧ページ用
  • 200px（小）：サイドバー用
リサイズ方式 アスペクト比を維持したまま、横幅を指定サイズに縮小
ファイル名 元のファイル名にサイズが付加されます
例：image123.jpg → image123_900.webp、image123_400.webp、image123_200.webp
品質 WebP品質80%（ImageMagick / GDライブラリで生成）
自動生成タイミング
  • 画像アップロード時
  • AI画像生成時
  • WebP一括生成を実行したとき
変換対象外
  • GIF画像：アニメーションが失われるため変換しません
  • WebP画像：すでにWebP形式のため変換不要です

WebP画像が使用される場所

  • 記事本文：900pxのWebP画像が<picture>要素で優先配信されます（WebP非対応ブラウザでは元画像にフォールバック）
  • トップページの記事一覧：400pxのWebP画像が使用されます
  • カテゴリーページの記事一覧：400pxのWebP画像が使用されます
  • サイドバーの最新記事：200pxのWebP画像が使用されます
  • 画像管理画面の画像一覧

WebP画像が使用されない場所：

  • 記事詳細ページのアイキャッチ（オリジナル画像が表示されます）
  • 広告画像
  • ロゴ画像

WebPの一括生成

古い画像でWebPが未生成の場合、一括で生成できます。

  1. 画像管理画面で「WebP未処理の画像があります」という黄色い警告が表示される
  2. 「WebP一括生成」ボタンをクリック
  3. プログレスバー付きのモーダルが表示され、処理の進捗が確認できます
  4. 生成が完了すると、ページが自動的に再読み込みされます

注意

WebP一括生成中は、処理が完了するまでページを離れないでください。ページを移動すると処理が中断されます。

補足

WebP画像の生成にはGDライブラリまたはImageMagickが必要です。ほとんどのサーバーで標準で有効になっていますが、もしWebPが生成されない場合は、サーバー管理者にGDライブラリまたはImageM
agickの有効化を依頼してください。

WebP最適化のパフォーマンス効果

WebP画像を使用すると、ページの読み込み速度が大幅に向上します。

効果の例：

  • トップページの読み込み時間：約7.7倍高速化
  • 画像ファイルサイズ：約52%削減

特に、一覧ページで多くの画像を表示する場合に効果が大きくなります。

9-5. 画像生成APIモデルの選び方

画像生成に使用するAPIモデルは、品質と費用のバランスに合わせて選択できます。

モデルの種類

グループ モデル 1枚あたりの費用 日本語文字入れ
Low品質
文字なし向け		 Mini Low 正方形 $0.005（約0.8円） ×
Mini Low 横長 $0.006（約0.9円） ×
GPT-1.5 Low 正方形 $0.009（約1.4円） ×
GPT-1.5 Low 横長 $0.013（約2円） ×
Medium品質
英語文字のみ		 Mini Medium 正方形 $0.011（約1.7円） ×
Mini Medium 横長 $0.015（約2.3円） ×
GPT-1.5 Medium 正方形 $0.034（約5円） ×
GPT-1.5 Medium 横長 $0.05（約7.5円） ×
High品質
日本語文字OK		 Mini High 正方形 $0.036（約5.5円） ○
Mini High 横長 $0.052（約8円） ○ ☆コスパ◎
GPT-1.5 High 正方形 $0.133（約20円） ○
GPT-1.5 High 横長 $0.20（約30円） ○ ⚠高額
DALL-E 3
安定・企業向け		 Standard 正方形 $0.04（約6円） △
Standard 横長 $0.08（約12円） △
HD 正方形 $0.08（約12円） △
HD 横長 $0.12（約18円） △
Google Gemini
横長のみ		 Nano Banana 横長 $0.039（約6円） ○
Nano Banana Pro 横長2K $0.134（約20円） ○ ★日本語最強

目的別おすすめモデル

目的 おすすめモデル 費用
💰 最安値重視 Mini Low 横長 $0.006/枚
📊 コスパ重視 GPT-1.5 Low 横長 $0.013/枚
✏ 日本語文字入れ（コスパ） Mini High 横長 $0.052/枚
✏ 日本語文字入れ（最高品質） Nano Banana Pro $0.134/枚

文字入れの注意点

  • Low / Medium品質：日本語の文字は崩れます（英語のみ対応）
  • High品質：日本語の文字入れに対応しています（$0.052〜）
  • Nano Banana Pro：日本語の文字入れ品質が最も高いモデルです（$0.134）
  • 文字入れが不要な場合は、Low品質のモデルで十分な品質が得られます

画像管理の操作を理解したら、
第10章：広告設定
に進みましょう！

→ 第１０章へ

コメントは受け付けていません。