---
title: "試作部品"
slug: "prototyping-components"
abstract: "コンポーネントビルダーを使って新しいコンポーネントを作成したり、既存のコンポーネントを修正したりできます。"
---
# 試作部品

コンポーネントビルダーは、直感的なWYSIWYGビルダーを使って新しいコンポーネントを作成したり、既存のコンポーネントを修正したりできる強力なツールです。また、コンポーネントを整理されたコレクションに保存することも可能です。

ビルダーを使えば、以下のことができます:

-   コンテンツを含む視覚的要素をコンポーネントのキャンバスに追加・配置します。
-   異なる画面幅に対して異なるバージョンをレンダリングするレスポンシブなコンポーネントを作成しましょう。
-   コンポーネントの要素を次のように構成します:
    -   スタイルライブラリで設定されたスタイルルールを各 [要素](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/styling-components/style-a-single-element-and-text.html "Style a single element and text")個別に、または [コンポーネント](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/styling-components/style-a-component-with-a-theme.html "Style a component with a theme")全体に適用します。
    -   要素の [レイアウト、寸法、間隔](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/prototyping-components/configuring-an-element.html "Configuring an element") を定義すること。
    -   データソースから[動的なコンテンツのマッピング。](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/adding-dynamic-content-to-a-component/manage-dynamic-content.html "Manage dynamic content")

> !ヒントレスポンシブバンドルの作成方法についてもっと知りたい方は、[Discover Sitecore](https://www.youtube.com/watch?v=vQPksrMUnzM)チャンネルのチュートリアルをご覧ください。動画制作以降、ブランド内アイコンなどの [カスタムCSS機能の追加](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/creating-your-styles-library/add-custom-fonts-and-styles.html "Add custom fonts and styles")が有効になっています。