びお東京 ショッピングサイト制作Webシステム開発

WEBSITE DESIGN & DEVELOPMENT
株式会社びお東京様は、ドイツ製のオーガニック食品、化粧品、アロマオイルなどを販売されている企業です。この度、日本人と在日外国人を対象としたECサイトを制作したいとのことで、弊社にご依頼いただきました。
AREA: 
神奈川県横浜市
BUSINESS TYPE: 
オーガニック製品通信販売
PROJECT TYPE: 
WEBSITE DESIGN & DEVELOPMENT
DEVICE: 
PC
スマートフォン
タブレット
びお東京株式会社 レスポンシブWebサイト

びお東京株式会社 レスポンシブWebサイト

びお東京株式会社 レスポンシブWebサイト-PC

びお東京株式会社 レスポンシブWebサイト-PC

目的

クライアントが簡単に商品を更新できる使いやすいWebサイトの制作をご希望でしたので、DrupalのCommerce Kickstartを使用し弊社にて開発させていただきました。 今回ホームページを制作するにあたってクライアントが重視されていたことは、以下の2点でした。 - 健康が気になる方、また日本人と在日外国人を対象としたECサイト - 日本では見つけにくい輸入商品の紹介と販売 そのため、日本語と英語の多言語ECサイトの開発となりました。 また、ユーザーがどんな媒体でもショッピングをしやすいよう、レスポンシブWebデザインを採用いたしました。 ##デザイン 清潔感を感じさせ、シンプルだけれどあたたかみのあるデザインをコンセプトにデザインしました。 白・黒・グレーといった無彩色だけでなく、ロゴマークにも入っているグリーンと、オレンジ系の暖色をプラスすることで、シンプルさとあたたかみを両立させることができました。 商品写真に視線を集められるデザインにしたいとのクライアントのご要望を、シンプルな白ベースのデザインにすることで、商品写真の誘目性を高めています。 商品を輸入商品をユーザーが発見しやすくなるようコンテンツも工夫しております。商品をカテゴリーごとに分け写真付きの見出しをつけたり、詳細な分類や複数の検索方法を設け、誰にでもわかりやすくなるよう制作いたしました。さらに、ユーザー登録によって住所情報の保存や注文履歴の閲覧が可能になり、より使いやすいサイトとなっております。

機能

E-commerce 機能

E-commerce 機能としては Drupal の ディストリビューションのひとつである Commerce Kickstart を中心に構築いたしました。 Commerce Kickstart を使用することでECサイトとしての機能のほとんどを比較的簡単に制作することができます。

そのなかでも、特別にカスタマイズを加えた機能の一部を以下に紹介いたします。

Packing list (包装明細書) と Picking list (出庫表) の自動生成

注文を受け、在庫から商品を取り出すために使用される表である Picking list と、 在庫から取り出した商品を梱包する際に使用される表である Packing list を自動で生成されるようにお作りしております。

今回の Packing list には配達時間帯、配達指定日、クール便使用の要否、などの送り状に入力するために必要な項目をできるだけ用意し、運送会社で指定された記述方法に変換して出力されるように制作しております。この結果、商品の発送に関する処理を行いやすい機能となったのではないかと思います。

決済方法の選択

決済の手段として Paypal による決済、 Paypal によるクレジットカード決済、代金引換による決済の3種類をご用意いたしました。 Paypal については Commerce Kickstart で用意されている専用のモジュールを使用し、日本のPaypalに対応していない部分についてはカスタムモジュールを作成して日本のPaypalの仕様に対応しております。

商品レビュー機能

商品を購入した人が5段階の星による評価とコメントで商品のレビューを行うことができる機能を制作いたしました。

5段階の星による評価には Fivestar モジュールを使用し、レビューコメントにはコアの Comment モジュールを使用することでスピーディに制作することができました。 また、クライアントからの要望で本サイトに登録済のユーザーであり、なおかつ商品を購入したことがある人だけがレビューを行えるような機能をカスタムモジュールで実装しております。

多言語対応

クライアントから日本人と日本に住む英語圏の方々を対象とする旨をうかがっておりましたので、日本語と英語、両方のインターフェイスに対応し、全てのコンテンツが両言語に対応できるようにしました。

機能やコンテンツタイプに合わせて Entity translation モジュール による翻訳と Internatinalization (i18n) モジュールによる翻訳を行い、対応しきれなかった部分については専用のカスタムモジュールを作成するか、パッチファイルを適用することで対応しております。 また、コントリビュートモジュールの中で翻訳対象になっていないテキストがあった場合にはパッチファイルを作成し、モジュールの Issue ページにてパッチファイルを提出するなどしてコントリビュートモジュールの制作にも貢献できたかと思います。

その他、登録ユーザーごとにデフォルトの言語を設定できるように設定し、ページごとに言語の切り替えを行えるようにするなど、多言語化に対し様々な対応を行いました。

検索機能

商品や通常ページ、お知らせページを検索対象とした検索機能を制作いたしました。 検索結果に表示される商品に対し、カートに追加するためのボタンを追加するなどのカスタマイズをカスタムモジュールにて対応しております。また、前述の多言語対応も行っております。

お知らせ投稿機能

イベントや商品の情報発信をクライアントご自身で簡単に投稿・編集していただける機能を設けました。 Wysiwyg エディタのひとつである CKEditor を使用することで文章を直感的に編集しやすくしております。 また、前述の多言語対応も行っており、英語で投稿したコンテンツを簡単に日本語に翻訳できるようなつくりにしております。

お問い合わせフォーム

ユーザーからのお問合せをWeb上から直接受け付ける、お問い合わせフォームを作成いたしました。 フォームにお問合せが送信されると自動的に指定したサイト管理者のメールアドレスに送信されるように作成しております。

その他

SSL対応

ECサイトには欠かせない、SSLのセットアップも行っております。

CONTACT

制作に関するご相談は下記までお気軽にお問い合せ下さい。

TEL:077-572-7155
[ 受付時間10:00-19:00 日祝休 ]
Shiga Office
〒520-0832滋賀県大津市粟津町2-63 CS石山ビル2F
TEL 077-572-7155
Tokyo Office
〒150-0002東京都渋谷区渋谷1-17-1 TOC第2ビル3F
TEL 03-6808-2878