Danny Postmaの公開スキルに学ぶ、AIへスマホ修正を任せる方法

今回の焦点Focus

スマホ表示の修正範囲と確認画像を指定し、人が差分を確かめる仕事の渡し方

AIにページの表示を直してもらうなら、直す場所と、修正後に確かめる画面を一緒に指定する。Danny Postmaが公開したスマホ修正用のスキルには、その頼み方が書かれています。修正前後の画像を受け取れば、どこが変わったかを自分でも確かめられます。

10月12日、Dannyは普段使っているLP制作のスキルを追加公開したと報告しました。今回は、スマホ表示を整える手順を読み、AIに何を渡し、何を受け取れば修正を確かめられるかを考えます。LPは、商品を説明して申込みや購入へ案内するページです。10月12日の本人投稿

講座案から、読める作業手順へ

前回は、準備中のLP講座が制作をどう分けるかを扱いました。今回は、Landingfolioに公開されたAI用の指示を読めます。スキルは、繰り返す作業の進め方や確認方法をまとめ、AIに読ませるための資料です。

10月14日の公開一覧には、七つの無料スキルがあります。デザイン案の比較、ページの監査、スマホ表示の修正、画面の保存、文章の推敲など、作業ごとに分かれています。七つ全部が10月12日に初公開されたかどうかは分かりません。

毎日使っているというのは、本人の説明です。今回は公開された指示を読んだ段階で、修正にかかる時間や品質の変化は測っていません。

Mobile Responsive Passは、PC向けに作ったページのスマホ表示を整えるスキルです。先にページと既存のスタイルを読み、幅390pxの表示を部分ごとに確かめます。余白が重なる箇所、折れ方の悪い見出し、収まらない表などを見て直す流れです。

直した部分は、同じ幅で画像を取り直します。PC表示が変わっていないかも確認します。この手順は表示の修正に範囲を絞り、本文や処理の仕組み、他のページにも使う共通設定に手を広げないよう指定しています。

変更した箇所と確認画像を一緒に受け取ると、依頼した場所が直ったか、別の表示に影響が出ていないかを追えます。自分がAIへ頼むときも、「スマホ対応をお願いします」に、確認する幅と受け取りたい画像を足せます。

横にはみ出していなくても、表の文字が一字ずつ折れていたり、料金の条件が省略されていたりすれば、読みにくさは残ります。画像は、数字上の確認だけでは分からない問題を探す材料になります。

公開手順には、縦に長いカードの並びを横送りにする案もあります。ただ、料金や条件を比べたい場所では、同時に読める方がよい場合もあります。スクロール量を減らす案をそのまま採用せず、読者が何を比べるかに合わせて判断したいところです。

幅390pxで確認しても、より狭い表示や文字の拡大まで確かめたことにはなりません。W3Cの文字の折返しに関する解説では、縦に読む文章を幅320 CSS px相当でも情報や機能を失わず読めることを扱っています。二方向の配置が必要な表などには例外があります。

この考え方を仕事で使うなら、検証用に複製した商品ページの表一つから試せます。以下は編集側の提案で、Dannyが行った実験や、こちらで実施して成果を測った方法ではありません。

AIへ渡すのは、ページのHTMLと表示を決めるファイル、修正前の画像、変えてはいけない料金・条件・申込み先です。自分が変更できるページを使い、検証用コピーを表示できる環境を用意します。顧客の個人情報が入っているページは材料から外します。

まず問題を説明してもらう。390pxで表を表示し、どの列のどの文字が読みにくいか、画像に対応づけて書いてもらいます。この段階で、直す範囲を人が決めます。
決めた範囲だけを直す。本文・料金・リンク先を保ち、検証用コピーで修正します。共通設定を変える必要が出たら、AIには作業を止めて理由を返してもらいます。
同じ条件で取り直す。修正後の390px表示とPC表示を確認し、画像、変更箇所、残った問題をまとめてもらいます。

AIから受け取るものと、人が見るところ。編集側の試行案です
成果物	確認すること
画像	修正前後で同じ表が写っているか。文字が読め、料金や条件を見落とさないか
差分	決めた範囲だけを変えたか。本文、料金、申込み先は保たれているか
メモ	使った画面幅、PCへの影響、まだ確かめていない操作や表示が分かるか

表の各項目を読め、料金などが元の内容と一致し、確認画像と変更箇所を照合できたら、この修正の完了です。人が確認したうえで、本番へ反映するか判断します。申込みの動作まで依頼範囲に入れていなければ、その確認は別に残します。

初回は、人が確認した時間と、差し戻した理由も記録しておくとよいでしょう。次に同じ作業を頼むとき、画像が足りなかったのか、修正範囲が曖昧だったのかを指示へ戻せます。

スキルの追加公開を報告した投稿 — Danny Postma、2026年10月12日16時08分（日本時間）。公開ページタイトルの英語原文、投稿本文、日時を確認。添付動画の全編分析はしていません。
Landingfolioの公開スキル一覧 — 七つの案内を確認。各スキルの初公開・更新日は不明です。
Mobile Responsive Pass — ページに掲載された指示全文と確認項目を参照。配布ファイルの導入・実行や、効果の検証はしていません。
W3C：Reflowの解説 — 小さい表示と文字の折返しを確認する範囲の補足。

確認日は2026年10月14日。前回の調査日10月7日以降の動きとして、10月12日の公開報告を扱いました。