こんにちは！楽しいECです
私は10年以上、アパレルジャンルのネットショップの運営に携わる仕事をしています
今回は
楽天GOLDのスマホトップページの作り方について解説します
楽天GOLDって自由にページを作れるって聞いたけど
初心者の方はどうやって作ればいいか全く分からないですよね
HTMLやCSSの知識などはこのページでは
割愛させていただきますが
楽天市場の中でページを作る際、注意しておくべき点を
中心に書いてみます
この記事を読むと
|
等が分かります！よろしくお願いいたします！
楽天GOLDのトップページは自由にサイトを作れる！
何から始めたらいいか全然分からなくて、、
おおよその流れを解説していきます
楽天GOLD（ゴールド）とは
店舗のサイトを自由に作る為のネット上のスペースを提供するサービスです！
楽天GOLDの中では自由にページを作ることができますので、制限なく作りたいページを作ることができます！
しかも導入するのは無料（最大1GBまで）ですので
気になる方は是非試してみてください！
楽天GOLDとRMSでは何が違う？
楽天GOLDなしでも店舗のサイトを作ることはできますが制限が多く、
制限の中でページを作らなきゃいけません
楽天GOLDだとRMSでは使えない、CSSやJavascriptなどが使えるため
できることが劇的に変わります！
特にスマホページだとかなり色々できて
例えば、ヘッダーメニューがスクロールしても付いてこさせたり、
出典:https://www.rakuten.ne.jp/gold/mobacaba/
モーダルウィンドウという、
ページを開いた時にバナーが出て来るようにできます！
出典:https://www.rakuten.ne.jp/gold/mobacaba/
さらに、レスポンシブデザインという
PCでもスマホでも対応できるページを作ったりもできます！
クオリティーに高いデザインのサイトや
容量をいっぱい使うサイトを作りたいのなら楽天GOLDはピッタリかなと思います
楽天GOLDでスマホトップページを作ってみよう！
まずは、お店のトップページを作ってみたらいいかと思います！
トップページは
現在PCとスマホのふたつのデバイスがありますので
両方のサイト、トップページをふたつ作る必要があります
なぜ、PCとスマホの2つのトップページに分けなければいけないかといいますと、
インターネットサイトと言えどもPCとスマホでは見え方が全然違うからです
PCは画面が大きいので
1画面に多くの情報や文字を載せられます。
そしてマウスで操作するのが特徴です
それに対してスマホは
画面が小さいので、1画面の中の情報は少なくなってしまいます
そしてPCは、マウス操作に対してスマホは指で操作されます
楽天GOLDのスマホトップページの作り方
実際にトップページを作るときですが、
PCのページは index.html
スマホページは index_smart.html
というファイル名でHTMLファイルを作るようにしましょう
HTMLファイルの作り方はここでは
全部説明できませんので詳しく書けませんが、
まずは初心者の方は
テンプレートをもとに作られるといいと思います
テンプレートは無料、もしくは安い値段でダウンロードできるものがたくさんあり、
インターネットで簡単に探すことができますので
テンプレートをもとに、自分の思い描いていたページに近づくよう、作っていってみて下さい
やはりPCのページとは違うものになる為、
プレビューをみながら”見た目”を意識して作るのが一番かと思います
スマホトップページをFTPにアップロードする！
HTMLファイルが完成したらFTPで楽天GOLDにアップロードしていきます
FTPの接続に関してはこちらの記事でも解説しています
URLが
https://www.rakuten.ne.jp/gold/お店のURL/index.html
https://www.rakuten.ne.jp/gold/お店のURL/index_sp.html
になりますので
FTPではここのアドレスの場所に
一番階層の浅いところにHTMLファイルをアップロードするようにしましょう
また、編集の方法も一緒です。
htmlファイルを直したら、同じようにFTPにアップロードするだけです
作成したトップページを楽天のトップページに設定する
HTMLファイルを楽天GOLDにアップしただけでは
終わりではありません
楽天GOLDで作ったトップページにするための切り替えを
RMSの中でする必要があります！
デザイン設定 > 3 PC・スマートフォン共通設定 > トップページ切替設定
PCとスマホも下を選択して確認画面を押せば完了です！
実機で確認して正しく表示されるか見てくださいね！