みんビズ制作講座：ショップ機能で店舗オープン（全4回） 第3回：商品を登録しよう 執筆：赤間 公太郎（株式会社マジカルリミックス） 「ショップ機能で店舗オープン」では、みんビズの「ショップ機能」を使って、ネットショップの作り方を学びます。第3回で は、ショップに商品を登録する方法を紹介します。 手作りかまぼこをみんビズで実際に販売している「手焼きかまぼこ あつ蒲屋」を例に、解説していきます。 「手焼きかまぼこ あつ蒲屋」のWebサイト（http://www.atsukamaya.jp/） 商品を登録するまでの流れ 商品を掲載するページを作成して、商品登録をするまでの流れを紹介します。 ● ● 商品を掲載するページを作成する 商品を登録する 商品を登録するページを作成する 商品を登録するには、商品個別のページを作成する必要があります。商品個別のページには、商品の情報や写真、価格 を掲載します。 ここでは、いったん商品一覧ページを作成後、商品個別のページを作成します。商品一覧のページを準備すれば、商品 が増えてきた場合に便利です。 ログイン後、メニュー部分をクリックして「ナビゲーションの編集」をクリックします。 「ナビゲーションの編集」をクリックする 「新規ページを追加」をクリックして「商品一覧」ページを作成します。 「+新規ページを追加」をクリックする 「商品一覧」と「ふっくらあつかまぼこ」のページをそれぞれ作成します。 「商品一覧」と「ふっくらあつかまぼこ」のページを作成する 「ふっくらあつかまぼこ」ページの「 （このページを1階層下げる）」をクリックします。これで、商品一覧に属するページとして、ページに親子関係ができまし た。 ※「ふっくらあつかまぼこ」は商品の名前です 商品一覧とふっくらあつかまぼこのページが親子関係になった 「保存」をクリックして、作成したメニューを保存したあと、「閉じる」をクリックしてナビゲーション編集ウインドウを閉じま す。これでページが作成されました。 商品を登録する メニューの「商品一覧」をクリックします。 「ふっくらあつかまぼこ」をクリックします。 ※テンプレートの種類によって、1つ下の階層のメニューが表示される場所は異なります。このテンプレートでは、左側に 表示されます 左側にある「ふっくらあつかまぼこ」をクリックする 「新項目を追加」をクリックします。 「新項目を追加」をクリック 見出しを作成する 商品を登録するにあたって、まずは「見出し」を作成しましょう。見出しを作成することで、見栄えもよく、わかりやすくなり ます。 まず、「見出し」をクリックします。 「見出し」をクリック 商品の名前を入力します。見出しの種類は「見出し1」にします。 商品の名前を入力して、見出しの種類を選択する 「保存」をクリックします。 「保存」をクリック 見出しが作成されました。 作成された見出し。デザインはテンプレートごとに異なる 商品の情報を入力する 見出しにマウスカーソルを重ねて「 」をクリックします。 「 」をクリック 「商品」をクリックします。 「商品」をクリック 文章・写真・価格を設定する場所が表示されました。 商品の入力画面 まず「文章」のタブから入力していきます。文章タブでは「商品名」「タグ」「商品説明」を入力します。 商品名は、購入画面や注文確認メールでも表示されます。わかりやすくするために、色やサイズなども含めた商品名を 入力するとよいでしょう。 タグは、商品を分類して一覧表示する際に使用します。たとえば、「定番商品」「贈答用」といったタグを使用して商品を 分類することで、どのようなタイプの商品なのか、購入者に伝えることができます。 商品説明には、商品を説明する文章を入力します。文字の太さや大きさ、色などを変更することができます。 商品名、タグ、商品説明を入力した状態 次に、「写真」のタブに移動します。写真は、商品を訴求するにあたって重要な要素です。効果的な写真の撮影について は、鍋坂樹伸さんのエキスパートコラム「写真撮影入門」を参考にしましょう。 写真のアップロード画面 「写真」タブでは、掲載するサイズや拡大表示の設定、画像のアップロードができます。 まず、掲載するサイズを設定します。小・中・大の3種類を設定することができます。表示したいサイズのアイコンをクリック して、サイズを設定しましょう。 サイズは小・中・大の3種類から選ぶことができる 次に、拡大表示の設定をします。写真をクリックした際、拡大表示をするには、「拡大」にチェックを入れます。拡大表示設 定は、一括で行われます。 拡大表示は一括で設定される 画像をアップロードするには、「画像アップロード」か「Dropbox」から行います。 ● ● 「画像アップロード」は、パソコンに入っている画像をアップロードします 「Dropbox」は、Dropboxに入っている画像をアップロードします ここでは、「画像アップロード」からアップロードする方法を紹介します。 Dropboxとは？ Dropboxは、Web上にデータを保存し、異なる端末や他のユーザーと共有するためのサービスです。 基本的には、無料で使用することができます。 スマートフォンで撮影した写真をDropboxに保存した場合などに便利です。 「画像アップロード」をクリック 「画像アップロード」をクリック後、「選択」をクリックして、パソコン内にある画像を選択します。Windowsの場合はCtrlキー、 Macの場合はcommandキーを押しながら画像を次々とクリックしていくと、複数の画像を選択することができます。 「選択」をクリック 掲載したい画像を選択したら、「アップロード」をクリックして画像をアップロードします。 「アップロード」をクリック アップロードした画像が表示されます。 アップロードした写真が表示される 価格を設定する 「価格」タブでは、 商品の価格や在庫、配送期間を設定します。「商品バリエーション」の有無で、入力画面が異なります。商品バリエーショ ンは、同じ商品でも色やサイズ、味が違うなどの場合に使用します。 価格の設定画面 商品バリエーションがない場合、まず価格を入力します。 金額の桁区切りである「,」を表示したい場合は、自分で入力する必要があります。 次に、在庫ステータスを設定します。▲で増加、▼で減少することができます。特に在庫数の指定がない場合は、「 」をクリックします。 そして、配送期間を設定します。設定した3種類の配送期間から選択することができます。 最後に配送料を設定します。送料を個別に設定したい場合に入力します。空欄の場合、あらかじめ設定していた送料が 適用されます。 「保存」をクリックすると、入力した内容が反映されます。 商品バリエーションがない場合の入力画面 商品バリエーションがある場合は、「商品バリエーションあり」をクリックします。 「商品バリエーションあり」をクリック 「商品バリエーションあり」の価格入力画面になりました。 商品バリエーションがある場合の設定画面 「バリエーション」の項目を入力します。ここでは、個数の違いでバリエーションを入力します。 バリエーションを入力する 「価格」の項目を入力します。「価格 ￥ 」の右側にある「 」をクリックして、個別に配送期間を設定することもできます。価格を入力します。金額の桁区切りである「,」を表示したい 場合、自分で入力する必要があります。 価格を入力する 「在庫」の項目を設定します。▲で増加、▼で減少することができます。特に在庫数の指定がない場合は、「 」をクリックします。 在庫を入力する 配送期間を設定します。設定した3種類の配送期間から選択することができます。「期間」の右側にある「 」をクリックして、個別に配送期間を設定することもできます。 配送期間を設定する 「配送料」と「消費税率」の項目を設定します。配送料は、設定した送料以外の料金を設定したい場合に入力します。消 費税率は、入力した金額に消費税を加えたい場合に入力します。 配送料と消費税率を設定する 設定が完了したら、「保存」をクリックします。これで商品の登録が完了しました。ページの右下にある「プレビュー」をクリッ クして、実際の見え方を確認してみましょう。 各項目を入力・設定後、プレビューした商品 まとめ ● ● 商品を登録するには、掲載するページを作成してから 商品を登録する際は、商品名・タグ・商品説明・商品写真・価格・在庫・配送期間・配送料・消費税率を設定する 商品の登録方法は、以上です。次回は、受注の流れとオーダー管理の方法について紹介します。 次回のコラムを見る » 赤間 公太郎（あかま・こうたろう） 株式会社マジカルリミックス 代表取締役CEO／JimdoExpert http://www.magical-remix.co.jp/ http://www.kotalog.net/ 宮城県出身。IT関連の専門学校を卒業後、仙台のデザイン会社に入社。Webサイトのデザイン・コーディングを 中心に従事。2002年退職後すぐに個人事業としてマジカルリミックスを創業。2007年に法人化し株式会社マ ジカルリミックスを設立。規模を問わずお客様のニーズにあわせたWebサイトの企画立案、制作、アクセスと売 上アップをめざした更新サポートまで一貫して手がけている。 また、Web制作だけにとどまらず、社内向けのセキュリティ・IT活用のプライベートトレーニング、セミナー出演、 執筆なども意欲的に手がける。全国からの講演依頼も多数。2005年から仙台の専門学校で、非常勤講師とし てWeb制作講義を担当。 主な著書に『10日でSEO&アクセスアップ Jimdoデザインブック』（エムディエヌコーポレーション）『10日で作るかっこいいホームページ Jimdoデザインブック』（同）『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』（共著、同）『基礎から覚える、深く理解できる。Webデザインの新しい教科 書』（同）。 ［所属］ 仙台商工会議所 エキスパートバンク登録／みやぎ産業振興機構 専門家アドバイザー／みやぎ工業会正会員 Copyright 2017 はじめてＷＥＢ All Rights Reserved. http://hajimeteweb.jp/
© Copyright 2024 Paperzz
