楽天のトップページをRMSで自作する①

楽天の無料サービスだったSketchPageがサービス終了となったことをきっかけに、いままで避けて通っていた楽天のサイト制作をまじめに取り組んでみよう。
というコーナーです。
webサイト制作はいつも手探りで、まとまった勉強をしていなかったさいえ店長ですが、楽天出店も1年を過ぎ「ちゃんと勉強しながら、まとめていこう」と、いやいやながらもhtmlはけっこう好きかも…という気持ちを頼りに頑張ってみます。

自分用のメモでもあり、意外と、なんでも自分で作ってみたい私。
私みたいな稀有な方がおられたら、一緒に頑張りましょう~~。
(内容、雑かもしれないのでご了承ください)

まずは、全体をイメージしてみる

とりあえず、何もしなくてもいろんな設定ページをクリックしまくる私。
そして、ちょっと進んでは、すぐに引き返す・・・
今から作るつもりのトップページ全体像はこんな感じです。
すいません、ほんとに基本的なテンプレートにするつもりです。

1. 看板
2. ナビボタン
3. ヘッダー・フッター・レフトナビ(3は2か所あります。ほんとは3か所?)
4. 共通説明文(小)(※テキストのみ。必要あるかな?)
5. 共通説明文(大)(ここで特集ページや大事なお知らせもアリかと思います)
6. 目玉商品 (商品紹介のコーナー/各カテゴリーで変えられるのかな?トップに必要なのか?)
7. 目玉カテゴリ (各カテゴリページへの導入部分)
何もナンバリングされていない中央の空間は、『トップページ説明文』です。

各パーツに必要な情報と画像をまとめる

こういう制作はいつも好きな個所から始めてしまう私ですが、今回はすでにSkechPageで作ったしょぼいトップページがあり、(次はもっとしょぼいかもしれないけど)
全体を一新したいので、すべてを作りこんでから、アップロードしていこうと思っています。

今はこんな感じ↑
テンプレートに必要な文言を差し込むだけでした。

必要事項まとめリスト

1.看板

看板の画像はとても大事なので、すごく悩みます。
でも、せめて看板くらいは気軽にイメチェンしやすいように、サイズをメモしておきます。
<看板サイズ> 

  • PC用看板  横950×縦200ピクセル
  • スマートフォン用看板 横640ピクセル

2.ナビボタン

何をナビボタンにするか・・・これも悩ましいところ。
あまり気軽に変更しないので、慎重に考えたいです。

オリジナル画像でボタンを当てはめていくこともできるし、セミオーダーのように選んで作ることもできますが、どちらにせよ、けっこう手間はかかりそう。
自分の雰囲気を表現したいなら、オリジナル画像かな・・・

スマホ画面から見るとどうなるんだろ?

3.ヘッダー・フッター・レフトナビ

このエリアが個人的にはけっこう大事!と思います。
トップページのほかに、商品ページやカテゴリページでも共通でみなさんに見てもらうことになるので、できるだけ使いやすいものにしたいですね。

作業としては、htmlで各コンテンツを書き込む形です。
一応、作ったテンプレートは幾つか保存できるようなので、
編集しながら、プレビューできそうです。

とにもかくにも、htmlで制作、これが肝かな。
本当に制作出来たら、ブログで公開しようと思います!
それを目指して、頑張ります。
(楽天エンパワーメントプランの方への応援のつもりで・・・)

4.共通説明文(小)

説明用のリンク?テキストのみらしい。
どう使うのが、一番いいのか??
個人的にはデザインの邪魔になりそうかなって思います。

5.共通説明文(大)

ここでは、お店だけの特集ページやお店独自のおすすめなどができそうな、こちらはけっこう使える特集なのかな?と思うスペースです。ここもhtml編集が必要になってくるエリア。

まずは、ヘッダーですが、今のところはヘッダーを使っていません。
感触としては、看板があるので、webデザインで名案が浮かんだら、使ってみようかな。と思います。

6.目玉商品 7.目玉カテゴリーは商品を登録していく感じなので、
各商品ページができていたら、商品をURLをピックアップしていきます。

という感じで、ひとまず、必要アイテムなどをそろえつつ、
次回は、
webデザインしながら、htmlコードを作ってみる。
ということをやってみます。

それでは、また!

なんでこうなったのか、もやもやブログもあります↓

そんな・・・
さいえの楽天サイト
https://www.rakuten.co.jp/cayest/