バレーボールECサイト 個人練習

職業訓練局での課題制作

2024年に職業訓練局で受講していた際、講師の教材である「ドラッグストアECサイト」をベースコードとして使い、自分のデザインでフロントエンドの画面を改修したサイトです（当時の技術力では、バックエンドまで手を加えることはできませんでした）。会員アカウントの作成とログイン認証、カートおよび注文機能を備えています。バックエンドはPHPとMySQLを使用し、jQueryとAJAXでバックエンドのデータ更新を処理しています。フロントエンドは素のCSSとBootstrapです。Bootstrapを使ったことがある方ならご存じだと思いますが、これは素早く開発するためのテンプレートで、開発スピードが速く、見た目も悪くありません。しかし細かいカスタマイズは非常に面倒で、一つひとつ上書きしなければならず、一からスタイルを書いたほうが楽なくらいです。ただ、講師のコードはBootstrapを多用していたため、すべて書き直すのは現実的ではなく、覚悟を決めて修正するしかありませんでした。完成後は練習として、一部のページのAJAXをfetchに置き換え、自作のAPIを呼び出してJSでコンテンツを描画するようにしました。また、商品画像には無料素材サイトの画像のほか、 href="https://www.oh9.com.tw/" target="_blank">実在する業者の商品画像や、一部のスター選手の試合写真も借用しています。

制作の流れ

講師はまず先輩たちの作品を見せ、期末課題のデザイン案としてA4用紙2枚にラフ案を描かせました。特に印象に残っているのは、講師が「将来面接に行ったら、ラフ案と実際の作品を見せれば、必ず採用してもらえる！」と言っていたことで、当時の私はやる気に満ちあふれていました。今振り返ると、これで証明できるのはせいぜい少しのデザイン設計力と、最も基本的なコーディングの実行力くらいでしょう。バレーボールが好きなので、自然とそれをテーマにしました。ラフ案が完成すると講師が用紙を回収し、期末の採点が終わるまで返却されません（完成品との差が大きすぎると減点されることもあります）。その後の数か月間、講師は1ページずつ、1コンポーネントずつ書き方を教えてくれました。当時は指示どおりに一つずつ、画面に映るコードを見ながら手で打ち込むしかなく、コピー＆ペーストはできませんでした。講師の書き方は、PHPで直接HTML構造やSQL文字列を出力し、ドットとPHP変数で連結するスタイルで、ロジックが複雑な箇所ではドットが一つ足りない、余計なスペースが入る、ループで囲む範囲を間違える……といったミスが起こりやすく、非常に書き間違えやすいものでした。優秀なクラスメイトは一発で完成させることもあり、ほかのクラスメイトに頼まれてお助け役としてデバッグを手伝っていました。ちなみに、トップページのHeroにある透過した選手画像や、商品一覧ページの背景イラストは、私がPhotoshopで制作・描いたものです。

改善できる点

商品画像の比率を考慮していなかったため、コンテナの比率を固定し、画像を中央寄せで埋めるべきでした。トップページのスプラッシュ画面は初回アクセス時のみ表示すべきで、リロードのたびに表示されるべきではありません。画像ファイルがどれも大きすぎて、軽量化していません。レイアウトデザインがイマイチです（当時はとても満足していましたが）。Classのルーティングページが未実装です。他人の画像を勝手に使うべきではなく、すべて無料素材や固定のサンプル画像に差し替えるべきです。現在サイトはSSL証明書のない無料サーバーに置いてあり、表示も遅いので、時間を見つけてサーバーを移行する必要があります……挙げればきりがありません。今はひとまずこのままにしておき、将来時間ができたら別途2.0バージョンを作り、BeforeとAfterの違いを自分で比べてみたいと思います。