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

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

#Day18 WFのサイズについて・・!😱

#Day18

PC版のサイズの添削をいただき、直した!

 

右上のパーセンテージを100にすると実際の大きさと聞いて見てみると、

全てがおっきい!😂という感じで見にくかった😅

(カートに入れるの文字も大きすぎて購入ゴリ押しみたいだった笑)

 

まずPCだと標準の文字の大きさが

14~18pxくらい。

見出しで20〜32pxくらいとのこと・・。

 

どこから直していいのか分からなかったので、一旦一部添削してもらった下の画像を真似して直していく。

添削画面

これを見ると全体のサイズが"1082✖️851"になっていたのでそのくらいの全体のサイズ感で、文字の大きさは先程のサイズにしていこうと判断。

手探りでの直し開始・・💦

 

いくつかのコンテンツをグループ化してサイズを縮小

文字の大きさをそれぞれ変更していく

100パーセントの画面とプレビューで確認

画像や四角の大きさを調整

 

⌘とピリオドで全体表示できることが分かったので、それで確認。

あとプレビュー機能を発見したのでそれで確認。

(商品詳細のプレビューだけ何度やっても1ページ目しか表示されなくてよく分からなかった。グループ化したりしているのが原因かも🥲)

 

全体画面の100%での確認

 

プレビュー機能発見

 

プレビューで見るとサイドが余白になっていたので、Figma上でのフレームの横幅はそのまま反映されるでいいんだよなぁ。

なので画面いっぱいに表示したい箇所はFigmaでも横幅いっぱいを使って良さそう・・?🤨

縦の画面はスクロールすれば見れるが、中途半端なところで画像や文が切れたくないならプレビュー見ながら調整・・?🤨

 

一旦、サイズを重視して直した。

 

編集している時は小さそう・・と思うが、プレビューで見るとサイズに関してはちょうど良い💦最初からプレビューを意識して作るべきだった。スマホ版のプレビューも見てみよう。

 

TOPページPC直し

https://www.figma.com/file/5twgn539P75d93XuymkjmE/TOP%E3%83%9A%E3%83%BC%E3%82%B8PCWF%E7%9B%B4%E3%81%97%EF%BC%91-(%E3%82%B3%E3%83%94%E3%83%BC)?type=design&node-id=0%3A1&mode=design&t=iOWrm4oOTrhaDUVe-1

 

 

商品詳細PC直し

https://www.figma.com/file/peuk9yrY8UCjWXVCGlhpfv/%E5%95%86%E5%93%81%E8%A9%B3%E7%B4%B0PCWF-%E7%9B%B4%E3%81%97%EF%BC%91?type=design&node-id=0%3A1&mode=design&t=xFxu6SizTwGsXeaH-1

 

TOPページ、全体画面を見て思ったがメイン画面とコンセプトが連続で画像でのコンテンツなので、コンセプトが目立たなくなりそう。

一番上をコンセプト→探すボタン→ランキング→今メイン画面で考えていたコンテンツ表示(おすすめ・ショップについて・口コミランキング)

のほうがいいかもとよぎる。また変更したパターンも作って見比べる。