見やすい！使いやすい！ 管理しやすいCMSバックエンドページ構築の考え方

Web制作の際、もちろんサイトのデザインはお客様にご確認していただきながら進行します。そのため、フロントエンドページ（表示されるサイト表示）に対しては、お客様との意見のやりとりが必然的に多くなります。

しかし、バックエンドページ（CMS^※1管理側）では、設計・構築に入ってから詳細を決めていくため、あらかじめお客様から要望をいただくことが少ない部分です。

コンテンツを出力できればそれでいいのか？デザインに合わせて記事を表示するだけでいいのか？というと、お客様からの潜在的なご要望は当然NOだと言えます。そこから一歩進むためには、「誰が」「どの位の頻度で」「どのようなコンテンツを」「どのように更新するのか」を考えることが大切です。

本記事では、デザイナーが提示したデザインをフロントエンドエンジニアが再現することとは別に「＋α」する『管理画面』の使いやすさを、実際にこれまでお客様と相談し構築したパターンを元に考えます。

お客様の求める管理画面。コンテンツ入力フォームの形は？

オウンドメディアのサイトを構築するにおいてよくいただく要望として「普通のブログのようなサイトを作りたい」というご要望をいただきます。この「普通のブログ」とはどのようなものを指すのでしょうか？

記事の出力、特にメインのテキスト部分に関しては、この後ご説明する2つのパターンをベースとして、案件に合わせた機能の拡張を行っていきます。

パターン01：ブログサービス型入力フォーム

CMSのデフォルト入力フォームを利用した入力フォームです。見出しもコンテンツも自由自在に、お客様ご自身がコンテンツを設計する型となります。

livedoorブログやAmebaブログのような馴染みのある一般的なブログサービスの入力画面に近い形式の記事入力フォームになり、テキストサイズやカラーの変更といった補助機能の利用と、html入力を用いてコンテンツの全てを1つのフォームで更新します。

下記の2つの入力モードでの投稿がメインになります。

パターン02：コンテンツテンプレート型入力フォーム

カスタムフィールド（※）を利用して作成した入力フォームです。以下の例では「見出し」「画像」「コンテンツ」を交互に入力することでコンテンツができあがる仕様となっています。

このタイプの入力フォームは、ある程度コンテンツの魅せ方が確定している場合や、簡単な入力形式のみを求められるお客様に提案させていただく形式です。要素ごとにフォームを準備するのでどこに何を入れたらいいのか、htmlの知識が少なくてもフィーリングで入力していただくことができます。

コンテンツ入力フォームまとめ

このように投稿用フォームでも、それぞれの利点があるため、お客様のhtml知識と、更新したいコンテンツの内容に合わせて管理画面を準備する必要があります。

「普通のブログ」という表現でも求められているのは一般的なブログと同じ形のものが一番であるとは限りません。

更新の肝になる部分だからこそ、本文の入力フォームの使いやすさを大切に、お客様がどのようなコンテンツを更新する予定なのか、どういった管理画面が使いやすいのかは、ディレクターとも相談してお客様の意向を反映させていきます。

下記のような製作時の意識のすり合わせが大切です。

構築でよく行う情報と情報の紐付け

CMSを用いたサイト構築の利点として、情報と情報の紐付けが行えることがあります。「出力したい項目で出力したい内容を登録する」というのがCMSの基本構築ですが、より管理しやすく使いやすい管理画面にするために紐付けの工夫を行います。

パターン01：コンテンツとコンテンツを一対で管理

ここでは「商品情報を公開するコンテンツ」と共に、実際に製品を使用した「レビュー記事などを掲載するブログ」の２つのコンテンツを持つ複合コンテンツサイトを例とします。お客様の主な要望は下記と仮定します。

考え方のポイントとしては、「どこで情報を管理するのが最適か」を考えることです。

例えば商品紹介ページは「更新頻度の低いコンテンツ」と考えられます。それは最初に情報の登録作業を行えば、その後の更新は商品仕様などの変更があった場合のみとなるからです。対するブログページは「更新頻度の高いコンテンツ」と考えられます。これは、ブログというコンテンツが毎週・毎日というように短いペースで投稿が行われる性質のものだからです。

そのため、CMSの管理画面内の移動を減らすために、また後々の情報管理がしやすくなるようするためにも、商品ページではなくブログページの管理画面で情報の紐付け処理を管理することが理想と考えられます。

商品情報からその商品を紹介されたブログを紐付けたいと考えた場合、ブログ更新の度に商品情報の管理画面も開くのは単純に面倒です。特に、複数の製品の情報をブログ内で取り上げる可能性もあり、その都度掲載した商品の個数分だけそれぞれの商品の管理ページからブログを紐つけていくと管理上のミスも起こりやすくなります。

更新する際、投稿したブログ記事からの一回の紐付け作業で情報を相互表示できるのが理想的です。「ブログの記事で製品を紹介する」という作業から考えても、「この記事ではこの製品を紹介している」という、関連の状態もイメージしやすくなります。

手順としては上図のような「関連」を設定するフィールドを「商品紹介ブログ」の管理画面内に用意します。上図はAdvanced Custom Fieldsというプラグインを使用したイメージです。

この設定で、ブログと商品の紐付けは完了しますので、商品紹介ブログにはそのまま紐付けした商品を出力。商品ページ側では「現在の商品が紐付けられているブログを出力する」という表示処理を行います。

こうすることで一度の登録において、相互で情報の関連付けを行うことができます。

パターン02：複数のコンテンツを必要に応じて関連付ける

続いて複数の要素を絡み合わせて表示するサイトの例です。この例では複数店舗を持つ販売店をイメージしています。お客様の主なご要望イメージは下記となります。

メインの「店舗情報」を軸に各店の「イベント情報」とそれぞれの店舗の情報を発信する「店舗ブログ」を用意します。

イベント情報と店舗ブログはそれぞれ店舗情報を中心とした、独立したコンテンツとなりますので、この紐付けが今回のポイントです。イベント情報と店舗ブログは直接の関連データを持っていないため、ここを紐付けるための関連登録をつくるのが、工数も少なく設定も一番簡単な方法になります。

ですが、2つの紐付けを行った場合と同じく、「複数コンテンツで同じ情報を登録する」というのは登録・管理の面でミスも起こりやすくマイナス要素となります。今回は、両方に共通する「店舗情報」という共通情報を持っているので、管理にはこれを利用します。

上記のような2段階の処理を行うことで、3つの情報を少ない登録手順で紐つけることができます。

情報と情報の紐付け まとめ

情報を管理するにおいて、あちこちのページを移動するという遷移は更新時のストレスになります。また、情報が増えるに比例して、「その情報がどこで登録されているのか」がわかり辛くなります。コンテンツ入力フォームの際と同様、下記のような制作時の意識のすり合わせが大切です。

まとめ

管理画面を構築する為の設計ポイントをまとめると下記の内容になります。

何度もCMSでの構築を行っていくと「こうした方が、お客様が簡単に運用できるだろう」というイメージと指針ができています。またコーポレートかオウンドメディアなのかのサイトタイプ、扱うコンテンツの内容によっても好まれる投稿形式などもイメージできてくるでしょう。

長く更新されるのはお客様になりますので、お客様に使いやすいように工夫することが一番重要です。案件に合わせて、掲載内容に合わせて、見えないところではありますが工夫を持たせていくことが、管理しやすいCMS構築の原則となる考え方です。