Figmaで作成したデザインカンプから静的コーディング、WordPress対応を行いました。デザインカンプからのコーディングを行う際には、再現度を高くすることを心がけています。自らWebデザインを行った経験から、余白やテキスト行長や行間など、デザインには意図があることを認識し、それぞれの値を細かく確認しながらコーディングを行うことが出来ます。また、デザインカンプでは再現しきれない動的な挙動についてはどのように再現するかデザイナーとコミュニケーションをとりながらコーディング進めることが出来ます。

マークアップセマンティクスにおこない、適宜コメントを残すことによって、保守性を高めました。CSS設計にはFLOCSSを採用することで破綻しにくく、保守性の高いコーディングを行いました。class名についても第三者から見てわかりやすい命名規則を心がけました。

レスポンシブ対応はデバイス毎のブレイクポイントだけではなく、ウィンドウサイズによって表示崩れがないように設定しています。スマートフォン用のデザイン経験もあるため、スマートフォンのデザインが出来ていない場合でもこちらで作成し、対応を進めていくことが出来ます。