【AI】AIで作ったページがスマホで崩れる理由

AIに頼んで作ったホームページを、パソコンで開いたときは整って見えていた。ところがスマホで見てみると、文字がはみ出している、画像が画面より大きい、ボタンが小さくて押しづらい。そんなご相談を、よくいただきます。

AIに聞くと「スマホにも対応しています」と答えが返ってくることが多いです。パソコンでは問題なく見えているので、そのまま信じてしまうのも無理はありません。

正直にお伝えします。AIが作ったページは、パソコンの画面を基準に作られていることが少なくありません。スマホで崩れる原因は、だいたい次の3つのどれかに当てはまります。

ひとつめは、横幅が固定されていることです。サイトの中身の文字(コード)の中で、ページや画像の横幅が「何ピクセル」と決め打ちで書かれていると、パソコンではきれいでも、スマホの細い画面には収まりきりません。右側が切れたり、横にずらさないと読めなかったりするのは、この場合がほとんどです。

ふたつめは、画面の大きさに合わせて見せ方を切り替える指定が入っていないことです。本来は「画面が狭いときは、横に並べていたものを縦に並べる」「文字を少し大きくする」といった切り替えの指定が必要です。この指定が抜けていると、パソコン用の並びがそのままスマホに押し込まれ、小さな文字がぎっしり並んだ状態になります。

みっつめは、指で操作することが考えられていないことです。パソコンではマウスで細かく狙えますが、スマホでは指で押します。ボタンが小さい、ボタン同士が近い、リンクの文字が細かい、といった状態だと、お客様は押したいところを押せず、離れてしまいます。

ここで大切なのは、パソコンでは整っているなら、土台はできているということです。スマホで崩れているからといって、ゼロから作り直す必要はほとんどありません。原因が「横幅の固定」なのか「切り替えの指定」なのか「指での操作」なのかを切り分ければ、直す箇所はかなり絞られます。

ただし、AIに「スマホで崩れるので直してください」と頼むと、ある場所を直した拍子に、パソコンでの見え方まで変わってしまうことがあります。AIは、あなたのサイト全体を見渡したうえで直しているとは限らないからです。パソコンとスマホの両方を確かめながら進めないと、直したつもりが別の崩れを生むことになります。

いまはお客様の多くがスマホでホームページを見ます。パソコンでどれだけきれいでも、スマホで読めなければ、見てもらえたことになりません。

だからこそ、スマホで崩れているときは、AIに聞き直す前に、どの原因で崩れているのかを切り分けてもらうことをおすすめします。

――――――――――――――――――――

AIで作ったサイトのことで、困っていませんか。

「AIに聞いても直らない」「どこから手をつければいいかわからない」という段階でも大丈夫です。作り直しを前提にせず、原因と直す順番を専門用語なしでお伝えします。ログイン情報はご相談の段階では不要です。

■ AIで作ったサイトの崩れ・不具合のご相談

■ サイトの崩れ・更新できない原因の診断