◆商品カタログページの作成方法
こちらのページを参考にページの作り方を説明します。
https://dio-group.com/lighting/product/lmk-9231161/
◇ 画像処理|作業手順(PHOTOSHOP等)
1,画像の準備
- こちらで用意した画像をお送りしますので、そちらを元に下記の3種類の画像を作ります。画像はとても大事な要素なので、魅力的な構図で商品の質感などが伝わるように意識して作ります。(綺麗に見せようとして誇張しすぎないよう注意)撮影に使用した吊りワイヤーや下の台などある場合は消して綺麗に仕上げます。
- 商品説明本文内で使う画像に魅力的な画像を追加したい場合はこちらの画像素材サイト(dreamstime.com)からダウンロードする事が出来ます。必要な画像はスカイプにて必要画像のURLページをスカイプでお知らせください。(こちらでダウンロードして送ります)
■メイン画像x1枚

画像はフォトショップのテンプレート(画像サイズ800x550ピクセル、解像度300bpi)を使います。保存はjpg最高画質にて書き出しで、ファイル名は”商品番号-0”にします。
例)LMK-9231161-0.jpg
- この画像はメインの画像として使われリストで表示されます。(後ほどの「⑩ メイン画像」で説明)
- 通販ショップのメイン画像を使用します。(又はお送りする画像セットの中より使用)
- 基本的に背景はホワイトで商品のみ、上下の枠付きとなります。
- リストでどの商品か分かるように全体が映るようにします。
■サブ画像x最大5枚

画像サイズ800x550ピクセル、解像度300bpiで作成。保存はjpg高画質書き出しで、ファイル名は”商品番号-1~5”にします。
例)LMK-9231161-1.jpg、LMK-9231161-2.jpg
- この画像はスライダーの画像として使われます。(後ほどの「⑧ スライダー画像1~5」で説明)
- 上下の帯(黒枠)は不要
- 特にいい画像がなければ不要
■本文内用画像(ある場合)

画像サイズや形状の指定は特に無し、綺麗に見えるように。画像やデザインに合わせて調整。
- 正方形の場合:600x600ピクセル以上
- 長方形の場合:長辺が1200ピクセル程度
- 解像度:300-350bpi
- 保存形式:ファイルサイズや画質を考慮してjpg/gif/png
- ファイル名:”商品番号-適当な番号”
例)LMK-9231161-122.jpg
- この画像は商品の説明文本文に使われます。1枚に限らずスライダー画像に入らなかったものやアピールしたい画像として使います。
◆ WEBページ|作業手順(Wordpress )
2,ページの作成|編集ページ
テーマはSTYLYで編集は旧エディターを使います。商品ページの登録は固定ページではなく、商品と言うところから新規作成して下さい。キャッチコピーや商品の紹介文に関してはこちらのchatGPT(要登録)を利用すると魅力的な文を考えてもらえます。自然な言葉でない場合もあるのでそのまま使用せず、少し訂正する必要があるかもしれないのでご自身で判断下さい。chatGPTの使用方法や記事を書く方法なこちらをはじめ沢山の情報が出ています。使い方をマスターして素敵な文を短い時間で作成するスキルを付けましょう。
まずは登録したメールアドレスとPWでワードプレスへログインします。ログイン後に左側のメニューより”商品⇒新しく追加”をクリックして編集画面に入ります。また似たような商品ページを探して複製する方法もありますが、慣れるまで新しく追加してください。(複製することにより、ページ内容とアクセス数が引き継がれます)
① タイトル
”通販ショップサイト”のページタイトルと同じ名前”
例)「キャッスルリッジ1灯アウトドアライト・玄関照明|壁付けタイプ・ダウン型」
- H3タグ ⇒見出しチェッカー
② パーマリンク
ページ名は"商品番号”です。(小文字に変換されます)
例) lmk-9231161
③ キャッチフレーズ
素敵なキャッチコピーを入れましょう。SEOにはあまり影響ないので心を引く言葉が良いです。
- H2タグ ⇒見出しチェッカー
④ 外部ページのURL
通販サイトの販売ページのリンクを貼ります。
⑤ リストの表示設定
「外部ページに表示しない」のチェックが外れているか確認。(右上の購入ボタンが表示される)
⑥ リストの追加項目
下記の商品データにない詳細などを追加する場合に使用。
例)上下どちらでの使用可能、ダウンロッド付属、付属チェーンの長さ等
⑦ 広告のラベル
空白のまま
⑧ スライダーの画像1~5
作ったサブ画像を最大5枚までこちらに入れます。画像の代替えテキスト(alt属性)は1~3程度でカンマで区切ります。
例)輸入照明,おしゃれな照明器具,アンティーク
⑨ 商品データ
通販サイトの商品ページよりデータを入手し入力。
⑩ メイン画像
作ったメイン画像をこちらに入れます。この写真がリストのサムネになります。画像の代替えテキスト(alt属性)は1~3程度でカンマで区切ります。
例)輸入照明,おしゃれな照明器具,アンティーク
⑪ 更新
変更した場合は必ずこちらを更新
⑫ Elementor編集画面へ
すべて入力終わったらこちらからElementor編集画面へ移動して次のステップへ
◆ WEBページ|作業手順(プラグインElementor使用 )
3,ページの作成|編集ページ
次にプラグインのElementorを使用して商品ページを作成していきます。基本的なElementorの使用方法はこちらなどのページを参照ください。ページ作成はほとんどのセクションを雛形からコピぺして作成するので細かい理解は必要ありません。(使っているうちに慣れてきて理解できると思います)
Elementor編集画面
先ほどの編集で入力した「①タイトル」「⑩メイン画像」「⑧スライダー画像」「③キャッチフレーズ」「⑨商品データ」が表示されているはずです。
A 商品紹介エリア
基本的に”固定ページ(商品ではない)の雛形”をベースに作成下さい。
またHタグや商品の説明文などは、こちらのchatGPT(要登録)などを利用して魅力的でSEOに有効な文を考えてもらえます。
◆質問の仕方例
Q ”おしゃれな輸入照明器具をネット販売しております。アメリカのminka-lavery社の照明器具でcastle ridgeというデザインシリーズの商品説明を魅力的に、SEOを考慮して考えて”
B ブランド紹介エリア
こちらは予め作成された固定ページを表示するためのプラグイン”insert page”を設定します。編集でPage/Post ID or Slugを変更します。(入力名はこちらからお知らせします。)
以上で完成です。
★ 作業時間について
商品や写真の質などによって一概には言えませんが、多くの方の作業時間は次の通りです。
1ページ(1商品)に掛かる時間 | |
トップクラス | 30分程度 |
レギュラークラス | 1-1.5時間程度 |
上記はあくまで参考なので掲載する商品内容によっても大幅に変わってきます。