SHElikes PROデザイナーの課題にて、LPトレースをしました。また、デザインの分析も行いました。
🔹使用ツール：Photoshop
🔹制作時間：トレース約7時間、デザイン分析約11時間
🔹目次
・制作物（トレース、スタイルガイド、PCとスマホのレイアウト分析）
・工夫点
・学んだこと
◾制作物
🔸トレース
🔸スタイルガイド
🔸PCとスマホのレイアウト分析
◾工夫点
◾工夫点🔸トレース
・ただ見本に合わせて要素を配置したりスポイトで色を持ってくるのではなく、デベロッパーツールを見て余白やカラーコードを確認しながら、細かい部分まで忠実に再現ができるように制作しました。
・ガイド線を活用し、要素が並んでいるラインをしっかり確認しながら制作しました。
🔸スタイルガイド、デザイン分析
・スタイルガイドと分析シートは、サイトでも使われている色とフォントを使い、統一感を出すようにしました。
・スタイルガイドでは、情報量が多いからこそ、左右上下の余白や各コンテンツの幅を均一にし、見やすくなるようにしました。
・レイアウト分析では、なるべく枠の幅を揃えスッキリ見えるようにしました。また、なるべく簡潔な文章で違いを記し、読みやすくなるようにしました。
◾学んだこと
・サイトは情報量が多い分、バナーと比べると使われている色やフォントサイズなども多くなっていましたが、調べるとちゃんとデザインの原則に従った作りになっていることがわかりました。例えば、「セクション間、見出しと本文の間などの余白」や、「見出し、本文などのフォントサイズ」に規則性があることで、「どこからどこまでがひとつのまとまりか」がわかりやすくなっていました。
・PCとSPの違いについて、PCは広い画面を活かした横並びが主で、SPは狭い画面を活かした縦並びになっていることがわかりました。ただ、アイコンや制作物などの情報量が少ないコンテンツについては2×3の表示になっている部分もあり、コンテンツの大きさや情報の優先度によって表示方法を変えることで、長くなりすぎずスッキリ読めると感じました。