この動画では、AIが作ったWebページ（LP）を公開前に整えるAIツール（GPTs）を使い、不自然な改行、スマートフォンでの横スクロール、縦に伸びた文章を修正する実演をしています。ツールの本質は、すぐ公開できる完成品を作ることではなく、危険箇所を見つけて後から修正しやすくすることだと説明しています。
実演では、AIの修正結果が画面上で整って見えても、そのまま公開せず、実際のファイルとPC・スマートフォンの表示を確認する必要があると分かりました。
修正後は、見出しの不自然な改行が整い、カードの横スクロールがなくなって縦に並び、縦に伸びていた文章も収まりました。一方で、埋め込んだYouTubeの内容にはずれが残り、長いページでは追加の修正が必要になる可能性もあります。
この記事で分かることは、AIによる修正の役割、スマートフォンで確認すべき崩れ、修正版ファイルの確かめ方、修正箇所の探し方、PCとスマートフォンで改行を分ける方法です。
AIによる修正を完成保証と考えない
AIによる修正の役割は、公開できる完成品を保証することではなく、危険箇所を見つけて、後から直しやすい状態にすることです。
実演では、Webページを修正するAIツール（GPTs）が危険箇所と修正コードを示し、修正版のWebページファイル（HTML）を返しました。
簡単なページでは改善できましたが、長いページではずれが生じる可能性があり、必要に応じて追加の修正を伝える流れになります。
PCで問題がなくてもスマートフォン表示を確認する
PCで問題なく見えるページでも、スマートフォンでは不自然な改行、横スクロール、縦に伸びた文章が起きるため、表示を分けて確認します。
実演では、修正前に横スクロールと縦に伸びた文章がありましたが、修正後は見出しの改行が整い、カードが横にはみ出さず縦に並び、文章も収まりました。
補足では、スマートフォンでの不自然な改行や横スクロールに加え、画像・動画や並べた要素が画面からはみ出す問題も確認対象にしています。
確認画面だけで終わらせず修正版ファイルを直接開く
AIツール内の確認画面は本番の表示とずれるため、修正版のWebページファイルを直接開いて確認します。
実演では、修正版のWebページファイル（HTML）をダウンロードした後、AIツール内にも確認用の表示を出しました。
AIツール内の表示は大まかな確認にとどめ、実際の判断はダウンロードしたファイルを直接開いて行うよう勧めています。
直したい文言を検索して該当箇所を見つける
長いWebページのファイルを目で探し続けるより、画面上の直したい文言をコピーし、ファイル内検索で該当箇所を見つけます。
実演では、VS Codeでファイルを開き、直したい文言をコピーしてCtrlFの検索欄へ貼り付けると、該当箇所が1件見つかりました。メモ帳でも作業は可能ですが、VS Codeを勧めています。
修正対象の文言を検索の手掛かりにすると、長いファイルの中を目で探すより効率よく場所を特定できます。
PCとスマートフォンの改行を同じ位置に固定しない
PCで自然な改行をスマートフォンにも入れると、語句が不自然な位置で分かれるため、表示ごとに改行を分けます。
実演では、PCだけに改行する設定を入れて保存すると、PC側の改行だけが整い、スマートフォン側は変わりませんでした。補足では、PC用の改行を.br-pc、スマートフォン用を.br-spで分ける仕様です。
反対に、スマートフォンだけ2行にしたい場合はスマートフォン用の設定へ変え、PC側を変えずに改行できます。ただしスマートフォンにはさまざまな幅があるため、文字数や横幅の調整が必要になる場合もあります。
コメント