文系40代♀がIT企業を目指すブログ

40代になり本格的にプログラミングの勉強をはじめてみました。なんとかしてお金にならないかと考えながらがんばっています。

【Bootstrap】ラフの通り仕上がった【楽天スマホ】

 楽天スマホサイト、なかなか時間を作ることができなくて、散歩後、ごはん前の1時間くらいを利用して少しずつ作っています。

 

汚すぎるラフ

f:id:whiteandpeach:20191105002642j:plain

 

上の方

f:id:whiteandpeach:20191125000531j:plain

 

この部分なのですが、楽天出店者が無料で使えるSketchPageというソフト

service.rms.rakuten.co.jp

があるんですが、それで作っています。

商品リンクをイチイチ画像から作ってると時間がかかってしまうんですが、こちらのソフト、商品検索から画像、タイトル、価格を取得できます。

自分でこういったシステムを構築したかったけどやっぱり無理だし無料なので使わせてもらってます。

 

カテゴリ部分

f:id:whiteandpeach:20191125001046j:plain

上手くデザインできず、こんなシンプルバナーになってしまいました。

フォントは「FOT-スーラ ProN」です。以前はモリサワフォントを契約していたのですが、使う頻度など考えるとコスパが悪いと感じ、Creative Cloudで提供されているフォントを利用することにしました。

 

価格帯からさがす

f:id:whiteandpeach:20191125001510j:plain

色が変。。

 

あとやってないこと

・カテゴリにリンクを貼っていない

・スライドの大カテゴリを作ってない

 

BootstrapのスライドはCarouselで簡単にできそうではあります。

なんかおしゃれにしたいけど、デザインセンスがない私が作るとやっぱりイマイチになりそうなので他のサイトで勉強してから作りたいと思います。

 

他にスマホサイトに必要な内容があると思うんですが、最低限はこのあたりで良いかなと思います。

なんせ、今のスマホサイト(楽天テンプレート)はカテゴリの数に制限があり、全部掲載しきれていないんです!!

そこを回避したいのと、本当はもう少し商品の写真を掲載したいです。

価格帯のところは必要なのかな…とも思ってしまいます。

また時間を見つけて更新していきたいと思います。

 

過去の記事

pg.whiteandpeach.com

 

pg.whiteandpeach.com