自分で作ったホームページを「ダサい」と言われても、すぐに全ページを作り直す必要はありません。その言葉だけでは、色の好みなのか、文字が読みにくいのか、必要な情報が見つからないのか分からないためです。まずは指摘されたページと利用場面を確かめ、読者が一つの用件を済ませられるか試します。
この記事は、見た目への指摘を修正できる項目へ分け、一ページずつ直す順番を示します。会社全体のデザイン方針を初めから決める場合はホームページのデザインを決める順番を先にご覧ください。
「ダサい」を具体的な困り事に置き換える
言われた相手に、どのページを、どの端末で、何をしようとして見たときに気になったか聞きます。答えが得られない場合も、社内の担当者が同じ用件を試せば、直す場所を絞れます。次の表を使い、見た目の好みと、読みにくさ・操作のしにくさを分けて記録してください。
| 気になったこと | 確かめる場所 | 最初の修正候補 |
|---|---|---|
| 何の会社か分からない | トップの見出しと事業説明 | 事実に基づく短い説明を置く |
| 文字が読みにくい | 本文、背景、余白、拡大時 | 文字と背景の区別、改行を整える |
| 情報が探しにくい | メニュー、見出し、リンク名 | 読者の用件ごとにまとめる |
| スマホで使いにくい | 画像、表、ボタン、フォーム | はみ出しや押しにくさを直す |
指摘されたページで一つの用件を試す
たとえば「取扱商品を知り、問い合わせる」という用件を決め、入口から完了までたどります。商品名が見つからないなら情報の不足、見出しを追っても場所が分からないなら構成、問い合わせボタンが押せないなら操作の問題です。写真や配色を変える前に、どこで止まったかを記録します。
情報と見出しを先に整理する
文章を飾る前に、ページの目的を一文にします。事業紹介なら「何を、誰に、どの地域・条件で提供するか」、問い合わせページなら「何を相談でき、どう連絡するか」を事実に沿って示します。W3Cの見出しの案内は、見出しを内容のまとまりと順序に合わせるよう説明しています。本文と関係の薄い飾り見出しは直し、見出しだけ追っても内容の場所が分かるか確かめます。
古い事業内容や実績を見栄えのために残さず、現行の情報へ更新します。掲載できる写真や実績がない部分を作り話で埋める必要はありません。
文字・色・余白を読みやすくする
色を機械的に何色以内と決めるより、本文、背景、リンク、ボタンの役割を揃えます。ロゴなど既存の識別要素を残しつつ、同じ役割に同じ色や書体を使います。通常の本文はW3Cの文字のコントラストの説明を参考に、背景との違いを確認してください。色だけでリンクや重要な状態を伝えないことも大切です。
文字サイズや行間は一つの数値をすべてのページへ当てはめず、実際の画面と拡大表示で読みます。W3Cのテキスト間隔の説明は、利用者が間隔を調整しても内容が欠けないことを求めています。文字を大きくしたときに見出しやボタンが重ならないか確かめます。
写真と画像の役割を見直す
写真は数よりも、商品、設備、作業、担当者など読者が確認したい事実を伝えるかで選びます。権利と掲載許可を確認し、縦横比を引き伸ばさず、ぼやける場合は元画像と表示サイズを見直します。web.devのレスポンシブ画像の解説は、画面幅に収めること、縦横比を保つこと、画像の寸法と代替テキストを用意することを説明しています。
写真の周りに短い説明と余白を置き、何を写しているか分かるようにします。写真を差し替える前後で、画像だけでなくページ全体の情報が伝わるか確認します。
スマートフォンでも同じ用件を試す
パソコンで整って見えても、スマートフォンでは長い表や画像がはみ出すことがあります。W3Cのリフローの説明を参考に、狭い画面で本文を横に追い続けず読めるか確認します。表のように横方向の配置が必要なものは、表だけを操作して右端まで読める形にします。
- 見出しと本文が拡大時にも重ならず読める
- 画像の重要な部分が切れず、説明と対応している
- メニュー、リンク、ボタンを指で選べる
- 問い合わせまで進み、入力と送信後の案内を確認できる
スマートフォンでの点検を詳しく行う場合はスマホ対応の確認手順も参照してください。
一か所ずつ直し、前後を記録する
問題が複数ある場合は、まず一ページの一つの用件を選びます。修正前の画面、使った端末、止まった場所を残し、情報、見出し、文字・色、画像の順に直せるところを確認します。同時にすべて変えると、何が役立ったか分かりにくくなります。
修正後は同じ用件・端末で再確認します。問い合わせなどの数値を見る場合も、計測状態と期間を揃え、少数の変化を成果と決めつけないようにします。小さな変更の記録方法は問い合わせにつながる小さな改善で詳しく説明しています。
自分で直しにくい箇所の相談方法
テンプレートや管理画面で文字・写真を直せても、メニュー構造、スマートフォンでの崩れ、フォーム、共通の色や書体は制作側の確認が必要な場合があります。相談するときは「ダサいので作り直したい」だけでなく、対象URL、端末、困る場面、変更前後の画面、残したいロゴや内容を渡してください。見た目と使いやすさの整理は信頼されるホームページの確認ポイントにもまとめています。
参考資料
- W3C WAI「Headings」（2026年9月25日確認）
- W3C WAI「Understanding Contrast (Minimum)」（2026年9月25日確認）
- W3C WAI「Understanding Text Spacing」（2026年9月25日確認）
- web.dev「Responsive images」（2026年9月25日確認）
- W3C WAI「Understanding Reflow」（2026年9月25日確認）
