hamburger-deco

ハンドメイドショップのwebサイト

ハンドメイドショップのwebサイト

ハンドメイドショップサイト左カラムデザイン

友人が運営しているハンドメイドショップのWEBサイト作成に携わらせていただきました。

概要

  • 使用ツール

    figma、photoshop、illustrater

  • 使用言語

    html、css、javascript、jQuery、wordpress

  • スケジュール

    企画 3日
    デザイン 1週間半
    コーディング 2週間
    wordpress化 2週間

企画

  • ターゲット

    小学生~高校生、20~40代女性 ペットを飼っていて動物好き、家族でショッピングモールなどで出かけた際にハンドメイドショップを見かけ、のちのち見てみようとする。

  • コンセプト

    親しみやすさがあり、いろいろな作品で癒しを届けることができる。

  • 目的

    現状:一番の売り上げは出店での販売。
    問題:出店は天気などにも左右され売り上げ一定しない。
    解決したいこと・作成の目的:出店での売り上げは保ちつつ、ネットでの売り上げも上げたい。しかし個人でのECサイト等の管理は大変。現状のネット販売しているものへ紹介してほしい。

こだわり

暖かさとポップなイメージと商品のカラフルさを目立つようにベースの色はベージュにし、フォントは親しみやすさのある丸みがついたものを使用しました。
ファーストビューでは商品、出店の様子、目印になっているぬいぐるみを猫の形にし、swiperでのスライドショーにし個性を出しました。

ファーストビューが過ぎたころからメニュー表示は左上に太陽、右下に曇を設置し、ユーザーがいつでもボタンを押すことができるような配置にしました。
ファーストビューやコンテンツ中はメニューの太陽とリンクの雲が表示されスクロール下部に向かうと月モチーフの販売背景、猫が寝ているフッターにしスクロールでのストーリー性を持たせました。

wordpressにてクライアントが写真画像を入れ替えやすいような更新性を持たせました。

ハンドメイドショップのwebサイト1 ハンドメイドショップのwebサイト2