practice
スイーツ店サイト
01
Information
- 制作種別
- practice
- 制作期間
- 3週間
- 使用技術
- HTML / CSS
- 担当範囲
- HTML / CSSコーディング、レスポンシブ対応
02
Overview
架空のスイーツ店のWebサイトを制作しました。
店舗のコンセプトや商品情報を分かりやすく伝えるため、
About・Menu・Shopの3セクションで構成しています。
HTML / CSSを使用してコーディングし、
PC・スマートフォンそれぞれで見やすくなるようレスポンシブ対応を行いました。
03
Full Page
04
Coding Point
実装で意識したこと
・デザインカンプの再現性を意識し、余白や文字サイズ、画像サイズを細かく調整しました。
・pictureタグを使用し、PC・スマートフォンそれぞれに適したファーストビュー画像を表示するよう実装しました。
・メディアクエリを用いて、画面幅に応じたレスポンシブレイアウトを実装しました。
・固定ヘッダーやフォームを実装し、ユーザーにとって操作しやすいUIを意識しました。
05
Problem & Solution
PROBLEM
苦戦した点
PCとスマートフォンでレイアウトや画像の見え方が変わるため、
デザインカンプに近い状態を保ちながらレスポンシブ対応する部分に苦戦しました。
特に画像サイズや余白、テキストの配置について、
画面幅によって不自然な見え方にならないよう調整が必要でした。
SOLUTION
解決方法
PCとスマートフォンで必要な表示を整理し、
メディアクエリを使って画面幅ごとにサイズやレイアウトを調整しました。
ファーストビューについては同じ画像を無理に縮小するのではなく、
PC用とスマートフォン用の画像を用意し、
pictureタグで切り替えることで、それぞれの画面に合った見え方にしました。
06