WEBページトレース

【所要時間】合計 約20時間
【使用ツール】Photoshop
【制作範囲】Webページのトレース制作・分析結果

目次

①トレースしたWebページ
②デザインガイドライン
③レイアウトの分析
④ 制作を通して学んだこと

①トレースしたWebページ

今回は、「SHE WORKS」のWebページをトレースしました。

②デザインガイドライン

ページ上で使われていたカラー、フォント、文字の大きさをまとめました。

③レイアウトの分析

PCとスマートフォンでレイアウトが異なる部分を分析しました。

④ 制作を通して学んだこと

■サイトの配色やフォント、文字の大きさなどを把握する

バナートレースの課題から応用できる部分が多くありました。配色やフォント、文字の大きさなどを分析することで、サイト全体の中で何を一番目立たせたいのかが理解できました。あしらいなども図形を組み合わせて作成し、トレースを行いました。

■PCとスマートフォンの違い

スマートフォンの形状に合わせてPC版を縦長に作成するだけでなく、余白なども狭くして全体的な圧迫感を減らして見やすくなっていることに気がつきました。Webページを制作する上で、途中で離脱させないようにあしらいや画像を用いるなどの工夫がありました。