カンプからサイト制作

Purpose

制作の目的

デザインカンプからのコーディング練習に、スクール課題・ライブコーディング・自主制作と段階を踏んで繰り返し取り組みました。ピクセルパーフェクトな再現性、デザイン意図の正確な理解、UI/UXの基本的な考え方を習得し、最終的には補助を受けずに一通りのサイトを組み切れる状態になることを目的としています。

Coding

いずれの作品も、Sass（SCSS記法）のファイル分割とBEMに基づく命名規則で、保守性・拡張性の高いスタイル設計を徹底しました。JavaScriptはjQueryに頼らず素のJSで実装しています。共通して取り組んだ技術要素は次のとおりです。

Gallery

プロのデザイナーが作成したFigmaカンプを、ピクセルパーフェクトを目標に再現。Swiperの無限ループやフォームバリデーションに初めて挑戦した作品です。

オンラインスクールの課題として制作。ドロワーメニュー・アコーディオン・モーダルなど定番のUIを素のJavaScriptで実装しました。

ライブコーディング形式で実務の制作プロセスを学習。コンポーネント単位のSassモジュール設計と、タブ切り替えなどのUI実装に取り組みました。

ライブコーディングなどの補助を受けず、自力でコーディング。カンプの再現精度に加え、JavaScriptアニメーションやレスポンシブ対応まで実務を想定して仕上げました。

この1本だけテーマが異なり、カスタムCSS・JavaScriptを書かず、Bootstrapの標準機能（グリッドシステム・ユーティリティクラス）だけでどこまで組めるかを試した練習です。