案件の背景とクライアントの課題
本案件のクライアントは、名古屋市で活動するクリエイターであり、自身のポートフォリオサイトを運営していました。Webサイトを通じて自身の作品を発表し、クライアントとの接点を持つことが主な目的でした。
しかし、ある日スマートフォンでWebサイトを閲覧した際に、レイアウトが崩れており、正常に表示されていないことに気づきました。特に、テキストや画像が画面の幅に収まらず、レイアウトが大きく崩れていたため、閲覧者にとって非常に見づらい状態でした。
クライアント自身はHTMLやCSSのコーディングに関しては専門外であり、どのように修正すればよいのか分からない状況でした。そのため、WordPressドクターに相談が寄せられ、迅速な修正対応が求められました。
調査と原因分析
本件の問題を解決するため、まず以下のような調査を行いました。
Webサイトの表示確認
スマートフォン、タブレット、PCの各端末でWebサイトを閲覧し、表示崩れがどの程度発生しているかを確認。主要なブラウザ（Chrome、Safari、Firefox）での動作をチェック。
CSSの検証
開発者ツール（Chrome DevTools）を使用し、CSSのレイアウト設定や適用されているスタイルを分析。特に「word-break（単語の折り返し）」や「overflow（コンテンツのはみ出し）」の設定を重点的に調査。
HTML構造の確認
スマートフォン表示時に、特定の要素（ヘッダーやフッターなど）が不適切な幅を持っていないかを検証。コンテンツエリアに過剰な情報量が詰め込まれていないかをチェック。
調査の結果、以下の問題点が判明しました。
情報量が多すぎて、スマホ画面に収まりきらない
クライアントのWebサイトは、デスクトップ向けのレイアウトをベースにしており、大量のテキストや画像が1つのセクションに詰め込まれていました。そのため、スマートフォンで表示した際に、情報が画面に収まりきらず、左右にはみ出してしまっていました。
CSSのスタイル設定が適切でない
CSSの「word-break」や「overflow」の設定が適切に行われておらず、長い単語やURLが途中で折り返されずに画面の外へはみ出していました。
レスポンシブデザインが部分的に機能していない
一部の要素がレスポンシブ対応になっておらず、PC表示を前提に設計されていたため、スマートフォンでは適切に縮小されず、画面をはみ出していた。
対応策の実施
調査結果をもとに、以下の対応策を実施しました。
CSSの調整
「max-width」を適切に設定し、画像やコンテンツがスマートフォン画面内に収まるように調整。「flexbox」や「grid」レイアウトを活用し、レスポンシブ対応を強化。各セクションの余白（padding, margin）を最適化し、バランスの取れたデザインに修正。
word-breakの設定
長い単語やURLが画面の外にはみ出さないように、「word-break: break-word」を適用。これにより、画面サイズに応じて適切に単語が折り返されるようになった。
レスポンシブデザインの最適化
メディアクエリ（@media）を利用し、画面サイズごとに適切なスタイルを適用。画面サイズに応じてフォントサイズやボタンの大きさを調整し、スマートフォンでの視認性を向上。
対応後の結果とクライアントの反応
対応後の結果として、以下のような改善が見られました。
スマートフォンでの表示崩れが解消
修正後、スマートフォンやタブレットなどの異なる端末で閲覧しても、適切にレイアウトが表示されるようになった。
Webサイトの視認性が向上
長い単語やURLが途中で折り返されるようになり、見やすいデザインになった。
クライアントからの高評価
クライアントからは「スマホでも快適に閲覧できるようになった」「見た目がすっきりして、作品の魅力がより伝わりやすくなった」との好評をいただいた。
また、クライアントは今後もWebサイトの更新を予定しており、レスポンシブデザインの維持や追加のデザイン調整について継続的な相談を希望されました。
お見積もり
| 項目 | 金額 (円) |
|---|---|
| CSSの調整 | 3,000 |
| phpファイルの調整 | 3,000 |
| 合計 | 6,000(税別) |
まとめと今後の展望
本案件では、スマートフォンでの表示崩れを解消し、Webサイトの視認性を向上させることができました。このような問題は、PC向けのデザインを前提にしたWebサイトではよく発生するため、最初からレスポンシブ対応を考慮した設計が重要であることが再認識されました。
今後、クライアントには以下の点を推奨しています。
・定期的なWebサイトのチェック（スマホやタブレットでの表示確認）
・CSSやHTMLの適切な管理（不要なスタイルの整理と最適化）
・Webサイトの軽量化（画像サイズの適正化など）
WordPressドクターとして、今後もクライアントのWebサイト運用をサポートし、さらなる改善を提供していきます。