> ## Documentation Index
> Fetch the complete documentation index at: https://docs.base44.com/llms.txt
> Use this file to discover all available pages before exploring further.
# デザインシステム
> Base44 でワークスペースのデザインシステムを作成し、ブランドの色、フォント、ロゴ、コンポーネントを一度定義するだけで、アプリ全体に一貫した見た目を適用できます。
デザインシステムは、ブランドのルックアンドフィール (色、フォント、ロゴ、それらに合わせたコンポーネントのセット) をワークスペースレベルで保存します。一度作成してデフォルトに設定すると、構築するすべての新しいアプリがブランドに沿った状態で始まるため、毎回スタイルを定義し直す必要がありません。
デザイナーである必要はありません。ロゴ、ブランドの短い説明、望む雰囲気、手持ちのデザインファイルなど、いくつかの情報だけで、Base44 がデザインシステム全体を作成します。これにより、すべてのアプリがプロフェッショナルでブランドに沿った見た目になります。
**利用条件:**
* デザインシステムは [**Builder プラン**](https://base44.com/pricing)以上で利用できます。
* Builder プラン以上のワークスペースには 1 つのデザインシステムが含まれます。Enterprise ワークスペースには制限がありません。
* デザインシステムは web アプリに適用され、モバイルアプリには適用されません。Figma からインポートしたアプリ、URL から開始したアプリ、または別のプラットフォームから移行したアプリは、構築が完了した後にデザインシステムを適用できます。
* デザインシステムの作成と使用にクレジットはかかりません。
***
## 含まれるもの
デザインシステムを作成すると、Base44 はアプリの一貫性とブランドらしさを保つために必要なすべてを入力し、ライブプレビューで表示します。色やフォントを変更すると、すべての例がすぐに更新されるため、見た目を常に確認できます。
デザインシステムは 3 つの要素をカバーします:
* **ブランドの基本:** ロゴ、ブランド名、タグライン、短い説明に加え、ブランドのコアバリュー、トーンオブボイス、見た目に関するデザインガイドライン。
* **ルックアンドフィール:** 色、フォント、角の丸み、要素の下の影の量、要素間のスペース。
* **既製のパーツ:** ボタン、アイコン、カード、ナビゲーション、フォーム、ページセクションなど、すでにブランドに合致し、どのアプリにもすぐに組み込める完全なコンポーネントのセット。各コンポーネントはインタラクティブな状態に合わせてスタイル設定されています。
***
## デザインシステムの作成
デザインシステムは、ワークスペース設定から作成します。1 つのフォームで、短い説明、ロゴ、Figma・web サイト・npm パッケージからのインポート、自分のデザインファイルを組み合わせることができ、Base44 は提供された内容から完全なデザインシステムを生成します。
**デザインシステムを作成するには:**
1. 左下のワークスペース名をクリックし、**Settings** をクリックします。
2. **Design system** をクリックします。
3. **Create** をクリックします。ワークスペースにすでにデザインシステムがある場合は、代わりに **Create new design system** をクリックします。
4. **Create your design system** で、以下のいずれかを追加します:
* **ブランドを説明する:** ブランドの短い説明を書き、その横の四角にロゴを追加します。
* **既存のソースをインポートする:** デザインシステムごとに 1 つのソースを使用できます。タブを切り替えます:
* **Figma file:** 最大 1.9 GB の `.fig` ファイルをドロップまたは参照し、すべてのページとフレームを添付するか、特定のものを選択します。Base44 は大きすぎる画像を縮小し、大きなファイルをバックグラウンドで準備し、元のファイルは保存しません。
* **Website URL:** web サイトのアドレスを貼り付けます。コンテンツの権利を持つ URL のみを使用してください。
* **NPM package:** 公開されているパッケージを、名前、name\@version、または npmjs.com のリンクで入力します。デフォルトでは公開 npm レジストリから解決されます。または **Private registry** をクリックして、レジストリ URL、アクセストークン、そこで解決すべきスコープを追加します。アクセストークンはパッケージの取得に一度だけ使用され、保存されません。
* **デザインリソースをアップロードする:** 画像、フォント、`design.md` ファイル、その他のデザインファイルを最大 10 ファイルまで追加します。
5. **Create** をクリックします。デザインシステムの生成には数分かかることがあり、実行中に離れて後で戻ることができます。
6. プレビューで生成されたデザインシステムを確認し、必要な箇所を調整します。
***
## デザインシステムの編集
デザインシステムを開くと、2 パネルのエディターで編集します。左側にはブランドとデザインのすべての設定があります。右側のライブ **Preview** には、それらのスタイルが実際のボタン、アイコン、カードに適用され、アプリや web サイトでの見た目が表示されます。左側の設定を変更すると、プレビューは即座に更新されます。
デザインシステムの名前とタグラインはページの上部にあります。いずれかをクリックすると、その場で編集できます。
左側では、デザインシステムの各部分を編集できます:
ブランドの短い説明です。Base44 は、生成するすべてをブランドに沿った状態に保つためにこれを使用します。
ブランドロゴを追加するか、AI で生成します。**Add logo** をクリックしてロゴをアップロードするか、**Generate logo** をクリックして説明を入力し、Base44 に作成させます。1 つのロゴが **Primary** としてマークされ、別のロゴの **More actions** メニューからプライマリを変更できます。
見出しと本文のフォントを選択するか、独自のフォントをアップロードします。各フォントスタイルのウェイトを微調整することもできます。ワークスペース内で編集できる人 (オーナー、管理者、編集者) は誰でもフォントをアップロードできます。閲覧者とゲストはできません。
色をクリックして編集するか、**Generate palette** をクリックして望む色を説明します。
ブランドのコミュニケーション方法を定義します。**Add tone** をクリックして特性を追加するか、生成アイコンをクリックして Base44 に新しいセットを提案させます。
ブランドが掲げる原則です。**Add value** をクリックして追加するか、生成アイコンをクリックして Base44 に新しいセットを提案させます。
コンポーネントの角の丸みを設定します。
要素間のスペースの量を微調整します。
コンポーネントの立体感を設定します。影をクリックして、位置、ぼかし、広がり、色を調整します。
アプリのビジュアル言語の一貫性を保つルールです。**Add guideline** をクリックして追加するか、ガイドラインの **More actions** メニューを開いて編集または削除します。
編集は保存するまで適用されません。**Save changes** をクリックして保存するか、**Reset changes** をクリックしてまだ保存していない編集を元に戻します。デザインシステムを保存するには、名前と概要が必要です。
***
## デザインシステムの管理
デザインシステムは、**Design system** セクションのカードから管理します。デザインシステムの **More actions** アイコン を開いて、編集、デフォルトへの設定、削除を行います。
**デザインシステムを管理できる人:**
* **オーナーと管理者:** すべてのデザインシステムの作成、編集、デフォルトの設定、削除ができます。
* **編集者:** デザインシステムの作成と編集ができます。デフォルトの設定と削除は、オーナーと管理者のみが行えます。
### デフォルトのデザインシステムを設定する
デザインシステムをワークスペースのデフォルトとして設定すると、新しいアプリが自動的にそれを使用して開始します。
**デフォルトのデザインシステムを設定するには:**
1. 左下のワークスペース名をクリックし、**Settings** をクリックします。
2. **Design system** をクリックします。
3. 目的のデザインシステムで、**More actions** アイコン をクリックし、**Set as default** をクリックします。
デザインシステムをデフォルトとして使用するのをやめるには、同じメニューを開いて **Remove default** をクリックします。
### デザインシステムを削除する
不要になったデザインシステムを削除します。
カードからのデザインシステムの削除は即座に有効になり、元に戻せません。
**デザインシステムを削除するには:**
1. 左下のワークスペース名をクリックし、**Settings** をクリックします。
2. **Design system** をクリックします。
3. 目的のデザインシステムで、**More actions** アイコン をクリックし、**Delete** をクリックします。
***
## 構築時にデザインシステムを使用する
新しいアプリを開始すると、デフォルトのデザインシステムがあらかじめ選択されているため、最初のプロンプトからブランドに合わせてアプリが構築されます。別のデザインシステムを選択するには、AI チャットの **Add** アイコン をクリックし、**Use a design system** を選択して、目的のものを選びます。
すでに作業中のアプリにも、AI チャットの同じ **Add** アイコン からデザインシステムを適用できます。ワークスペースにデザインシステムが 1 つある場合、オプションにはその名前が表示され、クリックすると次のプロンプトにデザインシステムが添付されます。
デザインシステムの適用は、AI チャットの構築ターンで有効になります。チャットが **Discuss** などの非構築モードに設定されている場合は、先に **Build** に切り替えてください。
すでに構築されたアプリにデザインシステムを適用すると、その場でスタイルを変更するのではなく、アプリが一致するように再構築されます。早い段階で適用するか、アプリが再生成されることを想定してください。
***
## FAQ
デザインシステムについて詳しく知るには、以下の質問をクリックしてください。
いいえ。数語でブランドを説明するか、web サイト、Figma ファイル、npm パッケージ、またはロゴからインポートすると、Base44 が完全なデザインシステムを生成します。その後、どの部分でも調整できます。
Builder プラン以上では、ワークスペースごとに 1 つのデザインシステムを持てるため、独自のブランドが必要なクライアントやプロジェクトごとに別のワークスペースを使用してください。Enterprise ワークスペースには制限がありません。
このページは AI によって翻訳されました。最も正確で最新の情報については、[英語版](/) を参照してください。