カタログギフト通販の構築に必要な“カタログ番号入力専用フォーム”を作成する方法
2024年7月3日2024年10月3日
近年、カタログ通販の利用者は減少傾向にあると言われていますが、百貨店のECサイトやシニア層向けのECサイト等では、カタログ注文の販売が根強く残っています。
また、結婚式の引き出物やイベントの景品用に、カタログギフトは今や定番のように使われております。
弊社にて食品・ギフトECサイト構築に強いクラウドシステム aishipを開発している中で、「手元のカタログから番号を入力して購入する方法をECサイト内で用意しておきたい」といったニーズがございましたので、今回ご紹介させていただきます。
カタログ注文は一見、専用の入力フォームを用意しなければ運用できないように思われがちですが、ASP/クラウドEC型のプラットフォームでも機能を活用することで実現可能な方法があります。aishipシリーズの場合、カテゴリページを活用することで、カタログ注文販売ページを作成することが出来ますのでその方法をご紹介していきます。
◾️お知らせ◾️
2024年10月03日、aishipではECサイト上でWEB版のカタログギフトを、eギフト(ソーシャルギフト)の機能を活用しながら展開できる、
選べるギフト機能をリリースしました。
カタログギフトのWEB化、デジタル化をご検討の方は是非ご確認ください。
eギフトで受取手が自分で商品を選べる「選べるギフト機能」
- 一般的なカタログ注文入力フォーム(スクラッチ型の事例)
- ASP/クラウドECでカタログ注文を実現する方法(デモサイト付)
- クラウド型ECサイト構築ASP“aishipシリーズ”でカタログ注文専用ページを作成する5つのステップ
- まとめ
目次
一般的なカタログ注文入力フォーム(スクラッチ型の事例)
【スクラッチ型の事例】
・ニッセン カタログからのご注文
・ベルメゾンネット カタログからのご注文
・ベルーナオンラインストア チラシ カタログからのご注文
カタログ注文と言えば、上記のような専用フォームに、手元にあるカタログ番号を入力して商品を検索し、該当商品が見つかれば商品情報が表示され、商品をカートに投入するといった購入導線のサイトをよく見かけます。特段説明することなく注文手続きを進めることができ、使いやすそうに見えますが、数桁あるカタログ番号や各種記号文字等を1文字でも入力を誤り、商品がヒットしない状態となった場合、操作ストレスから離脱に繋がる恐れもあります。
このような専用フォームの場合、システムはオープンソース・パッケージソフト等の利用されているケースが多く、独自に開発することで、各社の販売商品に登録されているカタログ番号の規則にあわせて自由度の高いオリジナルの入力フォームを実現できるメリットがあります。一方デメリットは、設計・開発や運用おける保守・セキュリティ維持に、専門性が高い人材の確保とコストが必要となります。
ASP/クラウドECでカタログ注文を実現する方法(デモサイト付)
カタログ注文の入力フォームは、ASP/クラウドECのプラットフォームでも実現可能な方法があります。クラウド型ECサイト構築ASP「aishipシリーズ」でカタログ注文を実現するならば、標準機能のカテゴリページの機能を活用し、検索機能やカート情報を表示させることで運用が可能です。具体的な作成方法は次の章にてご紹介しますが、実際にデモサイトをご用意しましたので、操作感をご確認頂けます。
このようにカテゴリページを活用して作成したカタログ注文ページでは、カタログ番号が不明もしくは完全に一致しなくても、目当ての商品に辿り着くことができます。
そしてその商品を次々にカートに入れ、さらにはカートに入れた商品の数量や商品の合計金額を表示設定も可能です。さらにはCSSやJSでの調整をすることで、表示面でも自由度の高いデザインを作成することが出来ます。
システムがASP/クラウドECの場合、標準機能を利用することで、保守やセキュリティ維持はASP事業者側で実施するバージョンアップにて常に最新の状態を維持、EC事業者様は販売に専念することが出来ます。
デメリットとしては、カタログ番号の他に複数の記号文字を商品情報として保持している場合は、商品登録やカタログ番号からの検索において一筋縄ではいかない可能性があります。
クラウド型ECサイト構築ASP“aishipシリーズ”でカタログ注文専用ページを作成する5つのステップ
1.カタログ注文専用のカテゴリページを作成する。
まずは、カタログ注文用のカテゴリを用意し、そのカテゴリページをカタログ注文専用ページとします。
2.カタログ注文専用のカテゴリに表示させる商品を登録し、カテゴリに紐づける
次に、カタログ注文に対応している商品を登録し、1で作成したカテゴリに紐づけます。
この際、カタログ注文専用では、紐づけられた商品が一覧として表示されます。つまり、カタログ番号を入力しなくても商品を探せる状態にありますが、カタログ番号が一致しないと商品を見せたくない場合は、CSSにて調整することで解決します。
具体的な記述例は「5.レイアウトを整える」にてご案内致します。
3.カテゴリ一覧ページから商品を次々にカートに入れる設定
aishipシリーズでは、カテゴリなどの一覧ページから次々に商品をカートに投入できる、まとめ買い機能を用意しております。
この機能を利用することで、カタログ注文ページに表示された商品をカートにすべて入れ終えるまでカート画面に進まずに済み、商品ページ⇔カートページの往来の手間が削減できます。
ただし、カテゴリページの設定は、カタログ注文以外のカテゴリページにも連動される為、他のページも注意が必要です。
4.カテゴリページに設定するレイアウトを作成する
カテゴリ一覧をカタログ注文ページとして運用する為の一番のポイントは、カテゴリページに設定するレイアウト内に「商品検索」の機能パーツを設置してカテゴリページに検索機能を付けることにあります。
また「カート情報」の機能パーツを設置することで、一覧ページから商品を次々に投入して際に、カートに入れた商品の数量や価格を一目で確認できるようになります。
5.レイアウトを整える
カテゴリページのフリーエリアは、HTML入力に対応しておりますので、バナーや説明書きの設置も可能です。
作成したページを確認し、不必要な表示があれば、CSSの{display:none;}を使って、サクサク非表示にしていきましょう。
例えば商品一覧を見せたくない場合は、CSSにて.sysItemList,.sysItemListDisp{display:none;}をカタログ注文ページに設定するレイアウトのhead内に設置することで解決します。
まとめ
ECサイトの構築システムを選定する際、ASP/クラウドECではカタログ注文が実現できないからといって諦める必要はありません。カタログ注文は専用フォームでなくてもASP/クラウドECの標準機能内でこのように実現する方法がございます。