ヤフーショッピングはホームページビルダーで作れるのか!?試してみました。

シェアする

ホームページビルダー21からネットショップのページを作成することができるようになりました。
この機能を使うことで、「どの程度作り込むことができるのか」「またメリットやデメリットはあるのか」などを含めお話していきますので、購入を迷っている人は損しないためにもチェックしてみてください。

ホームページビルダーでヤフーショッピング構築はできるの?

ホームページビルダー21のビジネスパックでは、ネットショップ(Yahoo!ショッピング、楽天市場)のショップページをかんたんに作成することができる特別なビルダーが追加されています。

※Yahoo!ショッピングはプロフェッショナル出店が対象
※ネットショップの出店自体は、Yahoo!ショッピング、楽天市場との間で申請(契約)が必要

ホームページ・ビルダー21
ホームページ・ビルダー21の詳細はこちら

ビジネスパックのみが使用できる機能のようで、ダウンロード版で23,000円~の価格帯で販売されています。
決して安くはないので、初心者の方やこれからヤフーショッピングを開業される方の中には、「本当にホームページビルダー21で作れるのか?」という不安や疑問などが出てくるかと思います。

実際にホームページビルダー21を使用してみました。(レビュー)

当方はヤフーショッピング作成をおこなっている制作会社です。
仕事柄、ホームページビルダーでどこまで作れるものなのか、前々から気になっていたということもあり、体験版になりますが実際に使用し作成してみました。

まず、実際に作成したサンプルイメージは以下となります。

ホームページ・ビルダー21で作成したヤフーショッピングサンプルサイト

上記のイメージは、もともと用意されているテンプレートを元に作成したものです。
画像や文言などすべてダミーですが、それでも思っていたより作り終わるまで時間がかかりました。
制作する中で、僕が気になった点は下記の通りです。

  • 使い慣れるまで大変かな
  • 画像を作るたびに、画像編集ソフト(イメージデザイナー)を開かなければならない
  • HTML書き出しの際に、不要なHTMLが入ってしまう
  • 結局のところデザインセンスが問われる


人気コスパ抜群!Yahoo!ショッピングのサイトが作れるテンプレートはこちら

以降で、簡単な流れを踏まえながら詳しく解説していきます。

ホームページビルダー21(EC)でヤフーショップデザインの作り方

※体験版を使っているので、一部の機能に制限があります。

ホームページビルダー21 ECを起動すると、以下のような画面が表示されます。

ホームページ・ビルダー21ECを起動

ここでは案内通り、STEP1のページを作成をクリックして進めていきます。

すると、ページを作る画面に遷移するので、「新しく作る」というエリアをクリックします。
ページを作る画面

ページの新規作成(テンプレートの選択)画面に遷移します。
テンプレートは以下の6つが用意されています。

テンプレート選択画面

  1. ヘッダー(共通部分/最上部エリア)
  2. サイドバー(共通部分/レフトエリア)
  3. フッター(共通部分/最下部エリア)
  4. トップページ(メインエリア)
  5. 商品ページ
  6. HTMLメール

トップページ構成、レイアウト

今回は、ショップのTOPページをメインで作ると仮定し、「1」~「4」の部分を主に使用いたします。

人気コスパ抜群!Yahoo!ショッピングのサイトが作れるテンプレートはこちら

ヘッダー(共通部分)の作り方

ヘッダー(共通部分)をクリックし、今回はすでに用意されている「ベーシック[01]」というものを使っていきます。

ヘッダー作成

イチから作りたい場合は、白紙ページを選ぶ感じですね。

次に編集画面に移ります。

ヘッダー画像編集画面

画像をクリックすると、アイコン等が表示されるので、画像を編集したい場合は上記イメージのように「画像の編集」ボタンをクリックします。
アイコンの説明はカーソルを合わせると表示されるようです。

画像の編集ボタンをクリックすると、画像を編集するためのソフトをどれにするか聞かれるので、ここでは付属されている「イメージデザイナー」にチェックをいれて、エディター起動をクリックします。

外部エディターで画像を編集

すると、イメージデザイナーが起動します。

イメージデザイナーの画面

使い方は、マニュアルなどが用意されているので、そちらを見てもらったほうがわかりやすいと思いますが、何らかの画像編集ソフトなどを使ったことがある人だと、逆に操作性に戸惑い初めのうちはかなり時間がかかってしまうのでは?と感じました。

少し手を加えたものが以下のイメージです。

ヘッダー画像を編集後のイメージ

元々の型にはめて、少しいじった程度なのであまり大きな変化はありませんが、インテリアを扱うショップをイメージして簡易的に作成しました。

画像の編集作業が終わったら、上段のメニューエリアにある「保存」ボタンをクリックして保存します。

イメージデザイナー保存ボタン

しっかり保存できたらイメージデザイナーを閉じましょう。

閉じると、ホームページ・ビルダーECの画面に戻ります。
画面を確認すると、先程イメージデザイナーで編集した画像が反映されているのがわかります。

ヘッダー画像を編集後、反映確認

メニューエリアとその下のバナーも同様に編集をおこないます。
実際に編集したサンプルイメージは以下の通りです。

ヘッダーデザイン完成

画像を編集して作成する基本的な流れをご説明しました。
その他(フッターやサイドバーなど)のテンプレートでも、基本的な操作は一緒です。
サイドバーを作りたい場合は、ページを作るページから+新しく作るを選択し、テンプレートの選択でサイドバーを選び、編集画面に遷移後は、画像をクリックしイメージデザイナーで画像編集を行う流れです。

参考イメージとして、作ったそれぞれのデザインイメージを掲載しておきます。


人気コスパ抜群!Yahoo!ショッピングのサイトが作れるテンプレートはこちら

サイドバー(共通部分)/作成サンプル

サイドバーサンプル画像

フッター(共通部分)/作成サンプル

フッターサンプル画像

トップページ(メインエリア)/作成サンプル

メインエリアサンプル画像1

メインエリアサンプル画像2

人気コスパ抜群!Yahoo!ショッピングのサイトが作れるテンプレートはこちら

デザイン作成後の反映の流れについて

デザインが完成したら、「ストアに反映」ボタンから反映作業をおこないます。

ストアに反映

気を付けなければいけないのは、ホームページビルダー21ECから全て反映できないという点です。
この機能で反映できるのは、あくまで画像のみとなり、それ以外はストアクリエイターProという、ヤフーストアを構築する管理画面に入り、その中で、今回書き出されたHTMLを適切なエリアへ貼り付ける必要があります。

初心者の方だとこの部分で迷われる人もいるかもしれません。

ストアに反映ボタンを押すと、以下のようなウインドウが表示されるので、ここでは「Yahoo!ショッピング」にチェックを入れて、次へボタンを押します。
※テンプレート毎におこないます。以下の場合サイドバー(サイドナビ)で反映ボタンを押した場合です。

ページ出力、ストア選択

すると、画像の出力方法を選んでください、という表示になります。

画像の出力方法

今回は、テストでおこなうため転送設定ではストアアカウントのみ(sample)設定し、画像のアップロード方法は、「手動でアップロードする」にしています。出力先は任意。

転送設定

画像を直接アップロードする場合は、転送設定からFTP情報を設定し、画像のアップロード方法を「このアプリケーションから直接アップロードする」を選択します。

次に、「画像出力」ボタンを押すと、出力先フォルダで設定した場所に画像一式が書き出されます。

書き出された画像

最後に、HTMLの出力画面に移ります。

HTMLの出力、サイドバー

説明にもあるように、「クリップボードにコピー」をクリックし、HTMLをコピーします。
コピーしたらストアクリエイターPro(ヤフーストアを構築する管理画面)にアクセスし、適切な場所へ貼り付けます。

人気コスパ抜群!Yahoo!ショッピングのサイトが作れるテンプレートはこちら

ホームページビルダー21(EC)のメリット、デメリット

ここでは具体的に、ホームページビルダー21(EC)を使ってショップを作った場合のメリットとデメリットをお話します。

メリット

  • 慣れればデザインを簡単に作成できる
  • 直感的に操作できる
  • HTMLなどの知識が不要

デメリット

  • デザインに限りがある
  • 画像を作るたびに、画像編集ソフト(イメージデザイナー)を開かなければならない
  • HTML書き出しの際に、不要なHTMLが入ってしまう
  • 結局のところデザインセンスが問われる
  • スマートフォン用のHTML書き出しに不備がありそう
  • 画像のURLがhttp~始まってしまう
  • 画像が劣化する


人気コスパ抜群!Yahoo!ショッピングのサイトが作れるテンプレートはこちら

僕は制作者側の目線でいろいろと確認できるので、個人的にはデメリットが多くなってしまいました。

ホームページビルダー21(EC)は、初心者の方でも操作しやすく作ってある分、細かな部分や凝ったデザインなどができない感じです。
おそらく、ホームページビルダー21(EC)を購入した場合、多くの人が一緒に付いてくる画像編集ソフト(イメージデザイナー)を使うと思いますが、この中でデザインを完結しようとすると限界があります。

デザインは難しいもので、いくらソフトが使えるようになっても経験やセンスで大きな差が生まれてしまいます。なので、良いものを作るにはそれ相応の時間が必要になると考えられます。

また、ホームページビルダー21(EC)を使うメリットとしてHTMLの知識が不要という点ですが、中身を確認したところ最適化はされていない点に気づきました。
これはソフトの特徴かと思いますが、はやり簡単に作れる分、使用する際はそういった部分に目をつぶる必要があるでしょう。

PC用だけでなく、スマートフォン用のトップページも作ることができるようですが、
そこで少し疑問に思ったのが、スマートフォン用で書き出される「スマートフォン用HTML」です。

スマートフォン用HTML

HTMLの中身を確認するとわかるのですが、横幅が指定されてしまっています。
これだとスマートフォン表示で反映をしたときに、表示の崩れを起こさず綺麗に表示されるか、ちょっと不安になりました。

また、画像のURL先がhttpから始まってしまう点です。
これは、ホームページビルダー21(EC)自体が少し古いソフトなので致し方ない点ではありますが、現在ヤフーショッピングサイトは、SSL化になりhttpsから始まるURLに仕様が変更されています。

例えば画像のURLがhttp~始まっているものを反映した場合、エラーになってしまう恐れがあります。
そのため、httpsにすべて変更する必要があるんです。

そして、一番気になったのが画像が粗いというところです。
書き出した画像を確認してみると劣化している感じですね。
ネットショップでの商品画像やバナーは売上に大きく影響してきます。
画像が粗かったり、魅力的でないとお客さんはそれだけでも心配になり他のお店に行ってしまう可能性があります。

このあたりもホームページビルダー21(EC)を使う際は、注意すべき点だと思います。

人気コスパ抜群!Yahoo!ショッピングのサイトが作れるテンプレートはこちら

ホームページビルダー21(EC)では物足りない?

ホームページビルダー21(EC)を使用して気づいた点がもう一つあります。
それは、当方にご依頼いただくお客様の中でもホームページビルダー21(EC)のデザインを使用されている方が多数いらっしゃったということです。

ホームページビルダー21(EC)で作ったデザインで、どの程度ヤフーショッピングを運営されたのかは不明ですが、当方にコンスタントにご依頼のお問い合わせが来るということは、もしかするとソフトを使用している中で何か物足りなさを感じているユーザーさんがいるのかもしれません。

まとめ

ここまで読んでいただきありがとうございます。
初心者の方には、もしかしたら難しい内容もあったかもしれませんが、ホームページビルダー21(EC)を購入する際はぜひ参考にして頂ければと思います。

また、ホームページビルダー21(EC)の次のバージョンのものが出れば、僕が今回お話させて頂いたデメリットなども改善されているかもしれません。

いずれにせよ、使い方次第では簡単にデザインを作れることには変わりないので、気になった方はまず体験版からダウンロードして使ってみるのもアリですね。

人気コスパ抜群!Yahoo!ショッピングのサイトが作れるテンプレートはこちら

ヤフーショップ制作
オリジナルショップ作り

ヤフーショップ制作代行

ヤフーショップ作成、作り方でお悩みごとはございませんか?
ネットショップ制作等、10年以上の経験やノウハウをもとに、あなたのお店作りのお手伝いをさせて頂きます。お気軽にお問い合わせください。

この記事をお届けした
K Timeの最新ニュース情報を、
いいねしてチェックしよう!

シェアする

フォローする