概要

「ONE LEATHER」は、革財布を専門に扱うデモ用の簡易ECサイトとして制作した作品です。
実際の販売は行っていない架空の店舗サイトですが、商品一覧、ランキング、おすすめ商品、新着商品など、基本的なECサイトに必要な機能や構成を取り入れています。

URL

https://ec.kuratani-portfolio.xyz/index.php

特徴・こだわりポイント

・商品ランキング表示機能：売上をもとに人気順を表示
・カテゴリ分け：三つ折り・二つ折り・長財布といったカテゴリごとに表示切り替え可能
・管理画面機能：管理者側で商品追加、編集、削除が可能
・カート機能：基本的なカート機能を実装しております。
・レスポンシブ対応：スマートフォン表示にも配慮したデザイン（モバイルフレンドリー）
・おすすめ・新着商品のセクション：ユーザーの興味を引く設計
・シンプルで洗練されたUI：ターゲット層（男性）を意識した配色とレイアウトを使用

使用技術

フルスクラッチでEC機能を実装
・フロントエンド：HTML / CSS / JavaScript
・バックエンド：PHP（役割ごとにファイル・ディレクトリを分離）
・データベース：MySQL
・バージョン管理：Git / GitHub
・その他：Bootstrap5、Splide、Lightbox

工夫した点

・CSRF・XSS対策を実装：セキュリティ面への意識を持ち
フォーム送信にはトークンを用いたCSRF対策を導入。
表示データにはサニタイズ処理を施し、XSS（クロスサイトスクリプティング）を防止する仕組みを自作し最低限のセュリティ対策を設けています。
・MVC構造に近い設計：MVCアーキテクチャに近い形で役割ごとにファイル・ディレクトリを分離しています。
・管理機能の実装：ログイン機能を持つ管理者画面から商品情報を追加・編集・削除可能なように設計し、現実的な業務運用を意識しました。
・見やすいレイアウトと配色：ターゲット層（男性）に合わせて、チャコールグレーとホワイトを基調に落ち着いた雰囲気を演出し、商品が際立つ配色としました。情報の配置も視線誘導を考慮した設計にしています。
・ユーザー導線の工夫：ランキング・新着・おすすめ商品など、ユーザーが興味を持ちやすい要素をトップページに配置。使いやすさと情報の整理に配慮しました。

デモ動画・操作の様子

以下は実際の操作イメージです。ユーザーの動線や管理画面の挙動をご確認いただけます。