コラム(WEB制作のポイント)

WEB制作のポイント 2018年7月25日

WordPressで構築する製品情報システム(製品情報CMS)

drw-0

多品種多品目を扱う企業WEBサイトでは、製品や商品、サービスを紹介するための「製品(商品)情報システム」が組み込まれているケースが多い。
「製品情報システム」と聞くと、一から手作りする「スクラッチ開発」で構築する傾向にあるが、当社では、WordPressを「製品情報CMS」に仕立て、比較的短かい納期で、質の高い製品情報システムを数多く提供してきた。
ここでは、過去の導入事例から「製品情報CMS」で実現した要件や解決できた課題を紹介しよう。

WordPressベースの製品情報CMSとスクラッチ開発

drw-1

当社では、WordPressを製品情報システムのベースとすることで、スクラッチ開発では避けて通れない開発工程の一部を省いてきた。いや、「省いた」のではなく実際には「意識しなくてもよくなった」と表現する方が正しいかもしれない。

その工程とは、
・データベース(テーブル)設計/構築
・管理画面の設計/プログラミング
である。

データベースについてはWordPressの構造をそのまま利用するため、開発の段階においては、データベースの存在を意識することはなく、WordPressに標準装備されている機能を呼び出したり、足らずはプラグインをインストールし、そのプラグインが持つ機能を通じてデータベースを呼び出す形になる。
管理画面についても同様に、ログインユーザー管理はもちろん、プラグインが自動生成する入力フォームを利用し、製品情報の入力画面としている。管理画面については、ほぼノンプログラミングに近い。
これらの工程が省かれることが、工数の削減と、この工程で入り込む不具合の排除に寄与しているといえるだろう。

以降では、WordPressベースで製品情報CMSを構築した過去の事例を紹介しよう。
いずれの事例もWordPress標準のカテゴリーと「Advanced Custom Fields」プラグインを駆使して実現したものだ。

製品ごとに仕様項目が異なる製品情報システム

このクライアントは、特定の業界に対応した製品群を製造販売している企業ではあるものの、製品のカテゴリーごとに全く異なるスペック項目を有している。それらの込み入った内容をHTMLに触れることなく誰でも編集したいというのがクライアントから提示された要件であった。

スペック表のような細かなテーブルは、いろいろな方法でWEBサイトに掲載する方法がある。
例えば、
  ・スペック表の部分だけを抜き出してHTMLファイルで記述し、表示処理で組み込んで掲載する。
  ・テキスト入力欄を1つ設けて、そこにHTMLでテーブルを入力する。
  ・リッチテキストエディタの入力欄を1つ設けて、そこにExcel上で作ったテーブルを張り付ける。
  ・スペック表に則した入力項目を準備し、スペック内容だけを入力する。
などが挙げられる。
いずれの方法も、当社で過去に構築したことのある方法であるが、クライアントのWEBサイト運用スキル(HTML知識の有無など)とコストを鑑みてどの方法を採用するかを決定している。
今回のクライアントは、4つ目の「スペック表に則した入力項目を準備し、スペック内容だけを入力する」方法を採用した。

実はこの製品情報CMSに関するコラムは、既に執筆済みなので、詳しくは以下のページを参照されたい。
WordPressでCMS:仕様項目まで更新可能、運用コストを低減

詳細ページに関連情報を集約する製品情報システム

せっかく製品情報システムを作るのだから、できるだけ多くの情報を掲載したい。
たいていのクライアントが異口同音に発するフレーズだ。
我々もそれに応えるべく知恵を絞り、構築作業に勤しむが、忘れてはいけないことがある。
それは、「初期はもちろん、日々の運用でもそれだけ多くの情報を入力しなければならない」ということだ。

クライアントからも、日々の運用負担を考慮し、以下のような要件が提示された。
  ・Q&A1つを、複数の製品および複数の製品カテゴリーに割り当てたい。
  ・アクセサリー1つを、複数の製品および複数の製品カテゴリーに割り当てたい。
  ・既登録の製品を選択するだけで関連製品を登録したい。

Q&Aとアクセサリーは、ほぼ同じ画面構成で以下のようなイメージで管理画面を準備した。
これによって、同じ内容のQ&Aやアクセサリーの情報を製品ごとに登録する手間が省けてクライアントには好評を得た。

drw-2

関連製品の登録は、以下のようなイメージで管理画面を準備した。
「行を追加する」を押下すれば、ひとつの製品に複数の製品を関連付けが可能だ。

drw-3

複数の切り口から製品にたどり着ける製品情報システム

製品情報システムでありがちなのが、「製品カテゴリー(分類)」に従って製品詳細までたどらせる方法。
この「製品カテゴリー」は、製品を提供する側の都合で体系付けされていて、サイト訪問者にとってはピンとこない場合が多い。
サイト訪問者は往々にして、何かの目的を果たしたい、ある課題を解決したい、などいったニーズをもってWEBサイトにやってくるが、そのとき示される入口の情報が「製品カテゴリー」だけでは、自分のニーズがどの製品で満足されるのか頭の中で変換しながら試行錯誤し、製品を探すことになる。

そこで、このクライアントでは、「製品カテゴリー」とは別に「製品用途」と「対応業種」を追加し、3系統の製品体系を準備し、利便性の向上を図った。

以下のようなイメージで複数体系を登録する管理画面を準備した。
この例では1つの製品情報の中で、製品カテゴリーは1つ、用途と業種は複数を設定可能にしている。

drw-4

WordPressでCMSを構築する際の注意点

drw-5

以上、いろいろとWordPressで構築するCMSの利点や管理画面の作りを紹介してきたが、WordPressが万能だとは決して言っていない。例えば製品情報システムの機能としてありがちな「キーワード全文検索」や「複数条件を組み合わせた絞り込み検索」などは、当社でもスクラッチによる開発で実現し、WordPressを用いたCMSでは構築していない。なぜなら、これらの機能はWordPressでも実現できなくはないが、得意ではないからだ。その理由は、データベースのデータの持ち方に起因する。

スクラッチで開発するような製品情報システムの場合、基本は1製品で1レコードの情報を持つことになるが、WordPressの場合、データ構造に柔軟性を持たせるため、1製品で複数レコードを持つことになってしまう。例えば製品情報の項目が20項目あった場合、20レコード以上のレコードが生成されてしまうことになる。また、他にも付属の情報があった場合、それらは1つのテーブルの中に詰め込まれてしまう。
なぜ1製品の情報を複数レコードに持つことが良くないのか?
データベースを用いてシステムを開発することのある読者ならわかると思うが、製品検索の絞り込みで3つの条件を設定して絞り込む場合、少なくとも3回は、データが格納されているテーブルをフルスキャンすることになる。その上、フルスキャンするテーブルには、製品数の項目数倍のレコード数がある(実際は、さらにその2,3倍は格納されている)。否応なく、検索に時間がかかるし、サーバーにも負荷をかけてしまう。そのため、複数の訪問者が同時に検索をかけた場合、相応に待たせてしまうことにもなる。

したがって、WordPressを製品数が数千点以上になるような製品情報システムのCMSとして用いるには無理がある。せいぜい500点以下に留める方がよいだろう。

WordPressは使いよう

drw-6

人に得手不得手があるように、WordPressにも不得手がある。人と同じようにWordPressの得手をほめて伸ばしてあげるように利用すれば、WordPressはその真価を発揮してくれるのではないだろうか。

筆者が最近構想することに、「WordPressとスクラッチ開発のハイブリッドシステム」がある。
製品情報の管理機能であるバックエンドの部分はWordPressで構築し、WEBサイトから直接アクセスされるフロントエンドの部分はスクラッチ開発で検索機能を構築するのである。そして、WordPressのデータベースとスクラッチ開発のデータベースの間に「本番公開機能」を設けてWEBサイトの情報を更新するのだ。なかなかいいアイデアだと思うが、まだ実現には至っていない。

シェアする
  • line

別のコラムにもヒントがあるかも・・・

このコラムに興味があったなら、
こんなコラムも

執筆:福永 忠夫

フレイバーズに、ご相談されませんか?