URL

https://conpro.tswebfactory.com/ （ベーシック認証あり）

カテゴリー

ECサイト制作

担当

新規制作 | デザイン、コーディング、ライティング、各種デバイス対応、開発

スキル

HTML、CSS、JavaScript（jQuery）、PHP、Laravel、Docker

概要

2021年に知り合いから依頼され、健康志向のプロテインを取り扱うECサイト「コンビニエンス・プロテイン」を制作しました。本プロジェクトでは、Laravelフレームワークを活用し、利便性と拡張性を重視した設計を行いました。

※現在、ホームページは閉鎖されております。本ページでは、過去に制作した仕様や雰囲気を公開しております。

主な機能

マルチログイン機能

• 対象ユーザー: ユーザー、オーナー、管理人の3つの権限を設定

• 使用技術: Laravel Breezeをベースに認証機能を構築

• 目的: ユーザーは購入、オーナーは商品登録・管理、管理人は全体管理が可能

• API連携: 外部サービスを利用したAPIによるログイン機能も実装

商品表示機能

• Swiper.js: 商品の画像スライダーを実装し、視覚的に訴求

• 表示順・件数・検索フォーム:

  商品リストを並び替え可能（価格順、人気順など）、表示件数の調整機能（例: 10件、20件、50件）、キーワード検索で目的の商品にアクセスしやすく設計

画像アップロード機能

• 使用技術: Intervention Imageを活用し、アップロード時に画像を最適化（サイズ調整やフォーマット変換）

• 利用者: オーナーが商品画像を簡単にアップロード可能

決済機能

• 導入技術: Stripe決済

• 特長: 安全で迅速なオンライン決済をサポートし、クレジットカードや各種支払いオプションに対応

ブログ管理機能

• 使用エディター: CKEditor 4

• 用途:

  管理人がブログ記事を作成・編集可能、健康情報や商品の活用方法をユーザーに共有

レスポンシブデザイン

• 対応デバイス: パソコン、タブレット、スマートフォン

• ブレークポイント:

  タブレット: 768px、スマートフォン: 480px

技術スタック

サーバーサイド

• PHP 7.4: パフォーマンスと互換性を考慮した選定

• Laravel 8.x: モダンで効率的な開発を可能にするフレームワーク

フロントエンド

• Swiper.js: 商品スライダーの導入

• Micromodal.js: モーダルウィンドウの実装

環境構築

• 開発環境: Dockerを使用

• 本番環境: レンタルサーバーでデプロイ

• ソースコード管理: GitHubでバージョン管理

デザイン

• Figma: レイアウト設計やUIデザインを制作

ポイント

• ユーザー体験を重視: シンプルで使いやすいインターフェース

• セキュリティ対策: Stripe導入による安全な決済環境

• 運用効率: オーナーや管理人が直感的に操作できる管理画面