【課題】LPトレース

｜制作概要｜

　制 作 期 間  ◆ トレース作業 約1 週間・スタイルガイド、分析資料作成 約 1週間
　制 作 範 囲  ◆ トレース作業、分析資料作成
　使用ツール ◆ Photoshop
　トレース元サイト ◆ SHE WORKS（シーワークス）

｜目次｜

　1. LPトレースの目的
　2. 制作物
　3. 頑張ったポイント/工夫したところ　

    4. 制作を通して学んだこと

1. LPトレースの目的

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

2. 制作物

① LPトレース

②スタイルガイド

③PCとスマホの違いの分析

３.頑張ったポイント/工夫したところ

・検証ツールでフォントや余白のサイズ配色を1つ1つ確認しながらトレースしたことで
　見本同様のトレースを完成させることができました。

・デザインのあしらいや装飾を検証ツールで確認することで、グラデーションや
　ドロップシャドウ、不透明度をcssでどう構築するのか学ぶことができました。

・スタイルガイドやまとめ資料はデザインの基本原則を意識して作成しました。

４.制作を通して学んだこと

• 余白や要素のサイズに８の倍数が使われていました。余白は適当に決められているので
  なく、ルールを設けて余白のサイズを統一することで見やすく美しいデザインになる
  ことを学びました。
• WEBサイトでは、コーディングする必要があることから数字や規則性が大切なのだと気づきました。
• セクションを交互に色分けすると、飽きないでどんどん読み進めることが出来ること、色は不透明度を変えると統一感が出ることを学びました。
• 今回はお問い合わせをしてもらうことがゴールのため、PCでもスマホでも押してもらいたいボタンが追従して常に表示されることは、ユーザー目線でも優しい設計であり、企業側にもお問い合わせ率を高められる効果があると学びました。