スクールの卒業課題で美容クリームのランディングページを制作しました。
サイトURL:http://rpra.html.xdomain.jp/cream/
初めてコンセプトシートの作成から、サイトマップの作成、ワイヤーフレーム、デザインカンプ、コーディングまで行いました。レスポンシブ対応も行いました。
♦概要
コアターゲット:25歳後半~30歳代の肌ケアに興味のある女性、乾燥肌などお肌の悩みがある女性
サイトイメージ:高級感がある、潤い、期間限定のお得感が伝わる、購入までの流れが分かりやすい(購入ボタンが適した場所にある)
使用ツール:Cacoo(ワイヤーフレーム),
Photoshop,DreamWeaver
♦工夫点
・高級感や清潔感を出すようなメインビジュアルの背景画像を選びました。
・お得感が伝わるように20%OFFを目立たせたり購入ボタンの位置を意識しました。
・様々なLPを参考にし、レイアウトを組みました。まず、ファーストビューで商品画像を載せ、その後価格の表示、お悩みチェックのコンテンツとすることでユーザーの共感を生み、より下部の内容を読んでもらえるように工夫しました。
♦学び
・photoshopでデザインカンプを制作後、コーディングする際にサイズ感がうまくできておらず、文字サイズや画像が大きすぎ、デザインをやり直すことが生じてしまいました。今後は、webサイトに最適なサイズ感を事前に把握したうえで制作したいと思います。
・コンセプトシートやサイトマップの作成から、サーバーへのアップロードの方法まで、一連のweb制作の流れを実践を通して理解することが出来ました。