PC・SPの間も意識したレスポンシブ対応
PC・SPのデザインカンプをもとに、タブレットを含む中間幅でも大きくレイアウトが崩れないよう調整しました。clamp関数やrem / vwなどの相対単位を使い、画面幅に応じて余白や文字サイズが変化するよう実装しています。
Blue Shoes
Webコーディング
クライアント
株式会社ESA CREATE
制作時期
2024年9月 制作
制作期間
実装/3週間
制作目的
Blue Shoes Webサイトのデザインカンプをもとに、レスポンシブ対応のWebコーディングを行い、ユーザーにとって使いやすく魅力的なサイトを構築すること。
ターゲット
陸上クラブBLUE LINEのスクール生およびその保護者
使用ツール
Visual Studio Code
運用・更新を想定したコンポーネント設計
見出し、ボタン、カードなど繰り返し使用する要素は共通のスタイルとして整理しました。SCSSの変数で色や余白を管理し、修正しやすい構成を意識しています。
