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

デザイン作品一覧

web

小細工不要。誠実さを伝えるBEAR'S WORKSのwebサイトデザイン

2024年最初のwebサイト制作実績です。 これまでもwebサイト制作をメインにして活動させていただいておりますが、サイトデザインのみの対応だったり大…

2024.04.10.

goods

のぼり刃物店さんの創業53周年記念ロゴデザインと缶バッジ&ステッカー

きたる4月1日、いつもお世話になっている大阪府茨木市にあるのぼり刃物店さんが創業53周年を迎えられます。 今年も昨年に引き続き、創業53周年記念の…

2024.03.27.

logo

プライベート銭湯・サウナが楽しめる松の湯のロゴデザイン

昨年の制作実績になりますが、友人が現在進めているプライベート銭湯(サウナ?)のロゴデザイン制作を担当させていただきました。 8月ごろにご依頼…

2024.02.25.

graphic

2024年は辰年。中日ドラゴンズをパロディした年賀状デザイン

BUROKI design的に新年の制作といえば、毎年恒例になっている福岡の木工集団ナノナノファクトリーさんの年賀状デザイン。 はじめて依頼をいただいて…

2024.01.22.

graphic

久しぶりにイラスト制作。カエルのキャラクターデザイン

昨年の制作実績となりますが、友人のプライベート銭湯を盛り上げるべく、ポスターやポストカードに使用するためのカエルのキャラクターを制作しまし…

2024.01.10.

logo

想いをデザインに落とし込む。腸活サロンand Wのロゴデザイン

2024年、最初の制作実績。 今年から新しく開始する腸活サロン「and W(アンド・ダブリュー)」のロゴを制作させていただきました。 昨年9月ごろにご…

2024.01.07.

designをもっと見る

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

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

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

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル