当サイトのWebデザイン制作サンプルとして「身体に優しいカップケーキ店-Natural Cake」のネットショップ(通販サイト)の仮想デザインを制作しました。
目次
ネットショップのWebデザイン制作サンプル「Natural Cake」
ターゲット・コンセプト
今回作成したネットショップのデザインは以下の要望をコンセプトに制作しました。
- ターゲット:20代女性、オーガニックなど自然志向なものが気になっている。
10代の頃とは違い、多少価格が高くても「自然派で美味しいもの、身体に罪悪感のないもの」を重視。
SNS映えする”おしゃれ・可愛い”ものはテンションがあがる。 - ご要望(コンセプト):身体に優しい、安心できる材料を使い、作り方にこだわった商品であることをアピールしつつ、ターゲットに訴求したい
若い女性向けの案件としては、比較的メジャーなよくあるターゲット・コンセプト設定だと思います。
デザイン面で意識したポイント
まず、コンセプトの”自然派”・”ナチュラル”・”安心感”などをキーワードに、落ち着いた温かみのある配色を意識しました。
そしてケーキを作る過程を、写真と動画を大きく大胆に使って見せることで、「材料と作り方にこだわっている」というメッセージをユーザーの視覚情報に訴えかけるようなデザインにしています。
また、経済的に余裕が出てくる20代女性がターゲットとのこと。
“安さを売りにはせず、それでも気軽にSNSに投稿して楽しめる親しみやすさ”を出すために、丸みのあるアイコンと高級感が感じられる”繊細なあしらい”をデザインの細部に取り入れています。
制作期間
- TOPページの基盤デザイン…2日
- 画像準備(画像調達や素材の準備など)…2日
- Wixでの画面作成(組み込み)…1日
- レスポンシブ版調整…0.5日
Wixの場合はコーディング不要で構築できるので、Webページの作成は通常に比べるとほとんど工数はかかっていません。
(もちろんデザイン面での細かい調整や、文言の入力作業などは必要です)
今回のようなビジュアル重視のデザインの場合は、写真素材の選定やアイコンなどの素材が完成度を大きく左右するので、なるべく素材準備に時間とコストをかけられるようにしたいですね。
制作環境・ツール
- 素材作成:Adobe Illustrator (CC2019)
- 写真素材作成:Adobe Photoshop (CC2019)
- Wix
今回はWixというWebサービスをベースに使い、コーディングよりもデザイン面(見た目)に工数を割いて制作しました。
Wix自体は費用面・アクセスが多いとページの表示速度が下がるといった面で賛否両論ありますが、手軽にECサイトを構築することができるので、工数を抑えて手早くスモールスタートするには、こういったサービスを使うのも”手”です。
他にもBaseやカラーミーショップを使えば、Wix同様ある程度デザインもカスタマイズしつつ、誰でも手軽にネットショップを作成することができます。
逆に多少工数をかけても独自のデザインを適用したり複雑なカスタマイズを行って運用したいなら、WordPressとWooCommerceというプラグインを使うといった選択肢もあります。
ネットショップのWebデザイン
ひと昔前まではある程度規模のある店舗が実店舗以外にネットショップも併設するイメージがありましたが、最近では個人からでも低コストでネットショップを開設することができるようになりました。
そんな時代の流れか、開発工数や費用を抑えつつ、簡単におしゃれなネットショップ を作成できるWebサービスも続々と登場しています。
そんなネットショップ乱立時代の今、サービス内に用意されたテンプレートではなく、きちんとプロのWebデザイナーによって設計された「一歩上を行く」洗練されたネットショップは、目の超えたユーザーを相手にしても「きちんと作られている感」があり、サイトへの信頼性・ブランディングにも繋がります。
それは相手の顔が見えない・商品が眼の前にないネットショップにおいては非常に重要で、売上アップにも繋がる大切な要素です。
個人様でも法人様でも、今後ネットショップの開設を考えている方は、ぜひこのような「サイトの信頼性」やブランディングの視点も取り入れて検討してみていただければと思います。