microCMSブログ

microCMSの最新情報や活用事例などをお届けします。

更新情報

繰り返しフィールドのUIを改善しました

繰り返しフィールドのUIを改善しました
片田 凌太 片田 凌太

更新情報のお知らせです。

繰り返しフィールドのUIを改善しました。
これまで、繰り返しフィールドについて以下のようなお声をいただいていました。

  • フィールドの境目がわかりづらい
  • [+]ボタンが何のことかわかりづらい
  • フィールド数が多いと画面の占有面積が大きくなり操作しづらい
  • 順番を移動した後の位置がわかりづらい

今回のアップデートでは、これらの課題を解消するために繰り返しフィールドのUIを刷新しました。
※本改善はすべてのプランでご利用いただけます。

主な変更点

カスタムフィールドのアコーディオン化

各カスタムフィールドが開閉できるようになりました。表示名をクリックすることで展開・折りたたみの操作が可能です。フィールド数が多い場合でも、必要なフィールドだけを展開して作業できるため、画面の視認性が大きく向上します。

カスタムフィールドを折りたたんで一覧性を高め、必要な項目だけ展開して編集できる

操作UIの集約

カスタムフィールドのヘッダー右側にケバブメニュー(⋮)を追加しました。クリックすると以下の操作が行えます。

  • 上にフィールドを追加
  • 下にフィールドを追加
  • 1つ上に移動
  • 1つ下に移動
  • フィールドを削除

これにより、フィールドの追加・並び替え・削除といった操作が直感的に行えるようになりました。

カスタムフィールドのヘッダー右側のケバブメニュー(⋮)を開き、『上/下にフィールドを追加』『1つ上/下に移動』『フィールドを削除』などの操作を選べる画面

階層とフィールド数の表示

繰り返しフィールドのヘッダーにフィールド数と階層情報を表示するようになりました。ネストされた構造でも、現在の位置関係がひと目で把握できます。

繰り返しフィールドのヘッダーに『フィールド数:3』と『階層:1』と表示されている

アクティブ状態の視覚的フィードバック

操作中のカスタムフィールドには、左側のボーダーにアクセントカラーが付くようになりました。マウスオーバー時にも色が変化するため、フィールドの境界や現在の操作対象が明確になります。

操作中のカスタムフィールドがアクセントカラーの左ボーダーで強調表示され、マウスオーバー時にボーダカラーーが薄いパープルになっている
操作中のカスタムフィールドがアクセントカラーの左ボーダーで強調表示され、アクティブ時にボーダーカラーがはっきりとしたパープルになっている

ドラッグ操作の改善

各フィールドにカーソルを合わせた際に表示される[]をドラッグすることで並び替えが可能になりました。ドラッグ中のアニメーションも改善し、移動先の位置がわかりやすくなっています。

フィールドにカーソルを合わせると表示されるドラッグハンドル(=)をつかんで並び替える様子

または、ケバブメニュー内の[1つ上 / 下に移動]からフィールドを移動することも可能です。

カスタムフィールドのケバブメニュー(⋮)を開き、『1つ上に移動』『1つ下に移動』を選んでフィールドの順番を変更できる画面

フィールド追加UIの改善

各フィールド左下のボタン、またはケバブメニュー内の[上 / 下にフィールドを追加]から同じ階層にフィールドを追加が可能になりました。

各フィールド左下の[+]ボタンや、ケバブメニューの『上/下にフィールドを追加』から、同じ階層にフィールドを追加できる画面

フィールド削除UIの改善

ケバブメニュー内の[フィールドを削除]から指定したフィールドを削除することが可能になりました。

カスタムフィールドのケバブメニュー(⋮)を開き、『フィールドを削除』を選んで指定したフィールドを削除できる画面

おわりに

繰り返しフィールドのUIを刷新したことにより、フィールドの視認性や操作性が向上し、コンテンツ編集がよりスムーズに行えるようになりました

今後も、より使いやすいサービスを目指してAPI、管理画面ともに改善してまいります。ご要望などございましたら管理画面右下のチャットボタンよりご意見いただけますと幸いです。

まずは、無料で
試してみましょう。

microCMSは無料ではじめられます。
ご不明な点はお気軽にお問い合わせください。