工具通販ビルディ

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

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

マイページ

20ページほど作成した中の一部をご紹介します。
※閲覧には会員登録の必要があるため、テスト環境のスクリーンショットです。

扉ページ

注文履歴一覧ページ

月ごとの帳票発行ページ

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

他にも会員情報の変更・確認、クレジットカード設定のようなフォーム系のページや、ほしいものリスト、クーポン一覧ページなど20ページほど作成しました。

商品詳細ページ

サイトを見る

複数パターンの作成

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

制作したパターン

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

予約、限定特価商品

服飾系商品

商品の拡大機能

Amazonのような拡大機能をつけたいとのご希望で、モーダルからさらに拡大させる機能をjsで実装しました。

追従メニューのアンカーリンク

スクロールで移動に加えて、飛び先のアコーディオンが開く仕様になっています。

カレント表示

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

ショッピングカート

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

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

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

会員登録の必要があるため、スクリーンショットで一部抜粋をご紹介します。

①カート-非ログイン時

右サイドの合計金額エリアは、スクロールし見えなくなったところからコンパクトバージョンがstickyで追従してくる仕様です。

①カート-メーカー直送品含む パターン② [ログイン済-会社・屋号未入力]

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

③お客様情報登録

④カート最終確認

複数のUIインタラクション

こちらのフェーズにはモーダルや、選択したら開くアコーディオンなどを複数設置しました。

お支払い方法の中のクレジットカードを選択すると、登録済みのカードの編集や新しいカードの追加ができます。

多数の要素が連動する複雑なUIインタラクションの実装は高難易度でしたが、検証・調整を繰り返し実装しました。

⑤注文完了

“重くならない程度に、また注文したくなるようなアニメーションを入れたい”とのご希望があり、ファーストビューのキャッチ部分にはアニメーションを実装しました。

【アニメーション】
箱から工具が出てくる部分はsvgアニメーションです。