{"product_id":"malvina-webflow-developer-no-code-web-systems","title":"マルヴィナ - Webflow開発者 AI Skill","description":"\u003cdiv style=\"font-family: 'DM Sans', sans-serif; color: #1A1A18; max-width: 680px;\"\u003e\n \u003cp style=\"font-size: 16px; font-weight: 600; line-height: 1.5; margin: 0 0 8px 0;\"\u003eMalvinaをClaudeに入れれば、最初のセクションを描く前にCMS構造を設計するWebflow開発者を得られます。これは後から変更できない決定だからです。\u003c\/p\u003e\n \u003cp style=\"font-size: 13px; color: #555550; line-height: 1.7; margin: 0 0 28px 0;\"\u003eMalvinaは、従来の開発スタックを使わずにWebflowで本番Webサイトを構築します。情報アーキテクチャをCMSコレクションと参照フィールドに落とし込み、Client-Firstなどのクラス命名システムで引き継ぎ後もサイトを保守しやすくし、すべてのブレークポイントでFlexboxとGridを使ったレスポンシブレイアウトを実現します。また、パフォーマンス予算内に収めたInteractionsとスクロールアニメーション、ネイティブCMSの上限（100コレクション、10,000アイテム、アイテムあたり5つの参照フィールド、20個のフィルター）と、クライアントがその上限を超えた場合の対応、Finsweet Attributesによる動的なフィルタリングと検索、Logicとフォーム処理、メンバーシップと限定コンテンツ、ローカライズ、ページのheadとbodyへのカスタムコード、データがCMSの上限を超えた場合にWebflowをXanoまたはAirtableと同期する方法、ステージングとバックアップの運用、移行時の301リダイレクトマップ、WebflowでのCore Web Vitals、アクセシビリティ、そしてそもそもWebflowでサイトを構築すべきでない場合についての率直な判断まで扱います。\u003c\/p\u003e\n \u003cdiv style=\"background: #EDF9EB; border-radius: 12px; padding: 24px 28px; margin-bottom: 24px;\"\u003e\n \u003cp style=\"font-size: 10px; font-weight: 600; color: #287E1B; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 16px 0;\"\u003e得られるもの\u003c\/p\u003e\n \u003cul style=\"margin: 0; padding: 0; list-style: none;\"\u003e\n\u003cli style=\"font-size: 13px; padding: 7px 0; border-bottom: 1px solid rgba(40,126,27,0.14); display: flex; gap: 10px;\"\u003e\n\u003cspan style=\"color:#287E1B; font-weight:600;\"\u003e→\u003c\/span\u003e\u003cspan\u003eCMSコレクション、参照フィールド、プラットフォームの実際の上限\u003c\/span\u003e\n\u003c\/li\u003e\n\u003cli style=\"font-size: 13px; padding: 7px 0; border-bottom: 1px solid rgba(40,126,27,0.14); display: flex; gap: 10px;\"\u003e\n\u003cspan style=\"color:#287E1B; font-weight:600;\"\u003e→\u003c\/span\u003e\u003cspan\u003e引き継ぎ後も保守しやすいClient-Firstクラスシステム\u003c\/span\u003e\n\u003c\/li\u003e\n\u003cli style=\"font-size: 13px; padding: 7px 0; border-bottom: 1px solid rgba(40,126,27,0.14); display: flex; gap: 10px;\"\u003e\n\u003cspan style=\"color:#287E1B; font-weight:600;\"\u003e→\u003c\/span\u003e\u003cspan\u003eFinsweetのフィルタリング、Logic、メンバーシップ、ローカライズ、カスタムコード\u003c\/span\u003e\n\u003c\/li\u003e\n\u003cli style=\"font-size: 13px; padding: 7px 0;  display: flex; gap: 10px;\"\u003e\n\u003cspan style=\"color:#287E1B; font-weight:600;\"\u003e→\u003c\/span\u003e\u003cspan\u003e移行時のリダイレクトマップ、Core Web Vitals、アクセシビリティ対応\u003c\/span\u003e\n\u003c\/li\u003e\n \u003c\/ul\u003e\n \u003c\/div\u003e\n \u003cdiv style=\"display:flex; align-items:center; gap:20px; background:#FFFFFF; border:1px solid #E8E6E0; border-radius:8px; padding:14px 20px; margin-bottom:24px;\"\u003e\n \u003cspan style=\"font-size:11px; color:#888780; font-family:monospace;\"\u003e📄 malvina-webflow-developer-no-code-web-systems.skill\u003c\/span\u003e\n \u003cspan style=\"font-size:11px; color:#888780;\"\u003e2分以内でインストール\u003c\/span\u003e\n \u003cspan style=\"font-size:11px; color:#888780;\"\u003eClaude、ChatGPT、その他あらゆるAIチャットで動作\u003c\/span\u003e\n \u003c\/div\u003e\n \u003cdiv style=\"border-left:3px solid #287E1B; padding-left:16px;\"\u003e\n \u003cp style=\"font-size:10px; font-weight:600; color:#287E1B; letter-spacing:0.08em; text-transform:uppercase; margin:0 0 6px 0;\"\u003eインストール方法\u003c\/p\u003e\n \u003cp style=\"font-size:12px; color:#555550; line-height:1.7; margin:0;\"\u003e.skillパッケージをダウンロードし、Claudeを開いてSKILL.mdをプロジェクトの指示またはシステムプロンプトに貼り付け、要件を説明すると、Malvinaが回答を作成します。何が得られるかを正確に確認できる、完全な実例も含まれています。\u003c\/p\u003e\n \u003c\/div\u003e\n\u003c\/div\u003e","brand":"KissMySkills","offers":[{"title":"Default Title","offer_id":58394059637000,"sku":null,"price":29.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/1036\/1444\/7880\/files\/malvina-webflow-developer-no-code-web-systems-1.png?v=1789661048","url":"https:\/\/kissmyskills.com\/ja\/products\/malvina-webflow-developer-no-code-web-systems","provider":"KissMySkills","version":"1.0","type":"link"}