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