【イーガオ実績紹介】ZEROOTIME様サイトにEC機能を追加
WRITER
ヒカセン
イーガオでweb制作をしています。どちらかというとエンジニアよりもデザイナー寄り。自転車の交通マナーにうるさい。
もくじ
イーガオ受託開発チームではWEBサイト制作の依頼をいただくことが多かったのですが、ロッキーカナイさんやアベベさんといった職人エンジニアが合流してくれたおかげで対応できるお仕事に幅が出てきました。
【帰ってきた！社員インタビュー】ついに登場!ロッキーカナイにズバリ聞くガオ
【帰ってきた！社員インタビュー】ウェルガオ入社第一号!!アベベさんにズバリ聞くガオ!
今回は、国内製造にこだわった個性的なカスタムウォッチを展開する「ZEROO TIME(ゼロタイム)」様のサイト内にEC機能を追加させていただいた事例を紹介させていただきたいと思います。
ブランドサイトに見積もり機能・ショッピングカートとの連動・SNSシェア機能を実装
もともと社内のデザイナーの方がサイト制作を学んで作られたというブランドサイト。
写真のクオリティも高く、商品の魅力をしっかりと伝えられるデザインになっていました！
しかし、文字盤・ベゼル・ベルトを自由に組み合わせてショッピングカートに入れて決済ページまで進めるという機能開発が必要になり、専門のエンジニアの助けが必要になったとのこと。
そこでイーガオからアベベさんがZEROO TIME様のオフィスへ伺い、GMOメイクショップを利用したEC機能追加を担当させていただきました！
時計をカスタマイズした際の価格の見積もり機能、GMOメイクショップのカートに追加する機能、カスタマイズしたデザインをシェアする機能を主に担当しました。
SNSシェア機能はシェアされたURLにアクセスするとあらかじめカスタマイズされたデザインがページに表示されるような機能です。Javascriptからクエリストリングを利用して実装していましたが、最終的にハッシュを利用した形となりました。
あらかじめデータをそろえてくださっていたので非常にスムーズに開発を行うことができました。
HTMLのテンプレート化
ベースとなるHTMLがあったのでまずはそのHTMLの構造を確認し、テンプレートに落とし込むところから始めました。
パーツが豊富にあるのでHTMLは機械的に生成する方法をとりました。
テンプレート化することによりHTML全体の見通しが良くなり、構造の変更にも柔軟に対応できるようになります。
また手打ちによるコーディングミスを減らすこともできます。
後にメンテナンスをされる方のことを考え、できるだけ簡潔にわかりやすく書くことを意識してコーディングを行いました。
わかりやすくなっていればいいなと思います…
GMOメイクショップの「カゴだけMakeShop」機能導入
カートに追加する機能についてはGMOメイクショップの「カゴだけMakeShop」機能を利用しました。
jQueryで動的にフォームを生成し必要なデータを格納、送信するものになっています。
SNSシェア機能のトラブルとリカバリー
SNSシェア機能について当初はパラメーター付きのURLを生成し、そのURLをシェアしてもらうように想定していましたが、実際にリリースしてみるとパラメーターが含まれるURLにアクセスするとすべてNot Foundとなってしまいました。
ほぼ実環境に近いテストでは問題なく動作していたため想定外のアクシデントでしたが、ハッシュ（＃）を代用することでうまくリカバリーできたかと思います。
お客さまからお喜びの声をいただきました！
今回イーガオさんは私たちクライアントのやりたいことを丁寧に汲み取ってくれて、本当に必要な機能はなにかを出発点にしてくれました。
あとから社内のコーディング担当がソースを確認したときにも理解できるように綺麗でわかりやすいコードを書いてくださったり、依頼したこと以外にもサイトの多言語対応の部分やスクロールのしやすさなど改善点を教えてくれたり、期待の一歩先をいってくれました。
まさに「驚き」と「喜び」といった感想で、大満足の結果でした！
素敵な製品のサイトに関わらせてもらえて、私たちも嬉しいです！
実際にオフィスに伺ってZEROO TIMEの時計を見せてもらいましたが、個性的でオシャレな文字盤はバリエーションも豊かで、全部の動いているところを見てみたい！と思いました。
今後は実店舗での展開も進めていくとのことで、大注目のブランドです！
イーガオではサイト制作・機能追加などのお仕事もお受けしております。
まずは無料でご相談ください。
