PCトップページ(スマホ対応)の作り方

Biiino(ビーノ)のPCトップページ作成機能について学びましょう!
カスタマイズ性も抜群なので、お店の特徴に合わせて作り込んでみてくださいね。
レスポンシブデザイン採用でスマートフォンにも自動最適化されますよ!

先に他ショップの利用事例が見たい!という方はコチラ

目次

PCトップページ作成画面の構成

左メニュー

デザインテンプレートの変更やPCトップ作成に欠かせないパーツの追加など、全ての操作は左メニューから行います。

完成イメージ(右側)

画面右側にはリアルタイムに設定内容での「完成イメージ」が表示されます。
実際にお客様へと公開されるページもこのままの見た目となります。

デザインを選ぶ

まず最初に左メニューから「デザインを選ぶ」をクリック、お好きなデザインに切り替えてみましょう!

デザインはいつでも何度でも自由にご変更が可能です。
随時新しいデザインの追加を進めておりますので、季節やイベントに応じて変化を持たせてみるのもアリですよ(˚灬˚)ノ

お店の雰囲気に合ったデザインを選ぼう!

パーツを追加する

Biiino(ビーノ)を使いこなしていただく上で、最も重要なのがこの機能!

ここでは追加したいエリア、パーツをそれぞれ選ぶことができます。
どこにどのパーツを入れるのか自由に設定できるので、テンプレート感の少ないオリジナリティー溢れるトップページが作成できますよ。

まず、追加先のエリアを選びましょう

まずは追加したいエリアをヘッダー・ナビ・メイン・フッターから選択してみましょう。

ヘッダーやナビの場所がどこなのか分からない!という方にも安心して使っていただけるように、上の画像のように図を用いて表示しています。

図の四角はページ右側で表示している完成イメージ全体を表しており、黄色く色がついているところが該当するエリアなので、図も参考にしながら選択してみてください。

また、エリアによって選択できるパーツが異なるので色々触ってみてください!

各種バナー

各種バナー】を選択すると、お好きな画像を使ってクーポンバナーや商品・特集ページに繋げるバナーを作成できます。

またビーノでは無料で提供しているバナーもあるので、バナー画像の準備をしなくてもすぐにバナーを作成することができますよ。

1.表示タイプ

固定タイプスライドタイプの二種類からお選びいただけます。

【固定 ☓〜】を選んだ場合

固定タイプは画像を横一列に並べる機能で、ページにボリュームを持たせることも画像をまとめて綺麗に見せることもできます。

【スライド ☓〜】を選んだ場合

スライドタイプは横一列に画像を何枚載せるのか選択した上で複数の画像をスライド式で表示できるので、スッキリ見せたい場合に使うのがオススメです。
※スライドタイプを選択した場合、横一列に並べる画像の枚数よりも多くの画像を選択することで動きが出ます。

2.画像を選ぶ

表示タイプを選択したら左メニューを下にスクロールして緑色の【画像を追加する】をクリックし、さらに【画像選択】をクリックします。

画像は無料提供バナー・PC内画像・画像URL・楽天キャビネットから選択いただけます。
複数枚画像を選択する場合は、もう一度【画像を追加する】から一枚ずつ画像を選択してください。

お好きな画像を選択できたら右側に完成イメージが表示されます。
確認後【決定】を押すと左メニューが自動で閉じます。
特集ページなどに繋げたい場合は、該当するバナーをクリックして、リンク先URLをペーストし、【別窓で開く】にチェックを入れてください。

表示期間の設定について

表示期間を指定することで、楽天イベント(お買い物マラソンやスーパーSALE等)の終了とともに自動でバナーを非表示化でき、深夜対応の必要性がなくなります!

商品を選ぶ

商品を選ぶ】を選択すると、商品の種類を自動もしくは手動で選択することができます。

1.タイトルを設定する

商品パーツの上にタイトルをつけたい場合は【タイトルを設定する】にチェックを入れてください。
ここにチェックを入れると、自分でタイトル設定をしなくても下の【種類を選ぶ】の項目を選択するだけで自動で切り替わります。
選ぶ種類によってタイトルも変更されるので、毎回タイトルを考えなくても自動で設定される仕組みとなっております。

タイトルをテンプレート以外のものに変更したい場合でも自由に変更できるので、その商品にあったタイトルを考えるのもいいですね!

2.種類を選ぶ

こちらの機能は、6項目ある種類のうちから選択するだけで表示する商品を自動で選択される、とても便利な機能になっております!
例えば、新着/更新を選択すると、最近登録・更新された商品に自動で切り替わります。

個別指定について

商品を1つ1つ個別で指定したい場合は、【個別指定】の【商品を1つずつ選ぶ】から商品名を検索するだけで選択することができます。

また、商品名やキャッチコピーに記載されているキーワードからでも商品を選択できます。
同じく【個別指定】の【キーワードで指定】からキーワードを入力して、そのキーワードで【追加】するのか【除外】するのかもご自由に選択できます。

3.表示タイプを選ぶ

選択した商品の表示タイプを【四角型】、【丸型】、【タイル型】、【スライドタイプ】から選ぶことができ、さらに横一列につきいくつ商品を置くのかも決めることができます。

四角型に設定したときの見え方
四角型固定にすると、かっちりした印象になりますね。
丸型に設定したときの見え方
丸型は四角型よりも可愛い印象ですね!
タイル型に設定したときの見え方
タイル型はでこぼこした形になります。

四角型は余白を取りながらパーツの大きさがすべて同じになりますが、タイル型に設定すると、幅は一定ながら画像が小さい商品(例えば送料無料や新着商品などの種類に属さない商品)でも余白の大きさを変えず一定に保つ形になります。

スライドタイプに設定したときの見え方

四角型と丸型に関しては、固定タイプかスライドタイプからも選択できます。
スライド式にする場合は、選択した横一列の個数を選択した上でその下の商品表示行数を1以上にしないとスライドされないので、注意してください!

4.商品の表示行数と余白の設定

商品の表示行数を選択

商品の表示行数を変えると、商品一覧画像の大きさが変わります。
例えば、レビューの高い商品を一番目立たせたいから、5行に設定して大きく見せよう!といったことも可能です。
※スライドタイプを選択した上で表示行数を増やすと、スライドされる画面の枚数が増えます。縦幅は変わらないので、注意してください。

下余白を増やす

パーツとパーツの間隔を設定できます。余白サイズを大きくしてスッキリ見せたり、逆に余白サイズを小さくとってにぎやかに見せたりすることが可能です。

フリースペース

フリースペースは、その名の通り自由に記載できるスペースです。
HTMLやCSS、JSなどモール側で禁止されていない記述は全て可能ですが、HTMLタグやCSS等の記述方法などにつきましてはサポート対象外となります。
恐れ入りますが、店舗様責任にて作成していただけるようお願いいたします。

その他パーツについて

見出し、検索窓、店舗内カテゴリ、価格帯一覧、メルマガフォーム、営業日カレンダーに関しては基本的に設定方法が同じで、とても簡単にタイトルの変更や余白の設定などができます。
デザインテンプレートに沿ってテキストのフォントやカラーも変わるので、ぜひ試してしてみてください!

ベースカラーを変更

選択中のデザインテンプレートのカラーを変更できます。
パーツごとの個別カラー変更ではなく、すべて同系統色での変更となります。

テンプレートによって変更できる色・できない色またはカラーが変更されるエリア(背景や商品タイトルなど)が異なりますので、ご希望のカラーがない場合は他のテンプレートを設定してみてください!

このような同系色の中からお選びいただけます。

オリジナル背景を指定

こちらのスペースでは、背景画像をお好きな画像に変更できます。
テンプレートでデザイン設定していると、看板やヘッダー、メインなどのパーツはそのテンプレートデザインのままとなりますので、テンプレートと合わせてお使いいただけます。

【オリジナル背景を指定】は左メニューの中央付近にございます。

オリジナル画像は【設定する】にチェックをし、全面表示または繰り返し表示からお選びいただいた上で、【画像選択】から設定してください。

帯(縦)バナーを指定

ページの左または右端にバナーを縦1列で設定できます。
※こちらのバナーは装飾として背景に表示されますので、リンクを貼る機能はございせん。

また、特集・イベント用などのバナーと同じく、表示期間が設定することができます。

横幅は最大100pxまでとし、それ以上は自動で縮小調整されますが、縦幅に関しましては特に修正されませんので、お好みのサイズの画像をご使用いただけます。

SALEなどのイベント期間中は帯バナーで派手にしてみてもいいですね!

SEO情報を設定する

SEOとは

まず、SEOとは「Search Engine Optimization」の略で、日本語に訳すと「検索エンジン最適化」となります。
Webサイトの最適化を行い、オーガニック検索で上位表示されるようにするための施策です(オーガニック検索は検索結果画面に表示されるURLのリストのうち、広告枠を含まない部分を指します)。

この対策をしっかりと行うことで、お金をかけなくても検索結果上位に行くことができ、集客率アップやブランディング強化といった効果が見込まれます。
※恐れ入りますが、SEO対策の詳細に関しましてはビーノのサポート外となりますので、店舗様責任でお調べいただきたく存じます。

設定方法

SEO情報を設定する】をクリックするとすぐに専用の設定画面が表示されます。
この画面からショップタイトルと説明文を入力すると画面右に実際の検索結果ような形でプレビューが表示されます。
入力が完了したら、【保存する】を押して設定してください。

保存する

ここをクリックすると、ビーノ内で一時的に保存されます。
お客様に公開されることはないので、安心してご利用ください。

保存をせずにサイトを離れてしまうとせっかく設定してきたページが保存されない可能性がございますので、こまめに保存することをオススメします。

反映する

ページの作成が完了したら早速【反映する】をクリックして公開しましょう。

作成したページに問題がなければ更新完了画面に切り替わります。
実際にPCトップページを見たい場合は緑の【PCトップページを見る】をクリックして確認してくださいね。

こんなことが起きたら…

1.エラーが表示された

ページに未入力のものがあるとエラー画面が表示されます。

特にナビエリアは設定できるパーツが多いので、入力しないままパーツが置かれてるだけになっていることもあります。
編集されずにいるパーツは黄色い四角で置かれていますので、このエラーが起きてしまったらもう一度作成したぺージを確認してみてください。

2.反映されない

せっかくページを作成したのに反映されない!そんなときはリダイレクト設定もしくは新デザイン反映をお忘れかもしれません。

設定方法につきましては更新完了画面にリンクが貼ってありますので、こちらの説明を参考にして設定してください。

他店事例や今後の開発について

他店事例を見たい方はコチラ!

このリンクからは実際にご利用中の店舗様ページをいくつか見ることができます。
ビーノの機能を活かしてとても綺麗にページが作られているので、ぜひ参考にしてみてください!

ビーノの今後の開発予定を知りたい方はコチラ!

ここでは、ビーノの今後の開発予定が記載されています。
ここにないものでこんな機能があったらいいのに!と感じることがありましたらお気軽に開発部までお問い合わせください!

最後に

いかがだったでしょうか?

パソコンを最近触り始めた初心者様でPCトップページなんて到底作れない…と思ってしまうのは当然のことです。
自分だけの力でPCページを作成しようとするとHTMLを学んで、CSSも学んで、作成ノウハウも学んで、それからそれから…なんてかなりの知識と時間が必要になってきます。

しかし、ビーノを使えばコーディングやデザイン設定もクリックするだけで簡単に作成できることを感じていただけたと思います。

現在、ビーノではもっと使いやすく簡単に操作できるように開発部の方で新機能開発に向けて日々精進しておりますので、ご意見やご質問をぜひカスタマーサービスまでいただけたら幸いです。

知りたかった点は解決しましたか?

関連するFAQなど