製品・商品の一覧ページを作りたい・カタログをホームページに載せたい｜先に決める3つと、増えたときに続くこと・費用の目安

「取り扱っている製品を、一覧で見られるページを作りたい」「紙のカタログに載せている商品を、ホームページにも載せたい」というご相談をいただくことがあります。製品や商品を1点ずつ並べたページは、会社案内のページとは作りが違います。点数が増えたり、価格や仕様が変わったりするたびに、ページ側にも手当てが要るためです。

この記事では、製品・商品の一覧ページを作るときに先に決める3つと、作り方の分かれ方、点数が増えたときや内容が変わったときに続くこと、そして依頼した場合の費用の目安までを順に整理します。ホームページ上で注文と決済まで受ける形はホームページで商品を売りたいに、紙のカタログをそのままPDFで置く形は会社案内・カタログをPDFでダウンロードできるようにしたいにまとめていますので、あわせてご覧ください。

「一覧ページを作りたい」と思うのは、たとえばこんなときです

ご相談の入り方は、いくつかに分かれます。同じ「一覧ページ」でも、そのうしろにある目的が違うと、合う作り方も変わってきます。

• 取り扱い製品を、まとめて見られるようにしたい——製品名と写真、簡単な説明を並べて、何を扱っているかを一覧にする形です
• 紙のカタログの内容を、ホームページにも載せたい——カタログの改訂に合わせてページも直していく形です
• お問い合わせのときに「どの製品のことか」を指していただけるようにしたい——型番や製品名をページに載せて、お問い合わせの内容と結びつける形です
• 施工例や納入例を、製品ごとに見せたい——製品の一覧と、使われた例を結びつける形です（施工事例や実績を管理画面から増やせる形は新着情報・お知らせ欄を作りたい・自分で更新できるようにしたいにも近い話があります）
• いまは数点だが、これから増やしていきたい——最初の作りで、あとの増やし方が変わる形です
• ゆくゆくはホームページで注文を受けたい——いまは紹介にとどめて、注文の受付はあとから足すお考えの形です

どの入り方でも、先に整理しておきたいことは共通しています。ホームページ上で注文を受ける形にするのか、紹介にとどめるのか。点数はいくつで、どれくらい入れ替わるのか。この2つが、作り方を選ぶ前の出発点になります。

先に決める3つ

ご相談の前に整理しておきたいのは、次の3点です。

1. 注文を受けるか、紹介にとどめるか——ホームページ上で注文を受けるのか、製品を紹介してお問い合わせにつなぐところまでにするのかで、作りが分かれます。注文を受ける場合、その場で決済まで受けるかどうかは別に決めることになります。この場合の考え方は、上でご案内した「ホームページで商品を売りたい」の記事にまとめています
2. 何点あって、どれくらい増えたり変わったりするか——いま何点で、年に何回くらい追加や入れ替えがあるのか。この見込みで、ページとして作るか、管理画面から登録する形にするかが変わります
3. 1点ごとに何を載せるか——写真、製品名、型番、説明文、寸法や仕様、そして価格を載せるかどうか。共通して載せる項目と、製品によって省く項目を、ここで決めます

この3つが決まると、作り方の選択肢が絞れます。決まらないまま作った場合、点数が増えたときに作り直しの作業が必要になることがあります。

作り方は、主に3通りです

「一覧ページを作りたい」というご要望に対して、取れる形は大きく3通りに分かれます（一覧ページに製品を直接書き足す形／管理画面から登録する形／PDFを置いて目次だけ載せる形）。ご利用のサーバーやCMS（管理画面から内容を編集する仕組み）によって、取れる形と、その中でできることが変わります。

一覧ページに製品を直接書き足す形

一覧のページを1枚作り、その中に製品を並べる形です。メニューや、関連する既存のページのどこから一覧ページへリンクするかも、ここで決めます。製品ごとに別のページを作るかどうかは、点数と、1点ごとに載せる量で決めます。点数が少なく、入れ替えも少ない場合に取られる形です。

この形では、製品を足すたびに、一覧のページを直す作業が発生します。製品ごとのページを作っている場合は、そのページを作る作業も加わります。ご自身で直せる形にできるかどうかは、いまのサイトの作りによって変わります。

管理画面から1点ずつ登録する形

CMSに製品用の登録画面を用意して、製品名・写真・説明文などを1点ずつ登録すると、一覧のページと製品ごとのページに反映される形です。点数が多い場合や、入れ替えが続く見込みの場合に取られる形です。

この形では、最初に「1点ごとに載せる項目」を決めて、登録画面をその項目で作ります。ご利用のCMSや契約によって、項目を足せるかどうか、並び順や関連づけを持たせられるかどうかが変わりますので、できる範囲を確認してから項目を決める順になります。あとから項目を足す場合は、登録画面側と、表示側の両方に手当てが必要になることがあります。登録の操作をご自身で行える範囲は、サイトの作りと管理画面の権限によって変わります。その範囲を確認したうえで、分担を決めます。ご自身で更新される形の考え方はホームページを自分で更新できるようにしたいにまとめています。

PDFのカタログを置いて、ページには目次だけを載せる形

製品の詳しい内容はPDFのカタログに任せて、ホームページ側には製品名や分類の目次と、PDFへのリンクだけを載せる形です。紙のカタログがすでにあり、改訂もカタログ側で行う場合に取られる形です。

この形では、製品の詳しい説明や仕様は、ページの本文ではなくPDFに載ります。検索結果でどう扱われるかは、ページとPDFのそれぞれについて、検索エンジン側によって変わります。PDFの置き方と差し替えのときに起きることは、上でご案内したPDFの記事にまとめています。

1点ごとに載せるものを、先にそろえます

一覧ページで先に困りやすいのは、作り方よりも「載せるものがそろわない」ことです。製品によって写真があったりなかったり、説明文の長さがまちまちだったりすると、並べたときの見え方がそろいません。

1点ごとに載せる項目として検討するのは、次のとおりです。載せるかどうかは、それぞれ御社でお決めいただく部分です。

• 写真——1点につき何枚載せるか。大きさや向きがそろっているかどうかで、並べたときの見え方が変わります
• 製品名・型番——お問い合わせのときに、どの製品かを指していただくための手がかりになります
• 説明文——長さをそろえておくと、一覧に並べたときの高さがそろいます
• 寸法・仕様——共通して使う項目の名前と単位を決めておきます
• 価格——載せるかどうかで、あとに続く作業が変わります。次の節で分けて整理します
• 関連する資料——仕様書や取扱説明書のPDFを製品ごとに置くかどうか
• 動画——使い方や動作の様子を動画で載せるかどうか。載せ方の分かれ方はホームページに動画を載せたいにまとめています

すべての製品で全部の項目をそろえる必要はありませんが、「載せる製品と載せない製品がある項目」は、その項目が空のときにどう見せるかを、先に決めておくことになります。

価格を載せるかどうかは、先に決めます

価格を載せるかどうかは、御社でお決めいただく部分です。ここで整理しておきたいのは、載せた場合と載せない場合で、あとに続く作業が違うことです。

価格を載せる場合、価格が変わるたびにページ側の直しが必要になります。税込か税抜か、送料や取付費を含むかどうかの書き方を、全製品でそろえておくことになります。価格を載せる製品と載せない製品がある場合は、価格の欄が空のときの表示を決めておくことになります。

価格を載せない場合は、価格についての案内を載せるかどうか、載せるならどう書くかを、御社で決めていただく部分です。「価格はお問い合わせください」とする方法もあります。お問い合わせで受ける場合は、どの製品かを指していただけるよう、製品名や型番をページに載せておく形になります。お問い合わせの入口の作りはお問い合わせフォームの項目を変えたい・増やしたいにまとめています。

ホームページ上で注文を受ける場合は、支払い方法や送料、返品条件など、扱う商品と販売の形に応じて、必要な表示を確認しておくことになります。この場合の考え方は、上でご案内した「ホームページで商品を売りたい」の記事と、ホームページに載せておく「表示のページ」にまとめています。

製品ごとのページを分けるときに決めること

1点ごとに載せる量が多い場合は、一覧とは別に製品ごとのページを作る方法が候補になります。詳しい内容をどこに載せるかは、ご希望とサイトの条件に合わせて決めます。分ける場合に、作る前に決めておくのは次のものです。

• ページのアドレスの付け方——型番をそのまま使うか、連番にするか、分類名を含めるか。アドレスに使える文字や形式、あとから変更できる範囲は、いまのサイトやCMSの仕組みによって変わりますので、選べる範囲を確認してから付け方を決めます。あとから型番や分類が変わったときに、アドレスも変えるかどうかもここで決めておきます
• 製品ごとのお問い合わせの入口——製品のページからお問い合わせに進んだときに、どの製品についてのお問い合わせかが分かる形にするかどうか。フォーム側の項目に製品名を入れておく形や、製品名を自動で入れる形があり、取れる形はいまのフォームの作りによって変わります
• 関連する製品への案内——同じシリーズや、組み合わせて使う製品を製品のページに並べるかどうか。管理画面から登録する形の場合、関連づけを登録画面に持たせられるかどうかは、ご利用のCMSによって変わります。持たせられる場合は、持たせるかどうかで作りが変わります
• 写真の枚数と見せ方——1点につき複数の写真を載せる場合、大きく見せる形にするか、並べるだけにするか

製品ごとのページは、点数のぶんだけ増えます。取り下げのときに、残すか消すかを確認する製品のページも、そのぶん増えることになります。

写真は、元データと、使ってよいかどうかを先に確かめます

製品の写真は、一覧ページで一番場所を取る部分です。先に確かめておきたいのは、次の2つです。

• 元データが手元にあるか——紙のカタログに使った写真の元データがあるか、印刷会社や撮影した方の側にあるか。ホームページ用に大きさを整える作業は、元データの有無で変わります
• 使ってよい写真か——メーカーから提供された写真、撮影を外部に頼んだ写真、購入した素材のそれぞれで、ホームページに載せてよいかどうかの条件が違うことがあります。確かめ方はホームページに載せる写真、その1枚は使って大丈夫？にまとめています

写真が無い製品がある場合は、その製品をどう見せるかを先に決めておくことになります。撮影から進める場合は、点数と撮り方によって作業の範囲が変わりますので、ご相談・お見積りのときにお示しします。

写真の枚数が多いページは、画像の大きさによって読み込みに時間がかかることがあります。どれくらい影響するかは、写真の大きさと枚数、ご覧になる環境によって変わります。表示の速さの切り分けはホームページの表示が遅いにまとめています。

並び順と分け方は、増えたときのことを考えて決めます

数点であれば1枚に並べるだけで済みますが、点数が増えると「どう分けるか」「どの順に並べるか」を決めることになります。

• 分け方——用途別、シリーズ別、価格帯別など、どの軸で分けるか。紙のカタログの章立てをそのまま使う形もあります
• 並び順——新しい順、型番順、おすすめ順など。管理画面から登録する形の場合、並び順の指定を登録画面側に持たせられるかどうかは、ご利用のCMSによって変わります。持たせられる場合は、持たせるかどうかで作りが変わります
• 分類が変わったとき——シリーズの統合や名称の変更があると、分け方そのものを直すことになります。どの製品がどこに入るかを、御社で決めていただく部分です

分け方は、あとから変えると、製品ごとのページのアドレスが変わることがあります。アドレスが変わると、これまでの検索結果や、ほかのページからのリンクが古いアドレスを指したままになることがあります。この点は、下の「検索との関係」であらためて整理します。

増えたとき・変わったときに続くこと

一覧ページは、作って終わりではなく、製品の動きに合わせてページ側にも手当てが続きます。続く作業として先に決めておくのは、次のものです。

• 追加——新しい製品を載せるとき。写真や説明文などをそろえて、選んだ作り方に合わせて、一覧ページ・製品ごとのページ・PDFのうち必要な箇所に足します
• 差し替え——仕様や写真、価格が変わったとき。blancに差し替えを依頼される場合は、どの製品のどこを直すかをお知らせください
• 取り下げ——生産終了や取り扱い終了のとき。一覧から外すだけにするか、製品のページそのものを消すかを決めます。消した場合、そのアドレスを開いたときにどう見せるかも決めることになります
• カタログの改訂に合わせた一括の直し——紙のカタログを改訂したときに、ページ側もまとめて直す形です。改訂の時期が決まっていれば、その前に作業の範囲を決めておく形になります

誰が、いつ、どこを直すかを、作るときに決めておきます。ご自身で操作できる範囲は、サイトの作りと管理画面の権限によって変わります。その範囲を確認したうえで、ご自身で行う部分と依頼する部分を分けます。文章や写真の差し替え作業そのものの流れはホームページの文章・写真を差し替えたいにまとめています。

検索との関係

製品ごとにページを分けるか、1枚の一覧にまとめるかで、検索結果に出る単位が変わることがあります。製品名や型番で検索されたときにどのページが出るかは、ページの作りと、検索エンジン側の扱いによって変わります。

製品のページを消したり、アドレスを変えたりした場合、古いアドレスが検索結果に残ることがあります。この場合、古いアドレスを開いたときにどこへ案内するかを決めておく形になります。検索結果に出てこないときの切り分けはホームページがGoogleで検索しても出てこないにまとめています。

スマートフォンで開いたときの見え方

一覧ページは、横に何点並べるかで見え方が変わります。パソコンで3点や4点を横に並べていても、スマートフォンでは1点か2点ずつ縦に並ぶ形になることが多く、寸法や仕様の項目が多い場合は、横に長い表がスマートフォンで見切れることがあります。

いまのサイトがスマートフォン表示に対応しているかどうかで、一覧ページの作り方も変わります。対応の確認方法はホームページがスマホ対応していないにまとめています。

いまあるページや資料から始める場合

一覧ページを新しく作る場合だけでなく、すでに製品のページがある場合や、製品リストの表がお手元にある場合もあります。それぞれで、先に確かめることが変わります。

• すでに製品のページがある場合——いまのページに載っている内容と、現状の製品が合っているかを先に確かめます。合っていない部分は、新しく作る前に直すか、作り直しの中でまとめて直すかを決めます
• 製品リストの表がある場合——表の項目が、ページに載せる項目とそろっているかを確かめます。そろっていれば、管理画面から登録する形にする際の元データとして使えることがあります。使えるかどうかは、表の形と、登録の仕組みの側の条件によって変わります
• 他社が作ったサイトの場合——いまのサイトの作りと、管理画面に入れるかどうかを先に確かめます。制作会社と連絡が取れない場合の進め方は制作会社と連絡が取れないにまとめています
• 社名や住所の表記が古いままの場合——製品ページに会社の情報が入っている場合、そこも直す対象になります。直す範囲の考え方は社名変更・移転でホームページはどこを直す？にまとめています

blancがお受けする範囲

blancがお受けするのは、一覧ページと製品ごとのページを作る作業、管理画面から登録できる形にする作業、写真の大きさや明るさを整える作業、そして公開後の追加・差し替え・取り下げの作業です。作業の項目と金額は、下の「費用の目安」に料金表の項目をそのまま引いています。

どの製品を載せるか、価格を載せるかどうか、どう分けてどの順に並べるか、どの写真を使ってよいか、いつ取り下げるかは、御社でお決めいただく部分です。載せる文章や仕様の内容が正しいかどうかの確認も、御社で行っていただく部分です。

いまお使いのサイトでどの作り方を選べるかは、サイトの仕組みによって変わります。サイトのURLと、いまの製品の点数、お手元にある写真や資料の形をお知らせください。公開されている情報で判断できない部分は、確認に必要な情報をあらためてお尋ねします。

作り方を選ぶときの判断材料

作り方を選ぶときに、判断が分かれやすいところを挙げます。いずれも、どちらが正しいというものではなく、御社の製品の動き方に合わせて決めていただく部分です。

• 数点なのに、管理画面から登録する形にするか——いまは数点でも、これから増える見込みがあれば、最初から登録する形にしておく考え方があります。既存の項目に収まる製品なら、登録の操作で追加できることがあります。写真や原稿の準備と、項目や表示の変更が必要な場合の作業は残ります。最初の作業の量は、いまの仕組みと、必要な変更の範囲によって変わります
• 紙のカタログと同じ内容を、ページの文章としても載せるか——PDFだけを置く形にすると、改訂のときはPDFの差し替えに加えて、アドレスが変わる場合はリンクを、目次の内容が変わる場合は目次も直すことになります。ページの文章としても載せると、改訂のたびにページ側も直すことになりますが、ページの本文にも製品名や型番が載る形になります。検索結果に出るか、どのページが出るかは、検索エンジン側の扱いによって変わります
• 製品ごとのページを作るか——1点ごとに載せる量が多い場合は、製品ごとのページを作る方法が候補になります。点数が多いと、ページの数もそのぶん増えます。取り下げのときに、残すか消すかを確認する製品のページも、そのぶん増えます
• ゆくゆく注文を受けるなら、いまからカートの仕組みを入れるか——いまは紹介にとどめて、あとから注文の受付を足す場合、一覧ページの作りを引き継げるかどうかは、カートの仕組みの側の条件によって変わります。将来の販売のご予定を踏まえて、いま用意する範囲を決めます。カートをいま入れるかどうかは、販売を始める時期と必要な機能に合わせて、御社で決めていただく部分です

製品・商品の一覧ページについてのご質問

いまのホームページに、一覧ページだけ足せますか

いまのサイトの作りによって変わります。ページを1枚足す形であれば、既存のサイトに加える形で対応できることが多いです。管理画面から登録する形にする場合は、いまお使いのCMSにその仕組みを足せるかどうかを確認したうえで、取れる形をお伝えします。ページを足す作業全般はホームページにページを追加したいにまとめています。

紙のカタログのデータから、そのまま作れますか

カタログの元データの形によって変わります。印刷用のデータからは、文章や写真を取り出せる場合と、取り出しにくい場合があります。写真は元データの有無で、ホームページ用に整える作業が変わります。お手元にあるデータの形式と、文章や写真の元データの有無をお知らせください。

製品の登録を、自分でできるようにできますか

管理画面から登録する形にした場合、ご自身で操作できる範囲は、サイトの作りと管理画面の権限によって変わります。その範囲を確認したうえで、どこまでをご自身で行い、どこからを依頼されるかを決めていただく部分です。

価格は載せたほうがよいですか

御社でお決めいただく部分です。載せる場合は価格が変わるたびにページ側の直しが必要になります。載せない場合は、価格についての案内を載せるかどうか、載せるならどう書くかを決めていただく部分です。この記事の「価格を載せるかどうかは、先に決めます」の節に、それぞれで続く作業を整理しています。

製品が何百点もある場合はどうなりますか

点数が多い場合は、管理画面から登録する形が取れるかどうかと、分け方・並び順の決め方が先になります。最初の登録を依頼したいご希望がある場合は、その旨と点数をお知らせください。一度に全部を載せるか、分類ごとに順に載せるかも、決めていただく部分です。

生産終了した製品は、ページから消すべきですか

御社でお決めいただく部分です。一覧から外して製品のページは残す形、ページごと消す形、「生産終了」と表示して残す形があります。消す場合は、そのアドレスを開いたときにどこへ案内するかを決めておく形になります。

あとからホームページで注文を受けられるようにできますか

注文の受付を足せるかどうかは、選ぶ受付の方法と、いまのサイトやサーバーの条件によって変わります。カートを使う場合、いまの一覧ページの作りを引き継げるかどうかは、カートの仕組みの側の条件によって変わります。注文の受付まで視野に入っている場合は、最初にその旨をお知らせいただければ、その前提で取れる形をお伝えします。

費用の目安

blancの料金表から、製品・商品の一覧ページに関わる項目をそのまま引きます。どの項目がいくつ当たるかは、点数と作り方によって変わりますので、ご相談・お見積りのときにお示しします。金額はすべて税込です。ホームページ上で注文と決済を受ける形の費用は、上でご案内した「ホームページで商品を売りたい」の記事に譲ります。

• HTML制作——8,800円（税込）。※文字原稿A4/2P程度
• HTML修正——5,500円（税込）。※1ページあたり
• 基本作業料金——5,500円（税込）。※簡単なテキスト修正等含みます。

※Wix・Jimdo等のホームページ作成サービスで作られたサイトは、編集制約のため作業時間が増えますので、上記料金の1.5倍となります。

• CMSカスタマイズ——110,000～330,000円（税込）。※WordPressなど
• CMSコンテンツ調整（新着情報・施工事例・ブログなど）——33,000～110,000円（税込）。※WordPressなど
• 写真加工——2,200～11,000円（税込）。※明るさ調整・トリミングなど（5枚程度につき）
• 商品写真撮影——3,300円（税込）。※商品1点につき（写真加工込み）
• 写真差し替え——550円（税込）。※写真1点につき
• PDF作成・修正——5,500～22,000円（税込）。※ページ数と元データの有無により変わります。
• 更新操作のレクチャー（1時間）——11,000円（税込）。※オンラインまたはご来社。操作手順書をお渡しします。

月額プランの料金と更新内容は、次のとおりです。

• ベーシックプラン——1ヶ月あたり11,000円（税込）。対象はHTMLで作られたサイト・WordPress以外のCMS。月3回程度の更新作業（テキストや写真差し替えなどが主な作業となります。）
• スタンダードプラン——1ヶ月あたり16,500円（税込）。対象はHTMLで作られたサイト・WordPress以外のCMS。月5回までの更新作業（テキストや写真差し替えなどに加え画像加工やバナー修正などの作業を行います。）上記更新作業の代わりにページを追加したいといったご要望にも対応します。
• スタンダードプラス——1ヶ月あたり33,000円（税込）。対象はHTMLで作られたサイト・WordPress以外のCMS（ご自身でも更新される場合）。月5回までの更新作業（テキストや写真差し替えなどに加え画像加工やバナー修正などの作業を行います。）上記更新作業の代わりにページを追加したいといったご要望にも対応します。※ご自身でホームページ修正や更新を行いたい場合や操作方法など個別の対応をご希望の方はこちらのプランにご加入下さい。
• WordPress保守プラン（スタンダード）——1ヶ月あたり11,000円（税込）。対象はWordPressで作られたサイト。月3回程度の更新作業（テキストや写真差し替え）

いずれも最低契約期間は3ヶ月です。項目の全体は料金ページをご覧ください。ほかの会社の見積りと比べるときの見方はホームページの相見積もり、どう比べる？にまとめています。

依頼するときに伝えるとよいこと

ご相談のときに、次のことが分かっていると、取れる形と費用の目安を早くお伝えできます。分かる範囲で構いません。不足する情報はあらためてお尋ねします。

• サイトのURL——いまのサイトの作りを確認します
• 製品の点数と、増える見込み——いま何点で、年にどれくらい追加や入れ替えがあるか
• 注文を受けるかどうか——紹介にとどめるか、注文を受けるか、あとから足すか
• 1点ごとに載せたい項目——写真、製品名、型番、説明文、寸法や仕様、価格の有無
• お手元にある資料の形——紙のカタログ、印刷用のデータ、写真の元データ、製品リストの表など
• 写真の出どころ——自社で撮ったもの、メーカー提供、外部に撮影を頼んだもの、購入した素材
• 誰が更新するか——ご自身で登録されるか、依頼される部分があるか

まとめ

製品・商品の一覧ページを作るときに、押さえておきたいのは次の3つです。

• 先に決めるのは3つ——注文を受けるか紹介にとどめるか、何点あってどれくらい変わるか、1点ごとに何を載せるか。この順で決めてから、作り方を選びます
• 作り方で、あとの手順が変わる——一覧ページに製品を直接書き足す形、管理画面から登録する形、PDFを置いて目次だけ載せる形。追加・差し替え・取り下げの手順が、それぞれ違います
• 作ったあとに、追加・差し替え・取り下げが続く——製品の動きに合わせて、誰が、いつ、どこを直すかを、作るときに決めておきます

いまのサイトでどの作り方を選べるかは、サイトの仕組みによって変わります。サイトのURLと、製品の点数、お手元の資料の形をお知らせください。公開されている情報で判断できない部分は、確認に必要な情報をあらためてお尋ねしたうえで、取れる形と費用の目安をお伝えします。ご相談・お見積りは無料です。ホームページ修正のご案内もあわせてご覧ください。