古く見えるWebサイトはどこを直す？デザインと使いやすさの改善ポイント
自社のホームページを見て「なんとなく古く見える」と感じても、流行の色やアニメーションを足せば解決するとは限りません。
文字が小さい、余白が狭い、写真が昔のまま、大事な情報が埋もれている、スマートフォンで操作しにくい。
こうした点も、見た人の印象を大きく左右します。
デザイン改善で先に見るのは「新しく見せること」ではなく、今の利用者が読みやすく、必要な情報を見つけ、次の行動へ進める状態になっているかです。
この記事では、見た目・読みやすさ・使いやすさに範囲を絞って、部分修正で直せる場所を順に見ていきます。
問題がデザインだけでなく、事業内容、ページ構成、更新方法、システム全体へ広がっている場合は「ホームページは修正かリニューアルか？残す・直す・作り直す判断基準」で全体の判断へ進んでください。
1. 「古い」を5つの症状へ分ける
古く見える原因は、装飾が古いことだけではありません。
色や形を変える前に見ておきたいのは、情報の並べ方や使いにくさの側に原因が隠れていないかです。
「古い」という感覚を、直せる症状へ分けると次の表のようになります。
症状 | 確認すること |
|---|---|
文字・余白 | 本文を無理なく読めるか、見出しと本文のまとまりが分かるか |
写真・色 | 今のサービス・店舗・ブランドと合っているか |
情報の優先順位 | いちばん伝えたい内容がバナーや装飾に埋もれていないか |
ボタン・リンク | 押せる場所と押した後の行動が分かるか |
スマホ表示 | 小さな画面でも読め、押せ、入力できるか |
更新日が古いだけで、そのページが悪いとは限りません。
会社概要や所在地のように長く変わらない情報は、内容が今も正しければ、日付を新しくするだけの更新は要りません。
反対に、料金・営業時間・サービス・スタッフ・受付条件のように変わりやすい内容が古いままだと、利用者は申し込んでいいか判断できなくなります。
この場合、先に直すのはデザインより情報です。
古い情報が残ったサイトをお客様がどう見るかは、「更新されていないホームページはどう見られる？信用と集客への影響」に分けて書いています。
トップページ、主なサービスページ、問い合わせページを開いて次の質問に答えていくと、どの症状が出ているかが分かります。
- ページを開いた瞬間に、何のサイトか分かるか
- いちばん伝えたい内容が、最初の画面に入っているか
- 今の事業やサービスの中身と、書かれている説明が合っているか
- 料金や連絡先など、依頼を判断するために必要な情報をすぐ探せるか
- 次に押すボタンやリンクが、ひと目で分かるか
答えに迷ったページがあれば、装飾を変える前に見直したいのは、情報の順番と中身です。
「なんとなく古い」という違和感を「文字が小さい」「写真が古い」「ボタンが見つからない」と言葉にできると、制作会社へ直してほしい場所も伝えやすくなります。
2. 最初に文字と余白を整える
見た目を変えるとき、色や飾りより先に整えたいのは、本文を無理なく目で追える状態です。
それだけでも、画面全体の印象は落ち着きます。
本文の読みやすさで確かめる項目は、この7つです。
- 文字が小さすぎず、スマートフォンでも拡大せずに読める
- 行と行の間隔が詰まりすぎず、次の行を見失わない
- 一行が長すぎず、行の先頭へ視線を戻しやすい
- 見出しと本文の違いが、文字の太さや大きさで分かる
- 太字や色文字が多すぎず、本当に大切な部分だけが目立っている
- 背景と文字を見分けやすく、写真に重ねた文字も読める
- 段落・見出し・画像のまとまりを余白で区別できる
フォント（文字の書体）の種類を増やしても、サイトが新しく見えるとは限りません。
本文、見出し、補足説明にそれぞれどの書体を使うかを決めて、種類を絞ってそろえる方が、全体を整えやすくなります。
長い文章が続くとき、文字を小さくして押し込むより、段落、見出し、箇条書きで内容を区切る方が読みやすくなります。
一つの段落に複数の話題が入っているときの直し方は、段落を分けるか、文章そのものを短くするかの二つです。
余白は、ただ何もない場所ではなく、どこからどこまでが一つのまとまりかを読者へ伝える役割を持っています。
見出しと本文、本文と画像、説明とボタンの間を適切に離すと、内容の切れ目が分かりやすくなります。
反対に、関係のある見出しと本文が離れすぎていると、その二つが別の内容に見えてしまいます。
余白はどこも一律に広げるのではなく、関係の深いものどうしは近づけ、別の話は離す、と考えると整理しやすいです。
読みやすさの手がかりは、自分の好みだけでなく、W3CのWeb Content Accessibility Guidelines（WCAG）2.2の基準にもあります。
WCAGは、年齢や障害、利用環境にかかわらずWebを利用しやすくするための国際的なガイドラインです。
このうち、専門家でなくても自分で確かめやすい項目を、次の表にまとめました。
確認すること | WCAG 2.2の基準 | 自分で試す方法 |
|---|---|---|
文字と背景のコントラスト | 通常の文字は4.5:1以上、大きな文字は3:1以上 | コントラスト確認ツールで、本文、ボタン、写真に重ねた文字を測る |
文字の拡大 | 200％まで拡大しても、内容や機能を失わない | ブラウザで文字や画面を拡大し、文字の重なり、欠け、押せなくなるボタンがないか見る |
狭い画面での表示 | 縦に読む内容は、幅320 CSS px相当の狭い画面でも、原則として横へスクロールせずに読める | ブラウザの表示幅を狭くし、本文、画像、カード、表が横へはみ出さないか見る |
ボタンやリンクの押しやすさ | 操作対象は原則24×24 CSS px以上、または小さい対象どうしに十分な間隔を取る | メニュー、閉じるボタン、フォームの選択肢を、指で押し分けられるか試す |
表に出てくるコントラスト比は、文字と背景の明るさの差を数値で表したものです。
CSS pxはブラウザが画面上の大きさを表すのに使う単位で、1pxが端末の画面の物理的な1ピクセルと同じ大きさとは限りません。
「大きな文字」の定義や、地図・表などを対象外とする例外は、基準ごとに細かく決められています。
表の項目をいくつか満たしただけで、サイト全体がWCAGに適合したと言えるわけではありません。
それでも、感覚だけで「読める」と判断するより、迷った場所を数値で確かめられるぶん、直す場所がはっきりします。
最初に直すなら、よく見られているページの本文を一つ選んで、文字の大きさ、行の間隔、段落、見出し、左右の余白を整えるのが近道です。
直す前と後をスマートフォンで読み比べると、整えた効果を自分の目で確かめられます。
3. 色・写真・ボタンは「役割」をそろえる
色、写真、ボタンは、それぞれ何のために使うかを決めてそろえると、サイト全体が分かりやすくなります。
流行の色や装飾を増やす前に、同じ意味を持つものが同じ見た目になっているかを見ます。
色
色は、ブランドの印象を伝える色、本文の文字の色、背景の色、申し込みなどの行動をうながすボタンの色、というように用途で分けると決めやすくなります。
ページを移るたびに目立つ色が変わると、利用者はどれが大切な情報なのか判断できなくなります。
「リンク」「注意」「選択中」のように違う意味を、一つの色で表さないのも同じ理由です。
色の違いが分かりにくい人にも意味が伝わるのは、色だけに頼らず、言葉、形、アイコン、下線を組み合わせたときです。
写真・画像
画像は、きれいかどうかより、内容の説明に役立っているかで見ます。
今の商品、店舗、担当者、制作物と合っていない写真は、画質が高くても、利用者の誤解につながります。
- 今のサービス内容や会社の雰囲気と合っている
- 何を説明するための画像か分かる
- 画像が粗くなく、切り抜きも不自然でない
- 同じページに並ぶ写真どうしで、明るさや色の雰囲気がそろっている
- 公開して使っていい写真か、権利と利用条件を確かめられる
- 料金や大切な条件を、画像の中に書かれた文字だけに頼っていない
ボタン
ボタンで先に見るのは、押せる場所だと分かるか、押した後に何が起こるか想像できるかの二つです。
「詳しくはこちら」ばかりが並ぶと、どのページへ進むのか分かりません。
「料金を見る」「問い合わせる」「事例を見る」のように、移動先や次の行動が想像できる言葉だと、押す前に行き先が分かります。
いちばん進んでほしいボタンと補助的なリンクを同じ強さで目立たせると、選択肢が多く見えて、利用者はどれを押せばいいか判断しにくくなります。
ページごとに最も進んでほしい行動を一つ決め、そのボタンだけを目立たせて、ほかのリンクと見た目を分けると、利用者が押す場所は一つに絞られます。
4. スマホでは見た目だけでなく情報の順番を見る
スマートフォン向けの表示は、パソコン画面を小さく縮めれば完成ではありません。
スマートフォンの画面は縦に長く、下へスクロールしないと先を読めません。
大切な説明やボタンが後ろへ回ると、利用者はそこへたどり着く前にページを閉じてしまいます。
トップページをスマートフォンで開いたとき、上から順にこの流れで読めていると、利用者は途中で止まらずに進めます。
- 何を扱うサイトで、誰に向けたものか分かる
- 主なサービスや商品の中身が分かる
- 依頼先を選ぶために必要な料金、特徴、対応範囲を確かめられる
- 詳しい説明のページや問い合わせへ進める
- 会社情報や連絡先を確かめられる
この順番は、購入、予約、採用、来店など、サイトの目的によって変わります。
パソコンでは横並びだった要素は、スマホでは縦に並び替わります。
そのときに、説明とボタンの順番が逆転していないか、画面いっぱいの大きな画像が必要な情報を下へ押し下げていないかを見ます。
パソコンの管理画面に出るプレビュー（公開前の見本表示）だと、指で押したときの押しにくさや、縦に並び替わったときの余白の詰まりまでは分かりません。
自分のスマートフォンで開いて、親指で操作しながら見ると、文字の大きさ、余白、ボタンの間隔がそのまま分かります。
ボタンの問題は、押してみて初めて気づくことが多いです。
見るのは、メニュー、サービスページ、問い合わせフォームの入力欄までで、指で一通りたどると押しにくい場所が出てきます。
気になった場所は、使った端末、ページのURL、スクリーンショット、うまくいかなかった操作をひとまとめにして残すと、次の相談にそのまま使えます。
「スマホで変です」ではなく、「トップページの料金表が横へはみ出して、右端が読めない」と書いてあれば、制作会社に直してほしい内容がそのまま伝わります。
問い合わせまでの流れ全体に問題がありそうなら、原因の切り分けは「ホームページから問い合わせが来ないのはなぜ？よくある原因と改善の順番」にまとめています。
5. 部分修正で済む状態と、構造を見直す状態を分ける
最後に、見た目の調整で済む問題か、サイトの構造から変える問題かを分けます。
部分修正で対応しやすい | 構造から見直す候補 |
|---|---|
文字・余白・色のばらつき | 事業内容とページの分け方が大きくずれている |
写真や画像が古い | 必要な情報が複数ページへ散らばっている |
特定ボタンの位置・文言が分かりにくい | スマートフォン表示やフォームの不具合が、複数のページへ広がっている |
一部ページだけスマホ表示が崩れる | 今のCMS・コードでは、管理画面から必要な更新ができない |
見た目の違和感が多くても、原因が文字の大きさ、余白、写真、色の不ぞろいだけのことがあります。
ページの構成や更新のしやすさに問題がなければ、今あるURLやコンテンツを生かしたまま、部分的に直せる状態です。
問題が事業、構成、更新、システムまで広がっているなら、残すページと作り直す範囲の決め方は「ホームページは修正かリニューアルか？残す・直す・作り直す判断基準」で詳しく整理しています。
構造から変える場合も、今のサイトで役立っている内容やURLは残せます。
残すページ、書き直すページ、一つにまとめるページ、公開をやめるページに分けてから、利用者が迷わない切り替え方を制作会社と決める、という順番です。
「古く見えるから全面リニューアル」ではなく、まず一つのページで文字・余白・画像・ボタン・スマホ表示を直し、それでも残る使いにくさがどこにあるかを見ると、構造の問題かどうかが分かります。
まとめ：新しさより、読みやすさと役割を整える
古く見えるWebサイトを直す順番は、流行を足す前に、文字・余白、色・写真、情報の優先順位、ボタン、スマホ表示の5つです。
読みやすさに迷ったときの手がかりは、感覚より、WCAG 2.2の基準です。
ただし表の4項目は自分で気づくための目安で、満たしただけでサイト全体が適合したことにはなりません。
一つのページの中で直せる問題なら、部分修正で足ります。
全面リニューアルが候補に入るのは、サイト全体の構造や更新方法までずれている場合だけです。
改善の基準は、見た目の新しさより、今の利用者が読みやすく、迷わず次へ進めるかどうかにあります。
トップページをスマートフォンで開いて、読みづらい場所と押しにくい場所を一つずつ書き留めるところから、直す範囲が見えてきます。
