Webサイトの表示崩れ・修正を依頼する前に確認したい5つのこと

「パソコンでは問題ないのに、スマートフォンで見るとレイアウトが崩れている」

「文章や画像を変更したいけれど、どのファイルを触ればよいか分からない」

公開中のWebサイトでは、このような小さな困りごとが起こることがあります。

表示崩れや文章・画像の修正は、対象ページや現在の状態が分かると、対応可否や見積りを確認しやすくなります。一方で、「うまく表示されない」という情報だけでは、原因の特定に時間がかかる場合があります。

今回は、HTML・CSSで作られたサイトやWordPressサイトの修正を依頼する前に、確認しておきたい内容を5つにまとめました。専門的な原因が分からなくても、見えている症状を整理するだけで大丈夫です。

1．問題が起きているページと箇所

最初に、どのページのどの部分を修正したいか確認します。

例えば、次のように伝えると対象箇所が分かりやすくなります。

- トップページのメイン画像が画面からはみ出している

- 会社概要ページの文章を差し替えたい

- スマートフォンでメニューが開かない

- お問い合わせページのボタン位置を調整したい

- WordPressのお知らせ一覧で画像の大きさが揃わない

公開中のサイトであれば、対象ページのURLも共有します。複数箇所ある場合は、「トップページの3箇所」「下層ページ2ページ」のように一覧にしておくと、修正範囲を確認しやすくなります。

サイト全体の問題に見えても、共通するCSSやテンプレートの1箇所を直せば改善する場合もあります。反対に、似た症状でもページごとに異なる修正が必要なこともあるため、まずは対象ページを明確にすることが大切です。

2．現在の状態と希望する状態

次に、「今どうなっているか」と「修正後にどうしたいか」を整理します。

文章だけで説明しにくい場合は、問題の箇所が分かるスクリーンショットを用意するとスムーズです。画像に丸や矢印を付けたり、「この余白を狭くしたい」「この画像を新しいものへ差し替えたい」と書き添えたりすると、認識違いを防ぎやすくなります。

参考にしたい見た目がある場合は、参考サイトのURLも共有できます。ただし、他社サイトをそのまま複製するのではなく、どの部分を参考にしたいのかを具体的に伝えることが大切です。

完成イメージが決まっていない場合も、まずは次のような目的を伝えてください。

- 文字を読みやすくしたい

- スマートフォンで横スクロールが出ないようにしたい

- 古い情報を新しい内容へ更新したい

- 画像の比率を揃えたい

希望する状態が分かれば、CSS調整で対応できるのか、画像の作り直しやデザイン検討が必要なのかを切り分けやすくなります。

3．症状が出る端末とブラウザ

表示崩れや動作の不具合は、端末やブラウザによって症状が異なることがあります。

分かる範囲で、次の情報を確認しておくと原因を調べやすくなります。

- パソコンかスマートフォンか

- iPhoneかAndroidか

- Chrome、Safari、Edgeなど、使用しているブラウザ

- 特定の画面幅だけで起きるか

- いつ頃から問題が起きているか

例えば、「iPhoneのSafariでだけボタンが重なる」「パソコンでは正常だが、スマートフォンでは画像が画面からはみ出す」のように伝えます。

端末名やブラウザが分からない場合は、問題が起きた画面のスクリーンショットだけでも構いません。再現条件が分かるほど、確認に必要な時間と対応範囲を整理しやすくなります。

4．サイトの種類と作業に必要な情報

修正方法は、サイトの作り方によって異なります。

主な例は次のとおりです。

- HTML・CSS・JavaScriptで作られたサイト

- WordPressのオリジナルテーマ

- WordPressの市販テーマや既存テーマ

- ページビルダーやプラグインを使用しているサイト

- STUDIO、Wix、Shopifyなどの外部サービス

サイトの種類が分からない場合は、公開中のURLや、契約しているサービス名を共有してください。確認できる範囲で、必要な作業方法を整理します。

実際の作業では、内容に応じて次のような情報が必要になることがあります。

- HTML・CSS・JavaScriptなどのサイトデータ

- WordPressの管理画面情報

- サーバーやFTPの接続情報

- 使用中のテーマやプラグインの情報

ただし、パスワードなどの大切な情報は、修正範囲と必要性を確認してから共有します。最初の相談では、サイトURLと症状、希望内容が分かれば見積りの確認を始められます。

5．バックアップ・希望納期・修正範囲

公開中のサイトへ変更を加える場合は、作業前のバックアップが重要です。

万が一の表示不具合に備えて、現在のファイルやデータベースを元に戻せる状態か確認します。バックアップ方法が分からない場合は、その点も最初に共有しておくと安心です。

あわせて、希望納期と修正範囲も整理します。

- 修正したい箇所はいくつあるか

- 文章や差し替え画像は用意できているか

- 公開中のサイトへ直接反映する必要があるか

- テスト環境で確認してから公開するか

- いつまでに修正したいか

軽微な文章差し替えと、複数ページに関係するレイアウト変更では、必要な作業量が異なります。また、修正を進める中で新しい機能やデザイン変更を追加する場合は、当初の修正とは別の作業になることがあります。

依頼前に対応箇所と修正後の状態を決めておくと、見積り後の追加作業を減らしやすくなります。

相談時に共有したい内容

Webサイトの修正を相談するときは、次の内容を分かる範囲で共有するとスムーズです。

1. 対象サイトとページのURL

2. 修正したい箇所

3. 現在の状態と希望する状態

4. 問題が分かるスクリーンショット

5. 症状が出る端末とブラウザ

6. HTMLサイト・WordPressなど、分かる範囲のサイト情報

7. 希望納期

8. バックアップの有無

原因を専門用語で説明する必要はありません。「どの画面で、何に困っていて、どうしたいか」が分かれば、必要な確認事項を整理できます。

まとめ

Webサイトの表示崩れや内容修正を依頼する前に、次の5つを確認しておくと相談が進みやすくなります。

1. 問題が起きているページと箇所

2. 現在の状態と希望する状態

3. 症状が出る端末とブラウザ

4. サイトの種類と作業に必要な情報

5. バックアップ・希望納期・修正範囲

すべての情報が揃っていなくても問題ありません。まずは対象URL、スクリーンショット、希望する修正内容を共有すれば、対応可能な範囲を確認できます。

YOSHI CODEでは、HTML・CSSで作られたサイトやWordPressサイトについて、文章・画像の差し替え、CSSによる表示調整、軽微なJavaScriptの不具合などをご相談いただけます。

新規デザイン制作やサイト全体のリニューアルではなく、既存サイトの修正・更新を対象に、作業範囲を確認してからお見積りします。

▼ Webサイトの表示崩れ・文章・画像修正サービスはこちら