私が働いている会社の商品購入のLP

私が実務経験を積んでいる会社(EBM株式会社)で商品購入のページを作って欲しいと言われたので作りました。

元々商品を買った人に渡していたパンフレットをデザインカンプとして商品購入ページにコーディングしました。

コーディングは私一人でして2020年5月に始めて同じ月に完成しています。

 

 

苦労した事1

 

タイトルと説明でフォントを変えた方がメリハリがついてページの印象がよくなることを知らなかった事。

 

タイトルのフォントは明朝

 

 

説明文のフォントはゴシック

 

 

 

苦労した事2

 

商品のページや購入対象の年齢に合わせた色の使い方をしないといけないこと。

 

 

苦労した事3

 

ページ閲覧者が文章を読んだ時に文章が詰まった感じだと説明を読むのを止めないために行間を開けて説明を見やすくすること。

 

 

文章の行間を開けて説明文を読みやすくする

 

 

苦労した事4

 

ブロックごとの上下の余白を開けて違う部分であることを閲覧者に認識させないといけない。

 

ブロックとブロックの間の余白を思いっきり開けて違うブロックを意識させる

 

 

苦労した事5

 

ページの一番上に商品のイメージ画像(ヒーローイメージ)を持ってきた方がいいのですがサイズの調節で苦労しました。

この画像のサイズ調節で苦労しました

 

苦労したこと6

 

閲覧者の購入意欲を出す為にページにインパクトを出す為に文章や画像が左右から現れるパララックスを取り入れた事。

ひたすら調べてやり方を考えました。

 

GitのURL

 

https://kyohayata.github.io/milky-snow/で確認できます。