【実践課題】LPトレース

【目次】

・概要
・目的
・スタイルガイド
・トレース
・PC版とSP版の比較分析
・頑張ったところ
・制作を通して学んだこと

・概要

【制作期間】4時間
【使用ツール】Photoshop

・目的     

・Webデザインにおける基本的なビジュアルデザインの感覚を掴む
・Webデザインをする際に一定のルールに則ってデザインするということを学ぶ(スタイルガイド)
・Webデザイン特有のデバイスによるレイアウトの変化を学ぶ

・スタイルガイド

・トレース

・PC版とSP版の比較分析

・頑張ったところ

1.ディベロッパーツールを使用
トレースでは、ディベロッパーツールで1つ1つの要素を細かくチェックして見本の画像を再現できるように取り組みました。

2.CSSを学びデザインに起こす
今まで使ったことのないCSSについても、どのような効果があるかをWEBで検索して、Photoshopの図形でどうすれば再現できるかを調べました。（box-shadow、linear-gradient、Var関数まで再現しました）

3.フォントや図形の細部までこだわりを持って再現
フォントや図形の不透明度もしっかり確認して再現することができました。

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

実際のLPサイトをトレースすることで、LPサイトの各コンテンツがどのような順番で構成されているかを学ぶことができました。バナー制作と同じように、LPもターゲットの目的を達成するためのユーザーストーリが考えられ、そのストーリーに沿った内容、順番でセクションが構成されていることがわかりました。

また、LPサイトの一般的な余白の付け方も学ぶことが出来ました。1つのWEBページの中で余白のルールを設定して統一することで、各要素が整列されて見やすくなり、各セクションがどこで区切られているのかも明確化できることがわかりました。