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

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

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

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

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

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

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

例えば、

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

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

よくあるサイトの構造

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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