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

OVERVIEW

SHElikes PRO デザイナーの課題にて制作しました。デベロッパーツールを使用して、フォントサイズや余白など細かな部分も全てトレース。スタイルガイドの作成、PCとSPのレイアウトの違いなどWEBサイトを作る上での基礎を学びました。

YEAR 2025


制作時間・使用ツール

制作時間:スタイルガイド 6時間/トレース 4時間

使用ツール:Photoshop

課題要件

ユーザーストーリー

スタイルガイド

WEBサイトトレース

PCとSPのレイアウトの違いについて

工夫したこと

課題を通して学んだこと

この課題では、WEBサイトの構造を細かく分析することで、デザインにおける「情報の整理」の大切さを実感しました。特に、情報量が多い場合は、あらかじめルールや優先順位を決めておくことで、ユーザーが使いやすい設計につながるという点を学びました。

また、検証ツールを使って余白やサイズを数値で確かめるプロセスを通して、これまで感覚で見ていた部分を客観的に捉えられるようになりました。数値として理解することで、より意図のあるレイアウトを考えられるようになったと感じています。

今後の制作では、今回学んだ「情報整理の考え方」と「数値にもとづく検証」を意識し、ユーザーにとって見やすく、伝わりやすいサイト作りに取り組んでいきたいと思います。

WEBSITE