coco

概要

本作品はHello Mentorというメンタリングサービスで、スクール課題として取り組んだ、架空シャンプーブランド「COCO」のWebサイトです。
デザインカンプ（SP / PC）をもとに、トップページ・商品詳細ページ・404ページのコーディングを担当しました。
この課題は、私にとって初めて1サイトを実装した制作であり、HTML/CSSの基礎学習（ドットインストール）を終えた直後に取り組んだ作品です。

制作目的

本課題では、デザインカンプを正確に再現するだけでなく、「後から自分で修正できるコード」を目指すことを目的に制作しました。
取り組み前にCSS設計を書籍で学習し、クラス命名に統一性を持たせること、共通要素をコンポーネントとしてまとめることを意識しています。

工夫した点

• クラス命名の統一

  後から見返しても役割が分かるように、命名ルールを揃え、スタイルの責務が曖昧にならないよう意識しました。

• 共通パーツのコンポーネント化

  ボタンや見出し、商品カードなど、複数箇所で使う要素はコンポーネントとしてまとめ、修正を一箇所に集約できるようにしました。

• レスポンシブ調整

  カンプはSPとPCのみだったため、中間のタブレット幅でレイアウトが破綻しないよう、要素の並び・余白・段組の切り替えを調整しました。このレスポンシブ調整が一番の難所でした。

• FlexだけでなくGridも採用

  それまでFlex中心だった実装を見直し、カードのレイアウトなどは display: grid; を使って、レイアウトの安定性を高めました。

学び

初めてデザインカンプをもとにコーディングを行ったことで、Figma上でのデザインカンプの見方や、 余白・文字サイズ・レイアウト構造をどのように読み取るかを学びました。 また、実際のコーダーがどのような工程で制作を進めているのかを、 大まかではありますが具体的にイメージできるようになりました。

HTMLの基本的なマークアップの考え方や、 CSSの書き方、デザインカンプの見た目をどのようにコードで再現していくかといった、 コーディングの基礎を一通り経験できたことも大きな学びです。

初めてサイト全体を実装したことで、HTML/CSSは書けるだけでは不十分で、 設計がないと保守できないことを体感しました。 「どこを修正すれば影響が最小になるか」を考えながら書く意識が身につき、 その後の制作でもコンポーネント化や命名規則を優先して取り入れるきっかけになりました。

使用言語 / 使用ツール

• HTML
• CSS
• VS Code
• Figma