# コンポーネントの基本

## コンポーネントについて学ぶ

コンポーネントは、アプリのデザインの基本要素です。ユーザーがアプリを使用する際に相互作用するものすべてはコンポーネントと見なされます。これらはアプリの視覚要素です！

{% embed url="<https://youtu.be/9csbU8iHMvI>" %}

## コンポーネントの挿入

![コンポーネントは、＋ボタンをクリックした後に表示される追加パネルにあります。挿入するには、画面にドラッグしてクリックします。](/files/lcHfebXObu1qbEkQPePG)

コンポーネントは画面上のすべての要素です — リスト、ボタン、テキストなど

* **Addパネル**からコンポーネントを画面キャンバスにドラッグ＆ドロップします。
* 1つの画面から別の画面にコンポーネントを**コピー＆ペースト**するには、コンポーネントを選択してコピーし、**新しい画面の画面タイトルをクリック**して貼り付けます。
* コンポーネントを**編集**するには、それをクリックすると左側のパネルが開き、コンポーネントを構成およびカスタマイズするためのすべてのオプションが表示されます。
* コンポーネントを**グループ化**する場合は、複数のコンポーネントを選択してドラッグし、左側のパネルで"Make Group"ボタンをクリックします。
* 画面上のコンポーネントの順序を**調整**して、1つのコンポーネントが他のコンポーネントの上または下に配置されるようにするには、ツールバーの'Screens'タブに移動し、関連する画面をクリックしてそのコンポーネントのリストを表示します。そのリストでコンポーネントを上下にドラッグして、順序を前後に移動します。
* コンポーネントをクリックしてアクションにリンクさせるか、別の画面にリンクさせるには、[アクションの基礎](/ja/action-basics.md)セクションをご覧ください。

コンポーネントは非常にシンプルなものから多くのオプションを持つ堅牢なものまでさまざまです。テキストや図形などのシンプルなコンポーネントを組み合わせて独自のカスタムデザインを作成できます。

## すべてのコンポーネント

#### [ナビゲーション](/ja/component-basics/navigation.md)

* タブバー
* アプリバー
* [サイドナビゲーション](/ja/design/designing-your-app/responsive-navigation/responsive-side-navigation.md)
* [トップナビゲーション](/ja/design/designing-your-app/responsive-navigation/responsive-top-navigation.md)

#### [リスト](/ja/component-basics/connecting-lists-and-forms-to-a-database.md)

* シンプルリスト
* カードリスト
* 画像リスト
* アバターリスト
* 横型のカードリスト
* 横型のチップリスト
* カスタムリスト

#### [ボタン](/ja/component-basics/buttons.md)

* ボタン
* アクションボタン
* アイコン
* トグル

#### シンプル

* テキスト
* 画像
* 楕円
* 四角形
* 線
* ベクトル
* [Webビューコンポーネント](/ja/component-basics/webview-component.md)
* [ビデオコンポーネント](/ja/component-basics/video.md)

#### フォーム＆フィールド

* [フォーム](/ja/component-basics/how-to-create-and-edit-forms-and-fields.md)
* [テキスト入力](/ja/component-basics/text-input.md)
* 日付ピッカー
* ドロップダウンメニュー
* ファイルピッカー
* 画像ピッカー

**マーケットプレイスのコンポーネント**

* マップ
* カレンダー
* 画像スライダー
* Googleサインイン
* マルチセレクトドロップダウン
* スターレーティング
* プログレスバー
* YouTube
* AdMobバナー
* Stripe Kit
* デッキスワイパー
* Plyrビデオ
* チャートキット
* オーディオプレーヤー
* Appleサインイン
* メールアドレス検証
* スライダー
* Lottie
* QRコードジェネレータ（by Knight）
* カウントダウン
* ランダマイザー
* NocoderHQ HTMLRenderer
* QRコードスキャナー
* カレンダーストライプ
* ストップウォッチ
* シグネチャーパッド
* IAPキット
* QRコードジェネレータ（by Zeroqode）
* マジックカラーの四角形
* NocoderHQ ラウンドボタン
* ランダムピッカー
* NocoderHQ カウントダウン
* Twitter タイムライン
* URL エンコードデコーダー
* スイッチ
* マスクされたフォーム
* Markdown レンダラー
* Jam Room


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.adalo.com/ja/component-basics/design-basics.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.