バックエンド

Active Adminのデザインをちょっとカッコよくするgemまとめ

MMM Corporation
shimo

以前のエントリ、Rails開発で使っているオススメgemを5個(-1個)紹介しますで、Active Adminがよくないひとつの理由としてデザインがしょぼいと書きました。
しかし、デザインを変えるためのgemがぼちぼちありまして、それらを利用するとちょっとだけActive Adminっぽくないデザインにするができます。あくまで見た目の問題ではあるのですが、見た目は重要!ということで、Active Adminのデザインをちょっとカッコよくするgemをまとめてみました。

サンプルアプリケーション

以前のエントリActiveAdminでちょっと使い勝手の良い管理画面を作るTipsで作成したのサンプルアプリケーションを流用します。
ソースは完全にサンプルレベルですが、一応GitHubに上げてあります。
https://github.com/shimojomasatsugummm/active_admin_sample

masterブランチがデフォルトのデザインのソースです。紹介する各デザインについてはgemの名前のブランチを切ってあります。

デフォルトのデザインはご存知の通り、まあちょっとしょっぱい見た目です。

以下、gemをご紹介していきます。それぞれ、導入はREAEMEの手順でハマり箇所はないと思います。

active_bootstrap_skin

その名の通り非常にBootstrap臭のする見た目です。若干見にくいでしょうか。

flattened_active_admin

デフォルトに近いですが、フラットになっています。デフォルトとどちらがいいかは好みでしょうか。

face_of_active_admin

ポップでファンキーな方におすすめ。

ActiveSkin

こちらもface_of_active_adminと似てけっこうポップな感じです。

ActiveMaterial

マテリアルデザイン。個人的にはけっこう好みです。

ActiveAdminTheme

フラットデザインですが、flattened_active_adminよりもイイ感じに思えます。

active_admin_flat_skin

メニューが左側にあるデザイン。メニューが左にあるのは使いやすいかもしれません。

まとめ

どれかお好みのデザインはありましたでしょうか。私は今回挙げた中ではActiveAdminThemeが一番好みです。
とはいいつつも、Active Adminの以下のようなデメリットが解消されるわけではありませんので、ご利用は計画的に!

  • Active Admin自体のDSLなど、学習コストが発生する。
  • Active Admin標準の機能でできないことをやりたい場合、スクラッチで作るよりも工数が増える場合が(多々)ある。

ActiveAdminなど、Railsを活用したサービス開発をご検討の企業様は、是非MMMにご相談下さいませ!

AUTHOR
shimo
shimo
記事URLをコピーしました