初心者🔰のWebデザイン独学記録🐣✏️

その日の気づき・疑問点・進捗📝

#Day80 モヤモヤするから朝と仕事の合間に😭

#Day80

 

昨日最後ランキングが揃わず終了したが朝起きて気持ちを新たに作業したら10分くらいで揃った。

小数点も直した。

ここが合ってなかったのかな・・

 

昨日のフィードバックで、揃えたところは全体を選択して移動してたので

そこはズレないのかと(今更)気づいてそのように作業する。🥹

 

ショッピングのボタンを見る。

ボタンの四角の高さが年齢とおすすめだけ79.07になっていたので直す。

なんでやねん😅

ボタンの四角は高さ80に合わせた。ボタン全体グループの四角を見ると80.93・・・

ここも80にしておく。

80.93

幅986もおかしいよね?だから横に微妙な隙間あったのかな。

1000に合わせる。

横の隙間がなくなってピッタリ!

と思ったらさっき合わせたボタンのそれぞれの四角がまたズレた。

ボタン全体を囲ってる四角を変更するとそれに合わせてボタンのサイズが変わる。

で、ここも高さずれてた!

ガタついてる

揃ってないままでグループにしていたのかも。

だからずっと揃わない?

グループ解除して間隔など合わせて再度グループ化するとちゃんと幅が1000高さ78のグループになった!

 

よし

次はボタンの中。

ガラガラが若干上が切れていたので高さを調整。

カテゴリから探すの文字も調整して左右の間隔を16にする。

上下の幅は均等OK。

ひよこをガラガラと同じくらいに目視できるような大きさに変更。

予算から探すの文字とひよこの左右の余白は31に設定。

年齢から探すも同じ。

おすすめから探すは左右17の余白。

文字の四角の幅が大きい場合、外の余白を合わせても四角の中に余白があるからそれで広く見えたりするよね・・・?😓なるべく文字ギリギリの四角サイズにして調整した。

 

引きで見て変じゃないか確認・・・🧐

 

🌈進捗🌈

・コンテンツ幅それぞれ68

※おすすめ商品とアイテムラインナップはフィードバックを参考に目視で見やすい距離(

85目視設定)

・男の子ランキング女の子ランキング余白48に対し、アイテムラインナップは20

・見出しからボタンや画像までの距離45

・王冠と鳥OK

 

📌手付かずと気になるところ📌

・口コミ

・ボタンの下の余白とandmoreの下の余白が合っていない(でも見た感じそんなに違和感なし。74と53。むしろandmoreを上にこれ以上くっつけると変だと思ってる)

 

進捗

https://www.figma.com/file/gfoImPAq636rIrkYg8v6EU/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB?type=design&node-id=1%3A2&mode=design&t=K8toaUnPj5J9itDI-1