制作の記録 · 第１回

「なんだか違う」を、
画面で伝える。

AIにスクリーンショットを見せてサイトを整える
国東バスケットボールクラブの制作から

KOOL:CREAT;2026.10.20

「写真を変えたい」「文字が小さい気がする」「スマホで見ると、改行が気になる」。サイトを作っていると、コードの書き方より先に、画面のちょっとした違和感に出会います。

でも、その違和感をどう説明すればよいのか。どの部分を直せばよいのか。初めての制作では、そこが難しいところです。

国東バスケットボールクラブのサイト制作でも、画面を確認し、AIに相談し、修正して、また見直す作業を重ねてきました。今回は、活動支援に関するページやセクションの制作途中の画像を使って、その進め方を紹介します。

最初から専門用語で説明できなくても、今の画面と「どうしたいか」をそろえることで、修正の相談は始められます。掲載画像は制作途中の記録です。活動支援ページとトップページ内の支援セクションを紹介しており、同じ箇所の修正前・修正後を並べたものではありません。

この記事に必要な知識

読んで学ぶだけならコードの知識は必要ありません。実際に試すならWordPressで対象のページを開き、編集・保存できること。スクリーンショットを撮り、AIとの会話に添付できること。この記事で覚えること画面の伝え方、HTMLとCSSの役割、改行と余白の違い、修正後の確認方法。今回扱わないことサーバー契約やWordPressの初期設定。すでに編集できるサイトがある状態を想定します。

読む目安：約10〜15分。作業時間は、サイトの作り方や修正箇所によって変わります。

この記事の内容

1. 写真を変えるだけでも、見直しが必要だった
2. 全体と部分、２種類の画面を用意する
3. 「どこを、どうしたいか」を伝える
4. 見出しが小さい、と気づいた場面
5. 修正を反映する前に、変更する場所を確かめる
6. よくある修正「改行」で知っておきたいこと
7. 直した後は、画面で確かめる

01

写真を変えるだけでも、
見直しが必要だった。

活動支援ページには、バスケットボールをする２人の人物を配置した画面がありました。黒と黄色を使い、動きのある写真と、支援を呼びかける言葉を組み合わせた構成です。

その後、この写真部分を集合写真１枚に変更したい、という修正を進めました。ところが、写真を差し替えた段階では形が崩れ、もう一度コードを見直すやり取りが発生しました。

保存されていたコードを確認すると、２枚の画像に対して、それぞれ位置や幅、高さを指定する作りになっていました。画像のURLを変えても、画像の置き方の指定はそのまま残ります。集合写真に合わせて、写真を囲む部分や配置の指定も見直す必要がある場面でした。

これは「写真が変われば、自動でちょうどよく収まる」とは限らない、という例です。人物を切り抜いた縦長の画像と、複数人が並ぶ集合写真では、見せたい範囲も余白も変わります。まず覚えたいこと

画像を変更したら、「表示されたか」に加えて、「全員が見えるか」「縦横に伸びていないか」「文字に重なっていないか」まで確認します。

02

全体と部分、
２種類の画面を用意する。

修正を相談するときは、気になる場所だけを小さく切り取るより、周りの見出しや写真も含めた画面があると、配置の関係が伝わります。

一方で、長いページを１枚にまとめると、文字が小さくなり、細部を読み取りにくくなります。全体用と部分用では、役割が違います。

用意する画面	確認すること
ページ全体の画面	セクションの順番、背景色の流れ、全体のバランス
気になる部分の画面	文字サイズ、改行、写真の切れ方、ボタンや余白
スマートフォンの画面	縦並びの順番、折り返し、はみ出し、押しやすさ

制作途中の全体確認用スクリーンショットを見る

実際に撮るときは、画像の読み込みが終わった状態で、問題のある部分とその周囲を写します。スマホだけで起きる問題なら、パソコンの画面とスマホの画面を添え、それぞれどちらなのかを書いておきます。

「画像１はパソコン、画像２はスマホです。スマホでは最後の１文字だけ次の行に残ります」。この一言があるだけでも、確認する場所をそろえられます。

管理画面を撮る場合は、本文の確認に不要な氏名、メールアドレス、ログイン情報などが入らない範囲を選びます。

03

「どこを、どうしたいか」を伝える。

スクリーンショットは、見えている状態を共有するためのものです。ただ、画像だけでは、希望する仕上がりや、サイト側で使われているコードまでは分かりません。

相談文には、対象の場所・今困っていること・希望する状態・回答してほしい形を添えます。専門用語を並べる必要はありません。

相談文の例｜当時の要望をもとに、記事用に整理した例です

WordPressのカスタムHTMLで作っている、活動支援ページです。

添付画像の右側にある２人の写真を、集合写真１枚に変更したいです。
集合写真は、全員が切れずに見えるようにしてください。
パソコンでは文章の右側、スマホでは文章の下に置きたいです。

現在使っているHTMLとCSSを、この後に貼ります。
画像を差し替えるだけでよいか、配置も変更する必要があるか確認してください。
変更する場所と、追加なのか置き換えなのかも説明してください。

長い会話で修正を重ねている場合は、今使っているコードも添えます。以前の案と現在のコードが違っていると、別の状態を前提に修正が進むことがあるためです。

コードが長いときは、「どの範囲を送れば確認できますか」と先に聞いても構いません。画像だけで原因を断定してもらうより、必要な情報をそろえて確認する方が、修正を進めやすくなります。

04

見出しが小さい、と
気づいた場面。

活動支援の案内は、専用ページだけでなく、トップページにも追加しました。こちらは黄色い背景に、集合写真と支援の案内をまとめたセクションです。

全体を確認した後、気になったのが左側の見出しでした。実際のやり取りでも、この部分の文字が小さいのでは、という確認をしています。

大切なのは、文字の数字だけを見て決めないことです。写真が大きく配置されている中で、見出しに十分目が向くか。本文との大きさに差があるか。前後のセクションと比べて、弱く見えないか。画面の中で判断します。

相談文の例｜見出しを調整したい場合

トップページの活動支援セクションです。
左側の「子どもたちの挑戦を、地域の力で。」が、
右側の集合写真に対して小さく感じます。

この見出しのサイズと行間を調整したいです。
まずは写真や本文の位置を変えず、見出しだけで改善できるか確認してください。
スマホで文字がはみ出さないかも確認したいです。
必要なHTMLとCSSの範囲を教えてください。

一度に見出し、写真、背景、ボタンを変えると、何が見やすさに効いたのか分かりにくくなります。まず一つ変えて、画面を見直す。この順番なら、判断の理由も残せます。この画像は、文字サイズを見直すきっかけになった時点のものです。「小さい」と感じた場所を画面で示すことが、次の修正の出発点になります。

05

修正を反映する前に、
変更する場所を確かめる。

AIからコードが返ってきても、どこに貼るのか分からなければ作業は止まります。ここで、HTMLとCSSの役割を大まかにつかんでおくと、説明を追いやすくなります。

種類	主に担当すること	今回の例
HTML	文章や画像などの内容と構造	見出しの言葉、写真のURL、リンク先
CSS	見た目や配置	文字の大きさ、行間、写真の幅、余白

WordPressにはHTMLを扱う「カスタムHTML」ブロックがあります。ただし、編集画面やCSSの保存場所は、バージョン、テーマ、権限、サイトの作り方によって異なります。［1］「CSSだから必ず追加CSSに貼る」と決めず、今どこで管理しているかを確認します。

1. 現在のコードを控える。変更する範囲をテキストとして保存し、元に戻せるようにします。
2. 変更場所を確認する。ページ内のHTMLなのか、ページ用のCSSなのか、サイト共通のCSSなのかを区別します。
3. 追加か、置き換えかを確認する。「この指定の後に追加」「このブロック全体を置き換え」など、範囲を明確にします。
4. 一つ反映して、プレビューを見る。文字サイズなら、まずその指定が変わったかを確かめます。

初心者のうちは、分からない箇所を推測して削除せず、「この部分の最初から最後までを示してください」と聞いてよいと思います。コードをすべて覚えることより、何を変更するのか分かる状態で進めることを大切にします。

06

よくある修正「改行」で
知っておきたいこと。

今回の見出しのような短い言葉でも、「どこで行を分けるか」で読みやすさは変わります。ここからは、同じ言葉を使った学習用の例です。掲載画像に、このコードを適用した結果ではありません。

自動の折り返しと、指定した改行は違う

文章は、表示できる幅が足りなくなると自動で折り返します。一方、HTMLの <br> は、書いた場所で改行するための要素です。［2］

<p>
  子どもたちの挑戦を、<br>
  地域の力で。
</p>

この例は「地域の力で。」を次の行から表示します。ただし、狭い画面では１行目も途中で折り返すことがあります。改行を入れれば、どんな画面でも必ず２行になるわけではありません。

余白を作るために、改行を重ねない

見出しと本文の間を空けるために <br> を何個も入れると、画面幅が変わったときに間延びすることがあります。文章内の改行と、要素の間の余白は分けて考えます。段落間の間隔にはCSSの margin などを使います。［2］

スマホだけの問題は、スマホの画面を添える

「最後の１文字だけ次の行に残る」とき、原因は指定した改行だけとは限りません。文字サイズ、文章の幅、左右の余白も関係します。まず画面と現在のコードを見せ、どの指定を見直すか確認します。ここまでの知識でできること

改行を指定する場所と、幅による自動の折り返しを区別して相談できます。スマホだけ改行を変えるCSSは、画面幅に応じた指定も必要になるため、別の記事で順に扱います。

07

直した後は、
画面で確かめる。

コードの変更が終わっても、確認はまだ続きます。見出しを大きくしたら、今度は写真に重なるかもしれません。パソコンではよくても、スマホでは３行に分かれるかもしれません。

• 希望した箇所が、実際に変わっているか。
• 見出しが読みやすく、本文との違いが分かるか。
• 文字や写真が重なったり、画面の外にはみ出したりしていないか。
• スマホの縦画面でも、改行や余白が不自然でないか。
• ボタンを押したとき、目的のページへ移動できるか。
• 同じCSSを使う、別の場所に影響していないか。

変わらないときは、追加のコードを次々に貼る前に、保存できているか、編集したページが合っているか、指定先が合っているか、別のCSSに上書きされていないかを確認します。キャッシュが関係する場合もありますが、最初から一つの原因に決めつけないようにします。

再度相談するときも、「反映されません」だけでなく、「どこに何を貼ったか」「保存後の画面」「現在のコード」をそろえます。次の確認で使う情報を残すことが、作業のやり直しを減らす助けになります。

制作を通して

気づいたことを、
一つずつ形にする。

今回の制作では、写真の変更を考えたことから、配置の見直しが必要になりました。トップページに支援の案内を追加した後は、見出しの小ささに気づきました。

最初の案を作った時点では、見えていなかったことです。実際の画面を見て初めて、伝えたいことと、見えているものの違いに気づけます。

画面を見せる。希望を言葉にする。変更場所を確かめる。直した画面を、もう一度見る。

初心者がAIと一緒に制作を進めるときも、この流れを覚えておくと、何から取り組めばよいかが見えやすくなります。

このジャーナルでは、KOOL:CREAT;の制作過程から、文字の大きさ、改行、余白、画像の扱いなどを一つずつ取り上げていきます。必要な知識もその都度説明しながら、自分で試せる形で残していきたいと思います。

参考資料

1. WordPress公式ドキュメント：Custom HTML（2026年10月20日確認）
2. MDN Web Docs：HTML <br> 改行要素（2026年10月20日確認）

画像・制作記録：KOOL:CREAT;による国東バスケットボールクラブサイトの制作資料。