概要

ベビー用品（ベビーカー等）を取り扱うブランド代理店のECサイトを、Shopifyで新規構築しました。 サイトはクライアントの立ち上げに伴い、トップページから商品詳細、カート・決済・マイページまでの一通りの導線を整備。 プロジェクトはオンラインで進行し、CEO・デザイナー・エンジニア（私）の3名体制で開発を行いました。

規模

  • 商品数：約50点
  • 主なページ構成：TOP、商品一覧、商品詳細、お知らせ、カート、決済、マイページなど
  • Shopifyプラン：ベーシック
  • テーマ：無料テーマ「Dawn」をベースにカスタマイズ

役割

Shopifyテーマのカスタマイズを担当。Liquidを用いたテンプレート編集を行い、Figmaで提供されたデザインデータをベースにフロントエンド実装を進めました。

要件定義や仕様決定はCEOとデザイナーが担当していましたが、実装中に気づいた改善点やUI面の提案など、積極的にフィードバックを行いました。

実施したこと

  • Shopify Dawn テーマのカスタマイズ（Liquid, CSS, JavaScript）
  • Figmaを参照しながらのマークアップ・スタイリング
  • CSS設計の工夫（BEMや命名規則を意識し、保守性を高める設計に）
  • プルリクエスト作成時の補足説明や確認事項の記述など、非同期コミュニケーションの最適化

印象に残っていること

チームのやりとりは基本的にテキストベースだったため、「何を確認してほしいか」「どこを修正したか」などを明確に伝えるよう心がけていました。

非同期でもスムーズにやりとりできるよう、プルリクコメントやチャットの文章構成に気を配ったのが印象に残っています。

コメント

この案件を通じて、テキストベースで円滑にプロジェクトを進めるスキルを身につけることができました。

また、Figmaデザインからの実装もこのときに本格的に経験し、今後の開発でも役立つ視点や注意点を得ることができました。

CSS設計にも力を入れたことで、スタイルの整理や保守性の重要性を改めて実感できた案件です。