URL
担当
コーディング
サイト制作の目的
本サイトは、プロのデザイナーが作成したFigmaカンプを、正確かつ実践的な手法を用いてWebサイトとして実現するピクセルパーフェクトな再現を最重要目標として掲げました。実務に即した制作工程を経験し、Figmaから要素のサイズ、余白、カラーコードなどの情報を正確に抽出し、デザイン意図の忠実な再現に努めています。現在、コードの構造や機能は完成しましたが、ピクセルパーフェクトの最終検証はこれから行う段階です。この最終検証をもって、デザインとの差異を徹底的に修正し、品質をさらに高めていく所存です。
コーディングについて技術的なポイントと挑戦したこと
コーディングには、効率的なスタイル記述と保守性の高い設計を目指し、CSSのプリプロセッサであるSass（SCSS記法）を使用しました。特に、大規模開発を意識した管理しやすいCSS設計にチャレンジするため、スタイルファイルをコンポーネントや役割ごとに分割して制作しました。また、再利用性・拡張性の高いコードベースを構築するために、BEM（Block Element Modifier）に基づいた命名規則を徹底しています。
JavaScriptの実装では、jQueryに頼らず、ドロワーメニューやアコーディオン、モーダルといった実務で多用されるインタラクションを組み込みました。スライダー機能にはSwiperを採用し、無限ループ（無限スクロール）の設定に挑戦することで、ライブラリの理解と応用力を高めることができました。さらに、ユーザービリティの基礎を学ぶため、これまで経験のなかったフォームの入力値チェック（バリデーション）も新たに実装しています。
全体を通じて、スマートフォンやタブレットに対応するレスポンシブデザインを実装し、HTML構造はアクセシビリティやSEOを意識するなど、コード全体の品質向上に努めました。