セクション別パーツ集の使い方

moatway library の Parts（セクション別デザイン集）は、コーポレートサイトや LP を組み立てるとき必ず登場する「ヘッダー」「ヒーロー（メインビジュアル）」「料金プラン」「FAQ」「お問い合わせフォーム」「フッター」などを、セクション単位で 1 ページずつコピペできる形にまとめた実装サンプル集です。すべての項目はライブプレビュー付きで、HTML / CSS / JS を切り替えながら確認・コピーできます。

カバーしているセクションタイプ

• ヘッダー — コーポレート / 中央寄せロゴ / SaaS 無料トライアル / 透明オーバーレイ など
• メインビジュアル（FV / ヒーロー） — 画像分割 / 全面背景 + オーバーレイ / テキストのみ など
• サービス紹介 — 3 カラムアイコン / 画像 × テキスト交互 / 6 枚カードグリッド / タブ切替型
• 料金プラン — 3 プラン横並び（中央ハイライト）／ 機能比較テーブル
• FAQ — アコーディオン（details / summary）／ 2 カラムカード / 検索バー付き
• 導入実績・お客様の声 — 写真 + クォート 3 件 / 大判センタークォート
• 制作の流れ — 番号付き 4 ステップ / 縦タイムライン
• 会社情報・代表メッセージ・採用 — ミッションステートメント / 会社概要 dl 型 / メンバー紹介 / 大型 CTA
• ニュース・ブログ — 3 件リスト / 6 グリッド / サイドバー
• その他 — メガメニュー / モーダル / 404 / パンくず / 告知バー / 検索結果 / TOC / アワード

このページの探し方

1. 上の検索ボックスにキーワードを入力（例：pricing、FAQ、footer）
2. セクションタイプのチップでカテゴリ別に絞り込み
3. 気になるカードをクリックして詳細ページへ → ライブプレビューとコード閲覧

制作会社向けの活用例

クライアントワークでデザイン提案の前に「ヒーローはこの 3 案から選んでもらう」「料金プランは A / B のどちらが好みか」と選択肢を可視化するのに使うのが王道の使い方です。Figma のワイヤーフレーム前にセクション候補を並べる用途にも向きます。HTML / CSS のクラス名はすべて短い prefix（h-min、mv-sp、pr-3 など）で衝突を避けてあるので、貼り付けた後の名前変更が最小で済みます。

partsdesign.net / copypet.jp との違い

外部のパーツ集サイトは「気になったらクリックして詳細を見る」運用が多いですが、moatway library はカード状態でもデザインの雰囲気が伝わることを優先し、サムネに実プレビューを使っています。ライブプレビューは sandbox="allow-scripts" な iframe で隔離しているため、ホスト側の CSS / JS と衝突しません。コードをそのままコピペしても予期せぬ干渉が起きにくい構造になっています。