【課題】LPトレース

◆トレースしたLP

SHE 株式会社が提供する「SHE WORKS」のLPをトレースしました。

引用元：https://sheworks.shelikes.jp

◆デザインガイドライン

◆PCとスマホでレイアウトが異なる箇所の分析

◆トレースしたサイトの分析

１．ターゲット：人材を探している企業の採用担当者

２．目的：ターゲットの企業にSHE人材が認知され、問い合わせをいただくこと。

　　　　　　さらに、SHE人材の利用につなげること。

３．ユーザーストーリー

①人材を探している担当者が検索エンジン等でSHE WORKSのページにたどり着く。

②「即戦力人材のマッチングサービス」というワードと前向きで明るい印象を受ける女性陣の写真に目を引かれ、ページをスクロールする。

③問いかけからの解決策提案で、ますますページに引き込まれる。

④具体的にどう解決するのかその手法、対応可能な業務の範囲、事例の紹介が続き、まずは問い合わせてみよう、という気持ちになる。

⑤お問い合わせフォームに入力する。

◆制作を通して学んだこと

〇配色

• アクセントカラーが多く見えるが使用する場所を絞ることで、Webサイト全体では落ち着いた印象を受ける。
• 色の不透明度を変えることで受ける印象は変わるものの、同じカラーを使っているため全体的にまとまって見える。

〇フォント

• Noto Sans JPやBrandon Grotesqueはフォントの太さの種類が豊富で、同じフォントでも太さを変えることで印象が変わるが、全体的な読みやすさやまとまりが損なわれることはなく、作り手にも読み手にもメリットが多いフォントである。
• 大見出し、中見出し、小見出し、本文でフォントサイズや太さが概ね決まっており全体的に読みやすく、またそれぞれのジャンプ率を高くすることでメリハリがつき、重要な部分を読んでもらいやすくなっている。

〇余白

• marginは文章のまとまり同士等、小さいまとまりの余白で使われていることが多く、サイズも小さめである。
• paddingはセクション等の大きなまとまりの余白で使われていることが多く、サイズはmarginに比べて大きめである。

〇学び

　これまで、なんとなくでしか見ていなかったサイトが、余白やフォントサイズ、カラーなどのそのページでのルールに従い制作されていることで、読みやすい工夫がされている、ということを初めて知りました。

　ルールに従うことで、読み手にもわかりやすく、コーディングの作業もしやすくなるので、それらを意識したデザインを制作しなければならないことが理解できました。

　今後は、コーディングも学びつつ、作業しやすく読んでもらいやすいデザイン制作ができるように励みたいと思います。