UI レイアウト

NocoBase には、デスクトップレイアウトとモバイルレイアウトがあります。どちらのレイアウトでも UI ビルダーを使ってページを作成し、ページ内にブロック、フィールド、アクションを設定できます。

デスクトップレイアウトはデフォルトの選択肢で、パソコンでの日常的な管理やデータ処理に適しています。モバイル端末向けの独立したナビゲーションとページが必要な場合は、モバイルレイアウトも構築できます。

デスクトップレイアウト

デスクトップレイアウトには、デフォルトで /admin からアクセスします。上部ナビゲーション、サイドナビゲーション、ページコンテンツエリアで構成され、テーブル管理、フォーム入力、データの閲覧など、一般的な業務シーンに適しています。

デスクトップレイアウトは狭い画面にも対応します。ページを狭い画面で表示すると、ナビゲーション、余白、よく使うコンポーネントが小さい画面に合わせて調整されます。使用するデスクトップのメニューとページは変わりません。

20260715224020

モバイルレイアウトには、デフォルトで /mobile からアクセスします。下部タブバーで第 1 階層のナビゲーションを構成し、独立したモバイルページ、リンク、ページタブを設定できます。

モバイルレイアウトは、現場での入力、モバイル承認、タスク処理、データ検索など、スマートフォンで頻繁に操作するシーンに適しています。パソコンのブラウザーでページを構築してプレビューした後、QR コードを使って実機で表示を確認できます。

20260715230725

デフォルトでは、デスクトップレイアウトを使用します。

やりたいこと	推奨するレイアウト
主にパソコンで使用し、ときどきスマートフォンからアクセスする	デスクトップレイアウト
スマートフォン向けに独立したナビゲーション、ページ、操作フローを設計する	モバイルレイアウト
パソコンとモバイルの両方で、それぞれに適した操作環境を提供する	デスクトップレイアウトとモバイルレイアウトを個別に構築する

デスクトップレイアウトとモバイルレイアウトは、同じデータソースと業務データを使用します。同じデータテーブルをもとに、デバイスに合わせたページをそれぞれ構築できます。

メニュー、ルート、ページ設定は個別に管理されます。デスクトップページを変更してもモバイルページは自動更新されず、モバイルナビゲーションの変更もデスクトップナビゲーションには影響しません。ルートのアクセス権限もレイアウトごとに設定する必要があります。