ブランドサイト リニューアル（Next.js）

はじめて本格的にコードを書き、ひとつのWebサイトとして完成させた作品を、
数年後の自分の視点で見直し、「今ならどこまで作れるか」をテーマにリニューアルしました。

旧サイトについて（2020）

旧サイトは、HTML / CSS / JavaScript を用いた、シンプルな静的Webサイトでした。

機能面は最小限でしたが、

• 画像選定
• 写真のレタッチ
• レイアウト設計
• コーディング

までをすべて一人で行い、
「自分の手で、ひとつのWebサイトを完成させる」という大きな経験になりました。

当時の技術力としては未熟な部分も多くありましたが、
制作の流れを一通り理解し、
Web制作の楽しさや難しさを実感できたことが、
このプロジェクトの最大の価値だったと、今では感じています。

旧サイト：
プレミアムチョコレートECサイト制作（2020）

リニューアルの目的

今回のリニューアルでは、単なるデザインの刷新ではなく、

• 実務を意識した構成・設計
• ECサイトとしての体験向上
• モダンなフロントエンド技術の習得

を目的としました。

また、「当時の自分の延長線上で、今はどこまで作れるようになったのか」を
確認するための、個人的な振り返りプロジェクトでもあります。

新サイトについて（Next.js）

新サイトでは、Next.js をベースに、
より実際のECサイトに近い機能構成を意識して実装しました。

実装した主な機能

• 商品一覧・商品詳細ページ
• お気に入り機能
• カート機能
• チェックアウト（購入フロー）
• お問い合わせフォーム
• メールマガジン登録機能

商品点数も増やし、
UI / UX の観点から、情報設計や導線設計を全面的に見直しています。

見た目のデザインだけでなく、
「ユーザーが迷わず操作できるか」という点を重視し、
全体の構成を改善しました。

新サイト：
LienChoco Next.js リニューアル

未実装・今後の課題

現時点では、以下の機能は未実装となっています。

• ユーザーアカウント作成・ログイン機能
• 商品検索機能
• レビュー機能
• お知らせ・ニュースCMS

今後は、バックエンドとの連携や状態管理を含め、
より実践的なECサイト構成にも挑戦していきたいと考えています。

振り返り

このリニューアルを通して、 「過去の自分のアウトプットは、決して無駄ではなかった」と改めて感じました。

当時は不安だらけだった作品も、 今見ると、その時なりに一生懸命作ったことが伝わってきます。

成長は目に見えにくいものですが、 時間をおいて振り返ることで、確かに積み重なっていることを実感できました。

このプロジェクトは、技術的なアップデートだけでなく、 自分自身の成長を確認するための大切な記録でもあります。