【LPトレース】

【所要時間】約20時間

【使用ツール】illustrator

| 目次

・制作物

・工夫したポイント

・今後に活かせること

| 制作物

「SHE WORKS」というWebページをトレースしました。

トレース元のサイトはこちら

◾️スタイルガイド

◾️PC/SPの違いについて分析| 工夫したポイント

◾️紙に書き出して整理し、効率的にスタイルガイドを作成

スタイルガイド制作では、まず紙に要素をすべて書き出して視覚的に整理してからデジタルに落とし込む方法を取りました。このアナログステップを挟むことで、見落としや重複を防ぎ、情報設計をスムーズに進めることができました。

◾️トレースを通じてデザインの意図を読み取る力を養成

Webページのトレース作業を丁寧に行うことで、レイアウトや余白の取り方、配色のバランスなど、デザインの裏にある意図やルールに気づくことができました。表面的な模写ではなく、構造を理解しながら手を動かしたことがポイントです。

◾️PCとスマホ、それぞれの特性に合わせたUI分析

同じWebサイトでもPCとスマホでの見え方・使われ方が異なる点に着目し、レイアウトや要素の大きさの違いを比較。特にスマホでは視認性や操作性を重視し、余白やフォントサイズの調整がUIの印象を大きく左右することを実感しました。

| 今後に活かせること

◾️スタイルガイドを通して学んだ「統一感」の重要性

フォントや色、ボタンなどの要素を体系的に整理するスタイルガイドの制作経験を通じて、デザイン全体の統一感がユーザーに与える安心感や使いやすさにつながることを実感しました。今後の制作でも、ルール設計を意識したデザインを心がけていきたいです。

◾️レスポンシブデザインの考え方を実践的に習得

デバイスごとに適したデザイン設計が必要だという気づきを得たことで、今後はPC・スマホ両方の使用状況を意識したレイアウト設計やUI構築を意識的に行えるようになりました。

◾️意図を汲んで再現する力が、再現性と応用力に

トレース課題を通じて、デザインを単に「真似る」のではなく、「なぜこのような構成になっているのか」を考えながら再現する力が身につきました。今後は、良質なデザインから応用可能な法則を見抜き、自分のデザインに取り入れる視点を持って取り組んでいきたいです。