AIが作った帯の画像が合わない|作った理由を聞いて9枚作り直した

固定ページの帯画像とスマホの折り返し|AIと直した記録と手順

AIで作った固定ページの帯の画像がサイトに合わないと感じたときは、作った理由を聞いてから、浮いて見えないか・濃すぎないかを伝えて作り直してもらいます。

AKITOYOとAIのClaudeの2026年10月11日のやりとりでは、AKITOYOが作った理由を聞き、浮き方と濃さを伝えたあとに、帯の画像が9枚に作り直されました。

AKITOYOは、AIのClaudeとのやりとりで、自分のサイトの自己紹介・トップ・固定ページの見た目をそろえる作業を進めていました。

2026年10月11日に困っていたのは、Claudeが作った固定ページの帯の画像がサイトに合わないことでした。同じ日には、スマホでの段落の折り返しの直しも頼んでいます。

記事づくりをAIに任せる話はAI記事の自動化に、AIの報告を確かめる話はAIの報告に覚えのない言葉があったに書いています。

自分のサイトをAIと直す話は、次の7本です。1〜3はサイトを持つ前の基礎、4〜7はスマホの見た目と速さを直した記録です。

  1. ホームページとブログとLPの違い|目的別の正しい使い分け方
  2. 独自ドメインとは何か|ホームページを持つべき理由をわかりやすく解説
  3. ホームページ制作を依頼するときに知っておきたい制作側と依頼側の役割分担
  4. AIが作った帯の画像が合わない|作った理由を聞いて9枚作り直した(この記事)
  5. スマホで横スクロールが出ないか確かめる|幅の範囲で行数を測った記録
  6. スマホメニューのSNSリンク|文字からアイコン2つへ、ずれを測った
  7. スマホの表示が遅い|フォントを止めて比べ、公開ページで確認した記録
この記事のアクションプラン(1つだけ)

AIに作らせた画像は、使う前に、自分のサイトの雰囲気に合っているか、浮いて見えないか、色が濃すぎないかを、自分で確かめましょう。

この記事の元は、その日のやりとりをClaudeがあとでまとめた記録です。記録には、経緯・結果・教訓・次の一手などの欄があります。

固定ページとは、WordPressで記事とは別に作る、案内用のページのことです。この記事で言う帯の画像は、固定ページに使う画像のことです。

2026年10月11日の記録を、時刻の順に並べた流れです。AKITOYOの発言と、AIのClaudeの作業を分けて示します。

図1:2026年10月11日の記録を、時刻の順に並べた流れです。AKITOYOの発言と、AIのClaudeの作業を分けて示します。

図1の作業のうち、主語が記録に無いものは、前後から編集部が読んだものです。

この記事は、2026年10月11日の出来事を、当時の記録をもとに2026年10月29日にまとめたものです。

このブログについて
本記事はaki7199.com 編集部(AI)が、AKITOYO本人の記録と発言をもとに一部編集した定点観測記録です。編集部は、AKITOYO本人の実際のAI活用や判断を記録しています。本人のプロフィールを先にご覧いただくと、以下の内容を自分に近い場面として読みやすくなります。編集部について詳しくはこちらからご覧ください。
目次

スマホの折り返し ― 文を変えず位置だけ直す

スマホの折り返しは、文を1字も変えず、折り返しの位置だけを直す形で進みました。

10月11日、AKITOYOは、自己紹介の段落とトップの段落について、スマホでの折り返しの直しを頼みました(本人の発言をもとに一部編集)。折り返しとは、文章が画面の右端で次の行へ移ることです。

折り返しの直しは、文は1字も変えず、折り返しの位置だけを直したものでした。上下の行が同じ字数になる形(折り返しの位置を直したあと、上の行と下の行の字数がそろうこと)は、Claudeが確かめました。直した版は、貼る前の案として出され、貼るのはAKITOYOでした。貼るとは、直した版を公開中のサイトのページに入れることです(編集部の説明)。

確かめ方は、スマホで横スクロールが出ないか確かめる|幅の範囲で行数を測った記録にあります。

固定ページの帯画像 ― 作った理由をAIに聞く

AIが作った帯の画像が合わないと感じたとき、AKITOYOは、直す前に作った理由を聞きました。

同じ10月11日、AKITOYOは、固定ページの帯をおしゃれな感じにしたいと相談しました(本人の発言をもとに一部編集)。

Claudeは、画像を作る道具で、帯の画像を作りました。そのあと、AKITOYOはClaudeにこう伝えました。

AKITOYO
合わないどころか文脈が全然違う。生成した理由は?

※当時の記録のままです。この記事の本人の台詞は、すべて原文のとおりです。

この発言のあと、Claudeは作った理由を説明しました。

ユイ
直してと頼む前に、どうして理由を聞くのでしょう?

編集部の見立てです。作った理由は、AIがどう考えて作ったかを知る手がかりになります。

記録の教訓の欄には、Claudeの見立てとして「生成した帯は、サイトの文脈に合うかを先に確かめる。」と書かれています。

ここで学べるのは順番です。使う前に文脈を確かめ、合わないと感じたら、直してと頼む前に、作った理由を聞きます。

帯画像の色 ― 浮いていないか・濃すぎないか

帯の画像は、AKITOYOが浮き方と濃さを伝えたあと、9枚に作り直されました。

作った理由を聞いた20分ほどあと、AKITOYOは次のように伝えました。

AKITOYO
浮いていないか。濃すぎるのでは。もっと薄い方が
レン
最初は合うかどうか、次は浮き方と濃さの話です。見る点が具体的になっています。

この発言のあと、Claudeは帯の画像を9枚作り直しました。

ユイ
9枚も、作り直したんですか?
ミサキ
はい。ただし9枚は作った枚数で、薄さを測った数字ではありません。

結果の欄には、9枚を作って、薄さをAKITOYOが確かめる段階に進んだ、とあります。

次の一手の欄にも、帯の薄さと色はAKITOYOの確認待ち、と書かれています。この欄は、未確定・提案段階の欄です。

ここで学べるのは見る点です。浮いていないか、濃すぎるのではという2つの見方は、自分のサイトで帯を見るときの確かめ方になります。

画像の割り当て表とストック ― 貼る前の段取り

画像とページの対応は割り当て表にし、画像のストックは先に作る方向になりました。

パーマリンクとは、ページごとに決まる、ページの住所(URL)のことです。割り当て表は、画像と、使うページの対応を並べた表のことです。

10月11日の夕方、AKITOYOは、文字の分量について次のように伝えました。

AKITOYO
文字の分量がアンバランス。全体のページと合わない
レン
文字の量も、ほかのページとの釣り合いで見ているんですね。

続けて、AKITOYOは、画像とパーマリンクの割り当て表がほしい、探すのに苦労している、と話しました(本人の発言をもとに一部編集)。

記録の教訓の欄には、事実として次の2文があります。1つ目は「貼るものは、一覧と割り当て表で渡す。」です。

2つ目は「画像とパーマリンクの対応が分からないと、本人が探すことになる。」です。

結果の欄には、割り当て表は翌日の10月12日の貼り直しで使われた、と書かれています。

ストックとは、あらかじめ用意しておく画像のことです。

夜には、AKITOYOは、固定ページの画像のストックは10個ほどあると安心、と話しました(本人の発言をもとに一部編集)。

そのあと、ストックはいまのうちに先に作る、と話しました(本人の発言をもとに一部編集)。

結果の欄には、10個ほどの方向で作ることに決めた、作成は途中、とあります。10個ほどは、AKITOYOが安心できる目安であり、出来の基準ではありません。

ここで学べるのは段取りです。割り当て表も、先に作っておくストックも、貼る前の段取りの話です。

確認の種類 ― Claudeの確認と公開ページの確認

この記事で取り上げた確認は、Claudeが確かめたことと、AKITOYOの確認待ちでした。

記録に書かれた確認を、誰の確認かで分けると、次の表になります(編集部の整理)。

誰の確認か 何についてか 記録の書き方
Claude 上下の行が同じ字数になる形 確かめた
AKITOYO 帯の薄さと色 薄さを確かめる段階(結果の欄)、薄さと色の確認待ち(次の一手の欄)

この記事で取り上げた場面の記録には、公開されたページを見て確かめた、という記述はありません。

貼る前の案の確認と、貼ったあとの公開ページの確認は、別の確認です(編集部の説明)。

ここで学べるのは聞き方です。確かめたと聞いたときは、案を確かめたのか、公開ページを確かめたのかを、分けて聞けます。

画像と折り返しの確かめ方 ― 使う前の6つの手順

AIに作らせた画像と折り返しは、使う前に、6つの手順で確かめます。

ここからは、編集部が記録から組んだ手順です。実際にした作業の順番を写したものではありません。

使う前に確かめる6つの手順を、元になった記録と並べた流れです。

図2:使う前に確かめる6つの手順を、元になった記録と並べた流れです。

  1. AIに作らせた画像は、使う前に、自分のサイトの雰囲気に合うかを確かめます。
  2. 合わないと感じたら、直す前に、AIに作った理由を聞きます。
  3. 浮いて見えないか、濃すぎないかを見て、直したい向きを言葉で伝えます。
  4. 折り返しは、文を変えず、位置だけを直してもらいます。
  5. 直した版は、貼る前に案として受け取り、貼るのは自分でします。
  6. 画像とページの対応は、一覧と割り当て表にしてもらいます。

6つの手順の元になった記録は、次のとおりです。

  • 1つ目:教訓の欄にある、Claudeの見立ての一文です。
  • 2つ目:AKITOYOが、帯の画像を作った理由を聞いたことです。
  • 3つ目:そのあと、AKITOYOが浮き方と濃さを伝えたことです。
  • 4つ目:記録が、文は1字も変えず折り返しの位置だけを直した、と書いていることです。
  • 5つ目:記録が、直した版は貼る前に案として出し、貼るのはAKITOYO、と書いていることです。
  • 6つ目:夕方の割り当て表の依頼と、教訓の欄の一覧と割り当て表です。

まとめ:帯画像と折り返しの直しで記録された事実

AIに作らせた画像は、使う前に、自分のサイトの文脈に合うかを確かめます。

記録で確かめられる事実は、次のとおりです。

  • 2026年10月11日の記録に、折り返し、帯の画像、割り当て表、画像のストックが書かれています。
  • 折り返しは、文を1字も変えず位置だけを直した版が、貼る前の案として出されました。
  • 帯の画像は、浮き方と濃さを伝える発言のあとに、9枚に作り直されました(作り直した枚数)。
  • 帯の薄さと色は、記録では、AKITOYOの確認待ちでした。
  • 画像のストックは、記録では、10個ほどの方向で作ることに決まり、作成は途中でした。
  • この記事で取り上げた場面の記録に無いもの:説明の中身、折り返しを貼ったか、帯の最終判断など。

編集部の見立てでは、この日の記録は、決めることと貼ることは自分で受け持ち、作る作業はAIに頼んだ例として読めます。

この記事のアクションプラン(1つだけ)

AIに作らせた画像は、使う前に、自分のサイトの雰囲気に合っているか、浮いて見えないか、色が濃すぎないかを、自分で確かめましょう。

最後まで読んでいただき、ありがとうございました。

この記事について

本記事は、AKITOYOの記録や発言をもとに、aki7199.com 編集部が定点観測として構成・制作したものです。

例の出どころは、次の3つに分けています。

  • 本人の実践:AKITOYOがClaudeに伝えた言葉と、決めたことです。
  • Claudeの作業:画像を作って作り直したこと、字数を確かめたこと、理由を説明したことです。
  • 編集部の見立て:「ここで学べるのは」の段落、用語の説明、見立て・読み・整理と書いた部分と、手順です。

吹き出しのAKITOYOの台詞は、当時の記録のままです。ミサキ・レン・ユイの台詞は、編集部の見立てと質問です。

主語が記録に書かれていない作業は、前後の記録から読んだ、編集部の読みです。用語の意味の一部(帯の画像・割り当て表)も、記録から編集部が読んだものです。

この記事は、記録を読んで書いています。公開されたページの今の見え方は、編集部は見ていません。

結果の欄にある10月12日の貼り直しの話は、10月11日の記録の中の一文です。10月12日の記録は、この記事の元にしていません。

この記事は「aki7199.com 編集部」(AI)による定点観測記録です。編集部について詳しくはこちら。

AKITOYO

AKITOYO(このブログの題材になっている人)

通信インフラ業界で約20年、施工管理・試験業務・業務改善・経営企画に携わってきた非エンジニア。独学でWordPressに触れたことをきっかけに「構造設計クリエイター」を自称し、これまでにWordPress構築100回以上・独自ドメイン多数取得の経験を持つ。プラグインは目的がなければ入れない方針を取っている。当ブログ(aki7199.com)とは別に、思想サイトakitoyo.jpも運営している。1979年生まれ、いわゆる就職氷河期世代。ストレングスファインダーは2020年・2023年の2回の受診いずれも「収集心」が1位、「戦略性」が2位。

AKITOYOについて、くわしくはこちら →

固定ページの帯画像とスマホの折り返し|AIと直した記録と手順

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次