WEBサイト改善レポート|フェーズ 8 / 9

📱 モバイル最適化「モバイルUI診断」

対象サイト 埼玉県乗用自動車協会
対象URL https://www.taxi-saitama.or.jp/
分析日 2026年3月31日
⚠️ 前提:モバイルファーストの重要性
Googleは2019年以降、モバイル版のコンテンツを基準にインデックス・評価する「モバイルファーストインデックス」を採用しています。モバイル非対応サイトは検索順位に直接マイナスの影響を受けます。また、国内のスマートフォンからのWeb検索比率は60〜70%を超えており、タクシーを「今すぐ使いたい」「運賃を調べたい」ユーザーの多くがスマートフォンでアクセスしていると推定されます。

■ モバイルUI 現状チェック

チェック項目 状態 観察内容
viewport meta タグ ✗ 未設定 モバイル表示の基礎となる meta name="viewport" が未設定。スマートフォンではPC幅(約1,265px)のまま縮小表示されるため、文字が極小になり実質的に読めない状態。
レスポンシブレイアウト ✗ 未対応 固定幅レイアウト(ページ全体幅:約1,265px)。CSSにメディアクエリが存在せず、スマートフォン・タブレットへのレイアウト最適化がゼロ。
横スクロールの発生 ✗ 発生 viewport未設定かつ固定幅のため、スマートフォンでは横スクロールが発生する。Googleのモバイルユーザビリティ検査でも「コンテンツの幅が画面より広い」エラーが発生すると推定される。
タップターゲットのサイズ ✗ 不適切 ナビゲーションリンクは縮小表示時に極小サイズになる。Googleが推奨するタップターゲット最小サイズ(48×48px)を大幅に下回る状態。隣接するリンク間の間隔も不足。
モバイル向けナビゲーション ✗ 未実装 ハンバーガーメニューなどのモバイル用ナビが存在しない。左サイドバー型のナビゲーションがそのまま縮小され、スマートフォンでの操作性が著しく低い。
フォントサイズ(モバイル) ✗ 不適切 本文フォント14.4px(PC表示)。viewport未設定によりモバイルでは実質3〜4px相当に縮小される。Googleの推奨最小フォントサイズは16px(モバイル)。
iframe のモバイル対応 ✗ 問題あり お知らせiframe(幅754px・高さ1700px固定)・活動iframe(幅754px・高さ300px固定)がピクセル固定値で埋め込まれており、画面サイズに追従しない。
電話番号のtel:リンク ✗ 未設定 協会概要ページの電話番号(048-863-6431)がテキストのみで記載されており、タップして発信できる tel: リンクになっていない。スマートフォンユーザーの利便性が低い。

① 現状の課題

課題1|viewport未設定によりスマートフォンでサイトが実質使用不能

viewport meta タグが未設定のため、スマートフォンでアクセスした際にPC向けの幅(約1,265px)のページがそのまま画面に収まるよう縮小表示されます。一般的なスマートフォン画面幅(375〜430px)に対して約1,265pxのコンテンツが収縮するため、文字・ナビゲーション・リンクはすべて極小サイズになり、実質的に読むことも操作することもできない状態です。これはモバイルユーザー(全訪問者の推定60〜70%)がサイトを正常に利用できないことを意味し、最優先で解消すべき問題です。

課題2|固定幅レイアウトで横スクロールが発生し、Googleのモバイル評価が低下

ページ全体が約1,265px固定幅で設計されており、CSSにメディアクエリが一切存在しません。スマートフォンでは横スクロールが発生し、Googleのモバイルユーザビリティ診断ツールで「コンテンツの幅が画面の幅を超えています」エラーが記録されると推定されます。このエラーはCore Web Vitalsのレイアウト安定性(CLS)スコアにも影響し、検索順位の低下要因となります。

課題3|ナビゲーションがスマートフォンで操作不可能なサイズに縮小される

左サイドバー型のナビゲーションはPC表示では約190px幅に配置されていますが、モバイル縮小時には指でタップできないサイズになります。Googleが推奨するタップターゲットの最小サイズは48×48pxですが、縮小表示では各ナビ項目が10px程度になると想定されます。モバイル向けのハンバーガーメニューや折りたたみナビが存在しないため、スマートフォンでのナビゲーション操作は事実上不可能です。

課題4|iframeが固定ピクセル値で埋め込まれており、モバイルでレイアウト崩壊

「お知らせ」iframe(width=754, height=1700)と「協会の活動」iframe(width=754, height=300)がいずれもピクセル固定値で埋め込まれています。これらはモバイル画面幅(375〜430px)を大幅に超えており、スマートフォンではiframe自体が画面外にはみ出します。コンテンツの大部分を占めるiframeが表示崩壊することは、モバイルユーザーにとってサイトとしての機能を失わせます。

課題5|電話番号がtel:リンクでなく、スマートフォンからワンタップ発信できない

協会概要ページに「TEL:048-863-6431」と記載されていますが、これはテキストのままであり、スマートフォンでタップしても電話発信が始まりません。タクシー業界団体へ問い合わせるユーザーの多くはスマートフォンからのアクセスが想定され、tel:リンクへの変換は実装コスト最小・ユーザー利便性向上効果が高い施策です。同様に乗務員指導登録センターの番号(048-863-1110)も未対応です。

② 改善提案

提案1|viewport meta タグを全ページに追加する 優先度:高

アクション:全ページの <head> 内に以下の1行を追加する。

<meta name="viewport" content="width=device-width, initial-scale=1">

根拠・期待効果:これ1行を追加するだけでスマートフォンでの表示幅が画面幅に合わせて調整される。モバイルファーストインデックスにおける基礎要件の充足。実装コスト:極低(1行の追加)。なお、この変更だけではレスポンシブ化は完成しないが、少なくとも縮小表示による視認不可状態は解消される。

提案2|サイト全体をレスポンシブレイアウトに移行する(リニューアル推奨) 優先度:高

アクション:固定幅レイアウトをCSSフレックスボックス・グリッドを用いたレスポンシブデザインに変更する。短期的な暫定対応としてCSSにメディアクエリを追加する方法と、中期的にサイト全体をリニューアルする方法の両アプローチが考えられる。

/* 暫定対応:style.cssに追記 */
@media (max-width: 768px) {
  /* サイドバーを非表示またはナビを上部に移動 */
  .sidebar { display: none; }
  
  /* コンテンツエリアを全幅に */
  .content { width: 100%; padding: 12px; }

  /* iframeをレスポンシブ化 */
  iframe {
    width: 100% !important;
    height: auto !important;
    min-height: 400px;
  }
  
  /* フォントサイズを可読サイズに */
  body { font-size: 16px; }
}

根拠・期待効果:Googleモバイルユーザビリティエラーの解消。モバイルユーザー(全訪問者の60〜70%)が正常にサイトを利用できるようになり、直帰率が大幅に改善されると予測される。

提案3|モバイル向けハンバーガーメニューを実装する 優先度:高

アクション:スマートフォン表示時(幅768px以下)にサイドバーナビを非表示にし、ハンバーガーアイコンのタップで開閉するモバイルメニューを設置する。

/* モバイルメニュー構造例 */
<button class="hamburger" aria-label="メニュー" aria-expanded="false">
  <span></span><span></span><span></span>
</button>
<nav class="mobile-nav" hidden>
  <a href="index.html">ホーム</a>
  <a href="page1.html">協会の概要</a>
  ...
</nav>

根拠・期待効果:スマートフォンでのナビゲーション操作を可能にし、ページ回遊率・UXを抜本的に改善する。aria属性の実装によりアクセシビリティ(WCAG 2.1 Level AA)にも対応できる。

提案4|電話番号を tel: リンクに変換する 優先度:高

アクション:サイト内のすべての電話番号を tel: リンク形式に変更する。

【変更前】
TEL:048-863-6431

【変更後】
<a href="tel:0488636431">TEL:048-863-6431</a>

【乗務員指導登録センターも同様に】
<a href="tel:0488631110">TEL:048-863-1110</a>

根拠・期待効果:スマートフォンからのワンタップ発信を可能にし、問い合わせ・加入相談のコンバージョン率向上に直結する。実装コスト:極低(HTMLの修正のみ)、効果は高い。

提案5|Google モバイルフレンドリーテストで現状を計測・継続監視する 優先度:中

アクション:改善実施の前後に、Googleが無料提供するツールでモバイル対応状況を計測・記録する。

ツール名 URL 確認できること
PageSpeed Insights pagespeed.web.dev モバイルスコア・Core Web Vitals
Google Search Console search.google.com/search-console モバイルユーザビリティのエラー一覧
Chrome DevTools ブラウザ組み込み(F12) 各デバイスサイズでの表示プレビュー

根拠・期待効果:改善施策の効果を定量的に計測でき、優先度判断の根拠となる。Google Search Console でのモバイルユーザビリティレポートを定期確認することで、新たな問題を早期発見できる。

③ 優先度別アクションリスト

優先度 アクション 実装コスト 期待効果
全ページに viewport meta タグを追加する(1行) 極低
電話番号をすべて tel: リンクに変換する 極低
CSSにメディアクエリを追加し、スマートフォンでの基本表示を確保する(暫定) 非常に高
モバイル向けハンバーガーメニューを実装する
PageSpeed Insights・Search Console でモバイルスコアを計測し継続監視する 低(無料) 中(長期)

📋 フェーズ8 総評

モバイルUI の観点では、viewport未設定・固定幅レイアウト・モバイルナビなしという三重の問題により、スマートフォンでのサイト利用が事実上不可能な状態です。これは全訪問者の過半数がサイトを正常に使えていないことを意味し、SEO・UX・CVRすべてに深刻な影響を与えています。

viewport の追加と tel: リンクへの変換は実装コスト極低・効果最大の即日対応施策であり、最優先で実施することを強く推奨します。

レスポンシブ化とハンバーガーメニューの実装はエンジニアリング工数が必要ですが、モバイルファーストインデックス時代においてはサイトリニューアル計画の最重要課題として位置づけるべきです。このサイトの改善全体の中で、モバイル対応は最も緊急性の高い改善領域の一つです。

WEBサイト改善レポート|フェーズ8 / 9 |埼玉県乗用自動車協会|分析日:2026年3月31日