デザインシステム

デザインシステムは、ブランドのルックアンドフィール (色、フォント、ロゴ、それらに合わせたコンポーネントのセット) をワークスペースレベルで保存します。一度作成してデフォルトに設定すると、構築するすべての新しいアプリがブランドに沿った状態で始まるため、毎回スタイルを定義し直す必要がありません。 デザイナーである必要はありません。ロゴ、ブランドの短い説明、望む雰囲気、手持ちのデザインファイルなど、いくつかの情報だけで、Base44 がデザインシステム全体を作成します。これにより、すべてのアプリがプロフェッショナルでブランドに沿った見た目になります。

---

​

含まれるもの

デザインシステムを作成すると、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 サイトでの見た目が表示されます。左側の設定を変更すると、プレビューは即座に更新されます。 デザインシステムの名前とタグラインはページの上部にあります。いずれかをクリックすると、その場で編集できます。 左側では、デザインシステムの各部分を編集できます:

---

​

デザインシステムの管理

デザインシステムは、Design system セクションのカードから管理します。デザインシステムの More actions アイコン を開いて、編集、デフォルトへの設定、削除を行います。

​

デフォルトのデザインシステムを設定する

デザインシステムをワークスペースのデフォルトとして設定すると、新しいアプリが自動的にそれを使用して開始します。 デフォルトのデザインシステムを設定するには:

1. 左下のワークスペース名をクリックし、Settings をクリックします。
2. Design system をクリックします。
3. 目的のデザインシステムで、More actions アイコン をクリックし、Set as default をクリックします。

​

デザインシステムを削除する

不要になったデザインシステムを削除します。 デザインシステムを削除するには:

1. 左下のワークスペース名をクリックし、Settings をクリックします。
2. Design system をクリックします。
3. 目的のデザインシステムで、More actions アイコン をクリックし、Delete をクリックします。

---

​

構築時にデザインシステムを使用する

新しいアプリを開始すると、デフォルトのデザインシステムがあらかじめ選択されているため、最初のプロンプトからブランドに合わせてアプリが構築されます。別のデザインシステムを選択するには、AI チャットの Add アイコン をクリックし、Use a design system を選択して、目的のものを選びます。 すでに作業中のアプリにも、AI チャットの同じ Add アイコン からデザインシステムを適用できます。ワークスペースにデザインシステムが 1 つある場合、オプションにはその名前が表示され、クリックすると次のプロンプトにデザインシステムが添付されます。

---

​

FAQ

デザインシステムについて詳しく知るには、以下の質問をクリックしてください。