課題　LPトレース

ATEAM株式会社が提供する企業公式サイトのLPをトレースしました。

１.　トレースしたLP

引用元　https://www.a-tm.co.jp/

２. デザインガイドライン

３.　PCとスマホの比較と分析

4.　工夫したこと

 ●WEBページのゴールを設定すること。

 ただ何も考えずトレースするのではなく、サイトの目的・ゴールを明確にしてトレースをしました。

 目的：会社にエントリーしていただくこと

 理由：メインビジュアルと、最終セクションにリクルートのリンクボタンが大きく設置されているため。

 ゴール：一通り会社について知り興味を持ってもらいリクルートのリンクボタンに飛んでもらうこと

 ● ピクセル単位でずれがないようにトレースをすること

今回のトレースで、余白やフォントサイズを合わせることがサイトを作る上でとても重要であることがわかりました。少しでもズレやゆがみが生じるとサイト全体がまとまって見えません。そのため見本とずれがないように一つ一つ細かく確認し、定規を使って調節しながら行いました。

制作を通じて学んだこと

●検証ツールの使い方

検証ツールで使用されているフォントサイズ、余白、CSSの書き方を学ぶことができました

 ●配色の選び方

今回のWEBサイトに使われているほとんどのカラーが企業マークのロゴで使われているものでした。そのためサイト全体でATEAMのイメージカラーがわかります。会社の色を決めてことによりユーザーにとってその会社が頭に残りやすいのではないかと感じました。

 ●PCとスマホのレイアウトの変化

全く同じサイトでもデバイスによってデザインや余白の取り方が異なっていることに気づくことができました。スマホの場合サイズが縦長なため、それに合わせて画像を合わせていたり、サイトのコンテンツがリンクボタンの大きさより強調されないようにパソコンよりも小さく作られていたりしている点などです。ユーザーにとってサイトをみやすくするには、どこの部分を強調して、どこを抑えるかというのがデバイスによっても異なることを実際にスマホとパソコンのLPで比較してみて気づくことができました。