【課題】WEBサイトトレース

OVERVIEW

SHElikes PRO デザイナーの3つ目の課題でWebサイトトレースに取り組みました。また見本Webサイトの「配色」「フォント」「余白」「PC版・SP版のレイアウトの違い」の分析も行いました。 使用ツール:Photoshop

YEAR 2025


1.Webサイトトレース(制作期間:2週間)


2.スタイルガイド

4.PC版とSP版のレイアウト分析

5.ターゲットと目的、ユーザーストーリー考察

◆ターゲット:企業の採用担当者

特に即戦力を求めており、「業務量が増えて対応できない」「求めている人材が採用できない」「ITに知見のある人材が不足している」「トレンドの変化に対応できない」といった課題を抱えている採用担当の方。

◆目的:即戦力となる人材をマッチングするサービスの内容を理解してもらいサービスの利用を促すこと。また、サービスを利用してもらい最終的に企業の採用に関する課題を解決すること。

◆ユーザーストーリー:

IT人材不足のため採用活動中だが、通常業務と並行して採用を行っているため業務量が多く採用活動にあまり時間を割けない。時間や労力をかけずに適切に人材確保したい。

SHE WORKS for Biz のマッチングサービスを利用することで、効率的に採用を進めたい。

6.制作で学んだこと

・トレースしていく中でWebサイトにおける文字サイズ、余白、配色といった基本的なデザイン原則を学びました。これらをスタイルガイドとしてまとめることで、デザインの統一感を保ちながら効率的に制作を進められるようになることを学びました。

・デベロッパーツールを積極的に利用することで、ピクセル単位での正確な調整ができることを学びました。また、HTMLの構造を把握してから要素を探すことで、作業の効率が向上しました。