Works
クリ★スタさん(https://crestadesign.org/)が提供しているXDデザインカンプデータをもとにコーディングを行いました。
モバイルファーストでスマホ版からコーディングを行ったりCSS設計のFLOCSSを導入したコーディングを行っています。
STEP1
XDカンプをもとに静的コーディング
モバイルファーストでコーディングを行いました。CSS設計のFLOCSSを取り入れてクラス名を付与しています。
STEP2
レスポンシブ対応
PC画面で不要な要素を隠したり幅や高さ、余白などの調整を行いました。
STEP3
ローカル環境構築・開発
本番環境への移行に向けてローカル環境で必須テンプレートタグの挿入やCSS、jQueryの読み込みなど必要最低限のWordPress化を行いました。
STEP4
本番環境へ移行
All in One Migrationプラグインを用いて本番ドメインへの移行を行いました。
完成
-
コーディングスピード
XDデザインカンプの再現性の高さを維持しつつ3日以内の完成を目標にコーディングを行いました。CSSのスタイルをどのタグやクラスに当てるかを予想しながらHTMLを組むことでCSS指定のフェーズでHTML構造を組み直す必要がなくスピード感のあるコーディングを達成できました。
Others