D17f79766145baf0

【課題】LPトレース

OVERVIEW

SHElikes MULTI CREATOR COURSE 3つめの課題。①LPトレース②スタイルガイド③スマホとPCでのレイアウト分析まとめを作成しました。Webページにおける文字サイズやレイアウトの組み方、配色の感覚を養いました。

YEAR 2021

制作時間:約7時間
制作期間:約2週間

銀行送金アプリMoney Tapさんのサイトをトレースしました。トレース元のサイトはこちら


成果物

①LPトレース

②スタイルガイド

③スマホとPCでのレイアウト比較


頑張ったポイント

  • 文字サイズや文字間を合わせ、感覚を掴むよう意識しました。
  • グラデーションの各色の割合や円の角度を一致させるようにしました。
  • 余白の規則性について、自分が制作者だったらどう作るか?を考えました。
    10px単位での余白が多かったため、まず10px単位で余白を設定し、微調整したのではないかと考えました。
  • 配色の統一感に注意して観察しました。アクセントカラーの水色に合わせて、グレースケールでも青味の色が使われていることに気づきました。
  • ハンバーガーメニューや横組み→縦組みなど、PC・SPでの基本的なレイアウト構成を言語化しました。
  • レイアウトを変更することでどのような使いやすさがあるのかを分析しました。

課題を通して学んだこと

  • 文字サイズや色、余白を検証ツールを使い調べることで、ツールの使い方を習得しました。
  • スタイルガイドを制作することによって、サイトがある程度のルールに沿って作られていることがわかりました。余白は4px、8pxの倍数が多いということを知りました。
  • サイトのロゴやコンセプトに沿ってフォントや配色が決められていることがわかりました。今回のサイトでは、ロゴのフォントがサイトの欧文フォントとして使用されていました。