Skill.md検索

Google Analytics 4の多様なデータ（ユーザー数、セッション、ページビュー、直帰率など）を一括取得できます。 取得したデータから現状の数値サマリーを自動で作成します。 データに隠れた課題（直帰率が高い、セッション時間が短いなど）を自動で発見します。 各課題に対して具体的で実行可能な改善提案を優先度付きで提示します。 複数の分析ツール（ユーザー行動、流入元、イベント分析など）を並行実行し、エラーが発生したツールはスキップして続行できます。 Webサイトのアクセス数や行動データを定期的に分析したい管理者・マーケター 直帰率が高いなど、特定の問題を数値で把握して改善したい運営者 GA4のデータから経営層向けのレポートを作成したい企画・分析担当者 施策実施前後でサイト数値がどう変わったか効果測定したいマーケティング担当者 Google Analytics 4のデータを取得・分析して、日本語でレポートと改善提案を作成するスキルです。GA4 MCPサーバーが提供するgetActiveUsers、getPageViews、getUserBehavior、runReport、getEventsのツールを使用します。分析対象の期間をユーザーに確認し、指定がなければ過去30日がデフォルトです。ユーザー・セッション概要、人気ページTOP10、平均セッション時間・直帰率などの指標、流入元内訳、コンバージョン・主要イベントのデータを並行取得し、エラーが出たツールはスキップして取得できた分で進めます。レポートは「現状サマリー（数値表）」「流入元の内訳」「人気ページTOP5」「課題・気になる点（具体的な数値引用）」「改善提案（優先度付き）」「次のアクション」の6セクションで構成されます。MCPが未設定の場合はStape.io経由でのGoogle認証による簡単な設定方法を案内し、プロパティID不明やアクセス権エラー時も適切な対処法を提示します。

5つの質問でサイトの基本情報を引き出す: サイト種別（コーポレート/LP/EC等）、制作目的（集客/ブランディング等）、ターゲット層、最終的なユーザーアクション、用意されている素材を効率よくヒアリング。最小限の質問で必要な情報を網羅。 聞いた内容を統一フォーマットでまとめる: バラバラなクライアントの回答を「プロジェクト概要」シートに整理。サイト種別・制作目的・ターゲット・ゴール・素材状況が一目でわかる形に自動変換。 次フェーズへの自動提案: 要件確認後、自動的に「サイトマップ設計」への移行を提案。参考サイトや必須ページの追加情報も聞き出し、スムーズに次ステップへ進行。 クライアント確認ポイントを組み込む: 各段階でクライアントに確認を取り、認識ズレを早期に防止。制作開始前に方向性を確定。 Webサイト制作会社の営業・ディレクター: 初回ヒアリング後、クライアントの要件を素早く整理し、設計チームに引き継ぎたい人。 フリーランスWebデザイナー: クライアントとの認識合わせを構造化し、プロジェクト開始をスムーズにしたい人。 スタートアップの企業サイト立ち上げ担当者: 外注先デザイナーとのやり取りで、ざっくりした要望を正確に伝えたい場合。 Webプロデューサー: プロジェクトキックオフを効率化し、要件→サイトマップ→デザインへのフローを統一したい人。 Web制作の初期段階をサポートする3ステップのプロセスです。(1)ヒアリング：サイト種別、主な目的、ターゲット、ゴール（CV）、素材状況の5項目をテンプレート質問で聞き出す。(2)要件まとめ：聞いた内容を「プロジェクト概要」シートにまとめ、次ステップに必要な追加情報（参考サイト、必須ページ、その他要望）を確認。(3)次ステップ提案：クライアント確認後、「サイトマップ設計」フェーズへの移行を説明。サイトマップはサイト全体の構造を視覚化したもので、これが決まると制作がスムーズになることを説明し、参考サイトや必須ページ情報があれば提供してもらいながら進める。設計は「聞く情報は最小限」「クライアント確認を各フェーズに挟む」「確認後すぐ次フェーズへ」という原則で進行。

新しい案件が来たときにフォルダ構成の作成、クライアント情報・トンマナ・カラーイメージなどを CLAUDE.md にまとめるまで、一連のセットアップをガイド通りに自動で進められます。案件ごと・クライアントごとの管理方針を聞いて、適切なフォルダ構造を提案・作成するため、後から整理し直す手間が不要になります。 クライアント名、担当者名、納期、トンマナ、カラーイメージ、参考資料など、案件に必要な情報をヒアリング時点で CLAUDE.md に記録するため、プロジェクト開始時に情報がばらばらになるのを防げます。 セットアップ完了後、HTMLファイルをGitHubに登録して初期化するコマンド（git add / commit / push）まで提示し、次回からはファイル編集→push するだけで自動でNetlifyに反映される環境を整備できます。 パスワード保護コードをテンプレートとして提供し、必ずHTMLファイルに追加するルールを徹底するため、クライアント資料の無断アクセスを防ぎセキュリティリスクを低減できます。 デザイナー・クリエイティブディレクター：新しいクライアント案件を効率よく立ち上げたい Web制作会社・制作チーム：案件ごとのフォルダ・ドキュメント整理を自動化したい プロジェクトマネージャー：複数案件の進行情報を一元管理したい フリーランス制作者：案件情報を体系的に保管して次回参考にしたい 案件名（フォルダ名）、クライアント名（正式名称）、案件の種類（WebサイトLP・コーポレートサイト・ロゴ・グラフィックなど）、管理粒度（案件ごと vs クライアントごと）をヒアリング。案件ごと：/Projects/claude/[案件名]/ でフォルダ作成。クライアントごと：/Projects/claude/ 内に同名フォルダ確認後、あれば中に案件フォルダ作成、なければクライアント＋案件フォルダを作成。フォルダ構成を提示してから作成。CLAUDE.md テンプレート：クライアント情報（会社名・担当者・案件種類・納期）、トンマナ・世界観、カラーイメージ、参考資料（brief/ フォルダ参照）、禁止事項・注意事項、進行メモの各セクション。追加ヒアリング：担当者名・連絡先、納期、トンマナ、カラーイメージ、参考サイト・参考資料URL、その他要望・禁止事項。フォルダ作成後、git add [フォルダ名]/output/[ファイル名.html]、git commit -m "新案件追加：[案件名]"、git push を実行（HTMLファイルのみ指定、node_modules・.env・画像は除外）。初回のみ必須、2回目以降は同じコマンドで push するだけ。push 前に必ずパスワード保護コードを 直前に追加（固定コード提供）。

ユーザーの行動フローに沿ったセクション構成を自動設計：訪問から問い合わせまでの流れに最適な順序でセクションを配置できます。 各セクションの役割を明確にして整理：ファーストビュー、課題紹介、解決策、信頼構築など、各セクションが何をするべきかを定義できます。 LPに必要な要素を漏れなくリストアップ：見出し、説明文、ビジュアル、ボタンなど、各セクションに必要な要素を明記して確認できます。 HTMLで視覚的に確認できるコンテンツマップを作成：複雑な構成もマップで一目で把握でき、修正の相談もしやすくなります。 Webデザイナー：LPの構成を決める前に、内容を整理して効率的に進めたい人 営業・企画担当者：自社商品のLP企画で、どんなセクションが必要か悩んでいる人 Webディレクター：クライアントとセクション構成を確認・調整する際の資料として使いたい人 非デザイナー：LPの構成案をAIに自動生成してもらいたい人

複数ページの構成を階層図で可視化：TOPページから下層ページまで、サイト全体のページ構成を一目で把握できます。 新規ページ企画時にページ数を決定：サイトに必要なページが何ページあるべきか、階層図で整理して確認できます。 リニューアル時に既存ページを整理：現在のサイト構成を階層図で整理し、どのページを残すか・削除するかを判断できます。 デザイナー・コーダーへの指示を明確化：ページ階層が視覚的に分かるので、実装チームへの説明がスムーズになります。 スマホ対応の設計を同時に確認：スマホ表示でも見やすいレイアウトで階層図を作成します。 Webディレクター：コーポレートサイトのリニューアルやリローンチを企画している人 企業の企画・マーケティング担当者：自社サイトの構成をクライアント向けに説明したい人 デザイナー・コーダー：実装前にページ構成を把握して計画を立てたい人 プロジェクトマネージャー：複数ページのサイト構成をチーム全体で共有したい人

ワイヤーフレームからレイアウト詳細値を追加：パディング、マージン、要素間の間隔など、コーディングに必要な具体的な数値を Figma で明記できます。 見出しやテキストのサイズ・行高・間隔を決定：どのサイズの見出しを使うか、本文との間隔はどのくらいか、といった詳細をデザイナーが指定できます。 ボタン・フォーム要素のサイズをコーダー用に明確化：クリック可能な領域、パディング、高さなど、実装者が必要な情報を数値で提供できます。 色・フォント・装飾は変更しない設計書を作成：レイアウトのみに専念するため、修正が迅速で、実装段階でのもめごとを減らせます。 実装指示書を自動生成：Figma からスクリーンショットと詳細値をエクスポートし、コーディング開始時の指示を明確化できます。 Webデザイナー：ワイヤーフレーム後、コーダーへの指示を正確に出したい人 デザインディレクター：プロジェクト全体のデザイン品質を管理し、実装チームとの認識ズレを減らしたい人 フロントエンドコーダー：デザインの詳細値が明確に指定された設計書がほしい人 プロジェクトマネージャー：デザイン〜コーディングのプロセスを効率化したい人

3つのサイズでの表示を同時に確認：スマートフォン（375×812）、タブレット（768×1024）、PC（1280×800）の3サイズでスクリーンショットを撮影して並べて表示できます。 レスポンシブ対応の崩れを視覚的に検出：各画面サイズでレイアウトが正しく表示されているか、一目で確認できます。 デバイスごとの表示差異を具体的に把握：スマホでは見やすいが、PCでは崩れているといった問題を画像で共有できます。 修正が必要な箇所を具体的に指摘：スクリーンショットを指さして「ここが崩れてる」と正確に伝えられます。 Webデザイナー・コーダー：実装後にレスポンシブ対応をテストしたい人 QA・テスト担当者：複数デバイスでの表示確認を効率的に行いたい人 クライアント：自社サイトがスマホ・タブレット・PCで正しく表示されているか確認したい人 プロジェクトマネージャー：本番前に最終確認を素早く完了させたい人

コンテンツを配置図に変換: コンテンツマップで決めた「何を」を「どこに置くか」に落とし込み、実際に使えるレベルのレイアウト設計書（ワイヤーフレーム）をHTML形式で作成できます。 複数のレイアウトパターンを使い分け: 左右2カラム、カード配置、比較表、タイムラインなど、セクションの内容に合わせて最適なレイアウトパターンを自動適用します。 テキスト・画像・アイコンを一度に配置: 実際のテキストコンテンツを埋め込みながら、画像やアイコンのプレースホルダーを正確に配置し、完成イメージを事前確認できます。 修正指示をHTMLで即座に反映: 「カード数を増やしたい」「左右を反転させたい」など、レビュー時の指摘をHTMLコードで素早く修正でき、イテレーションを高速化できます。 Figmaへのスムーズな引き継ぎ: モノクロシンプルな設計書からそのままFigmaに送信可能で、デザイナーの制作工数を削減できます。 LP（ランディングページ）制作を主導するディレクター・プロデューサー: コンテンツの構成を決めた後、デザイナーに渡す前に「配置のイメージ」を可視化したい人。 Webサイト企画・構成を担当するマーケター: テキストやビジュアルの配置順序を複数パターン試したい人。 スタートアップ・小規模チームの事業担当者: デザイナーを雇う前に、自分で簡単なワイヤーフレームを作りたい人。

会社の状況に合う補助金を素早く発見: 業種・規模・地域・事業内容をヒアリングして、最新のウェブ検索で該当する補助金・助成金を自動抽出します。国の制度から地域独自の支援制度まで、見落としやすい制度も含めて提案できます。 複数の補助金を優先順位つきで比較: 各制度の補助額、対象要件、使い道、公募時期を一覧表で整理し、相性の高さを5段階評価で表示します。迷わず「次に何をすべきか」が分かります。 2026年など最新の情報を自動更新: 補助金情報は毎年変わるため、検索クエリに現在の年を自動付与して、常に最新の公募要項を取得します。古い情報で判断する失敗を防げます。 申請に向けた具体的なアクション提案: 「○月の公募開始までに計画書を準備する」「支援機関に相談する」など、今すぐ実行できる次のステップを3つ以内で示します。 新事業・新製品開発の予算を確保したい経営者・事業責任者: 資金が限られている中で、活用できる公的支援を漏れなく把握したい人。 創業・起業を計画している起業家: 創業助成金や地域の支援制度を知りたいが、どうやって調べたらいいか分からない人。 IT導入やデジタル化を進める中小企業の経営層: 「IT導入補助金は使えるか？」といった業種・事業規模に応じた制度を素早く確認したい人。