ホームページのスマホ対応はどう進める？見づらさの直し方と制作会社への頼み方

まず、一つのページで読者が終えたい用事を決める

最初に直すのは、見た目が気になる場所全部ではなく、読者の用事を止めている一つのページです。「何を知って、次に何を選ぶか」を原稿に結び付けます。

たとえば工場の担当者が設備点検を相談したいなら、サービス名を見つけるだけでは足りません。自分の設備が対象か、地域について何を確認するか、どの写真を用意するかを読んでから相談先を選びます。目立つボタンを先頭へ置いても、判断に必要な条件が読めなければ、何を用意して進むのかが残ります。

自社では、現在のページURLと、困る箇所を一つ控えます。次に「この説明を読んで、何が分かり、どこへ進めればよいか」を短く書いてください。問い合わせの受け取りや予約確定まで作る話なら、それは画面の並べ直しより広い範囲です。Webサイトの要件定義と、会社側で受け取る仕事の決め方で全体の依頼範囲もそろえられます。

スマホ対応、レスポンシブ、モバイルファーストは同じ意味ではありません

この記事でいうスマホ対応は、小さい画面でも必要な説明を読み、目的の行き先を選べるようにすることです。レスポンシブデザインは、画面の幅などに応じて、同じページの表示方法を変える作り方です。横並びを一列へ変える実装をしても、原稿の条件が消えていたり、メニューが操作できなかったりすれば、確認は終わりません。

モバイルファーストという設計の考え方では、狭い画面で何を伝え、どの順に使うかを早く検討します。PC案から描くか、スマホ案から描くかという作図の順序と、CSSという見た目を指定する仕組みの書き方は別の話です。既存サイトの修正では、順序の流派を選ぶより、同じ原稿を狭幅へ入れたときに判断材料が残るかを先に見ます。

Googleの「モバイルファーストインデックス」は、検索の登録・評価でモバイル版の内容を使うという別の仕組みです。画面を設計する順番や、順位が上がる保証を意味しません。Google公式のモバイルサイトの説明を参照しています。

広い案と狭い案で、必要な説明が残るかを比べる

同じ原稿を使い、対象・条件・準備・相談先を同じ項目で照らします。スマホで収まらない説明を隠す前に、その説明が読者の判断に必要かを確かめます。

架空の設備点検案内には、次の五つの情報があります。広い案はすべてを表示する下書きです。狭い別案ではサービス名・対象・相談先があり、地域条件と必要写真が下書き上で非表示になっています。幅1280と390は、この説明に使う案のCSSピクセルの幅です。CSSピクセルはブラウザーで配置を考える単位で、実端末の物理的な点の数とは同じではありません。

相談先へ進む前に、狭い案で何が抜けているでしょうか。図では、地域条件と写真準備の位置を見てください。二案は別の下書きで、変更前と変更後の実測ではありません。

原寸画像を開く

原稿の条件が長いなら、見出しと説明のまとまりを分けます。案の表示上の省略と、会社がその条件を廃止したことは別です。料金や回答時期など、原稿にない約束を見た目の都合で追加することもしません。

小さく縮めず、読む順と表示の枠を直す

まず説明のまとまりと順を直し、その内容に合わせて一列化、幅、文字、画像を調整します。狭い画面の中へPC案をそのまま縮小するだけでは、文字と操作対象も小さくなります。

対象と条件を先に、準備と相談先を続ける

この案なら、サービス名→対象→地域条件→必要写真→相談先という読み順を残します。広い画面では説明を横に置けても、狭い画面では順を追える一列へ並べる方法があります。情報を左右へ離したまま、読者に前の条件を覚えて次の画面と比較させないようにします。

上の編集案は、同じ原稿の地域条件と写真準備を削らずに並べる見本です。見出しと条件を一組にし、その後に準備を置いています。画面の幅を変えたときも同じ文章が残るか、制作案で確かめてください。この見本を表示したこと自体は、元の会社サイトで修正が成功したという意味ではありません。

はみ出す物を見つけ、文字と画像を別に直す

ページ全体を横へ動かさないと読めないなら、どの画像・表・長い文字列・固定幅の枠が外へ出ているかを制作担当に示します。写真は表示枠に合わせて大きさを変え、説明文は文字のまま折り返す方法があります。スマホで読めない説明を、一枚の小さな文字画像へまとめる方法では済ませません。

文字は小さくする前に、読む幅・行間・改行と周囲の余白を見ます。画像が載る場所を読み込み前から確保すれば、後から画像が現れた際の大きな移動を抑える設計につながります。実際にどの要素が原因かは、対象ページで確認が必要です。web.devのレスポンシブ設計の基礎は、内容に合う幅と画像領域、拡大を妨げない設定を説明しています。

表が問題の中心なら、表の関係を残す方法を選びます。スマホの比較表で、同じ項目と条件を残す整え方では、列と補足の整理、表の枠内だけの横移動を具体的に扱っています。

押す場所と、固定表示に隠れる場所も分けて見る

相談先の文字が見えることと、そのリンクを選べることは別です。隣のリンクと押し分けられるか、メニューを開いて目的の項目を選び、閉じて本文へ戻れるかを確認します。上や下に固定した案内があるなら、対象の説明や入力位置を隠さないかも見ます。画面が小さいという理由だけで、入力方法をタッチだけと決めつけません。

名前・並び順・階層が原因で行き先を予想できない場合は、メニューの名前と分類を、読者の用事から決める方法が別の判断を助けます。今のページの説明配置と、サイト全体のメニュー設計を一度に入れ替える必要があるかは分けて相談できます。

制作担当へは、場所・困りごと・残す情報を伝える

「スマホ対応にしてください」に、ページURL、該当箇所、読者の用事、起きたこと、残す原稿を添えます。直し方を技術名で決める前に、何を読めるようにしたいかを伝えます。

実際に困った状況は、使った端末・ブラウザー・画面の向き・文字拡大の有無を添えて説明します。画面の写真を付けるなら、見えている箇所だけでなく、どこを読もうとしたかも示してください。「古いテーマが原因」「CMSを変えれば直る」は、まだ調べていない段階では断定しません。

この架空案についての依頼文例

「設備点検の相談」のページ案について、工場の担当者が、地域条件と必要写真を読んでから相談先を選べるようにしたいです。

狭い画面の案では「対応地域は案件ごとに確認」と「設備全体と銘板の写真を用意」が隠れています。サービス名→対象→地域条件→必要写真→相談先の順で、情報を残した案を見たいです。

既存の共通の枠で直せるか、ほかのページへの影響、確認に必要な環境と修正範囲を教えてください。実際の依頼では、該当ページURLと見ている版も添えます。

この文例は、画面案の不足と、戻してほしい情報、制作担当に判断してほしい範囲を分けています。対象が既存の公開ページなら、同じURLでも更新前後の版を取り違えないようにします。制作担当から案が戻ったら、見た目の好みだけでなく、同じ用事と原稿で必要条件が読めるかを比較してください。

「見やすく」の理由を、まとまりや読み始めの位置まで具体化する場合は、デザインの4原則で、修正箇所と理由を伝える例も参照できます。ここでは、その原則の一覧より、スマホ案で残す原稿と作業範囲を先にそろえます。

部分修正か作り直しかは、変える範囲から判断する

一ページの配置で直せるか、複数ページに共通する枠や更新方法まで変える必要があるかを確かめます。スマホで見づらいという症状だけで、サイト全体の作り直しとは決めません。

どの原稿を残し、どこまで直す案でしょうか。図では、同じ案内原稿の箇所と、共通の枠がほかのページへ関係する範囲を分けて見てください。

原寸画像を開く

残せる原稿と仕組みがあるなら、部分修正の範囲を聞く

対象の説明と相談先が今の構成の中にあり、読む順や表示枠を変えられるなら、そのページや共通部分の修正を相談できます。確認したいのは、どの枠を直すか、同じ枠を使う別ページへ何が起きるか、更新担当が今後も文章や写真を直せるかです。部分修正という名前だけで、費用や影響が小さいと保証はできません。

「この共通枠で地域条件を戻せる」と返ってきたら、代表ページへ同じ長さの原稿を入れた案と、影響するほかのページの確認範囲を頼みます。全ページを先に置き換えるより、変更内容と影響を確かめてから対象を広げる進め方があります。

共通の枠や更新方法が制約なら、作り直す部分を区切る

今の枠では必要な順序を組めない、複数の画面で同じ問題が続く、会社が更新したい内容を扱えないと分かった場合は、共通の画面部品やテーマ、必要なページ構成まで見直す相談になります。テーマは、WordPressなどでページの見た目や配置をまとめて決める仕組みです。CMSは、記事やページを登録・更新する仕組みを指します。

ただし、この架空例ではテーマやCMSの制約も、作り直しの必要も未確認です。「今の枠では難しい」と言われたら、できない箇所と理由、残せる原稿・画像・URL・更新機能、置き換える部分、移行中に使えなくなる機能、変更後の確かめ方を説明してもらいます。すべてを新しくする案だけでなく、共通部分を直す案と、対象を限る案の範囲を比べて判断してください。

直した案も、同じ原稿と用事で確かめる

画面が狭幅に収まったことだけで終えず、条件を読んで次の行き先を選ぶところまで確かめます。案の確認と、組み込んだ実ページの確認を分けます。

説明が見えることと、必要な対象を操作できることは、どこで確かめますか。同じ原稿の条件を読む場面と、行き先を選ぶ場面を図で対応させます。

原寸画像を開く

1. 同じ情報で読む。対象・地域条件・必要写真・相談先が残るかを、狭い幅と広い幅で照らします。短い仮文ではなく、実際に使う長さの原稿を入れます。
2. 読む状態を変える。文字を大きくした状態、横向き、画像の読み込み後でも、説明が切れたり重なったりしないかを見ます。拡大できない設定にして収める方法は避けます。
3. 必要な操作を試す。メニューやリンクを選び、目的のページへ進めるかを確かめます。Tabキーは操作位置を次へ移すキーです。キーボードでは今の位置が見え、Enterキーなどで対象を操作できるかも見ます。
4. 実際の端末で必要な経路を確かめる。ブラウザーの幅変更は一次確認に使えますが、指での選択、画面上のキーボード、実際の通信状態まで同じにはなりません。入力があるなら、欄を選んで直すところも対象です。
5. 直した版を同じ条件で確かめる。問題を見た箇所と、同じ枠を使う必要なページを確認します。まだ試していない項目は、そのまま次の確認に残します。

相談画面へ到着しただけでは送信や会社の受付は確認できません。送信試験が必要なら、会社と制作担当が許可した環境・宛先・試験内容をそろえます。実顧客へ試験を送ったり、操作していない結果を完成扱いにしたりしません。

ここで示した二案には、タッチ・実ブラウザー・実送信の結果がありません。表示案を読んだことと、実機や公開ページで使えたことを分け、変更後の結果も確認してから判断します。

まとめ：一ページの条件と準備を残す依頼から始める

スマホ対応では、読者が判断に使う説明を残し、読む順と操作を現ページの具体箇所で直します。必要条件を隠す、PC案を小さく縮めるだけで済ませず、同じ原稿と用事で確かめてください。

作り直しは、実際の構成や更新方法の制約を確かめてから判断できます。ページ案、実際の操作、公開後の結果を分けて確認すれば、見た目だけの完了や、根拠のない全面変更を避けて次の作業を選べます。