mobile-friendly
モバイルファーストインデックスへの最適化やモバイルのユーザビリティ改善を行いたい場合に使用します。「モバイルフレンドリー」「レスポンシブデザイン」「モバイルSEO」「viewport meta」「タッチターゲット」「フォントサイズ」「AMP」「Accelerated Mobile Pages」などのキーワードが挙がった際にも対応します。なお、viewport metaの設定にはpage-metadataスキルを使用してください。
description の原文を見る
When the user wants to optimize for mobile-first indexing or fix mobile usability. Also use when the user mentions "mobile-friendly," "mobile-first indexing," "mobile SEO," "responsive design," "mobile adaptation," "mobile viewport," "viewport meta," "touch targets," "font size mobile," "AMP," or "Accelerated Mobile Pages." For viewport meta, use page-metadata.
SKILL.md 本文
SEO技術: モバイル対応
モバイルファーストインデックス最適化とモバイルユーザビリティについて説明します。Googleはモバイル版ページを優先してインデックスおよびランキングに使用します。モバイル対応はランキング要因です。
実行時: 初回使用時は、このスキルがカバーする内容と重要性について1～2文で説明してから、メイン出力を提供してください。その後の使用時またはユーザーがスキップを要求した場合は、メイン出力に直接進んでください。
スコープ（技術的SEO）
- モバイルファーストインデックス: Googleはモバイル版ページを優先してクロールおよびインデックス
- モバイル対応: レスポンシブデザイン、ビューポート、ブレークポイント
- コンテンツの同等性: モバイルとデスクトップのコンテンツが一致する（またはモバイル優先）
- モバイルユーザビリティ: ビューポート、フォントサイズ、タップターゲット、邪魔な割り込みがない
- AMP: Accelerated Mobile Pages—ステータスと活用タイミング
初期評価
プロジェクトコンテキストを最初に確認: .claude/project-context.md または .cursor/project-context.md が存在する場合は、サイトURLについて読んでください。
以下を特定してください:
- サイトタイプ: レスポンシブ、別AMP、動的配信
- コンテンツの同等性: モバイルはデスクトップと同じコンテンツを表示しているか?
- ツール: GSCモバイルユーザビリティレポート、Mobile-Friendly Test
モバイルファーストインデックスの要件
| 要件 | アクション |
|---|---|
| コンテンツの同等性 | モバイル版はデスクトップと同じプライマリコンテンツを含める必要があります。モバイルで重要なコンテンツを非表示にしない |
| 構造化データ | モバイルとデスクトップで同じスキーマ。スキーマ内でモバイルURLを確認 |
| メタデータ | モバイルでも同じタイトル、メタディスクリプション |
| メディア | 画像はクロール可能である必要があります。ファーストビュー画像の遅延読み込みを避ける |
レスポンシブデザイン＆モバイル対応
レスポンシブデザイン = 単一HTML。CSSメディアクエリがスクリーンサイズに応じてレイアウトを調整します。SEO推奨: 1つのURL、重複コンテンツなし。
| 原則 | 実装方法 |
|---|---|
| モバイルファースト | モバイル優先でデザイン。デスクトップ向けに拡張 |
| 流動的なレイアウト | %、vw、flex、gridを使用。固定ピクセル幅を避ける |
| ブレークポイント | 一般的: 320px、768px、1024px、1280px。デバイス幅に合わせる |
| 画像 | レスポンシブ画像（srcset、sizes）。image-optimizationを参照 |
ビューポート
ビューポートメタタグはモバイルでページをスケーリングおよびサイズ調整する方法をブラウザに指示します。モバイル対応ページに必須です。
<meta name="viewport" content="width=device-width, initial-scale=1">
| 属性 | 目的 |
|---|---|
width=device-width | ビューポートをデバイス画面幅に合わせる |
initial-scale=1 | 読み込み時に1:1スケール。ズームを防止 |
maximum-scale | ズーム無効化を避ける（アクセシビリティ） |
user-scalable=no | 避ける—アクセシビリティを損傷 |
ビューポートなし: デスクトップレイアウトが縮小。水平スクロール。Mobile-Friendly Test失敗。page-metadataを参照してください。
モバイルユーザビリティチェックリスト
| 要素 | ガイドライン |
|---|---|
| ビューポート | 上記参照。モバイル対応に必須 |
| フォントサイズ | 本文は16px以上。ズームして読むことを避ける |
| タップターゲット | ボタン/リンク ≥48×48px。タップ間に適切な間隔 |
| コンテンツ幅 | 水平スクロールなし。コンテンツがビューポート内に収まる |
| 邪魔な割り込み | モバイルでメインコンテンツを遮るポップアップを避ける |
よくある問題
| 問題 | 修正 |
|---|---|
| モバイルで隠されたコンテンツ | 重要なコンテンツを表示。プライマリコンテンツをアコーディオン/タブで非表示にしない |
| Flash/非サポート | HTML5代替品に置き換え |
| テキストが小さすぎる | ベースフォント≥16px。px単位で12未満のfont-sizeを避ける |
| リンクが近すぎる | タップターゲットサイズを増加。パディング追加 |
レスポンシブ対 別URL
| アプローチ | 活用時 | 注記 |
|---|---|---|
| レスポンシブ | 推奨 | 単一URL。同じHTML、CSSメディアクエリ |
| 動的配信 | 同一URL、ユーザーエージェントで異なるHTML | モバイルコンテンツの同等性を確認 |
| 別URL | m.example.com | カノニカルタグ + hreflangを使用。canonical-tag、page-metadataを参照 |
Accelerated Mobile Pages (AMP)
AMPはファストロードページ向けウェブコンポーネントフレームワークです。ステータス（2024–2025）: 継続サポート。Top Storiesまたはランキングでは不要になりました。
| 側面 | 注記 |
|---|---|
| ランキング | 最適化されたレスポンシブページに対する順位向上なし |
| Top Stories | 2021年以降、AMP不要。Core Web Vitalsで十分 |
| 活用を検討する時 | ニュースサイト、広告多数ページ、遅いホスティング—ただし通常はレスポンシブ + CWVがより良い |
| 代替案 | レスポンシブデザイン + core-web-vitals最適化。SSR/SSG。rendering-strategiesを参照 |
推奨: ほとんどのサイトで、AMPよりレスポンシブデザインとCore Web Vitalsを優先してください。AMPは保守が追加（別AMP HTML）になります。最新の最適化はAMPと同様のパフォーマンスをより高い柔軟性で提供します。
出力形式
- モバイルユーザビリティステータス: GSCまたはMobile-Friendly Testの合格/不合格
- レスポンシブ/ビューポート: ビューポートメタタグ、ブレークポイント、流動的レイアウトを確認
- コンテンツの同等性: モバイル対デスクトップコンテンツチェック
- AMP: レガシーまたは特定のユースケースの場合のみ
- 修正: インパクト別に優先順位付け
関連スキル
- page-metadata: ビューポートメタタグ。モバイル対応に必須
- core-web-vitals: CWVはモバイルで測定。Top StoriesでAMPを置き換え。LCP、INP、CLS
- canonical-tag: 別モバイルURL。モバイル向けhreflang
- image-optimization: レスポンシブ画像。モバイルLCP
- rendering-strategies: モバイル高速読み込み向けSSR/SSG
- google-search-console: モバイルユーザビリティレポート
ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ
詳細情報
- 作者
- kostja94
- ライセンス
- MIT
- 最終更新
- 不明
Source: https://github.com/kostja94/marketing-skills / ライセンス: MIT
関連スキル
seo-maps
ローカルSEO向けのマップインテリジェンス機能です。ジオグリッドのランク追跡、APIを通じたGBPプロフィール監査、Google・Tripadvisor・Trustpilotなど複数プラットフォームのレビュー分析、Google・Bing・Apple・OSM間のNAP（名前・住所・電話番号）検証、競合他社の半径マッピング、APIデータからのLocalBusinessスキーマ生成が可能です。3段階の機能レベルで対応でき、無料版（Overpass + Geoapify）、DataForSEO（フル機能）、DataForSEO + Google（最大カバレッジ）から選択できます。「maps」「geo-grid」「rank tracking」「GBP audit」「review velocity」「competitor radius」「maps analysis」「local rank tracking」「Share of Local Voice」「SoLV」などのキーワードで利用できます。
seo-content-brief
セクションごとの文字数、競合スコアリング、キーワード密度ガイダンス、ページタイプテンプレートを含む競争力のあるSEOコンテンツブリーフを生成します。新規ページのブリーフと既存ページの改善ブリーフの両方に対応しています。ユーザーが「コンテンツブリーフ」「ブリーフを作成」「コンテンツアウトライン」「ブログブリーフ」「サービスページブリーフ」「ブリーフ〜」「ライティングブリーフ」「コンテンツプラン」「アウトライン〜」などと言った場合に使用します。
rakuten-seo
楽天市場の商品名・キャッチコピーをSEO最適化するスキル。「楽天SEO」「商品名最適化」「楽天の商品名」「キャッチコピー」「楽天のタイトル」「商品名を直して」「楽天検索対策」など、楽天市場の商品名やキャッチコピーの作成・改善・チェックに関するリクエストで必ずこのスキルを使う。既存の商品名の改善も、ゼロからの作成も対応。あらゆるジャンル（食品・ファッション・化粧品・家電・サプリ・インテリア・ベビー・ペット・業務用など）に対応。 【ALSEL独自スキル】株式会社ALSEL が、19年・5,000社超の EC 支援で得たノウハウをもとに開発したオリジナルスキルです。
amazon-seo-jp
Amazon.co.jp商品ページのSEO分析・最適化・自動採点スキル v2.0。 COSMO/Rufus/A10アルゴリズムに基づく採点。セラーセントラル出品レポート（.xlsm）を入力すると、 商品タイトル・箇条書き・検索キーワード・商品説明文を100点満点で採点し、 4項目すべての改善案を日本語で出力する。 トリガー: 「Amazon SEO」「商品ページ採点」「Amazon最適化」 「リスティング改善」「Amazon商品名」「箇条書き改善」 「COSMO対応」「Rufus最適化」「Amazon タイトル」 【ALSEL独自スキル】株式会社ALSEL が、19年・5,000社超の EC 支援で得たノウハウをもとに開発したオリジナルスキルです。
rakuten-bulk-control-csv
楽天RMSの一括登録/一括除外/一括更新用CSV（コントロールカラム,商品管理番号 の2列フォーマット）を作成するスキル。商品DL CSV・商品管理画面のコピペ・Excel・PDFなどから商品管理番号を抽出し、Shift-JIS+LF改行で出力する。「一括除外リスト作って」「楽天の除外CSV」「コントロールカラムnで」「2800円以下の商品をdで」「在庫0の商品を一括削除」「商品管理番号抜いてshift-jsで」「このフォーマットで」など、楽天RMSの商品一括処理用CSVを作るタスクで必ずこのスキルを使う。コントロールカラム値（n=新規/d=削除/u=更新）と抽出条件（全件・価格・在庫・販売状態など）をユーザー指示に応じて柔軟に切り替える。 【ALSEL独自スキル】株式会社ALSEL が、19年・5,000社超の EC 支援で得たノウハウをもとに開発したオリジナルスキルです。
amazon-a-plus-content-brief
Amazon A+コンテンツの構成・モジュール選定・画像指示・比較表・FAQを設計するスキル。「A+コンテンツ作って」「Aプラス構成」「ブランドストーリー」「比較表つきA+」「A+モジュール選定」「Amazonのページに画像入れたい」「A+のヘッダー画像」「A+コンテンツマネージャー」など、Amazon A+コンテンツの企画・設計・改善のリクエストで必ずこのスキルを使う。ベーシック17モジュール／Premium追加機能／画像サイズ規定／文字数目安／審査リジェクト要因を踏まえて、デザイナーに渡せるブリーフ形式で出力。あらゆるジャンル（家電・コスメ・食品・アパレル・日用品・ベビー・ペット等）に対応。※ブランドストア（マルチページ）の設計は別スキル `amazon-brand-store-planner`、タイトル・bullet改善は `amazon-title-bullet-rewriter-jp`、メイン画像のチェックは `amazon-main-image-checker`。 【ALSEL独自スキル】株式会社ALSEL が、19年・5,000社超の EC 支援で得たノウハウをもとに開発したオリジナルスキルです。