LP分析【課題制作】

制作したもの

トレース

課題で指定された「SHE WORKS」をPhotoshopを使用してトレースいたしました。

■SHE WORKS：https://sheworks.shelikes.jp/
※SHE株式会社（女性向けキャリアスクール「SHElikes」を運営）が展開する、法人向け人材紹介サービスサイトです。 

スタイルガイド

デベロッパーツールを使用して、WEBサイトの色・タイポグラフィ・余白をチェックし、スタイルガイドにまとめました。

たくさんの色やグラデーションが使われているサイトでしたが、コードを確認することで、実際にコンテンツで使われている色を見つけ出し、アクセントカラーとして整理いたしました。

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

トレースしたサイトの【ターゲット・目的】分析

トレースしたサイトのターゲットや目的を自分なりに分析し、ユーザーストーリーをまとめました。

頑張ったポイント

スクリーンショットからスポイトで色を取るのではなく、実際のコードでカラーコードを確認し、角丸についても検証ツールで調べた数値を使ってPhotoshopで正確に再現することを心がけました。 元のサイトを忠実に再現するため、1px単位で注意を払いながら制作しました。

今回の課題を通して学んだこと

今回の課題を通して一番学んだのは、コードの読み方や検証ツールの使用方法です。Webサイトが数多くの要素によって構成されていることを、改めて実感しました。基本的なものから複雑なものまで、様々なコードを積み重ねることでWebサイトが実装されていることを再認識いたしました。 

また、カラーやタイポグラフィ、余白の分析レポートをまとめる中で、「感じたこと」を言葉にするのはとても難しいと感じました。感覚的に「見やすい」「統一感がある」と思っていても、それを具体的に説明するためには、デザインの意図や効果をきちんと理解する必要がありました。同じテーマでも、誰に向けたサイトかによって与える印象は変わるため、制作時には「誰に・どんな目的で」デザインするのかを意識することが大切だと再認識できる課題でした。