DESIGN IT YOURSELF.

BUROKI


top

design

  • top
  • design
  • つくる人達をつなぐ。のぼり刃物店さんのECサイトデザイン

つくる人達をつなぐ。のぼり刃物店さんのECサイトデザイン

web

  • top
  • design
  • つくる人達をつなぐ。のぼり刃物店さんのECサイトデザイン

つくる人達をつなぐ。のぼり刃物店さんのECサイトデザイン

2020.10.23.

スポンサーリンク

スポンサーリンク

7月ごろから制作を開始した、いつもご依頼をいただいてお世話になっているのぼり刃物さんのオンラインショップが先日、無事にオープンしました。

サイト構築はMakeShopを利用

ECサイトはブランドサイトやコーポレートサイトのように情報を見せて問い合わせなどに促すようなサイトではなく、「会員登録」や「決済」が必要になるのでセキュリティはかなり重要です。なのでボク一人ですべて構築するのではなく、ECカートを提供しているサービスを利用し、そのサービスのなかでサイトを構築していくことが無難です。

ECカートを提供しているサービスはいくつかありますが、月額費用や商品登録環境などの兼ね合いで今回はGMOが提供している「MakeShop(メイクショップ)」を利用することにしました。

実際にMakeShopを使ってECサイトをつくってみたからこそいろんなことがわかりました。そのことをまとめたブログも書いているので、デザインとはあまり関係ありませんがよかったらそちらの記事も見てみてください。

トンマナを意識し、テイストに沿ってサイトを制作する

のぼり刃物店さんのデザインはボクがいくつか手掛けさせてもらっていて、以前ロゴデザインと名刺デザインを担当させていただきました。

ロゴからコミュニケーションをとって制作させていただいたからこそのぼりさんが大事にしている思いがわかりますし、表現したいデザインもわかります。ロゴと名刺で構築したトンマナから逸れることなくECサイトも制作していきました。

MakeShop側が用意しているページをフルカスタマイズ

当たり前ですが、ECサイトを立ち上げたいと思う方は個人であったりお店であったり企業であったりしますが、基本的にはデザイナーではない方が多いです。

なのでサービスを提供する側も一般の人だけでも出店できるようにテンプレートなどを用意しているのですが、デザイン的に納得できるものではなく、テンプレートをそのまま利用するとのぼり刃物さんの世界観を伝えることが難しいと判断したので、すべてのページのデザインを新しく制作することにしました。

TOPページから基本ページの構造を調べながらカスタマイズ
TOPページから基本ページの構造を調べながらカスタマイズ

MakeShopは老舗カートシステムなので最新のweb環境に対応しているわけではなく、語弊ありますが少し遅れているくらいの環境なのですが、webフォントやcss3をできるだけ活用し、htmlのソース構造も可能な限り新しくつくり替えました。

特にスマホ用サイトはまだまだ機能的にも不十分な点が多かったですが、その中でも出来る限りのサイト制作をしました。

リストに表示させたアイコンデザイン
アイコンはもちろん自作です
無駄を省きながら再構築した商品リストページ
無駄を省きながら再構築した商品リストページ
商品画像を使ったカテゴリ一覧
商品画像を使ったカテゴリ一覧

載せている商品数は今後も増え続けるサイトなので、カテゴリやメーカー一覧からできるだけ探しやすく・・。もちろんのぼり刃物店さん側でも更新できるようなソース構造で幅をもたせながらつくっていきました。

もちろんPC用サイトもすべてカスタマイズしました

個人的にECサイトをつくる上で気をつけていること

ボクが働いていた前職の企業のメイン事業はECサイトの運営だったので、それなりにECに関しては知識があります。その上でECサイト制作で一番大事なことは、「欲しい商品を普通に買えること」です。

ECサイトはどういう商材を売るか、どんなお客さまに対して売るかによってサイトの構造も変わってくるのですが、今回は職人さんに向けた道具のオンライン販売がメインなので、道具やメーカーから探せるように、いわば「その商品のことを知っている職人さん向け」に想定したサイトのつくりにしました。

ECサイトに初めて訪れたお客さまが普通に商品を購入する・・。当たり前のことのように思いますが、サイト上ですべての動作をお客さま自身で完了してもらう必要があり、意外とこれが難しいのです。

ECサイトのこの本来の役割を果たすために、余計なものは徹底的に排除してもいいと思っていて、例えばブランドサイトなどで見せるようなスクロールで表示していくようなアクションなんかは全くの不要です。ページ表示速度が遅いなんてのも改善しなけばいけないですし(このサイトの表示速度は遅めですが・・笑)、サイトデザインはシンプルすぎても探すのが難しいし、その辺のバランスはかなり意識しながらつくりました。

オープン後3日で会員登録者数60名超えの順調な滑り出し

元々のぼり刃物さんにはたくさんの顧客がいることもあり、「スマホで商品を買えるようにしてほしい」という要望が多かったとのことなので、オープンから順調に会員登録数や注文数も増えており、3日目で会員さまが60名を突破しました。今回のECサイトは楽天やYahoo、Amazonのようなショッピングモールに出店したサイトではなく、完全に独自ドメインのECサイトなので、かなり好調なスタートだと思います。

さらにECサイトオープンから約2ヶ月後の11月には月間売上200万円と突破しました。素晴らしいのひとことです。

のぼり刃物店さんのスマホ用ECサイトデザイン
スマホ用サイト制作にかなり力を入れました

また機会があれば単独のテーマにしてブログに書きたいのですが、はじめから独自ドメインにてECサイトを構築することをボクは基本的にはオススメしていません。なぜなら「集客」がかなり難しいからです。ですがのぼり刃物さんの場合は長年の顧客との関係性があるのと、インスタグラムで1万人以上のフォロワーを獲得されていて、独自ドメインでも問題ないと判断したからです。

このケースは本当に稀で、顧客との関係性もなくイチからECサイトを立ち上げたい場合は、集客を兼ねてくれるショッピングモールをまずは利用しましょう。見つけてもらうことが何よりも大事ですから。

MakeShopでのサイト制作は初めてでしたが非常に学びが多く、ためになった案件でした。のぼり刃物店さんも喜んでくださったので、ボクとしてもひと安心でした。ありがとうございました。

production list

今回の制作で対応した項目
  • webデザイン
  • コーディング
  • アイコンやタイポグラフィなどのグラフィックデザイン
  • MakeShopでのサイト構築
  • googleのアクセス解析ツール導入
  • PC、スマホ表示対応
  • バナー制作

のぼり刃物店のオンラインショップはこちらから

実際のサイトは下記のリンクよりご覧ください。
※webサイトによっては変更・クローズしてることもありますので、その際はご容赦ください。

スポンサーリンク

BUROKI写真

BUROKI写真

はじめましてBUROKIです。

ベンチャー企業にて11年間webやグラフィックデザインとブランディング経験を経て、2019年5月よりフリーランスデザイナーになりました。完全独学でフリーランスになった異色の経歴の持ち主だと思います(笑)

制作実績やインハウスデザイナーのことなど日々更新しています。デザイン制作のご依頼やお問い合わせなども受け付けてますので、なんでもお気軽にご相談ください。

ベンチャー企業でマスターデザイナーとして働いた後、フリーランスになりました。制作実績やインハウスデザイナーのことなど日々更新しています。制作のご依頼なども受け付けてますので、なんでもお気軽にご相談ください。

ご依頼・お問い合わせ

ご依頼・お問い合わせ

related contents

関連コンテンツ一覧
スポンサーリンク

文鳥とデザイナー

スポンサーリンク

design list

デザイン作品一覧

graphic

ブランドの世界観を直接伝える。SANDO BAGの名刺デザイン

先日ロゴデザインの実績を紹介させていただいたバッグブランド「SANDO BAG(サンドバッグ)」。 ロゴとあわせて名刺とブランドwebサイトも制作させて…

2022.01.26.

web

ブランディングのためデザインを一新。EDUONE Passのポータルサイトデザイ...

以前制作させていただいた獣医関連の出版社「EDUWARD Press」さんのコーポレートサイトですが、先方さまよりご好評をいただき、引き続きwebサイトデ…

2022.01.21.

logo

ブランドを再定義する。SANDO BAGのロゴデザイン

昨年秋ごろにご依頼いただき制作させていただいたバッグブランド「SANDO BAG(サンドバッグ)」。 ブランドロゴや名刺、webサイトなど一貫して制作さ…

2022.01.18.

graphic

2022年は寅年。タイガー魔法瓶をパロディした年賀状デザイン

今年の制作実績、まずは年賀状デザインから。 毎年、年末になると福岡の木工集団ナノナノファクトリーさん(以下:ナノさん)から年賀状デザイン依頼…

2022.01.13.

graphic

高級感のあるブランディングを。インディバサロンの名刺デザイン

少し前にロゴを制作させてもらったインディバサロン「mouiller(ムイエ)」さん。ロゴに引き続き名刺もデザインさせていただきました。 横型の名刺に…

2021.12.07.

logo

思いを形に。インディバサロン「mouiller(ムイエ)」のロゴデザイン

大阪北区に新規オープンするインディバサロン「mouiller(ムイエ)」のロゴデザインを担当させていただきました。 ご依頼いただいたのが9月で、オー…

2021.11.14.

designをもっと見る

制作のご相談・お問い合わせはフォームから

デザインのご依頼や予算のご相談、お問い合わせなどお気軽にお問い合わせください。
また、書いてほしいブログのリクエストやファンレター(笑)もお待ちしております。

問い合わせフォームはこちら

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル