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

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

#Day28 デザインレビュー①完了。

#Day 28

 

デザインレビュー①続き。

 

whatfontの使い方についてアドバイスいただき、スマホ版のコピーをすることに成功🙌

スマホ版を表示させると指でタップするような丸いマークが出てきて、ずっとコピーできなかったが切り替えられることがわかった。

これはできないんだな〜ではなく、できるはずと思うようにしようと思った😅

 

また、Chromeがデフォルトのブラウザに設定されていなかったので設定した!

前に、送ってもらったURLを開くとSafariで表示されて、いちいちChromeで開き直したことがあった・・そういうことか・・・・・今更😂😂

 

デザインレビューの①が完了した!

 

https://www.figma.com/file/fD9Hofk6znana7mUrj7a7g/%E3%83%86%E3%82%99%E3%82%B5%E3%82%99%E3%82%A4%E3%83%B3%E3%83%AC%E3%83%92%E3%82%99%E3%83%A5%E3%83%BC%E2%91%A0?type=whiteboard&node-id=0%3A1&t=rQ8ThNj9jwLmhHO4-1

 

想定ユーザーが難しく悩んだ。

 

商業施設も運営していたり、ECサイトもあるが、、、

個人のお客さんを想定しているとしたらECサイトの表示が最後だし、全面に商品を出していないし、どちらかというと企業イメージのアピール!地元密着型の企業で信用と実績あります!の材料でECサイトなどのリンクを使っているように見えた。

・・・のでターゲットは個人のお客さんではないと推測。

 

あとフォントについてだが、早く慣れたい。😱

whatfontでせっかく数値が出てもピンとこないのが続いて、合っているかの検討がつかずなので、(whatfont使っているから合っているはずだけど本当に?と思う笑)フォント調べる作業はなかなかの無表情でやっている。笑

 

whatfontで出る数値メモ。

Weight:太さ Size:大きさ Line Height:行間 Color :色

 

分かりやすかったサイト

【Webデザイン初心者向け】フォントサイズ・行間の早見表 - 株式会社TANE-be|大阪・京都にあるWebサイト制作

 

なんとなく自分のワイヤーフレームを見てみた

WFスクショ

これの”All Item"でいうと右のバーに表示されている

自動となっているのが行の高さ。その隣の0%となっているのが文字の間隔?

 

太さは確か文字の詳細設定のweightからバーで調整できる🤨

サイズはテキストに表示されている32で間違いないので、

試しに今回のサイトレビュー①のInfiniteColorsと同じ137pxサイズにしてみた。

 

137サイズを確かめる

実際のはりまやのサイトと同じくらいになった。

ので、レビューで調べたサイズは合っているぽい。😂

 

フォントについて訳がわからなくなっているので整理しながら②も進めたい。