工具通販ビルディ

部分リニューアルにあたって、マイページ、商品詳細、カートページのコーディングを担当。
バックエンドとの連携を前提に、可変的なデータ（金額など文字量の増減）が入っても崩れないよう考慮しながら実装を進めました。

• システム組み込みは別業者のため、HTML・CSS・JSを納品
• ワイヤーをもとに自社デザイナーがデザインを作成、仕様を確認の上コーディング
• PC/SPでそれぞれ別のソースを読み込ませるということで、別個のサイトとして構築
  （PCでは1000px以上のレスポンシブは考慮）
• ヘッダー・フッター以外のコンテンツを制作
• 命名規則はBEMのルールに則って制作

マイページ

PC：https://mne3.com/bildy/mypage
SP：https://mne3.com/bildy/mypage-sp/
※閲覧には会員登録の必要があるため、納品時のデータをご覧ください。

制作したページ

• 扉ページ
• ポイント情報の確認
• 注文履歴
• 注文内容の詳細
• 買ったものリスト
• 月ごとの帳票発行（領収書）
• 月ごとの帳票発行（請求書）
• 月ごとの帳票発行（利用明細）
• 会員情報の変更
• 会員情報の変更確認
• クレジットカード設定
• クレジットカード登録確認
• メール配信設定
• お届け先追加・変更
• お届け先登録
• お届け先登録確認
• ほしいものリスト
• クーポン一覧
• おすすめAI設定

月ごとの帳票発行ページ

PC：https://mne3.com/bildy/mypage/export/
SP：https://mne3.com/bildy/mypage-sp/export/

領収書、請求書、利用明細で少しずつレイアウト違いのページを作成しました。

モーダルも複数実装しています。

商品詳細ページ

現行サイトを見る

納品時データ
PC：https://mne3.com/bildy/productDetail/
SP：https://mne3.com/bildy/productDetail-sp/

複数パターンの作成

スピード出荷、お取り寄せ、限定特価、予約商品など、同一ページで複数パターンを作成しました。
同じレイアウトで別の要素が入る場合なども考慮する必要があり、かなり頭を働かせながら構築しました。

制作したパターン

• アイテム（親）
• アイテム（子） – スピード出荷
• アイテム（子） – 仕入先在庫連携あり（在庫残りわずか）
• アイテム（子） – 仕入先在庫連携なし（お取り寄せ）
• アイテム（子） – キャンセル可予約
• アイテム（子） – キャンセル不可予約
• アイテム（子） – 問い合わせ
• アイテム（子） – 廃番
• アイテム（子） – 特価（特別価格）
• アイテム（子） – メーカー特価（限定特価） パターン01
• アイテム（子） – メーカー特価（限定特価） パターン02
• パーツ（親）
• パーツ（子）
• 服飾系（複数一括方式）
• 汎用モーダル（表示確認用） お知らせ
• 汎用モーダル（表示確認用） 注意
• 汎用モーダル（表示確認用） アラート

カレント表示

現在地に応じてアンカーリンクの色が変化する機能も実装。
スクロール量や要素の高さなどを計算し現在地を判定する仕様ですが、
アコーディオンの開閉によって要素の高さが変わることも加味する必要があり、試行錯誤を重ねました。

ショッピングカート

PC：https://mne3.com/bildy/cart
SP：https://mne3.com/bildy/cart-sp
※会員登録の必要があるため、納品時のデータをご覧ください。

5フェーズ分、こちらもそれぞれ複数パターンを作成しました。
①カート ②ログイン・初めてのお客様 ③お客様情報登録 ④カート最終確認 ⑤注文完了

制作したページ・パターン

• ショッピングカート(非ログイン時)
• ショッピングカート(ログイン時)
• ショッピングカート( 順次配送 パターン① [スピード出荷+通常出荷] )
• ショッピングカート( まとめて配送 パターン① [スピード出荷+通常出荷] )
• ショッピングカート( 順次配送 パターン② [スピード出荷(出荷元1+2)+通常出荷] )
• ショッピングカート( まとめて配送 パターン② [スピード出荷(出荷元1+2)+通常出荷] )
• ショッピングカート( 順次配送 パターン③ [スピード出荷(出荷元1+2)+通常出荷+予約商品] )
• ショッピングカート( まとめて配送 パターン③ [スピード出荷(出荷元1+2)+通常出荷+予約商品] )
• ショッピングカート(メーカー直送品含む パターン① [非ログイン状態] )
• ショッピングカート(メーカー直送品含む パターン② [ログイン済-会社・屋号未入力] )
• ショッピングカート(メーカー直送品含む パターン③ [ログイン済-会社・屋号入力済] )
• ログイン・初めてのお客様
• お客様情報登録（未選択状態）
• お客様情報登録（初めてのお客様） – 法人のお客様
• お客様情報登録（初めてのお客様） – 個人事業主のお客様
• お客様情報登録（初めてのお客様） – 個人のお客様
• ショッピングカート 最終確認
• ショッピングカート 最終確認 – 項目選択後（クーポン選択）
• ショッピングカート 最終確認 – 項目選択後（ポイント選択）
• ショッピングカート 最終確認（初回注文時）・未入力アラート
• ショッピングカート 最終確認 (置き配選択不可)
• ショッピングカート 最終確認( 順次配送 パターン① [スピード出荷+通常出荷] )
• ショッピングカート 最終確認 ( まとめて配送 パターン① [スピード出荷+通常出荷] )
• ショッピングカート 最終確認 ( 順次配送 パターン② [スピード出荷(出荷元1+2)+通常出荷] )
• ショッピングカート 最終確認 ( まとめて配送 パターン② [スピード出荷(出荷元1+2)+通常出荷] )
• ショッピングカート 最終確認 ( 順次配送 パターン③ [スピード出荷(出荷元1+2)+通常出荷+予約商品] )
• ショッピングカート 最終確認 ( まとめて配送 パターン③ [スピード出荷(出荷元1+2)+通常出荷+予約商品] )
• ショッピングカート 最終確認 (メーカー直送品含む パターン① [ログイン済-会社・屋号未入力] )
• ショッピングカート 最終確認 (メーカー直送品含む パターン② [ログイン済-会社・屋号入力済] )
• ショッピングカート 注文完了 (パターン① クレジットカード・代引・PayPayなど)
• ショッピングカート 注文完了 (パターン② コンビニ、銀行振込（あおぞら銀行含む）)
• ショッピングカート 注文完了 (パターン③ 掛払い 請求書後払い)
• ショッピングカート 注文完了 (パターン④ 分割払い(オリコ) )

②ログイン・初めてのお客様

https://mne3.com/bildy/cart/login

③お客様情報登録

https://mne3.com/bildy/cart/register/corp.html