ayapis Photoshopのデータからコーディング
データの受け取り
デザイナーさんから、Photoshopのデザインカンプをいただいて画像を書き出しました。
※デザイナーさんで拡張子をつけていただいていたので、ワンアクションで書き出しができ、非常に感謝しています。
コーディング要件の確認
指示書をもとに、画像データをそのまま使用する部分と、テキストベースでコーディングする部分を確認しました。また、フォントやアニメーションについて確認しました。
※アニメーションの参考サイトを付けていただいていたので、とても分かりやすかったです。
コーディング
要件に沿って、コーディングを行いました。納期が数日の短期のものだったので、コーディング中はほぼ毎日連絡のやり取りをしていました。モバイルファーストでコーディングを進め、アニメーションは最後に追加しました。
※デザイナーさんのレスポンスの速さが神レベルでした！！！
jQueryの実装
jQueryで、Q&Aのアコーディオンメニューを実装しました。
テスト環境での確認、修正
テスト環境を用意して、デザイナーさんに確認をお願いしました。
修正の指示はAUNでいただきました。初めて使用するツールでしたが非常に分かりやすかったです。自分も編集ができるので、どこをどう修正したかを記入して返信しました。
ファイル形式で納品
今回はデザイナーさんにファイル形式（ファイルをまとめてzipファイルにしました。）で納品させていただきました。
コーディングに入る前に、zoomで顔合わせをさせていただき、そこからChatWorkでのやり取りで進めさせていただきました。
嬉しいコメント付きでご紹介いただきました！！
許可をいただき、コーディングしたサイトURLを掲載しています。
※一部分のスクリーンショットです。
クリックするとスマホサイトが閲覧できます