CMS管理画面のUIデザイン～更新頻度やサイトの質にも影響する？～

2024年6月18日

WebデザインにおけるUI/UXの重要性は多くの担当者が認識するところ。しかし、コンテンツを更新するCMSの管理画面については初期設定のままというケースもあります。サイトの運用管理になぜUI/UXの観点が必要なのか、またどのような指針に基づいてカスタマイズしていくのか考えます。

なぜ管理画面のUIが大切なのか？

企業のWebサイトやオウンドメディアを運用する際には、作成したコンテンツを管理するためのシステムが欠かせません。「WordPress」や「Movable Type」、EC分野では「Shopify」や「EC-Cube」などのいわゆるCMSでは、Webページを構成するテキストや画像、表示されるレイアウトやデザインなどの情報を管理画面で一元的に操作できる仕組みを備えています。

自社開発にせよWeb制作会社に依頼するにせよ、この管理画面のUIを初期設定のまま使うのはおすすめできません。なぜなら、CMSはさまざまなニーズに対応するために、操作や設定に関する機能の項目があらかじめ網羅的に表示されていることが多いからです。その中には、使用頻度が低い項目や安易な設定変更が推奨されないセキュリティに関する項目が含まれていることがあるので利用には注意が必要です。

もし初期設定のまま運用を開始すると、記事の更新に関わる作業者がメニュー操作の複雑さに戸惑うことになりかねず、習熟に時間がかかることにもなります。これを繰り返すことで、更新を継続するモチベーションの低下や記事の投稿頻度が下がるといった悪影響も想定されるでしょう。

また、機能やデザインに関わる設定をそのまま表示しておくことで、誤操作によって作成した記事を削除してしまったり、サイトの見え方が変わってしまったりといったトラブルが生じる危険性もあるので注意が必要です。

ほかにも、運用に際してコンテンツの作成者だけでなくWebサイトのデザインやデータの分析など複数の担当者が関わる場合、それぞれの担当ごとに管理画面で確認したい項目が異なります。その場合には、利用目的に応じて権限グループを設定し、必要な情報を優先的に表示できるように管理画面をカスタマイズすると作業全体の効率化を図ることができるでしょう。

これらの観点から、CMSの管理画面においても公開ページと同様にUI/UXに配慮することが求められます。主要なCMSは管理画面の表示項目をカスタマイズできるようになっているので、カスタマイズの権限を持つ管理者は、普段使わない項目は非表示にしたり、よく使う項目を優先的に表示したりするなどの調整をおすすめします。

MSの管理画面とは

CMS（コンテンツ管理システム）では、訪問したユーザーが見ることができるWebページとは別に、記事の更新やデザイン変更などの設定を行う専用の管理画面を備えていることが一般的です。「WordPress」の場合は、ログイン時に表示される「ダッシュボード」が管理画面に相当します

管理画面のどこをカスタマイズできるのか

すべてのCMSの管理画面が共通の機能やレイアウトを持っているわけではありません。そこで、ここでは代表例としてWordPressの管理画面を例にUI改善のためのカスタマイズ方法や考え方について見ていきます。

例えば、WordPressの場合は管理画面へのログイン操作画面がありますが、初期設定のままでは非常にシンプルな画面にロゴとユーザー名とパスワードの入力フォームが表示されているだけです。ここに企業のロゴを表示したり、コーポレートカラーを設定したりするだけでも自社専用のシステムであるという認識を利用者に促すでしょう。なお、WordPressの初期設定ではログイン画面のURLがドメインの後ろに「/wp-login.php」または「/wp-admin」を追加したものになりますが、セキュリティ的な観点からもログインURLを変更することをおすすめします。初期設定のままでは、管理側のリテラシーが高くないというシグナルをWebサイトへの攻撃者に送ってしまうことになりかねません。

そして、ログイン後に最初に表示される「ダッシュボード」がWordPressにおける実質的な管理画面となります。この画面は大きく3つのパーツで構成されています。画面上部の「ツールバー」には公開されるWebサイトとの表示切り替え、新規記事投稿のショートカットボタンや更新通知が配置されています。

左サイドの「メインナビゲーション」では記事の「投稿」や写真などの「メディア」、Webサイトの見た目を変更する「外観」や機能を追加する「プラグイン」などの項目が縦に並びます。そして、メインナビゲーションで選択した項目の内容が、右側の「ワークエリア」に大きく表示されます。

UIに関わるカスタマイズをする際には、主にメインナビゲーションの項目の名称や並び順、そして、使用頻度が高い記事の「投稿」画面を選択した際のワークエリアに表示する内容が焦点となるでしょう。これらのカスタマイズにはプラグインを導入するのが一般的です。

また、起動時のダッシュボードに表示される内容についても、利用目的に応じて項目の表示／非表示を選択するなど最適化しましょう。なお、管理画面の基本構成は多くのCMSで似通っているので、カスタマイズについての考え方にもおのずと共通性があると言えます。

CMS管理画面をデフォルトのまま使うことの弊害

CMS管理画面を初期設定のまま利用すると、普段記事を更新する作業者がメニュー操作に迷いやすくなったり、誤った操作を引き起こしやすくなりがちです。また、分析チームなど複数担当者が関わる場合には作業効率が低下するリスクもあります

目的ベースの設計でシンプルなUI/UXを実現

CMSに限らず、内部からしかアクセスできない業務システムは機能や実用性が優先される傾向があり、実際に操作する従業員の体験がおざなりにされたUI構成に陥りがちです。

管理画面のUI設計に際しては、可能な限りシンプルで使いやすさを意識することがもっとも重要と言えるでしょう。そのためには、使わない項目を非表示にしたり利用頻度が低いメニューの表示階層を深くしたりするなど、無駄な要素を除去していく必要があります。

もちろん、その前提としてCMSの利用目的や解決すべき課題は何かを管理者側で明確に意識しておく必要があります。例えば、コンテンツを投稿する人はダッシュボードから投稿画面に移動して、タイトルやカテゴリ、タグを指定して記事のテキスト入力や写真などのメディアを追加して下書きを作成し公開へ…といった一連の作業を行います。この際に、記事の作成画面とメディアの投稿画面、記事一覧の画面を何度も遷移するようなUIは望ましいとは言えません。可能であれば、ダッシュボードの画面から新しい記事を直接投稿できるほうが効率的です。

同様に、アクセス解析を担当する人は記事ごとのアクセス数や、Googleアナリティクスのプラグインで収集した結果や改善すべきポイントがダッシュボードで一目でわかるようになれば本来の目的に叶い、作業に集中できるはずです。

また、画面に表示する情報の配置順序を目線の移動にあわせることや、視認性の高いフォントや色彩で統一することなど、Webデザインにおける一般的なUI設計の基本ルールに沿って一貫性のあるレイアウトやデザインを心がけましょう。さらに、管理画面の操作端末にタブレットやスマートフォンが含まれる場合は、どのデバイスでも同様に確認できるリキッドレイアウトであることが望ましいと言えます。

ただし、業務で利用するCMSでは、見た目を優先しすぎて操作に支障するほど情報が不足してしまうのは問題です。必要な機能や操作を探しやすいのはもちろんのこと、特に既存のシステムからの移行を伴う場合や別の業務システムとの連携がある場合は、操作に迷いが生じないように画面デザインの共通性をなるべく持たせるようにするなどの配慮が求められます。

CMS管理画面のUI設計における基本指針の例

管理画面のUI設計を考えるうえでのポイントは多数ありますが、自社の課題や目的を明確にして必要な機能をシンプルにわかりやすく表示するのが基本です。また、項目の名称や色など「トンマナ（トーン＆マナー）」の一貫性を持たせることで社内ブランディングの向上に貢献します

WordPress管理画面のカスタムプラグインは豊富

レシピサービス「クックパッド」のデザインガイドライン／デザインシステムに関する取り組みは、現在まで大きく3つのフェーズに分けられます。

1つ目は、2013～2018年に使われたCSSベースのUIフレームワーク「Sara（サラ）」です。デザインと実装がパッケージ化され、クックパッドらしいページ制作の効率化に貢献しました。ただ、導入後の継続的なメンテナンスを十分に行うことができず、後に、デザイン負債を現在へ残す要因の一つになってしまいました。

2つ目は、当時のトレンドを取り入れた包括的なデザインシステムを目指して構築された「Citrus（シトラス）」です。ここでは、レシピサービスとしてのデザイン原則・あるべき姿が初めてドキュメントにまとめられ、デザイナーやエンジニアがそれを参照して開発できる形になりました。しかし、コーポレートデザインと共用する前提で開発したため、折り合いのつかない部分が出てきてしまいました。また、カラーコードはあっても使い方の定義がない、コンポーネントが配布されていないなど、プロダクトへの具体的な反映方法が共有されにくく、浸透が進まない点も課題でした。

そして3つ目が、今回主にお話しをするApronです。Citrusとは逆に、レシピサービス専用のデザインシステムとして開発を進め、iOSアプリ・Androidアプリに続けて現在Webブラウザ版への適用に取り組んでいる最中です（2023年1月時点）。