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

前回までの流れ

htmlの前に、やること

いつもの私なら、いきなり
<!doctype html>
とか書き出してみて、さーてどうする?と考えるのですが、多少失敗もしてきているので今回は、調査をもうちょっとはやってみようと思います。好きなwebサイトを作るためにじっくり準備する練習であり実践。

ノートにアナログで、だいたい入れておきたいこととかをメモしてみました。
(超ざっくりだし。今と同じだし)

いろんなwebサイトをチェック

本に載っているおしゃれなwebサイトや、
自分の好きなブランドのwebサイト、
好きなアーティストのwebサイト、
普段は好きだから見ている、という感じのサイトを自分のサイトにするなら…、
という視点で改めて見てみる。

ただそれだけのことですが、
後からトップページを変えるのはなかなかめんどくさいので、
こういう風にしたいな~ということは、なるべく多めに要望をまとめておくことにします。
だいたいいつも、やってみると、「なんか違う」ということも多かったです。

今回はwebデザインもざっくりやってみようかと。
参考にしてみたおしゃれなサイト↓
https://fg.fhws.de/
https://ledadashop.com/
https://www.morinaga.co.jp/yomu-cocoa/ (森永の読むココアのページ大好きです)
https://www.nagatanien.co.jp/brand/ochaduke/ (永谷園のお茶漬けページも最高!)
https://onimaga.jp/ (私が一番読んだブログサイト 写真がいつもきれい 何気にplaylistのコーナーが好きだった・・・もうやっていなさそう・・・)

という感じです。

画像サイズをまとめて、準備する

今、まとめている画像サイズを記しておきます。全部楽天トップページ等に関するサイズ。
間違っていたら、訂正します。

①看板 PC 950x200px
スマホ 横640x 135px~
 スマホは縦幅が少しあってもいいなって思います。
 なので、16:9 (640x360px) や、5:3 (640x384px)
 などで、画面をたっぷり使うのもよさそう。

②ナビボタン 現在使用しているサイズ 185x60px
 でも、ナビボタンを長方形ではなく、〇でも作ってみたい。と感じてます。
 その場合は160pxくらいかな。。。まだ未定。
 ナビボタンは5つくらいを設定します。
③フッター 決済方法の画像は店舗運営ナビからダウンロード可。
 それぞれ多少サイズがバラバラなため、70~90pxくらいで統一して、書き込みしたい。
 メモ:<img src=”画像URL”alt=”決済方法”width=”80″ height=”80”>
⑤共通説明文(大) 現在使用しているサイズ 585x120px
 個人的には、このコーナーはサイズをいろいろ試してもおもしろいかな?
 と思います。その特集の盛り上がり方を表すように変えてみたいな!と思います。


トップページ説明文
PC用とスマホ用に分かれています。
現在使っている画像サイズ
 PC 330x225px (多分、画像を作る段階で白い余白を入れてる)
 スマホ 266x110px (こちらはデザインも変えていて、余白なしかな~)
この画像は変えると思います。多分。


微妙に呼び名が変わっていたりするので、「え?」となりますが、負けずに頑張ろう。
現在はここにカテゴリコーナーにリンクする写真を並べていますが、
次もやっぱりおすすめの商品やカテゴリを並べたい。
でも、上のサイズにするかはわかりません。

使えるhtmlをチェック

楽天はいろんなサイトで書かれていることですが、
CSSファイルが使えなくて、htmlで、デザインを構築しないといけないようです。

<table>とか<font>とかが活躍します。
という記述を見かけました。
<margin><padding><a href>とかも重要かな?

店舗運営ナビでももちろん使用可能htmlは検索できます。

ま~~、私は、そんなに凝ったことしないので、大丈夫かな・・・
きっと大丈夫だよね???

フッターの文言、カテゴリーの整理

これは現在のものを追加・変更したいところをまとめておく。
あまりしょっちゅう変更するのは面倒なので、できるだけまとめておきたい。

という感じで、準備はこんな感じでしょうか。
あー、デザインする前って、なんでこんなに億劫なのか。
いや、全然複雑なことする予定ないのに、なんでなんだろ。。

と、こんな感じで超いやいややりますが、ブログに書いた以上はやります。
ほんとに素人ですからね。
でも、素人っぽくて奇跡的にかわいい。となりますように。
それでは、
おそらく次回はwebデザインとか、使う画像紹介。
その後、htmlでサイドバーとフッター等に挑戦。

あーーやだよう。
サイドバーうまくいかなかったら、どうしよ。
思った以上に簡単でありますように。

ちょっと予告・・・

途中経過、、、
設計図となるwebデザイン中。
まあ、こんな感じになると思います。

まだまだ不安!!!