【課題】LPトレース

【目次】

1.トレースしたLP
2.スタイルガイド
3.PCとスマホのレイアウト比較
4.工夫した点
5.制作を通じて学んだこと

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

1.  トレースしたLP

杜のいちご株式会社の 『ケロケロいちご』 LPをトレースしました。

2.  スタイルガイド

3.  PCとスマホのレイアウト比較

4.   工夫した点

■細かな位置調整

　限りなく見本に近づくようにお手本をなぞるようにガイド線やカーニングを駆使し、

■フォントサイズや余白の感覚を掴む
トレースを行いながら、文字にフォントが何pxで使われ、色は何であるか、余白はどれほどとってあるのか等をデベロッパーツールを使用しながら各セクションごとにすべて書き起こすことで規則性やWebページ制作時の大まかな感覚を掴んでいきました。

5.制作を通じて学んだこと

　ケロケロいちごのサイトに関しては余白や配色が他のサイトと異なり、規則性等に囚われない自由な配置や多彩な配色が逆にその世界観を生み出すことにつながっているのだと学べました。

　今回のトレースや分析にてPCとSPの表示の異なり方についてもユーザー目線でストーリーを考えながら制作していく事でよりUI/UXの向上につながり、目的を達成しやすくなるのだと分かりました。改めて要件定義やターゲット、目的からWebページはデザインされているのだと学びました。