スマートフォンサイトを表示する

  1. TOP
  2. みんビズ制作講座 ショップ機能で店舗オープン : 第3回 商品を登録しよう

エキスパートコラム

みんビズ制作講座:ショップ機能で店舗オープン(全4回)

第3回:商品を登録しよう

執筆:赤間 公太郎(株式会社マジカルリミックス)

2013年1月30日更新

  • このエントリーをはてなブックマークに追加

閲覧数2,681views

このコラムをPDF形式でダウンロードする

「ショップ機能で店舗オープン」では、みんビズの「ショップ機能」を使って、ネットショップの作り方を学びます。第3回では、ショップに商品を登録する方法を紹介します。
手作りかまぼこをみんビズで実際に販売している「手焼きかまぼこ あつ蒲屋」を例に、解説していきます。

「手焼きかまぼこ あつ蒲屋」のWebサイト

「手焼きかまぼこ あつ蒲屋」のWebサイト(http://www.atsukamaya.jp/

商品を登録するまでの流れ

商品を掲載するページを作成して、商品登録をするまでの流れを紹介します。

商品を登録するページを作成する

商品を登録するには、商品個別のページを作成する必要があります。商品個別のページには、商品の情報や写真、価格を掲載します。
ここでは、いったん商品一覧ページを作成後、商品個別のページを作成します。商品一覧のページを準備すれば、商品が増えてきた場合に便利です。

ログイン後、メニュー部分をクリックして「ナビゲーションの編集」をクリックします。

「ナビゲーションの編集」をクリックする

「新規ページを追加」をクリックして「商品一覧」ページを作成します。

「+新規ページを追加」をクリックする

「商品一覧」と「ふっくらあつかまぼこ」のページをそれぞれ作成します。

「商品一覧」と「ふっくらあつかまぼこ」のページを作成する

「ふっくらあつかまぼこ」ページの「(このページを1階層下げる)」をクリックします。これで、商品一覧に属するページとして、ページに親子関係ができました。
※「ふっくらあつかまぼこ」は商品の名前です

商品一覧とふっくらあつかまぼこのページが親子関係になった

「保存」をクリックして、作成したメニューを保存したあと、「閉じる」をクリックしてナビゲーション編集ウインドウを閉じます。これでページが作成されました。

商品を登録する

メニューの「商品一覧」をクリックします。 「ふっくらあつかまぼこ」をクリックします。
※テンプレートの種類によって、1つ下の階層のメニューが表示される場所は異なります。このテンプレートでは、左側に表示されます

左側にある「ふっくらあつかまぼこ」をクリックする

「新項目を追加」をクリックします。

「新項目を追加」をクリック

見出しを作成する

商品を登録するにあたって、まずは「見出し」を作成しましょう。見出しを作成することで、見栄えもよく、わかりやすくなります。

まず、「見出し」をクリックします。

「見出し」をクリック

商品の名前を入力します。見出しの種類は「見出し1」にします。

商品の名前を入力して、見出しの種類を選択する

「保存」をクリックします。

「保存」をクリック

見出しが作成されました。

作成された見出し。デザインはテンプレートごとに異なる

商品の情報を入力する

見出しにマウスカーソルを重ねて「」をクリックします。

」をクリック

「商品」をクリックします。

「商品」をクリック

文章・写真・価格を設定する場所が表示されました。

商品の入力画面

まず「文章」のタブから入力していきます。文章タブでは「商品名」「タグ」「商品説明」を入力します。
商品名は、購入画面や注文確認メールでも表示されます。わかりやすくするために、色やサイズなども含めた商品名を入力するとよいでしょう。
タグは、商品を分類して一覧表示する際に使用します。たとえば、「定番商品」「贈答用」といったタグを使用して商品を分類することで、どのようなタイプの商品なのか、購入者に伝えることができます。
商品説明には、商品を説明する文章を入力します。文字の太さや大きさ、色などを変更することができます。

商品名、タグ、商品説明を入力した状態

次に、「写真」のタブに移動します。写真は、商品を訴求するにあたって重要な要素です。効果的な写真の撮影については、鍋坂樹伸さんのエキスパートコラム「写真撮影入門」を参考にしましょう。

写真のアップロード画面

「写真」タブでは、掲載するサイズや拡大表示の設定、画像のアップロードができます。
まず、掲載するサイズを設定します。小・中・大の3種類を設定することができます。表示したいサイズのアイコンをクリックして、サイズを設定しましょう。

サイズは小・中・大の3種類から選ぶことができる

次に、拡大表示の設定をします。写真をクリックした際、拡大表示をするには、「拡大」にチェックを入れます。拡大表示設定は、一括で行われます。

拡大表示は一括で設定される

画像をアップロードするには、「画像アップロード」か「Dropbox」から行います。

  • 「画像アップロード」は、パソコンに入っている画像をアップロードします
  • 「Dropbox」は、Dropboxに入っている画像をアップロードします

ここでは、「画像アップロード」からアップロードする方法を紹介します。

Dropboxとは?

Dropboxは、Web上にデータを保存し、異なる端末や他のユーザーと共有するためのサービスです。
基本的には、無料で使用することができます。
スマートフォンで撮影した写真をDropboxに保存した場合などに便利です。

「画像アップロード」をクリック

「画像アップロード」をクリック後、「選択」をクリックして、パソコン内にある画像を選択します。Windowsの場合はCtrlキー、Macの場合はcommandキーを押しながら画像を次々とクリックしていくと、複数の画像を選択することができます。

「選択」をクリック

掲載したい画像を選択したら、「アップロード」をクリックして画像をアップロードします。

「アップロード」をクリック

アップロードした画像が表示されます。

アップロードした写真が表示される

価格を設定する

「価格」タブでは、 商品の価格や在庫、配送期間を設定します。「商品バリエーション」の有無で、入力画面が異なります。商品バリエーションは、同じ商品でも色やサイズ、味が違うなどの場合に使用します。

価格の設定画面

商品バリエーションがない場合、まず価格を入力します。 金額の桁区切りである「,」を表示したい場合は、自分で入力する必要があります。
次に、在庫ステータスを設定します。▲で増加、▼で減少することができます。特に在庫数の指定がない場合は、「」をクリックします。
そして、配送期間を設定します。設定した3種類の配送期間から選択することができます。
最後に配送料を設定します。送料を個別に設定したい場合に入力します。空欄の場合、あらかじめ設定していた送料が適用されます。
「保存」をクリックすると、入力した内容が反映されます。

商品バリエーションがない場合の入力画面

商品バリエーションがある場合は、「商品バリエーションあり」をクリックします。

「商品バリエーションあり」をクリック

「商品バリエーションあり」の価格入力画面になりました。

商品バリエーションがある場合の設定画面

「バリエーション」の項目を入力します。ここでは、個数の違いでバリエーションを入力します。

バリエーションを入力する

「価格」の項目を入力します。「価格 ¥ 」の右側にある「」をクリックして、個別に配送期間を設定することもできます。価格を入力します。金額の桁区切りである「,」を表示したい場合、自分で入力する必要があります。

価格を入力する

「在庫」の項目を設定します。▲で増加、▼で減少することができます。特に在庫数の指定がない場合は、「」をクリックします。

在庫を入力する

配送期間を設定します。設定した3種類の配送期間から選択することができます。「期間」の右側にある「」をクリックして、個別に配送期間を設定することもできます。

配送期間を設定する

「配送料」と「消費税率」の項目を設定します。配送料は、設定した送料以外の料金を設定したい場合に入力します。消費税率は、入力した金額に消費税を加えたい場合に入力します。

配送料と消費税率を設定する

設定が完了したら、「保存」をクリックします。これで商品の登録が完了しました。ページの右下にある「プレビュー」をクリックして、実際の見え方を確認してみましょう。

各項目を入力・設定後、プレビューした商品

まとめ

  • 商品を登録するには、掲載するページを作成してから
  • 商品を登録する際は、商品名・タグ・商品説明・商品写真・価格・在庫・配送期間・配送料・消費税率を設定する

商品の登録方法は、以上です。次回は、受注の流れとオーダー管理の方法について紹介します。

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

赤間 公太郎(あかま・こうたろう)

赤間 公太郎(あかま・こうたろう)

株式会社マジカルリミックス 代表取締役CEO/JimdoExpert
http://www.magical-remix.co.jp/
http://www.kotalog.net/

宮城県出身。コンピューター系の専門学校を卒業後、仙台のデザイン会社に入社。
Webサイトのデザイン・コーディングをはじめとし、各種デジタルメディアのデザインに従事。2002年に退職し、しばらくフリーランスとして活動。2007年に株式会社マジカルリミックスを設立。社内での業務担当は、Webサイト運用に関するコンサルティング、社内向けITトレーニング、セミナー出演、執筆など。2005年より仙台市内の専門学校において、非常勤講師としてWeb制作の講義を担当。
主な著書に『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』(共著、エムディエヌコーポレーション)、『基礎から覚える、深く理解できる。Webデザインの新しい教科書』(同)、『ああしたい、こう変えたいが手にとるようにわかるCSS基礎』(同)。

ああしたい、こう変えたいが手にとるようにわかるCSS基礎

  • 1年間無料

    「はじめてWEB」でホームページをはじめよう!
  • 晴れ晴れホームページ -ホームページで失敗しないために知っておきたいコト-
  • 15分×7日間 無料でできる はじめてのホームページらくらく作成ガイド

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2016/6/19~2016/6/25]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業での開業スケジュールから融資申込に必要な書類が作成できるサービスです

  • SmaBI

    会社設立から契約書作成ツール、オンライン上の経営顧問まで スマートな経営をサポート

  • 経理通信

    中小企業・小規模事業者の経営者と経理担当者のための経理サポートサイト