タグ別アーカイブ: CMS

WordPressでCMS:製品関連情報の一元化をプログラムなしで実現

WordPressでCMS。製品関連情報の一元化をプログラムなしで実現

製品名、製品番号、仕様、カタログPDF、取扱い説明書、CADデータ、FAQ・・・、「製品」ひとつに、多くの関連情報が存在する。

情報の掲示方法を間違えれば、「情報が探しにくい=使いづらい」WEBサイトになってしまい、せっかくの「訪問者」≒「顧客候補」を逃してしまう。

当社では、WordPressをCMSに利用することにより、製品をひとつ見つければ、関連する情報すべてを取り出せる方法を探し当てた。この考え方を採用して、訪問者を迷わせずスマートに情報を提供し、その心をガッチリ鷲づかみにしてほしい。

この記事では、WordPressを使った製品情報セクションに関連する情報をスマートに掲載する方法を、有用なプラグインソフトを含めて紹介する。訪問者をスマートに誘導する課題を解決できなかったWEB担当者のヒントになれば幸いだ。

訪問者が嫌がる、製品情報の構成とは

とりわけ、B2B企業の製品情報をチェックすると、製品情報に関連する情報が、それぞれ独立したコンテンツとして構成されていることが多い。各セクションが部門別の管理下にあるからか、特に何も考えなかったのか、情報がWEBサイト内に散在しているのは訪問者側からすると、迷惑このうえない。

例えば、

  • 製品検索 > 検索結果 > 製品詳細(製品名、製品番号、仕様・・・)
  • カタログダウンロード
  • FAQ

の各セクションが製品情報とは関連なく構成されていると、セクションTOPから製品体系にそって新たに「探し直す」ことになる。

よくあるサイトの構造

このような構成だと、訪問者はデメリットを被ってしまう。

  • 関連情報までのページ遷移が多く、複雑
  • 目的の情報にたどり着けない

製品情報に関わる各セクションが別々に存在してしまう最大の原因は、情報を掲載するためのしくみが各セクションに存在していることで、WEBサイトを簡素に管理しようとすることによるものだ。

つまり、掲載するためのしくみが各セクションにそれぞれに存在してしまうと、その関連性を保つには手作業(ひとつひとつリンクを張る作業)が必要になる。膨大な量の製品すべてを手作業で関連付けできなかったり、ディスコンになった製品に関連する情報がエラーを起こしたりするため、訪問者を誘導するのは各セクショントップまで、というわけだ。

製品に関連する情報を1ページに集約する

こういった不親切なWEBサイトを作らないために、我々はひとつの製品に関連するすべての情報を1ページにまとめてしまうことを目指している。製品情報を「ワンストップ」化するということだ。

しかし、ただ単に1ページにすべての情報を詰め込んだだけでは冗長なページになってしまうので、「タブ」を利用し、1ページの長さができるだけ短くなるよう構成した。

デザインだけではなく、情報を登録するための管理画面においても「ワンストップ」性を重視し、情報を関連付けしやすい操作性を実現している。

レイアウト自由自在、ダイナミックに切り替わる入力項目を実現する「Advanced Custom Fields」

「Advanced Custom Fields」は、当社がWordPressを利用する制作案件で、度々利用する超機能的で、超便利で、超クールなプラグインだ。
今回は、この「Advanced Custom Fields」の多彩な機能のなかから、以下に説明する2つの機能を利用した。

選択項目に連動する入力項目の制御

「Advanced Custom Fields」は、言い換えると管理画面を作るための管理画面のような役割を持つ。
例えば製品の詳細情報を入力する際に、WordPressのカテゴリーに「製品情報」と名付けたオプション(セクション)を選択すると、画面遷移することなく入力項目が出現し、「カタログダウンロード」と名付けたオプション(セクション)を選択すると、同様に入力項目が出現するというように、管理画面の動作を作り込めるのだ。

しかも、プログラミングなしに「Advanced Custom Fields」の管理画面だけで作り込める。プログラミングをしなければ、バグが発生することもない。制作品質の確保にも寄与するのだ。

上記の動作を実現することで、管理画面においても画面遷移を抑え、製品情報の入力負担を極力抑える効果をもたらしている。

WordPressで項目に該当する入力欄を自動表示

セクション間の関連付けを容易にする

FAQで、共通項目、個別項目を関連付ける要件があったとする。

  • 製品カテゴリーで共通のFAQ
  • 製品ごとに個別のFAQ
  • いくつかの製品にまたがるFAQ

「Advanced Custom Fields」は、入力中のFAQに対して、すでに登録済みの製品情報の一覧を参照して選択する機能や、すでに登録済みの製品カテゴリーを参照しながら関連付けを行う機能を作り込むことができる。管理画面の操作性までも、プログラミングなしで作り込むことができるのだ。

セクション間の関連付けを容易に

WordPressで製品情報をCMS化するポイント

WordPressによるCMSは一般的になったが、製品情報を一元化し、訪問者、管理者双方に使いやすくするには、いくつかの工夫が必要だ。しかし、WordPressは、豊富なプラグインのいくつかを組み合わせると、使い勝手の良いデータ入力ツールとして活用することができる。

今回は、WordPressのプラグイン「Advanced Custom Fields」を使い、ほぼノンプログラミングでこれを実現することができた。
さらに工夫を加えれば、プログラムの知識のないクライアント側で自由なデータ管理さえ実現してしまうスグレものにもなる。

今後もWordPressを活用したCMSについて情報を提供していく。あなたのより良いWEBサイトづくりの参考になれば幸いである。

WordPressでCMS:仕様項目まで更新可能、運用コストを低減

WordPressでCMS:仕様項目まで更新可能、運用コストを低減

製品カテゴリーごとに異なるスペック項目を持つ企業は多い。一般的な方法論でCMSを開発すると、スクラッチ(手組み)によるものになることが多く、初期コストは莫大なものとなる。

さらに、製品カテゴリーごとにスペック項目が異なるので、データベースにはすべての仕様項目を格納する必要があり、担当者による運用の手間も相当なものになってしまう。

しかし、WordPressが標準で備える管理画面とデータベース構造を利用すれば、一定の品質を確保しながら開発工数を削減でき、情報の更新も複雑さが緩和され担当者は煩わしさから解放される。

当社では早くからWordPressに着目し、試行錯誤を繰り返しながら積極的にCMSツールとして活用してきた。この記事では、WordPressを使った製品情報セクションの複雑な要求仕様を満たす方法を、有用なプラグインソフトを含めて紹介する。

訪問者により有益な情報を提供したいと考えつつも、開発コストと運用方法を解決できずにいたWEB担当者にとって、課題を解決するためのヒントになれば幸いだ。

カテゴリーごとに異なるスペック項目まで更新できる製品検索システム

製品に幅広いカテゴリーを持つメーカーでは、製品分類ごとに仕様の項目が異なっている。それゆえ、これらを管理するCMSも非常に複雑なものとなってしまいがちだ。

一般的なアプローチとしては、システム構築前に分類/品種/品目ごとにすべてのスペック項目を洗い出し、それぞれにデータベース(テーブル)を準備し、その上で管理することになる。

しかしこの手法では、将来にスペック項目が変更された場合や、当初想定していなかった新製品を掲載する際、柔軟性に欠け、その対応にはシステム的な変更作業が伴うことが多い。

当社では、WordPressのカスタムフィールドとプラグインを駆使することで、スペック項目も含めてクライアント自身で製品情報の更新作業を完結できることを実現した。

某機械メーカーが抱えていた課題

某機械メーカーが抱えていた課題

旧サイトでは、全カテゴリー/全製品のスペック項目を漏れなくデータ項目としていた。更新のためのCMSツールは導入されていたものの、更新作業ではデータがある部分のみ入力を行い、表示処理の段階でデータ表示の有無を制御していたのである。

また、スペック項目すべてを一律に管理画面で更新できるようにCMS化すると、製品情報の管理画面が数スクロール分の長さになってしまったり、更新しようとする製品には関係のない項目も表示されることになり、入力間違いが発生するといったトラブルが生じていた。

さらに、データベースのカラムとしてスペック項目を設定していたため、クライアント側で新製品をリリースする際には、新たにスペック項目の追加が必要となってしまう。都度発生する運用コストも本当に必要なのかという疑問の声さえ社内から聞こえていた。

WordPressデータベースの概念図

要求仕様

上記の状況を踏まえ、クライアント側から提示された要件は以下の通りだ。

  • 製品スペックに詳細な表記が必要(項目名、単位、スペック内容、全10~30項目)
  • カテゴリーごとに異なるスペック項目や単位をCMSで管理できること
  • 同一カテゴリー内においても、スペック内容の有無で項目自体の表示/非表示を制御できること
  • 製品スペックを条件にした製品検索は不要

スペック項目にとらわれない情報の保持

スペック項目にとらわれない情報の保持

スペック項目をデータベースのカラムに設定せず、WordPressのカスタムフィールドを利用することで、項目名や項目数に制限されないデータの保持を実現。スペック項目をCMS上で更新でき、その内容を即時登録可能とした。また、後述の「Advanced Custom Fieldsプラグイン」を採用することにより、柔軟性の高い製品登録画面を実現した。

カテゴリーごとはもちろん、製品ごとに異なるスペック項目をCMS上で自由に管理でき、不必要なスペック項目の排除を実現した。

本稼働後、製品に関するすべての情報をクライアント側でメンテナンスできる仕組み

選択項目(マスター)は、WordPressの「タクソノミー」を利用し、管理画面上で追加/削除を行えるように配慮。製品情報のメンテナンスについては、当社に依頼されることはなく、クライアント自身で完結できるようにした。

現行サイトからのスムーズなデータ移行

旧サイトからのデータ移行に際し、当社とクライアントが共同でカテゴリーに共通的なスペック項目をExcelシートにまとめた。クライアントは、初期移行情報としてそのExcelシートに全製品情報を記述。当社は、そのExcelシートをインポートする機能を構築した。

WordPressの管理画面

使えるカスタムフィールドを実現し、開発コストを削減する「Advanced Custom Fields」

WordPressには、「カスタムフィールド」と呼ばれる、投稿する記事に対してタイトルと本文以外の任意の「名前」と「値」を与えることができる機能が標準で準備されているものの、標準のままでは使えない。

「Advanced Custom Fields」は、管理画面からカスタムフィールドを簡単に定義できたり、入力欄を自動生成したりと、WordPressのカスタムフィールドを利用しやすくしてくれるプラグインだ。

また、入力したデータをデータベースから容易に取り出すことができるAPIを提供してくれているので、クライアントの操作で更新内容を表示することも可能にする。

筆者が「Advanced Custom Fields」を利用し、WordPressで実現した機能は以下のものだ。

  • スペック項目、単位、内容を1セットとして自由に追加/削除/編集する機能
  • Excelファイルのインポート機能
  • スペック項目の順番を自由に調整する機能

自由なカテゴライズを実現する「Custom Post Types」

WordPressに標準で実装されている分類項目は「投稿分類」のみだが、「Custom Post Types」を利用すれば、管理画面上で分類項目の追加や、その項目に含まれる選択項目の編集ができるようになる。

また、前述の「Advanced Custom Fields」と連携させれば、WordPressでより柔軟な管理画面を実現することができる。

「Custom Post Types」は、次の機能を実現するために利用した。

  • 製品分類以外の分類項目2種の追加とその選択項目の編集

WordPress

WordPressは、プラグインを組み合わせると、使い勝手の良いデータ入力ツールとして活用することができる。

さらに工夫を加えれば、プログラムの知識のないクライアント側で自由なデータ管理さえ実現してしまうCMSとして活用できるようにもなってしまうスグレものだ。

今後もWordPressを活用したCMSについて情報を提供していく予定なので、あなたのより良いWEBサイトづくりの参考になれば幸いである。