【課題】LP制作(デザイン/コーディング)

OVERVIEW

デザインからコーディングまでWebページ制作の一連の流れを習得しました。ブライダルアクセサリーを扱うオンラインショップのLPです。制作時間:デザインカンプ20時間、コーディング50時間/制作期間:8日間/使用ツール:Photoshop、HTML5、CSS、JQuery

YEAR 2022

  • 制作日:2022年10月12日~10月20日
  • 制作時間:70時間(デザインカンプ20時間、コーディング50時間)
  • 担当範囲:情報設計、ワイヤーフレーム、デザイン、コーディング、レスポンシブ
  • 使用ツール:Photoshop、HTML5、CSS、JQuery

概要

情報設計

1.ペルソナ

2.ユーザーストーリー

  • キービジュアルで目を引き「コンセプト」で共感・憧れを引き起こす流れ。
  • 「商品」でおすすめアイテムを提示し関心を高める。
  • 購入方法や送料無料条件を提示し安心して購入してもらう。
  • 購入ページで疑問がでてきた際は「よくある質問」で解決できる。

3.ビジュアルデザイン

ブランドイメージから「かわいい、大人っぽい、優しい、フェミニン、シャービー」等のキーワードを抽出しました。また、企業コンセプト「きらめくあなたに寄り添う、お守りでありたい」から、敷居が高すぎず、手に取っていただきやすい親しみやすさを感じられるデザインコンセプトを定義しました。

制作のポイント

1.キービジュアル

サイトへ訪れた瞬間に素敵な雰囲気がぱっと伝わることにこだわりました。

使用する写真の選定は、①ペルソナが理想とする花嫁像であること、②「アクセサリーをつけて幸せな結婚式を迎える自分を想像できる」という条件を設定しました。デザインコンセプトに合わせて淡い雰囲気になるようレタッチをおこなっています。

2.コンセプト 

3.おすすめアイテム

アイテムの写真は統一感がでるようにレタッチをおこないました。

アイテムをクリックするとそれぞれのアイテムの購入ページへ遷移します。「VIEW MORE」をクリックするとオンラインストア「STORES」のアイテム一覧ページへ遷移します。

4.CTA

  • LP内で最も目立たせたい箇所となるため、背景にレースのテクスチャを敷き、水彩テイストのグリーンのあしらいで、他セクションとの違いを表現しました。
  • 「オンラインストアからお買い求めいただけます」というマイクロコピーを記載し、遷移先リンクがオンラインストアであることを伝え安心して遷移していただけるようにしました。
  • 送料無料オファーを記載しています。