【Click】レスポンシブ機能をアップデートしました

キャンバス上でエレメント移動が可能になりました

これまでオートレイアウト内のエレメント順を変更するには、レイヤーパネルを操作する必要がありました。今回のアップデートにより、キャンバス上でエレメントをドラッグ＆ドロップするだけで並び順を変更できるようになりました。

オートレイアウトが設定された複数エレメントのうち、キャンバス内で任意の要素を移動すると、他の要素は自動的に再配置されます。これにより、後工程でのレイアウト調整や試行錯誤がスムーズになり、作業時間の短縮が期待されます。

余白を視覚的に調整できるようになりました

今回のアップデートでは、オートレイアウトにおけるパディング・マージン・ギャップがキャンバス上で色分け表示されるようになりました。

• パディング（内側の余白）：緑
• マージン（外側の余白）：黄色
• ギャップ（要素間の余白）：ピンク

オートレイアウトをクリック、またはホバーすることで各余白が可視化され、内部エレメントは点線で表示されるようになりました。数値変更に応じて表示範囲も即座に反映されるため、余白設定の有無を直感的に把握できるようになりました。

レスポンシブ機能の制限事項

今回のアップデートでは、プライマリーを設定したデバイスのページ（以下プライマリー）を中心にデータやデザインの整合性を保つ設計が採用されました。そのため、プライマリー以外の画面サイズを編集する際には、一部操作が制限されます。

基本ルールとして、構造（グループ階層や並び順）はプライマリーで固定・同期され、各スクリーンサイズではスタイル（見た目）のみ調整可能となりました。

プライマリー以外で制限される主な操作

アクションの編集

ボタン操作時の挙動（ページ遷移、データ作成・更新など）は、個別の画面サイズでは編集できなくなりました。アクションの設定・変更はプライマリーで行われ、全スクリーンに反映されます。

オートレイアウトの解除

画面幅変更時のレイアウト崩れを防ぐため、プライマリーで設定したオートレイアウトを他の画面サイズで解除することはできなくなりました。

構造・階層の変更

オートレイアウトグループの構造や、エレメントの並び順（上下・左右）を変更する操作は制限されました。