- 制作課題
- コーディング
- 架空サイト
シャンプーECサイト 制作課題
メンタリングサービス「Hello Mentor」の課題として制作。 デザインカンプをもとにHTML/CSSで実装しました。
Works
制作実績
「Hello Mentor」制作課題写真家PFサイト
メンタリングサービス「Hello Mentor」の課題として制作。 デザインカンプをもとにHTML/CSSで実装し、レビューを受けながら改善をおこないました。
活用サービス 「Hello Mentor」
About
制作概要
- デザイン
- 配布されるFigmaデザインカンプをもとに実装
- コーディング
- 拡張機能「PerfectPixel」を用いたピクセルパーフェクトでのコーディング
- レスポンシブ
- 中間サイズはデザインカンプ無しのため、デザイン意図を汲み取りながら調整
Point
意識したポイント
BEMやFLOCSSを活用したCSS設計
BEMやFLOCSSを活用し、保守性・再利用性を意識したCSS設計をおこないました。 ボタンやセクションタイトルなどの共通パーツはコンポーネント化して管理し、効率的に再利用できる構成としています。 また、クラス設計を整理することで、修正や機能追加にも対応しやすい構成を心掛けました。
スマートフォン/タブレット/PC 表示のレスポンシブ対応
スマートフォン・タブレット・PCそれぞれの表示を考慮し、閲覧環境に応じて最適なレイアウトとなるようレスポンシブ対応をおこないました。
ピクセルパーフェクトでのコーディング
デザインカンプの余白やサイズ、配置を細部まで確認し、デザインの再現性を意識したピクセルパーフェクトでのコーディングをおこないました。
gridやflexレイアウトの活用
要素数の多いレイアウトのため、FlexboxやGrid Layoutを活用して実装しました。 画面幅に応じてレイアウトが自然に変化するよう設計し、スマートフォンからPCまで快適に閲覧できることを意識しています。
