見やすいWebサイトは感覚でつくらないAIと検査基準で改善するWeb制作

「見やすい」は全部主観なのでしょうか

ブランドらしさや写真の印象には、もちろん人の好みが関わります。しかし、薄いグレーの文字が読みにくい、スマートフォンで見出しが画面からはみ出す、ボタン同士が近すぎて押し間違える、といった問題まで好みで片づける必要はありません。

Webサイトの見やすさは、デザイナーが判断する部分と、基準に照らして検査できる部分に分けられます。誰にどんな印象を持ってほしいかはデザイナーが考え、文字の読みやすさや画面の崩れは共通の基準で確かめます。

デザイナーが設計し AIが実装する

制作の最初からAIに「いい感じのサイトを作って」と任せるわけではありません。まずデザイナーが、お客様ご自身のデザインの好みと、狙いたいお客様が好む雰囲気の両方をヒアリングします。

その内容をもとに、情報を見せる順番、色、文字、写真、余白、ボタンの目立たせ方まで設計します。AIに任せるのは、そこで決めた設計をWebページとして組み立て、検査と修正を繰り返す工程です。

私たちがいう「科学的なアプローチ」は、難しい研究をすることではありません。人が考えた狙いを確認できる条件に置き換え、実際の画面で確かめ、直した後に同じ条件でもう一度確かめることです。

検査基準の具体例

ここからは、実際にどのような項目を見るのかを具体的に紹介します。数字は万能ではありませんが、最低限の品質を感覚任せにしないための共通言語になります。

まず知っておきたい2つの基準

WCAG 2.2とCore Web Vitalsは、デザインの色や雰囲気を決めるものではありません。デザイナーが考えた表現を、利用者が無理なく読み、操作できる状態になっているかを別々の角度から確かめる基準です。

1. 文字と背景の色に十分な差があるか

薄い文字は、作った人のモニターではきれいに見えても、明るい場所や小さな画面では読みにくくなります。国際的なアクセシビリティ基準であるWCAG 2.2では、通常の大きさの文字と背景に4.5対1以上、大きな文字には3対1以上のコントラスト比が目安として示されています。

これは「青なら読める」と色名で判断せず、実際の文字色と背景色の組み合わせを数値で確認するということです。詳しい基準はWCAG 2.2のコントラスト基準で公開されています。

2. 小さな画面でも横にずれず読めるか

スマートフォンでは、3列のカードが窮屈になっていないか、長い見出しが不自然な位置で切れていないか、画像や表が画面の外へ飛び出していないかを確認します。ワイルームSpa様の制作では、パソコンを1440×900、スマートフォンを390×844の画面サイズで確認しました。

さらにWCAG 2.2では、文章などの通常の内容は幅320 CSSピクセル相当でも、情報を失わず、縦横両方へのスクロールを強いないことが基準になっています。CSSピクセルは、画面上の大きさを表す基準単位です。簡単に言えば、画面を拡大しても「一行を読むために左右へ何度も動かす」状態にしないということです。文字を拡大したときの表示基準で考え方を確認できます。

3. ボタンを迷わず押せるか

予約やお問い合わせのボタンは、見つけやすいだけでなく、指で押しやすい必要があります。WCAG 2.2では、ボタンなどの操作部分を原則として24×24 CSSピクセル以上にするか、近くの操作部分と十分な間隔を空けることが最低基準として示されています。

私たちは数字だけで合格にせず、固定表示の予約ボタンが本文を隠していないか、似たボタンが並んで押し間違えないか、押した先が分かる言葉になっているかも画面で確認します。操作部分の大きさに関する基準も参考にしています。

4. 待たされず、表示中に画面がずれないか

読みやすくても、表示が遅かったり、読み始めた瞬間に画像が入り込んで文章がずれたりすると、利用者は離れやすくなります。GoogleのCore Web Vitalsでは、主な内容が表示されるまで2.5秒以内、操作への反応が200ミリ秒以内、予期しない画面のずれを示す値が0.1以下を「良好」の目安としています。

これらは、実際の利用者のうち少なくとも75%が基準を満たしているかで評価します。制作中の測定と、公開後の実測を分けて考えることも大切です。詳しい説明はGoogleのWeb Vitals解説にあります。

5. 見えない故障が残っていないか

画面が一見きれいでも、裏側でエラーが出ていることがあります。次の項目も公開前の合格条件に含めます。

• 画像や装飾ファイルが欠けていない
• 画面の裏側でエラーが発生していない
• お問い合わせフォーム、メニュー、開閉式のFAQが操作できる
• 予約ボタンや外部サイトへのリンクが正しい
• Google Analytics（GA）で多くの方が訪れていることがわかっている記事のURLが変わっていない
• 見出し、本文、画像が重なったり途中で切れたりしない

事例 ワイルームSpa様のリニューアル

CLIENT CASE温活×マッサージのリラクゼーションサロン ワイルームSpa様

公式サイトを見る ↗

PC表示1440 × 900

スマートフォン表示390 × 844

ワイルームSpa様のリニューアルでは、デザイナーが店舗の雰囲気、伝えたいサービス、既存サイトで大切にしてきた表現を整理してから、画面を設計しました。同時に、既存のWordPressサイトが持っていた記事、URL、店舗情報、予約導線を守ることも設計条件に含めました。

デザイナーが決めた見た目と情報の優先順位に加え、ページごとの役割、正しい店名や料金、残す記事、共通で使うヘッダーとフッター、確認する画面サイズ、公開前の合格条件を文書にし、AIが読める状態で管理しました。

特に、Google Analytics（GA）で多くの方が訪れていることがわかっている記事は、リニューアル後もURLを絶対に変えないことを必須の検査項目にしました。URLが変わると、検索結果、外部サイトのリンク、ブックマークから記事へたどり着けなくなる可能性があるためです。公開前後のURLを照合し、同じ記事が同じ場所で読めることを確認しました。

AIのループをどう使ったか

デザインの方針を人が決めた後、AIは次の流れで実装と検査を担当しました。

1. 設計を読む — AIが、デザイナーの意図、ページの目的、残す情報、変更してはいけないURL、表示の合格条件を確認します。
2. 設計どおりに実装する — 決められた色、文字、余白、情報の順番に沿って、WordPressの画面を組み立てます。
3. 実際の画面を撮る — パソコンとスマートフォンで、最初に見える範囲とページ全体を確認します。
4. 問題を言葉にする — 「3列では文章が窮屈」「見出しが1語だけ次の行へ落ちた」「固定ボタンが本文に重なる」のように、直す対象を具体化します。
5. 修正して再検査する — AIが修正し、自動検査と画面確認をもう一度行います。基準を満たすまで繰り返します。

たとえば記事ページでは、本文の幅を最大760ピクセル程度に抑え、文字の大きさをパソコンで15〜17ピクセル、スマートフォンで15ピクセル、行間を文字サイズのおよそ2倍に設定しています。画像は画面幅から飛び出さないようにし、長い記事でも目線を戻しやすい幅と間隔を選びました。

この数値は、すべてのサイトにそのまま当てはめる正解ではありません。ワイルームSpa様の文章量、雰囲気、利用者、画面構成に合わせた設定です。大切なのは、決めた理由と検査方法が残り、同じ条件でもう一度確認できることです。

人が判断したこと

「お客様がどんなデザインを好むか」「狙いたいお客様にはどんな雰囲気が合うか」「どのサービスを一番伝えたいか」は、デザイナーがヒアリングして設計します。店舗の雰囲気が正しく伝わるか、料金や表現が事実に合っているかも人が確認します。AIに任せたのは実装と反復作業であり、デザインの狙いと最終判断ではありません。

AIを使うメリットは、案を一発で当てることではない

AIにデザインの判断まで丸ごと任せ、完璧な案が一度で出てくることを期待すると、制作はかえって不安定になります。AIが得意なのは、デザイナーが決めた設計を読み、画面として実装し、確認と修正を短い間隔で繰り返すことです。

つまりAIの価値は「天才的なひらめき」よりも、検査と改善の回数を増やせることにあります。人は、誰に何を伝えるか、どの表現を選ぶか、最終的に公開してよいかという判断へ時間を使えます。

Web制作をご相談いただくときにお伝えすること

最初からデザインの希望をうまく説明できなくても問題ありません。好きなサイト、避けたい雰囲気、狙いたいお客様についてデザイナーが伺い、方向性を一緒に整理します。そのうえで、完成イメージだけでなく、何を基準に確認するかもご案内します。

Webサイトの目的、更新方法、集客の必要性によって、適した作り方と検査項目は変わります。現在のサイトで気になることがあれば、画面や資料が整理できていない段階からでもご相談ください。