デザイン | Bubble Docs

以下は、指定されたBubbleのデザインガイドページの日本語翻訳です。

デザイン | Bubble Docs

2024-03-31Bubbleのツールを使って独自のデザインを構築することに加えて、デザインのセットアップをさらに迅速に行うためのさまざまなリソースも提供しています。

デザインとUXリソース

Figmaからのインポート

Figmaはプロトタイピングとデザインの最初の段階で人気があり、便利なツールです。BubbleにはFigmaからデザインをインポートするためのツールがあります。

Figmaからのインポートに関する記事

Bubbleはアプリを構築するためのユニークな方法を提供しています。100％ツールを使って空のキャンバスにアプリを描き、そのデザインを即座に確認できます。コードを書く必要はなく、予期しない結果もありません。Bubbleのさまざまなツールを組み合わせることで、一貫性があり、ピクセルパーフェクトで、完全にレスポンシブで、すべてのデバイスやブラウザと互換性のあるデザインを作成できます。

要素

アプリのユーザーインターフェースは、入力フィールド、ボタン、画像、チェックボックス、カレンダー、アイコンなどの要素で構成されています。これらの要素はそれぞれ特定の目的を持っています。BubbleはWYSIWYGビジュアルエディタを提供しており、コードを書く代わりに要素をページ上に直接配置し、即座にプレビューすることができます。要素セクションでは、さまざまな要素の種類と、それらを組み合わせてほぼ無限の数の異なるユーザーインターフェースを構築する方法について説明しています。

スタイリング

ページ上のすべての可視要素はさまざまな方法でスタイリングできます。要素ごとにスタイリングを適用することもできますし、Bubbleのスタイル機能を使用して、複数の要素に適用できるスタイルシートを保存し、中央から制御することもできます。Bubbleはまた、これらのプロパティをスタイルやアプリ全体の要素に適用する設定を行うこともできます。

レスポンシブデザイン

Bubbleのレスポンシブエンジンは、スマートフォン、タブレット、デスクトップコンピュータなど、さまざまなデバイスでアプリが見栄えよく動作することを保証します。レスポンシブデザインを設定することで、異なるデバイス用に別々のバージョンのウェブサイトを作成する必要がなくなります。

追加のデザインリソース

Bubbleのツールを使って独自のデザインを構築することに加えて、デザインのセットアップをさらに迅速に行うためのさまざまなリソースも提供しています。

Figmaからのインポート

Figmaはプロトタイピングとデザインの最初の段階で人気があり、便利なツールです。BubbleにはFigmaからデザインをインポートするためのツールがあります。 この翻訳は、Bubbleのデザインガイドページの内容を日本語に変換したものです。