制作過程①要件定義
サイトの制作目的やターゲット、ペルソナを下記のように設定しました。
制作過程②ワイヤーフレーム（Photoshop）
主にInstagramで商品を見つけた人が、リンクからたどり着くLPとして制作しました。また、店舗経由でブランドを知った人向けに、Instagramへの誘導として「ARCHIVE」ページも作りました。ONLINESHOPへの誘導が最大の目的のため、常に画面に現れているようボタンを配置しました。
【参考サイト】Liquem＜https://liquemofficial.com/＞
制作過程③デザインカンプ
「キラキラ感」が伝わるよう、背景の写真にこだわりました。配色は、商品と馴染みやすい淡めのブルーやパープルにしました。
制作過程④コーディング
○グローバルナビゲーション○
マウスオーバーがわかりやすいようパープルに変化します。
○CONCEPT○
簡潔にまとめ、スマホ幅に慣れた現代人が読みやすいよう、またおしゃれな世界観を演出できるよう、左右余白を広めに取り、一文を短めに配置しています。
○LOOK○
ブランドイメージや商品を伝える大切なツールのため、自動でスライドし、サイトを開くと自然と目に入るようにしました。
○ARCHIVE○
Instagramへの誘導と、新作商品ひとつひとつを知ってもらうことを目的とし、写真を多めに配置しています。ページ内でも目立つボタンにしました。
○NEWS○
記載内容の告知はInstagramメインとなる想定ですが、購入促進のためLPにも項目を設けました。
○STORE LOCATION○
GoogleMapへのリンクを貼りました。
