skmarket / oshiro

https://skmarket.github.io/oshiro/
0 stars 0 forks source link

fb #1 #1

Open motoya-k opened 3 years ago

motoya-k commented 3 years ago

全体を通して

すごいいい感じだね! 構成もいい感じだと思います。お城の詳細ページができるのが楽しみ 👀

以下かなり細かいところまで、全力で fb してます。 もし、業務でサイトディレクションを僕が担当したときに言うだろうなーと言うことを言っているので、細かいと感じることも多いかもけどよろしく!

motoya-k commented 3 years ago

UX について

1. サイトの全体構成をパッと理解できるようにしよう

ユーザー体験的に、ぱっと見サイトの構造が把握できないかなと思った。 https://www.shirofan.com/ 例えばこのサイトだと、上にグローバルナビゲーションがあることで、

Screen Shot 2021-06-28 at 9 39 31

何について紹介しているサイトかが理解しやすいね。

2. ターゲットについて

このサイトを読む人はどんな人なんだろうか。 城に詳しくない人に読んでもらうのであれば、最初のカテゴリがどういう分け方なのか分からないなーと思った。

ターゲットにもよるけど、場合によっては、そういう説明もあるといいかなと思いました 🤚🏻

UI について

1. first view について

全体として少しサイズが大きいかなーと思います。 ユーザー的にもファーストビューにはこだわるべきで、 ファーストビューでしっかり、誰にどういう情報を届けることができるサイトなのかわかるようにしておこう! https://digitalidentity.co.jp/blog/creative/above-the-fold.html

2. clickable について

押下可能な要素へのリアクションが少ないかなと思います。 押せそうなものとそうでないものをはっきり区別させよう!

3. メンタルモデルについて

メニューの出方が独特だなーと思った。 メンタルモデルと言うものがあって、ユーザーがこれまで経験した「こんな感じで動くだろう」から遠くなりすぎないほうがいいと思います! https://uxmilk.jp/90974 pc 版であるのであれば、pcっぽいUIにしよう。https://www.pinterest.jp/ や https://dribbble.com/ 、サイトまとめサイトとかで調べてみるのがおすすめ! sp 版(スマホ)であるのであれば、chrome dev tool とかを使ってスマホでの見え方を確認してみよう。結構崩れているから、スマホにも対応した UI になるようにレスポンシブデザインを取り入れてみるといいと思います!

motoya-k commented 3 years ago

実装について

前話したクラスのところや、コードフォーマット揃っていて最高だね。 以下さらに良くなるところ、コメントしました!

1. フローコンテンツとブロックコンテンツについて

a タグの中に h タグ入れるのと、h タグの中に a タグ入れるの、どっちがいいだろうか! 考えてみて欲しい!

https://github.com/skmarket/oshiro/blob/70bef4c4855cce337328241e038ab151921f2938/hirosaki.html#L13-L15

2. p タグ v.s. li タグ

ここ p タグが適切かな? p はパラグラフ = 段落 だからちょっと意味が違うかも。 これが正解というのはないんだけど、html としての構造の正しさにも気を配れるとより Good!

https://github.com/skmarket/oshiro/blob/70bef4c4855cce337328241e038ab151921f2938/hirosaki.html#L23-L35

3. h1 はページに1つ!

https://github.com/skmarket/oshiro/blob/70bef4c4855cce337328241e038ab151921f2938/hirosaki.html#L14

h1 はページに1つまで!なんでかも調べてみて!

4. 変数名にこだわろう

https://github.com/skmarket/oshiro/blob/70bef4c4855cce337328241e038ab151921f2938/menu2.html#L23

このあたりのクラス名とか、クラス名を読んだだけで何を表しているかわかるのが理想! 12 とかのマジックナンバー(書いた人しか分からない数字)は極力避けるようにしよう!