【課題】LPトレース（SHE WORKS）

（１）制作情報

制作時期：2024年8月

制作時間：約15時間

使用ツール：Photoshop

制作の目的：

・Webデザインにおける基本的なビジュアルデザインの感覚を掴む

・Webデザインをする際に一定のルールに則ってデザインするということを学ぶ（スタイルガイド）

・Webデザイン特有のデバイスによるレイアウトの変化を学ぶ

（２）制作物

・LPトレース

SHE株式会社が運営する人材マッチングサービス「SHE WORKS」のLPをトレースしました。

→実際のページはこちら

・PC画面/スマホ画面のレイアウト分析

LPのターゲットと目的、PCとスマホのレイアウトで異なる部分の分析を行いました。

・デザインガイドライン

Chromeのディベロッパーツールを用いて、配色・タイポグラフィ・余白の分析を行いました。

（３）制作にあたって工夫した点

・細部までの調整

ただ要素をトレースするだけでなく、ディベロッパーツールを用いて余白やフォント、カラーなどを細部まで細かく確認し、調整を繰り返すことで、見本とほぼ同様のLPトレースを行いました。

・分析シート、ガイドラインのトンマナ

LPのトンマナに合わせてレイアウトやカラーを調整し、統一感のある見やすい資料を作成しました。

（４）制作を通して学んだこと

・レイアウトの規則性

Webページをフルでトレースすることで、レイアウトの構成やカラー・タイポグラフィ・余白等の規則性を学びました。

・操作性の高いUIの分析

・PCとSPでレイアウトの違いを分析することで、ユーザーへの読みやすさやUIの工夫をしている箇所をたくさん発見することができました。

・HTML / CSSの適切なマークアップ方法

ディベロッパーツールを使ってHTMLや CSSの記述をよく観察することで、適切なマークアップの方法を学ぶことができました。自分がWEBページを制作・実装する際の参考になりました。