読み込み中にずれるページ要素を直す
読み込み中にレイアウトを動かす要素を見つけ、効果の大きい順に修正案を出すプロンプト。お好きなAIツールに貼り付けると、AIがずれる要素を直す。
結果はツール、モデル、入力内容によって変わります。
結果のプレビュー
例：当サイトの編集部が書いたもので、実際のAIの出力ではありません。
| 要素 | 原因 | 修正 | 効果 | | メイン画像 | 大きさ指定なし | width/heightを指定 | 大 | | Cookieバナー | 内容を押し下げる | 下部に重ねて表示 | 大 | | Webフォント | 文字が組み直される | 近い代替フォント | 中 | テスト: 低速4G設定、中価格帯のスマートフォン、3回読み込み
入力する
入力した内容はこのブラウザ画面の中だけにとどまります。当サイトが保存・送信することはありません。
どのページですか？
- 商品ページ
- ブログ記事
- トップページ
- ランディングページ
- カテゴリーページ
何が怪しいと思いますか？
- 大きさ指定のない画像
- Cookieやメールマガジンのバナー
- Webフォント
- 広告や埋め込み
- 後から読み込まれる内容
何を用意できますか？
- ページのソース
- パフォーマンスレポート
- 画面録画の説明
- テンプレートのコード
- スクリプトの一覧
あなたのプロンプト
プロンプトを編集しました。上の入力欄を変えても、もう上書きされません。
これはAIへの指示文で、まだ完成品ではありません。
このプロンプトが使えるツール
このプロンプトに向いているAIツール：
- SE Ranking 無料トライアル 公式サイト*. 広告* 広告リンク: 契約が成立すると紹介料を受け取ります。 (新しいタブで開きます)
- Ahrefs 無料プランあり€27から
- ChatGPT 無料プランあり月額8 USDから
- Claude 無料プランあり
- Gemini 無料プランあり
- Microsoft Copilot 無料プランあり
広告：「*」と表示されたリンクは広告リンクです。リンク経由で契約や購入が成立すると、紹介料を受け取ります。
使い方
- 項目を入力するか、候補をタップします。氏名、住所などの個人情報は入れません。
- 完成したプロンプトをお好きなAIツールに貼り付けます。
- 一般的なブラウザーのツールで作るパフォーマンスレポートには、ずれた要素が一覧で出ます。その部分を貼り付けてください。
なぜうまくいくのか
内容がずれると、訪問者は押し間違えて離れていきます。内容が届く前に場所を確保すれば、テンプレートの小さな変更でほとんどのずれが消えます。
ヒント
- 実際の端末でも測ってください。ラボの数値だけでは、実際の訪問者が目にするずれを見逃すことがあります。