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

  1. TOP
  2. みんビズ運用講座 ショップ機能をもっと活用しよう! : 第6回 訴求力がアップする商品ページのつくり方

エキスパートコラム

みんビズ運用講座:ショップ機能をもっと活用しよう!(全6回)

第6回:訴求力がアップする商品ページのつくり方

執筆:志鎌 真奈美(Shikama.net代表)

2014年3月17日更新

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

閲覧数4,061views

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

みんビズにはネットショップ機能が付属していますが、今ひとつ活用できないという声をいただきます。この講座ではネットショップ機能を更に活用し、本格的に運用する方法をお伝えいたします。
第6回目のテーマは「訴求力がアップする商品ページのつくり方」です。

みんビズでは、ネットショップの商品ページを自由にレイアウトすることができます。基本機能の組み合わせだけでできる訴求力の高いページのつくり方を解説します。

1. サンプルページで完成形を確認

サンプルのページは、大きく分けて5つの要素で構成されています。

1写真」機能
2フォトギャラリー」機能
3写真付き文章」機能
4カラム」機能
5商品」機能 です。

サンプルページ

サンプルページ

はじめに、「ナビゲーション」機能で新しいページを1つ用意します。
ここでは、「イチオシ情報」というページを追加しました。

2. 見出しを入力

新しく作ったページへ移動し、見出しを入力します。

入力が終わったら「保存」をクリックします。
※見やすくするために、サンプルでは見出しの下に「水平線」を入れています。

3.「写真」機能について

画像を1枚だけ、コンテンツの横幅いっぱいに設置します。

1. 「写真」をクリックします。

2. 「ファイルを選択」をクリックし、写真をアップロードします。

3. 写真が1枚だけ、横幅いっぱいに掲載されます。必要があれば、大きさの調整やリンクの設定、サブタイトルの入力などをおこないます。

※サンプルでは、この下に「文章」機能で商品の説明文やキャッチコピーを追加しています。

4.「フォトギャラリー」機能について

1「写真」機能では、画像を1枚だけアップロードしましたが、「フォトギャラリー」機能を使えば複数の写真を配置することができます。

1. 「フォトギャラリー」をクリックします。

2. 「選択」をクリックし、アップロードしたい画像を選択します。複数の写真をアップロードできますので、Ctrlキー(Macの場合はCommandキー)を押しながらクリックしましょう。

3. 「アップロード」ボタンをクリックします。

※アップロード後、必要に応じて画像の大きさやスタイルを調整します。
フォトギャラリーの詳細設定については、「 みんビズ制作講座:デザインカスタマイズ 第8回:フォトギャラリーを使ってみよう」 をご参照ください。

5.「写真付き文章」機能について

12では画像のみを取り扱いましたが、今度は写真の横に文章が並ぶレイアウトを設定します。

1. 「写真付き文章」を選択します。

2. 「文章を編集」の画面が表示されますので、キャッチコピーや文章などを入力しましょう。

3. 次に「画像を編集」のタブをクリックし、1.と同じ要領で写真をアップロードします。必要があれば、写真の大きさを調整しましょう。

6.「カラム」機能について

カラム機能を使って、画面をいくつかに区切って、写真や文章を配置します。複数の情報をコンパクトに見せたいときに有効です。

1. 「カラム」を選択後、右下の「列を追加」をクリックして3列にします。
(初期状態では2列。最大6列まで増やすことができます。)

2. それぞれの列の中に、「写真」や「文章」機能を使って要素を配置していきます。

7.「商品」機能について

最後に「商品」機能を使って、買い物カートを設置します。

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

2. 商品写真のアップロードし、説明テキスト、価格などを追加します。

※商品登録の詳しい解説については、「みんビズ制作講座:ショップ機能で店舗オープン 第3回:商品を登録しよう」をご参照ください。

3. 買い物カートを設置することができました。

8.「カートに追加」ボタンをカスタマイズ

みんビズのショップ機能では、「カートに追加」ボタンをカスタマイズすることができます。色や文字の大きさを変えて、わかりやすいボタンにしてみましょう。

1. 画面右側のツールボタンから「スタイル」を選択します。

2. 「ショップスタイル」を選択します。

3. 価格の文字の大きさ、色、「カートに追加」のボタンの色などを変更することができます。「ボタン」をクリックしましょう。

4. ボタンの色、文字の色などを変更します。

ここでは鮮やかな赤のボタン(色番号:F13828)へ変更し、「カートに追加」の文字も最大(16px)にしました。

これで「訴求力がアップする商品ページ」の完成です。

【完成形】

サンプルページ

サンプルページ

まとめ

さて、6回にわたりお届けしてきた「ネットショップ機能をもっと活用しよう!」シリーズは、今回で最終回となります。みんビズには、意外と知られていない便利な機能がたくさんあります。さまざまな機能を組み合わせて、運営しやすく、かつ訪問者にとって便利なホームページになるよう工夫してみてください。

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

志鎌 真奈美(しかま・まなみ)

志鎌 真奈美(しかま・まなみ)

Shikama.net 代表/JimdoExpert
http://www.shikama.net/
http://www.web-supporter.jp/

北海道函館市生まれ。北海道教育大学函館校卒業。千葉県市川市在住。
1997年よりWeb制作を始める。ソフトウェア会社のWeb制作部門に5年間勤めた後、2002年4月に独立。Web制作・企画・制作、システム構築などに従事。
講師として、Webマーケティングやデザインのセミナー活動も行っている。

著書にWebデザイナーのためのJimdoスタイルブック』(共著、マイナビ)、『Web文章の「書き方」入門教室~5つのステップで「読まれる→伝わる」文章が書ける!』(技術評論社)。

Web文章の「書き方」入門教室~5つのステップで「読まれる→伝わる」文章が書ける!

  • はじめてWEB 大感謝祭!~新規加入または2年目更新をし、アンケートに答えてギフト券をもらおう!~
  • Jimdoリメイク | プロがあなたのホームページを今なら45,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

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

コラム週間アクセスランキング[期間:2017/3/12~2017/3/18]

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

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

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ
    今ならキャンペーン実施中!